@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* グラデーション背景 */
:root {
  --main-gradient: linear-gradient(90deg, #49A580,#7CB45D, #BDD535);/* 横 */
  --vertical-gradient: linear-gradient(180deg, #49A580 ,#7CB45D, #BDD535 ); /* 縦 */
}

/* 全ページ共通 */

.font-serif {
	font-family: "Noto Serif", serif;
}

.bg-gr90 {
	background: var(--main-gradient);
}
.bg-gr180 {
	background: var(--vertical-gradient);
}
/* ヘッダーエリア */

.l-header__bar {
	display:none;
}
.c-gnav {
	font-weight:700;
}

.l-header__inner,
.l-fixHeader__inner {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.l-header__logo,
.l-fixHeader__logo {
	margin-left: 48px;
}
.c-headLogo {
	height: 48px !important;
}
.c-gnav>.menu-item>a .ttl {
	font-size: 18px;
}


/* ヘッダーCTA（ブログパーツ） */

/* カラム共通 */
.header-cta .swell-block-column {
margin:0 !important;
}
.header-cta .swell-block-columns__inner {
	justify-content:flex-end !important;
}
.header-cta {
	margin-left:2em;
}

/* TELボタン */
.btn-tel {
	display: inline-block;
	padding: 1.5em !important;
	background: #49A580; /* TELカラー */
}

/* LINEボタン */
.btn-line {
	display: inline-block;
	padding: 1em !important;
	background: #06C755; /* LINEカラー */
}

/* メールボタン */
.btn-mail  {
	display: inline-block;
	padding: 1.5em !important;
	background: #BDD535; /* メールカラー */
}

.btn-mail  a{
        color: #fff;
}

/* ホバー時 */
.btn-tel a:hover,
.btn-line a:hover,
.btn-mail a:hover {
	opacity: 0.85;
}


/* CTAボタン */
.cta-btn {
	max-width: 768px;
	margin: 0 auto;
	font-size: 18px;
	letter-spacing: 0.1em;
	font-weight: 400;
	color: #fff;
}
.cta-tel {
	background-color: #49A580;
}
.cta-line {
	background-color: #06C755;
}
.cta-mail {
	background-color: #BDD535;
}
.cta-tel, .cta-line, .cta-mail {
	align-self: stretch;
	width: auto !important;
}
.cta-tel div, .cta-line div, .cta-mail div {
	justify-content: center;
}
.cta-tel img, .cta-mail img {
	width: 1.5em;
}
.cta-line img {
	width: 2em;
}

.cta-btn .swell-block-columns__inner{
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items:stretch;
}

.cta-btn .swell-block-column{
  display: flex !important;
}
.cta-btn .swell-block-column > .wp-block-group{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .6em;
  height: 100%;   /* ← カラムの高さにフィット */
  flex: 1 1 auto; /* 念のため */
}

.cta-btn figure{ margin:0; }
.cta-btn p{ margin:0; line-height:1.2; }

@media (min-width:768px){
  .cta-btn .swell-block-column{ min-height: 70px; } 
}

/* SWELLボタン */
.swell-block-button__link {
	color: #000000 !important;
    padding: .25em !important;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45) !important;
}

/* 下層ページヘッダー */

.l-topTitleArea {
	min-height: 380px !important;
}

#top_title_area > .l-topTitleArea__body.l-container{
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 50% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: clamp(20px, 6vw, 80px) !important;
  color: #fff !important;
  z-index: 5 !important;
  isolation: isolate;

  background:
    linear-gradient(180deg, rgba(73,165,128,0.62) 0%, rgba(189,213,53,0.62) 100%),
    url("http://uehiro-zouen.local/wp-content/uploads/2025/09/uehiro_tree.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, left -30px bottom 0;
  background-size: cover, auto 60%;
  background-blend-mode: overlay, normal;
}

/* 右側の写真 */
#top_title_area > .l-topTitleArea__img.c-filterLayer__img.u-obf-cover{
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 50% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

/* SWELLの黒/ドット無効化 */
#top_title_area.c-filterLayer::before,
#top_title_area.-texture-dot::after,
#top_title_area.c-filterLayer.-texture-dot::after{
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* グラデーションを全体にオーバーレイ */
#top_title_area .l-topTitleArea__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vertical-gradient);
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}


#top_title_area .c-pageTitle {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 中央寄せ */
  gap: 0.2em;             /* 間隔 */
  position: relative;
  flex: 1;
}

