/*
Theme Name: HomingLife Custom Theme
Theme URI: https://www.homing.co.jp/
Author: あなたの名前
Author URI: https://www.homing.co.jp/
Description: Hominglife 専用テーマ
Version: 1.0
*/

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #fff;
  color: #333;
}
img {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  border-bottom: 1px solid #eee;
}

.header-top .logo {
  display: flex;
  align-items: center;
}

.header-top .logo img {
  height: 40px;
  margin-right: 10px;
}

.header-links a {
  margin-right: 15px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.header-links button {
  background-color: #005bac;
  color: white;
  border: none;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}

.header-bottom .pc-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  gap: 40px;
	padding-left: 0;
}

.header-bottom .pc-nav ul li{
	width: 126px;
	padding: 8px 15px;
	text-align: center;
}

.header-bottom .pc-nav ul a :hover{
	background-color: #eee;
	transform: scale(1.02);
}

.header-bottom .pc-nav ul a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 16px;
}

.header-bottom .pc-nav ul li .sub {
  display: block;
  font-size: 13px;
  color: #f7931e;
	font-weight: lighter;
  margin-top: 2px;
}

.main-top60{
	padding-top: 60px;
}

.main-top90 {
	padding-top: 90px;
}

.main-top120{
	padding-top: 120px;
}

/* メインビジュアル */
.hero {
  position: relative;
  width: 100%;
  background: url('https://via.placeholder.com/1200x400') center/cover no-repeat;
}

.scroll{
	width: 100px;
	position: absolute;
	right: 40px;
	bottom: 60px;
	animation: rotation 10s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.scroll2 {
	width: 25px;
	position: absolute;
	right: 77px;
	bottom: 92px;
}
.main_logo{
	position: absolute;
	width: 200px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto auto;
}

/* メインビュジュアルスライドショー */
/* 土台 */
.slideshow {
  position: relative;
  width: 100%;
  max-width: 1920px;        /* 任意 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;         /* 背景は見えない想定（常に1枚表示） */
}

/* スライド（重ねる） */
.slideshow .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;               /* 非表示をデフォルトに */
  transition: opacity 900ms cubic-bezier(.4, 0, .2, 1); /* 滑らかに */
  will-change: opacity;     /* GPU合成を促す */
  pointer-events: none;
}

/* 表示中スライド */
.slideshow .slide.is-active {
  opacity: 1;
}

/* 動作軽減が好みの環境に配慮 */
@media (prefers-reduced-motion: reduce) {
  .slideshow .slide { transition: none; }
}




/* お知らせ一覧 */
.notice {
  background-color: #f9f9f9;
  padding: 20px 40px;
}

.notice-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
	margin: 0 180px;
}
.notice a {
	display: block;
	text-align: center;
	font-size: 15px;
	margin-left: 20px;
	width: auto;
}
.date {
	margin-right: 60px;
}

.news{
	width: 70%;
	margin: 0 auto;
}

.news ul {
	padding-left: 0;
}

.news-list{
	width: 60%;
	margin: 0 auto;
}

.notice-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.notice-item .date {
  color: #888;
  font-size: 0.9em;
}

.notice-item .cat a {
  color: #0066cc;
  font-size: 0.9em;
  text-decoration: none;
}

.notice-item .cat{
  margin-left: auto; /* これでも右寄せ可 */
  text-align: right;
}



.image-links {
  display: flex;
  justify-content: center;
  gap: 40px; /* 画像間の余白 */
  padding: 60px 20px;
}

.image-links a img {
  width: 300px; /* 任意のサイズに調整 */
  height: auto;
  display: block;
  transition: transform 0.3s;
}

.image-links a:hover img {
  transform: scale(1.05);
}

.lp-box{
	background-color: #FFF8F3;
}

.lp-box img {
	width: 100%;
}