/* タイトルを前面 */
#top_title_area .c-pageTitle {
  z-index: 2;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  font-family: "Noto Serif JP","Noto Serif",serif;
}

/* サブタイトルを背面 */
#top_title_area .c-pageTitle__subTitle {
  order: -1;
  position: relative;
  z-index: -1;
  font-size: 3em;
  letter-spacing: .12em;
  opacity: 0.3;
  margin-left: 0 !important;
  font-style: normal !important;
}


.page-message {
	padding-top: 0 !important;
}

/* フッターエリア */
.l-footer {
	background: var(--main-gradient);
}

.footer-image img{
	height: 60px;
	width: auto;
}

.footer-page-links {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	font-size: 14px;
}
.footer-page-links li{
	list-style: none;
}
/* TOPページ */

.first-view{
	height:1200px;
}
.fv-gradient{
position: relative;
height: 1200px;

/* 画像（プロトコル省略で混在回避） */
background-image:
    linear-gradient(
      180deg,
      rgba(73,165,128,0.6) 0%,   /* #49A580 を 60%透明 */
      rgba(124,180,93,0.6) 50%,  /* #7CB45D を 60%透明 */
      rgba(189,213,53,0.6) 100%  /* #BDD535 を 60%透明 */
    ),
	url("http://uehiro-zouen.local/wp-content/uploads/2025/09/uehiro_tree.png");
background-repeat: no-repeat, no-repeat;

/* X = 左へオフセット, Y = 36%（お好み） */
/* 小画面で消えないよう、-80px を最小にしつつ vw に追従させる例 */
background-position: center, clamp(-80px, -5vw, -20px) 50%;

/* 18%をベースに、極端に小さく/大きくなりすぎないようクランプ */
background-size: cover,clamp(160px, 18%, 560px) auto;
}


/* コンテンツは最前面 */
.fv-gradient > *{ position: relative; z-index: 2; }

.first-view >.swell-block-fullWide__inner {
	height: 900px;
}
.fv-hero {
  position: relative;
  overflow: hidden;
  height: 1200px;
}

/* グラデーションを全体にオーバーレイ */
.fv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vertical-gradient);
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}
.fv-hero > * {
  position: relative;
  z-index: 2; 
}


.vertical-text,.vertical-text-sub {
	color: #fff;
	writing-mode: vertical-rl; 
	flex: 1;
	text-orientation: mixed; 

	display: flex;
	align-items: center;     /* 見た目の横方向を中央にする */
	height: 100%;
}
.fv-left {
	padding: 40px 60px !important;
}
.fv-left .swell-block-columns__inner {
	flex-wrap: nowrap !important;

}
.vertical-text {
	font-size: 5em;
	transform: translateY(5rem);
	letter-spacing: .25em;
	font-weight: 400;
}
.vertical-text-sub {
	font-size: 2em;
}
.vertical-text-sub p{
	letter-spacing: .25em;
	font-weight: 400;
}


/* ▼ クリッピング（はみ出し隠し）と高さは右カラム側で担保 */
.fv-right {
position: relative;
/* min-height: min(82vh, 780px); */
overflow: hidden;
height: 800px;
}
.fv-right .wp-block-image { height: 100%; } /* figure を伸ばす */
.fv-right .wp-block-image::before {
content: "";
position: absolute;
inset: 0;                 /* figure全面 */
pointer-events: none;     /* クリック妨げない */
z-index: 1;

/* ← 左側だけに効く “内側シャドウ” */
/* 数値は好みで：太さ / ぼかし / 濃さ */
box-shadow: inset 4px 0 4px rgba(0, 0, 0, 0.35);
/* 代替：グラデでコントロールしたい場合は下を使う（上の box-shadow をコメントアウト）
background: linear-gradient(to right,
			rgba(0,0,0,.45) 0%,
			rgba(0,0,0,.25) 18%,
			rgba(0,0,0,0) 50%);
*/
}

/* ▼ 画像：クラス or title が fv-photo の <img> に当てる（どちらでも動くように） */
.fv-right img.fv-photo, 
.fv-right img[title="fv-photo"] {
width: 100%;
height: 100%;
object-fit: cover;
--zoom: 1.6;
--panX: 0%;
--panY: 0%;
--originX: 100%;
--originY: 100%;
transform: translate(var(--panX), var(--panY)) scale(var(--zoom));
transform-origin: var(--originX) var(--originY);
display: block;
}