.cta {
  background-image: url("assets/img/lp5.png");
	background-position: 50%  50%;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.cta h3{
	font-size: 30px;
	margin-bottom: 5px;
}

.cta h2 {
	font-weight: bold;
	font-size: 50px;
	margin-top: 0px;
}

.cta button {
  background-color: #f7931e;
  border: none;
  padding: 15px 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  /*margin-top: 20px;*/
}

.contact-section {
  padding: 60px 100px;
  background-color: #f9f9f9;
}

.contact-section h2 {
  text-align: center;
  font-size: 28px;
	margin-top: 20px;
}
.contact-section p {
	text-align: center;
	margin: 22px auto;
	font-size: 15px;
}

.contact-boxes {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.contact-box {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
}

.contact-box h3 {
  margin-bottom: 20px;
}

.contact-box button {
  display: block;
  width: 80%;
	margin: auto;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f7931e;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.contact-box button:hover{
	background-color: #e6881a;
}

.contact-box img {
	width: 80%;
	margin: auto;
  padding: 10px;
  margin-bottom: 10px;
}


.questions ul {
	list-style: none;
}
details{
	background-color: white;
	padding: 20px 0;
}
.questions span{
	display: block;
	margin-bottom: 20px;
}
.questions summary{
	font-weight: bold;
	margin-left: 50px;
}
.questions p{
	display: block;
	margin: 0 100px;
}
.questions h3{
	margin-top: 35px;
	font-size: 20px;
}



footer {
  background-color: #fff;
  color: #333;
  padding: 20px 0;
  margin-top: 20px;
}

.footer-links ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 20px 0;
  margin: 0;
  gap: 40px;
	background-color: #f7931e;
}

.footer-links ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 12px;
}

.footer-info {
	margin-top: 30px;
}

.footer-info div{
	margin: 0 200px;
}

.copy {
	font-size: 10px;
	text-align: right;
}



/* contact page */
.contact-boxes2 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.contact-box2 {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
	width: 300px;
}

.contact-box2 img{
	width: 150px;
	display: block;
	margin: auto;
}

.contact-box2 button {
  display: block;
  width: 80%;
	margin: auto;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #eee;
  color: #000;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.contact-box2 button:hover{
	background-color: #e6881a;
	color: white;
}

.owner-contact h2{
	margin-top: 40px;
	margin-bottom: 20px;
}
.owner-contact p{
	text-align: center;
	margin: 0 auto;
}

.owner-contact {
	margin: 50px auto;
}


/* コンタクトフォーム */

:root{
  --brand:#f7931e;
  --ink:#333;
  --muted:#666;
  --line:#e5e5e5;
  --bg:#f9f9f9;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "YuGothic", Meiryo, sans-serif;
  color:var(--ink);
  background:#fff;
}

main.contact-page{
  max-width: 1080px;
  margin: 120px auto 80px;
  padding: 0 24px;
}

.page-title{
  font-size: 28px;
  margin: 16px 0 24px;
  letter-spacing: .02em;
}

/* Tabs */
.tabs{width:100%}
.tab-radio{display:none}

.tab-labels{
  display:flex;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  padding-bottom: 8px;
	justify-content: center;
}

.tab-label{
  white-space: nowrap;
  cursor:pointer;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  background:#fff;
  font-weight:700;
  font-size: 15px;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  line-height:1.25;
}
.tab-label .en{
  font-weight:600;
  font-size: 12px;
  color:var(--muted);
  margin-top:4px;
}

#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"]{
  border-color: var(--brand);
  border-bottom-color: transparent;
  background: #fff6ee;
  color:#000;
}

.tab-panels{
  border:1px solid var(--line);
  border-top:none;
  border-radius: 0 8px 8px 8px;
  padding: 24px 220px;
  background:#fff;
}

.tab-panel{display:none}
#tab1:checked ~ .tab-panels .tab-panel[data-for="tab1"],
#tab2:checked ~ .tab-panels .tab-panel[data-for="tab2"],
#tab3:checked ~ .tab-panels .tab-panel[data-for="tab3"]{
  display:block;
}