/* ▼ 端末別のおすすめ値（任意で微調整） */
@media (max-width: 1023px) { /* タブレット */
.fv-right img.fv-photo,
.fv-right img[title="fv-photo"] {
--zoom: 1.08;
--originX: 70%;
--panX: -2%;
}
}
@media (max-width: 599px) { /* スマホはズーム弱め or 無し */
.fv-right img.fv-photo,
.fv-right img[title="fv-photo"] {
--zoom: 1.00;
--originX: 50%;
--panX: 0%;
--panY: 0%;
}
}

/* TOPICSエリア */
.top-topics-title h2 {
	color: #49A580 !important;
	font-size: 40px;
	font-weight: 400;
}
.top-topics .p-postListWrap {
	padding: 60px 80px;
}
.top-topics-base {
	height: 800px;
	z-index: 50;
}
.top-topics {
	transform: translateY(-260px);
	box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.25);
}


/* 縦に積まれないよう、リンク全体を横並びにする */
.top-topics .p-postListWrap .p-postList.-type-list .p-postList__link{
  display:flex;
  align-items:center;    /* 縦中央 */
  gap: 24px;             /* 画像と本文の間隔 */
  height:100%;
}

/* 文字ブロック（タイトル＋日付）を縦中央に整列 */
.top-topics .p-postListWrap .p-postList.-type-list .p-postList__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center; /* タイトル＆投稿日を縦中央に */
  min-width:0;            /* タイトルのはみ出し防止 */
}

/* タイトルと投稿日の見た目微調整 */
.top-topics .p-postListWrap .p-postList.-type-list .p-postList__title{
  margin:0 0 .4em;
  line-height:1.4;
}
.top-topics .p-postListWrap .p-postList.-type-list .p-postList__times{
  display:block;          /* 必ず表示 */
  line-height:1;
}

/* 仕切り線（必要なら） */
.top-topics .p-postListWrap .p-postList.-type-list .p-postList__item{
  border-bottom:2px solid #49A580;
  padding-bottom: 1em;        /* 線と内容の間隔 */
}
.-type-list .p-postList__item {
	margin: 1em 0 !important;
}


.top-topics .icon-posted::before {
	display: none;
}
.top-topics .p-postList__times {
	color: #000000 !important;
	font-weight: 700 !important;
}
.top-topics .is-style-more_btn {
	margin-top: 60px;
}

.top-service .font-serif {
	color: #fff;
	font-size: 28px;
	padding: 2em;
}
.top-service .font-serif h2 {
	font-weight: 400;
	align-items: center;
	display: flex;
	flex-wrap:nowrap;
	justify-content: center;
	padding: 0 2em;
}
.top-service .font-serif h2::before,
.top-service .font-serif h2::after  {
	content: "";
	flex: 1;
	background-color: #fff;
	height: 2px;
}
.top-service .font-serif h2::before {
  margin-right: 1em;
}

.top-service .font-serif h2::after {
  margin-left: 1em;
}

/* テーマが付ける absolute 全幅ラインを打ち消す */
.top-service .font-serif h2.is-style-section_ttl::before,
.top-service .font-serif h2.is-style-section_ttl::after{
  position: static !important;   /* ← absolute を無効化 */
  content: "";
  height: 2px;
  background: #fff;
}


.top-service-contents {
	position: relative;
}
.top-service .top-service-content {
	background-color: #fff;
	padding: 24px 16px;
}
.top-service-content .wp-block-heading {
	margin: 1em 0;
}

.top-service-content img {
	height: 100%;
	object-fit: cover;
}
.top-service-content figure {
	width:calc(100% + 28px);
	height: 150px;
	overflow: hidden;
	transform: translateX(-28px);
}
.top-service-contents .top-service-content:nth-child(1) {
	border: solid 12px #49A580;
	transform: translateY(2em);
}
.top-service-contents .top-service-content:nth-child(2) {
	border: solid 12px #7CB45D;
}
.top-service-contents .top-service-content:nth-child(3) {
	border: solid 12px #BDD535;
	transform: translateY(-2em);
}

.top-service-contents .top-service-content:nth-child(1) img {
    object-position: left;
    transform: scale(1.55);
    transform-origin: left bottom;
}
.top-service-contents .top-service-content:nth-child(1) h2 {
	color: #49A580;
}
.top-service-contents .top-service-content:nth-child(2) h2 {
	color: #7CB45D;
}
.top-service-contents .top-service-content:nth-child(3) h2 {
	color: #BDD535;
}

/* pointエリア */