/* Forms */
.contact-form{
  width:100%;
}
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 24px;
}
.form-grid h3{
	margin-top: 50px;
}

.field{display:flex; flex-direction:column}
.help{
	margin-top: 5px;
	font-size: 10px;
	text-align: right;
	color: #666;
}
.field.span2{grid-column: 1 / -1}
.field.agree{
	padding-top: 4px;
	margin: 20px auto;
	grid-column: 1 / -1
}

.field.span2 input {
  width: calc((100% - 20px) / 2);          /* 1列分の幅 */
  display: block;
	margin-right: 25px;
}

label{font-size:14px; margin-bottom:8px}
.req{
  display:inline-block;
  font-size:11px;
  color:#fff;
  background:#e05a47;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left:6px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"],
select,
textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  background:#fff;
}
textarea{resize: vertical}

.checkbox{
  display:flex; align-items:center; gap:10px; cursor:pointer;
}
.checkbox input{width:18px; height:18px}

.actions{
	margin-top: 8px;
	margin-bottom: 20px;
}

.notice-box {
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  background: #fafafa;
}


.btn{
  appearance:none;
	border:none;
	cursor:pointer;
  padding: 14px 28px;
	border-radius: 999px;
	font-weight:700;
	display: flex;
	margin: 0 auto;
}
.btn.primary{ background:var(--brand); color:#fff }
.btn.primary:hover{ filter: brightness(0.98) }

.note{
  margin-top:16px;
  color:var(--muted);
  font-size: 12px;
}

/* ---- Appended unique rules from other CSS files (scoped merge) ---- */
:root{
  --brand:#f7931e;
  --ink:#333;
  --muted:#666;
  --line:#e5e5e5;
  --bg:#fff6ee;
}

.company{
  max-width: 960px;
  margin: 150px auto 80px;
  padding: 0 24px;
}

.page-head h1{
  font-size: 28px;
  margin: 8px 0 12px;
  letter-spacing:.02em;
}

.page-head .lede{
  color:var(--muted);
  line-height:1.9;
  border-left: 4px solid var(--brand);
  padding-left: 12px;
}

.section{ margin-top: 32px }

.section h2{
  font-size: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.profile{
  margin:0;
}

.profile .row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}

.profile dt{
  font-weight:700;
  color:#000;
}

.profile dd{ margin:0; line-height:1.9 }

.biz-list{
  margin: 8px 0 0 1.2em;
}

.biz-list li{
  margin:6px 0;
  line-height:1.8;
}

.group{ margin: 8px 0 0 1.2em }

.group li{ line-height:1.8 }

.address-card{
  background:#fafafa;
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  line-height:1.9;
}

.hint{ color:var(--muted); font-size:12px; margin-top:4px }

.foot{ margin-top:24px }

.small{ color:var(--muted); font-size:12px }

.policy{
  max-width: 960px;
  margin: 150px auto 80px;
  padding: 0 24px;
}

.section p{ line-height:1.9; }

.bullets{
  margin: 8px 0 8px 1.2em;
  padding:0;
}

.bullets li{
  margin: 6px 0;
  line-height: 1.8;
}

.contact{
  display:block;
  background: #fafafa;
  border:1px solid var(--line);
  border-radius:8px;
  padding: 16px;
  line-height:1.9;
}

.policy-foot{
  margin-top: 32px;
  text-align:right;
  color: var(--muted);
}


/* ========== 解約時注意文（画像風） ========== */
.cancel-notice-wrap {
  max-width: 740px;           /* 画像の比率に近い幅 */
  margin: 16px auto;
  padding: 0 8px;
}

.notice-page {
  border: 2px dashed #2bb24c; /* 緑の破線枠 */
  background: #fff;
  padding: 18px 18px 22px;
  line-height: 1.8;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #222;
}

/* 灰色見出し帯 */
.bar {
  margin: 18px 0 12px;
  padding: 8px 10px;
  background: #f0f0f0;
  border-left: 4px solid #bdbdbd;
  font-size: 15px;
  font-weight: 700;
}

/* 各ブロック */
.notice-block {
  margin: 14px 0 18px;
  padding: 0 2px;
}

.notice-block p { margin: 6px 0; }

/* 小見出し（黒太字＋下線っぽい） */
.title {
  margin: 6px 0 6px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

/* 強調 */
.hl-red { color: #d60000; font-weight: 700; }
.hl-bold { font-weight: 700; }

/* フッター */
.notice-footer {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
  font-size: 13px;
  color: #333;
}

/* 印刷最適化（任意） */
@media print {
  .cancel-notice-wrap { max-width: 100%; padding: 0; }
  .notice-page { border-color: #2bb24c; }
}

.notice-scroll{
  max-height: 260px;     /* 必要に応じ調整 */
  overflow-y: auto;
  padding-right: 8px;    /* スクロールバーと本文が被らないように */
  border: 1px solid #e3e3e3;
}


/* 投稿ページ */
.single-post{
	width: 55%;
	margin: 0 auto;
}

.pagination {
  text-align: center;
  margin: 40px 0;
}
.pagination a,
.pagination span {
  display: inline-block;
  margin: 0 6px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  text-decoration: none;
}
.pagination .current {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}
.pagination a:hover {
  background-color: #f2f2f2;
}


/* =====================================
   📱 Responsive (Smartphone) Styles
===================================== */
@media screen and (max-width: 768px) {

  /* ===== 共通設定 ===== */
	.main-top60{
		padding-top: 60px;
	}

	.main-top90 {
		padding-top: 60px;
	}

	.main-top120{
		padding-top: 90px;
	}
  body {
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  section {
    padding: 10px 0;
  }

  /* ===== ヘッダー ===== */
  header {
    position: fixed;
    z-index: 2000; /* 最上層にする */
    box-shadow: none;
  }

  .header-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
  }

  .header-links {
    display: none; /* ハンバーガー対応 */
  }

  /* ハンバーガーアイコン */
  .menu-toggle {
    display: block;
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 28px;
    color: #333;
    cursor: pointer;
    z-index: 1001;
  }

	/* SPナビゲーション（縦並び＋整列） */
	.sp-nav {
	  display: none;
	  top: 60px;
	  left: 0;
	  height: auto;
	  width: 100%;
	  background: #fff;
	  padding: 20px;
	  border-top: 1px solid #eee;
	  flex-direction: column;
	  align-items: flex-start;
	  z-index: 1999;
	}

	/* 開いた状態 */
	.sp-nav.open {
	  display: flex;
	}

	/* ul（リスト全体）の縦並び設定 */
	.sp-nav ul {
	  display: flex;
	  flex-direction: column; /* ← 縦方向に並べる */
	  gap: 10px;              /* 各項目の間に余白を追加 */
	  padding: 0;
	  margin: 0;
	  width: 100%;
	}

	/* 各liの幅指定 */
	.sp-nav ul li{
	  width: 100%;
		list-style: none;
	}

	.sp-nav ul li .sub{
		display: block;
	  font-size: 12px;
	  color: #f7931e;
		font-weight: lighter;
	  margin-top: 2px;
	}

	.sp-nav button {
		display: inline-block;
	  background-color: #005bac;
	  color: white;
	  border: none;
	  padding: 6px 12px;
	  font-size: 14px;
	  cursor: pointer;
		text-align: center;
		margin: 0 auto;
	}

	/* 各リンクのスタイル */
	.sp-nav a {
	  display: block;
	  width: 100%;
	  padding: 10px 0;
	  color: #333;
	  text-decoration: none;
	  border-bottom: 1px solid #f2f2f2;
		text-align: center;
	  font-weight: bold;
	  font-size: 16px;
	}

	/* 最後の項目の線を消す */
	.sp-nav a:last-child {
	  border-bottom: none;
	}


  /* ===== メインビジュアル ===== */
  .hero {
    /*height: 60vh;*/
    background-position: center;
  }

  .main_logo {
    width: 120px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto auto;
  }

  .scroll,
  .scroll2 {
    display: none;
  }
	.scroll{
		width: 100px;
		position: absolute;
		right: 40px;
		bottom: 60px;
		animation: rotation 10s linear infinite;
	}
	@keyframes rotation {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(-360deg);
	  }
	}
	.scroll2 {
		width: 25px;
		position: absolute;
		right: 77px;
		bottom: 92px;
	}

  /* ===== お知らせ ===== */
  .notice {
    padding: 20px;
  }

  .notice-item {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
		padding: 0 0;
    gap: 6px;
  }

	.news{
		width: 100%;
	}

  .news-list {
    width: 100%;
  }

  /* ===== CTAセクション ===== */
  .cta {
    padding: 40px 20px;
    background-size: cover;
    text-align: center;
  }

  .cta h2 {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .cta h3 {
    font-size: 18px;
  }

  .cta button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
  }

  /* ===== 画像リンク ===== */
  .image-links {
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }

  .image-links img {
    width: 100%;
		margin: 0 auto;
  }

  /* ===== コンタクトセクション ===== */
  .contact-section {
    padding: 20px 10px;
  }

  .contact-boxes {
    flex-direction: column;
    gap: 20px;
  }

  .contact-box {
    width: 100%;
  }

  /* ===== フォームエリア ===== */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
	.profile .row{
		grid-template-columns: 120px 1fr;
	}

  .tab-labels {
    flex-wrap: wrap;
  }

  .tab-panels {
    padding: 24px;
  }

  input,
  select,
  textarea {
    font-size: 14px;
  }

  /* ===== 投稿ページ ===== */
  .single-post {
    width: 90%;
    margin: 0 auto;
  }

  /* ===== フッター ===== */
  .footer-links ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }

  .footer-info div {
    margin: 0 20px;
  }

  .copy {
    text-align: center;
    margin-top: 10px;
  }

  /* ===== PCナビ・SPナビ切替 ===== */
  .pc-nav {
    display: none !important;
  }
	  .tab-labels {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

	/* contactのトグルわけ */
	.tab-panel {
    display: none;
  }
  .tab-panel.open {
    display: block;
  }
  .tab-label {
    display: block;
    width: 100%;
    padding: 16px 20px;
    font-size: 15px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
  }

  .tab-label:hover {
    background: #f0f0f0;
  }

  /*.tab-label::after {
    content: "＋";
    position: absolute;
    right: 16px;
    font-weight: bold;
    transition: transform 0.3s, content 0.3s;
  }*/

  /* 開いたときの表示 */
  /*.tab-label.open::after {
    content: "−";
  }*/

  /* 英語部分の調整 */
  .tab-label .en {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 2px;
  }

  /* トグル開閉で出る内容（tab-panels側） */
  .tab-panel {
    display: none;
    padding: 16px 20px;
    border: 1px solid #eee;
    border-top: none;
    background: #fff;
  }

  .tab-panel.open {
    display: block;
  }
}

/* =====================================
   📱 Smaller Devices (480px以下)
   ===================================== */
@media screen and (max-width: 480px) {

  .cta h2 {
    font-size: 24px;
  }

  .cta h3 {
    font-size: 16px;
  }

  .tab-label {
    font-size: 13px;
    padding: 10px;
  }

  .tab-panels {
    padding: 0;
  }

  .contact-section h2 {
    font-size: 22px;
  }

  .contact-section p {
    font-size: 13px;
  }

  footer {
    font-size: 12px;
  }
}

/* =====================================
   🖥️ Default PC Navigation
   ===================================== */
.pc-nav {
  display: block;
}

.sp-nav,
.menu-toggle {
  display: none;
}

/* =====================================
   📱 Responsive (Smartphone)
   ===================================== */
@media screen and (max-width: 768px) {
  .pc-nav { display: none !important; }
  .menu-toggle { display: block !important; }
  .sp-nav { display: none;}
  .sp-nav.open { display: flex; }
}