.top-point-content .wp-block-group.is-row {
	align-items: baseline;
	padding-left: 2em;
	gap: 4px;
	margin-bottom: 8px !important;
}
.top-point-content .swell-block-columns__inner {
	flex-wrap: nowrap;
	align-items: flex-end
}
.top-point-content .font-serif p:nth-child(1) {
	font-size: 18px;
}
.top-point-content .font-serif p:nth-child(2) {
	font-size: 64px;
	margin-right: 24px;
}
.top-point-content .font-serif p:nth-child(3) {
	font-size: 28px;
}
.top-point-content figure {
	overflow: hidden;
	height: 150px;
}

.top-point .top-point-content:nth-child(1) .font-serif p:nth-child(2),
.top-point .top-point-content:nth-child(1) .font-serif p:nth-child(3) {
 color: #49A580;
}
.top-point .top-point-content:nth-child(2) .font-serif p:nth-child(2),
.top-point .top-point-content:nth-child(2) .font-serif p:nth-child(3) {
 color: #7CB45D;
}
.top-point .top-point-content:nth-child(3) .font-serif p:nth-child(2),
.top-point .top-point-content:nth-child(3) .font-serif p:nth-child(3) {
 color: #BDD535;
}

.top-point .top-point-content:nth-child(1) .top-point-text > p {
	background-color: #49A580;
	color: #fff;
	padding: 2em 2em 2em 3em;
}
.top-point .top-point-content:nth-child(2) .top-point-text > p {
	background-color: #7CB45D;
	color: #fff;
	padding: 2em 3em 2em 2em;
}
.top-point .top-point-content:nth-child(3) .top-point-text > p {
	background-color: #BDD535;
	color: #fff;
	padding: 2em 2em 2em 3em;
}

.top-point .is-style-section_ttl {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.top-point .top-point-content:nth-child(1) .top-point-text,
.top-point .top-point-content:nth-child(3) .top-point-text {
	margin-left: -12px !important;
	z-index: -10;
	bottom: -12px;
	position: relative;
}

.top-point .top-point-content:nth-child(2) .top-point-image {
	margin-left: -12px !important;
	z-index: 30;
	bottom: 12px;
	position: relative;
}
.top-point .top-point-content:nth-child(1) .top-point-image img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}
.top-point .top-point-content:nth-child(2) .top-point-image img,
.top-point .top-point-content:nth-child(3) .top-point-image img {
	object-fit: cover;
	object-position: bottom center;
	width: 100%;
	height: 100%;
}

.top-point-content {
	margin-bottom: 60px !important;
}

/* 対応エリア */
.top-area {
	color: #fff;
}

.top-area h2 {
	font-size: 24px;
	letter-spacing: 4px !important;
	font-weight: 100;
}
.top-area .swell-block-columns__inner {
	align-items: center;
}

/* 施工事例エリア */
.top-works h2 {
	font-size: 40px;
	font-weight: 100;
}
.top-works-title {
	color: #fff;
}
.top-works-text {
	color: #fff;
	max-width: 786px;
	margin: 0 auto !important;
}
.top-works .p-postList__body {
	margin-top: 0 !important;
	background-color: #fff;
	padding: 12px;
}
.top-works .p-postList__item {
	width: 30% !important;
}
.top-works .p-postList.-type-card {
	justify-content: center;
	gap: 2em;
}
.top-works .p-postList__thumb {
	aspect-ratio: 1 / 0.7;
}
.top-works .c-postThumb__figure {
	height: 100%;
}

.top-works .is-style-more_btn a,
.top-topics .is-style-more_btn a {
	background: #F9D239;
    border-radius: 80px;
    display: inline-block;
    letter-spacing: var(--swl-letter_spacing, 1px);
    line-height: 1.5;
    margin: 0;
    min-width: 20%;
    position: relative;
    text-decoration: none;
    width: auto;
	color: #000000 !important;
    padding: .25em !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45) !important;
	font-weight: 700;
}
.top-works .is-style-more_btn a::after,
.top-topics .is-style-more_btn a::after {
	display: none;
}

/* 問い合わせページ */
.wpcf7-form p,
.wpcf7-response-output {
	color: #fff;
	font-weight: 700;
}
.wpcf7-form input,
.wpcf7-form textarea {
	width: 100%;
	border-radius: 8px;
}
.wpcf7-form p {
	margin-bottom: 1em;
}
.wpcf7-form textarea {
	height: 200px;
}
.wpcf7-submit {
	background: #F9D239;
    border-radius: 80px !important;
    display: inline-block;
    letter-spacing: var(--swl-letter_spacing, 1px);
    line-height: 1.5;
    margin: 0;
    min-width: 30%;
    position: relative;
    text-decoration: none;
    width: auto !important;
	color: #000000 !important;
    padding: .25em !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45) !important;
	font-weight: 700;
	transform: translateX(-50%);
	position: absolute;
    left: 50%;
}

.cta-contact .swell-block-columns__inner {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  align-items: stretch;
}

  /* ボタンが2つだけ入っている想定：1つ目を2-3列、2つ目を4-5列に */
  .cta-contact .swell-block-column:nth-of-type(1){
    grid-column: 2 / span 2; /* 2-3 */
  }
  .cta-contact .swell-block-column:nth-of-type(2){
    grid-column: 4 / span 2; /* 4-5 */
  }

/* サービスページ */

.service-content-text {
	background-color: #fff;
	padding: 24px !important;
}

.service-content-text h2 {
	margin-bottom: 1em !important;
}

.service-content-area .service-content:nth-child(1) {
	border-top: solid 12px #49A580;
	border-right: solid 12px #49A580;
	border-bottom: solid 12px #49A580;
}
.service-content-area .service-content:nth-child(2) {
	border-top: solid 12px #7CB45D;
	border-left: solid 12px #7CB45D;
	border-bottom: solid 12px #7CB45D;
}
.service-content-area .service-content:nth-child(3) {
	border-top: solid 12px #BDD535;
	border-right: solid 12px #BDD535;
	border-bottom: solid 12px #BDD535;
}

.service-content-area .service-content:nth-child(1) h2 {
	color: #49A580;
}
.service-content-area .service-content:nth-child(2) h2 {
	color: #7CB45D;
}
.service-content-area .service-content:nth-child(3) h2 {
	color: #BDD535;
}

.service-works .swell-block-fullWide__inner > h2{
	color: #fff !important;
}

/* 施工事例ページ */

/* 私たちについてページ */
.about-message {
	color: #fff;
	line-height: 3em;
}
.about-message > div > div > p:nth-child(2) {
	font-size: 1.5em;
	font-weight: 700;
}
.about-message > div > div  {
	justify-content: flex-end
}
.about-main-table {
	gap: 0;
}

.about-main-title {
	font-size: 32px !important;
	color: #49A580 !important;
}

.about-main-table p:nth-child(odd) {
  color: #49A580; 
  font-weight: 700;
}

.about-main-table p {
	padding: 1em 0;
}

.about-main-table p:not(:last-child) {
 	border-bottom: 2px solid #BDD535;
}

.about-main iframe {
	width: 100%;
}

/* トピックスページ */
.page-numbers {
	color: #000000 !important;
	background-color:#fff !important;
}
[class*=page-numbers].current {
	color: #fff !important;
	background-color: #F9D239 !important;
}

/* ===== p-homeContent を全幅の帯にしつつ、中身は最大1200pxに ===== */
.p-homeContent {
  /* 背景帯（全幅） */
  background: #FCFFE9;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 40px 0;               /* 上下の余白 */

  /* 中身の左右パディング＝(100vw - 1200px)/2 をCSSだけで実現 */
  --max: 1200px;
  --side-pad: max(16px, calc((100vw - var(--max)) / 2)); /* 最小16pxは好みで調整 */
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);

  /* 2カラム横並び */
  display: flex;
  gap: 30px;
  box-sizing: border-box;
}

/* 左カラム：タブ（固定幅） */
.p-postListTab {
  flex: 0 0 260px;               /* PCでの幅。必要なら 220〜300px で調整 */
  max-width: 100%;
}

/* タブリストを縦並びに */
.p-postListTab .c-tabList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ボタンを横幅いっぱいにして押しやすく */
.p-postListTab .c-tabList__button {
  width: 100%;
  text-align: center;
  font-weight: 700;
  padding: 12px 14px;
  background-color: #fff !important;
  transition: background .2s ease;
  border: none !important;
	box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.p-postListTab .c-tabList__button[aria-selected="true"] {
  background-color: #49A580 !important;
  color: #fff !important;
}

/* 右カラム：記事一覧（残り幅を全て使う） */
.c-tabBody {
  flex: 1 1 auto;
  min-width: 0;                  /* はみ出し防止（重要） */
}

.c-tabBody__moreText {
	display: none;
}

.p-postListTabBody .p-postList__item {
	border-bottom:2px solid #49A580;
	padding-bottom: 1em;
}
.p-homeContent {
	margin-top: 0 !important;
}