/*
Theme Name: HappyFarm
Theme URI: https://happy-farm.example.jp/
Author: HappyFarm株式会社
Description: 大分県宇佐市のジャム製造メーカー HappyFarm株式会社のオリジナルテーマ（クラシックテーマ）。
Version: 1.7.5
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: happyfarm
*/

/* ============ base ============ */
body{margin:0;background:#fff;font-family:"Noto Sans JP",sans-serif;text-wrap:pretty}
a{color:inherit;text-decoration:none}
a:hover{opacity:.7}
a[data-entry]:hover{opacity:1}
a[data-entry]:hover>div:last-child{right:21px !important}
a[data-wipe]{position:relative;overflow:hidden;z-index:0;transition:color .35s ease}
a[data-wipe]:hover{opacity:1}
a[data-wipe]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#3D332B;transform:scaleX(0);transform-origin:right center;transition:transform .45s cubic-bezier(.4,0,.2,1)}
a[data-wipe]:hover{color:#fff !important}
a[data-wipe]:hover::after{transform:scaleX(1);transform-origin:left center}
.hf-frame{position:relative}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
a.pcard .pimg{transform-origin:center center;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
a.pcard:hover{opacity:1}
a.pcard:hover .pimg{transform:scale(1.06)}
.kicon{transform:scale(.86);opacity:0}
.kicon svg path,.kicon svg circle,.kicon svg rect{stroke-dasharray:240;stroke-dashoffset:240}
.kicon[data-seen]{animation:iconPop .55s cubic-bezier(.2,.8,.3,1.2) forwards}
.kicon[data-seen] svg path,.kicon[data-seen] svg circle,.kicon[data-seen] svg rect{animation:iconDraw .9s .18s ease forwards}
@keyframes iconPop{0%{transform:scale(.86);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes iconDraw{to{stroke-dashoffset:0}}

body{background:#fff;color:#3B322A}
img{max-width:100%;height:auto}
.hf-frame{width:100%;margin:0;background:#fff;overflow-x:clip}
.hf-sp{display:none}
.hf-menu-hidden{display:none !important}

/* ============ tablet (768-1099px) ============ */
@media (min-width:768px) and (max-width:1099px){
[style*="grid-template-columns: repeat(3"],[style*="grid-template-columns: repeat(4"],[style*="grid-template-columns: repeat(5"],[style*="grid-template-columns:repeat(3"],[style*="grid-template-columns:repeat(4"],[style*="grid-template-columns:repeat(5"]{grid-template-columns:1fr 1fr !important}
[style*="grid-template-columns: 1fr 300px"],[style*="grid-template-columns: 1fr 340px"],[style*="grid-template-columns:1fr 300px"],[style*="grid-template-columns:1fr 340px"]{grid-template-columns:1fr !important}
[style*="padding: 80px 48px"],[style*="padding: 70px 48px"],[style*="padding:80px 48px"],[style*="padding:70px 48px"]{padding:56px 28px !important}
[style*="padding: 52px 48px"],[style*="padding: 56px 48px"],[style*="padding:52px 48px"],[style*="padding:56px 48px"]{padding:48px 28px !important}
[style*="padding: 0px 48px"],[style*="padding:0px 48px"]{padding:0 28px !important}
[style*="gap: 56px"],[style*="gap: 60px"],[style*="gap: 64px"],[style*="gap:56px"],[style*="gap:60px"],[style*="gap:64px"]{gap:36px !important}
[style*="height: 360px"],[style*="height:360px"]{height:280px !important}
.recruitcta{padding:32px 28px !important;gap:24px !important}
.navpc{display:none !important}
.utilbar{display:block !important;font-size:10px !important;padding:7px 18px !important;text-align:center !important}
.utilbar>div:last-child{display:none !important}
.headbar{align-items:center !important;padding:12px 18px !important}
.headbar>div:first-child{padding:0 !important;gap:9px !important}
.headbar img{height:32px !important}
.burger{background:transparent !important;width:auto !important;gap:5px !important}
.burger span{background:#3B322A !important}
.footinfo{gap:24px !important}
}

/* ============ phone (max 767px) ============ */
@media (max-width:767px){
[style*="grid-template-columns"]{grid-template-columns:1fr !important}
[style*="padding: 80px 48px"],[style*="padding: 70px 48px"],[style*="padding: 52px 48px"],[style*="padding: 56px 48px"],[style*="padding:80px 48px"],[style*="padding:70px 48px"],[style*="padding:52px 48px"],[style*="padding:56px 48px"]{padding:36px 20px !important}
[style*="padding: 0px 48px"],[style*="padding:0px 48px"]{padding:0 20px !important}
[style*="gap: 44px"],[style*="gap: 40px"],[style*="gap: 32px"],[style*="gap: 56px"],[style*="gap: 60px"],[style*="gap: 64px"],[style*="gap:44px"],[style*="gap:40px"],[style*="gap:32px"],[style*="gap:56px"],[style*="gap:60px"],[style*="gap:64px"]{gap:24px !important}
[style*="font-size: 44px"],[style*="font-size:44px"]{font-size:28px !important}
[style*="font-size: 34px"],[style*="font-size:34px"]{font-size:23px !important}
[style*="font-size: 28px"],[style*="font-size:28px"]{font-size:20px !important}
[style*="font-size: 26px"],[style*="font-size: 24px"],[style*="font-size: 23px"],[style*="font-size: 22px"],[style*="font-size: 21px"],[style*="font-size:26px"],[style*="font-size:24px"],[style*="font-size:23px"],[style*="font-size:22px"],[style*="font-size:21px"]{font-size:19px !important}
[style*="font-size: 19px"],[style*="font-size: 18px"],[style*="font-size: 17px"],[style*="font-size:19px"],[style*="font-size:18px"],[style*="font-size:17px"]{font-size:16px !important}
[style*="font-size: 15px"],[style*="font-size:15px"]{font-size:13px !important}
[style*="width: 220px"],[style*="width:220px"]{width:110px !important}
[style*="height: 360px"],[style*="height: 320px"],[style*="height:360px"],[style*="height:320px"]{height:220px !important}
.recruitcta{flex-direction:column !important;align-items:stretch !important;padding:28px 20px !important;gap:16px !important}
.ctabtns{flex-direction:column !important;gap:12px !important}
.ctabtns>a,.ctabtns>div{width:100% !important;box-sizing:border-box !important;justify-content:center !important}
.kblock{display:flex !important;flex-direction:column !important;gap:16px !important}
.kblock .ktext{display:contents !important}
.kblock .khead{order:1;justify-content:flex-start !important;text-align:left !important}
.kblock .khead>div{flex:none !important}
.kblock .kimg{order:2;flex:none !important;width:100% !important;height:220px !important;background-size:cover !important;background-position:center !important}
.kblock .kbody{order:3}
.cathead{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
.oemtitle{font-size:22px !important;line-height:1.65 !important}
.compimg{height:240px !important;background-size:contain !important;background-repeat:no-repeat !important;background-color:#FBF6EC !important}
.thanks{padding:44px 20px 40px !important;gap:28px !important}
.thanks>div:first-child{align-items:center !important;text-align:center !important}
.thanks>div:first-child>div:last-child{text-align:left !important}
.thanks>div{width:100% !important;box-sizing:border-box !important}
.thanks>div[style*="#FBF6EC"]{padding:24px 20px !important}
.artnav{flex-wrap:wrap !important;gap:14px !important;align-items:center !important;justify-content:space-between !important}
.artnav>a{white-space:nowrap !important}
.artnav>a:nth-child(2){order:3;flex:0 0 100% !important;text-align:center !important;box-sizing:border-box !important}
.artcta{flex-direction:column !important;align-items:stretch !important;padding:24px 20px !important;gap:16px !important}
.artcta>a{text-align:center !important;box-sizing:border-box !important}
.newsrow{flex-wrap:wrap !important;gap:10px 12px !important;align-items:center !important;padding:20px 40px 20px 4px !important}
.newsrow .newstitle{flex:0 0 100% !important}
.jobrow{flex-direction:column !important}
.jobrow .jobk{width:100% !important;box-sizing:border-box !important;padding:12px 16px !important}
.jobrow>div:last-child{padding:14px 16px !important}
.navpc,.navpc{display:none !important}
.utilbar,.utilbar{display:block !important;font-size:10px !important;padding:7px 18px !important;text-align:center !important}
.utilbar>div:last-child,.utilbar>div:last-child{display:none !important}
.headbar,.headbar{align-items:center !important;padding:12px 18px !important}
.headbar>div:first-child,.headbar>div:first-child{padding:0 !important;gap:9px !important}
.headbar img,.headbar img{height:32px !important}
.burger,.burger{background:transparent !important;width:auto !important;gap:5px !important}
.burger span,.burger span{background:#3B322A !important}
.footinfo{flex-direction:column !important;gap:26px !important}
.footnav{flex-wrap:wrap !important;gap:8px 24px !important}
.footcta{flex-direction:column !important;align-items:stretch !important;gap:16px !important}
.footcta>div,.footcta>a{width:100% !important;box-sizing:border-box !important}
.footcta>a{justify-content:center !important}
}

/* ============ desktop only ============ */
@media (min-width:1100px){
.burger{display:none !important}
}

/* ============ TOP: PC / SP tree switch ============ */
@media (max-width:1099px){
  .hf-pc{display:none}
  .hf-sp{display:block}
}
.hf-carousel-card{flex:0 0 100%;min-width:0}
@media (min-width:768px) and (max-width:1099px){
  .hf-carousel-card{flex:0 0 calc(50% - 5px)}
  .hf-sp-products{grid-template-columns:1fr 1fr !important}
}


.hf-form .wpcf7-form,
.hf-form-inner { font-family: "Noto Sans JP", sans-serif; color: #3B322A; }

/* 項目 */
.hf-form .hf-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.hf-form .hf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hf-form label { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.hf-form .hf-req { background: #C0563E; color: #fff; font-size: 10px; padding: 3px 8px; font-weight: 400; letter-spacing: .04em; }
.hf-form .hf-help { font-size: 11px; color: #A08F7C; line-height: 1.9; margin: 0; }

/* 入力欄 */
.hf-form input[type="text"],
.hf-form input[type="email"],
.hf-form input[type="tel"],
.hf-form select,
.hf-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #D8CDBC;
  background: #fff;
  padding: 16px 18px;
  font-size: 14px;
  font-family: inherit;
  color: #3B322A;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s;
}
.hf-form select {
  background-color: #FBF6EC;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' viewBox='0 0 9 16' fill='none'%3E%3Cpath d='M1.5 1.5L7 8l-5.5 6.5' stroke='%23C0563E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 8px 14px;
  transform: none;
}
.hf-form textarea { height: 170px; resize: vertical; line-height: 2; }
.hf-form input::placeholder,
.hf-form textarea::placeholder { color: #C4B9A9; }
.hf-form input:focus,
.hf-form select:focus,
.hf-form textarea:focus { outline: none; border-color: #C0563E; }

/* 注意書き */
.hf-form .hf-note {
  background: #FBF6EC;
  padding: 24px 28px;
  font-size: 12px;
  line-height: 2;
  color: #6B6155;
  margin: 0 0 22px;
}

/* 送信ボタン（ホバーでダークブラウンの帯） */
.hf-form .hf-submit { display: flex; justify-content: center; padding-top: 6px; }
.hf-form .hf-submit .wpcf7-spinner { margin: auto 0 auto 12px; }
.hf-form input[type="submit"] {
  background: #C0563E;
  color: #fff;
  border: 0;
  padding: 20px 90px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  border-radius: 0;
  transition: background .35s ease;
}
.hf-form input[type="submit"]:hover { background: #3D332B; }

/* CF7 のメッセージ表示 */
.hf-form .wpcf7-not-valid-tip { color: #C0563E; font-size: 12px; margin-top: 6px; }
.hf-form .wpcf7-not-valid { border-color: #C0563E !important; background: #FDF6F4; }
.hf-form .wpcf7-response-output {
  margin: 24px 0 0 !important;
  border: 1px solid #D8CDBC !important;
  background: #FBF6EC;
  padding: 18px 22px !important;
  font-size: 13px;
  line-height: 2;
  color: #6B6155;
}
.hf-form form.sent .wpcf7-response-output { border-color: #7E9B6B !important; background: #F3F7EE; }
.hf-form form.invalid .wpcf7-response-output,
.hf-form form.failed .wpcf7-response-output { border-color: #C0563E !important; background: #FDF6F4; }

/* スマートフォン */
@media (max-width: 767px) {
  .hf-form .hf-row { grid-template-columns: 1fr; gap: 22px; }
  .hf-form .hf-note { padding: 20px; }
  .hf-form input[type="submit"] { width: 100%; padding: 18px; }
}

.hf-catbtn{transition:border-color .25s,color .25s}
.hf-catbtn:hover{border-color:#C0563E !important;color:#C0563E !important;opacity:1}

/* TOP スマホ：選ばれる5つの理由の文字組み */
@media (max-width:767px){
.hf-sp [style*="border-radius: 50%"],.hf-sp [style*="border-radius:50%"]{width:58px !important;height:58px !important}
.hf-sp [style*="gap: 16px"],.hf-sp [style*="gap:16px"]{gap:12px !important}
.hf-sp [style*="line-height: 1.95"],.hf-sp [style*="line-height:1.95"]{line-height:2 !important;text-wrap:pretty}
}

/* スマホ：フッター前CTA・フッターをプレビューと同じ組みに */
@media (max-width:767px){
  .footcta-wrap{grid-template-columns:1fr !important;padding:36px 20px !important;gap:18px !important;text-align:center;justify-items:center}
  .footcta-wrap>div:first-child{align-items:center}
  .footcta-wrap .footcta{width:100%}
  .footinfo{align-items:center !important;text-align:center !important;padding:36px 20px !important}
  .footinfo>div:first-child{align-items:center !important}
  .footinfo a[aria-label="HOME"]{align-self:center !important}
  .footnav{justify-content:center !important;gap:10px 18px !important}
  .footnav>div{flex-direction:row !important;flex-wrap:wrap;gap:10px 18px}
}

@media (max-width:1023px){
  .spflow br{display:none}
  *{text-wrap:auto !important;word-break:auto-phrase;line-break:normal;overflow-wrap:anywhere}
  [style*="max-width"]{max-width:100% !important}
}

/* ============ ヘッダー固定 ============ */
.utilbar{transition:height .3s ease,padding .3s ease,opacity .25s ease;overflow:hidden}
body.hf-scrolled .utilbar{height:0 !important;padding-top:0 !important;padding-bottom:0 !important;opacity:0 !important}
.hf-head-fix{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 2px 14px rgba(58,51,44,.08)}
.admin-bar .hf-head-fix{top:32px}
@media (max-width:782px){ .admin-bar .hf-head-fix{top:46px} }
@media (max-width:767px){ .hf-head-fix{position:sticky} }

/* ============ コンテンツ幅 1300px（背景は全幅） ============ */
@media (min-width:1100px){
  [style*="padding:80px 48px"],[style*="padding: 80px 48px"],
  [style*="padding:70px 48px"],[style*="padding: 70px 48px"],
  [style*="padding:90px 48px"],[style*="padding: 90px 48px"],
  [style*="padding:100px 48px"],[style*="padding: 100px 48px"],
  [style*="padding:76px 48px"],[style*="padding: 76px 48px"],
  [style*="padding:56px 48px"],[style*="padding: 56px 48px"],
  [style*="padding:52px 48px"],[style*="padding: 52px 48px"],
  [style*="padding:14px 48px"],[style*="padding: 14px 48px"],
  [style*="padding:8px 48px"],[style*="padding: 8px 48px"],
  [style*="padding:0 48px"],[style*="padding: 0px 48px"]{
    padding-left:max(48px, calc((100% - 1300px) / 2)) !important;
    padding-right:max(48px, calc((100% - 1300px) / 2)) !important;
  }
  .hf-inner-1300{max-width:1300px;margin-left:auto;margin-right:auto}
}

/* 商品カードの詳細トグル */
.pdetail summary::-webkit-details-marker{display:none}
.pdetail summary::marker{content:""}
.pdetail summary svg{transition:transform .25s}
.pdetail[open] summary svg{transform:rotate(90deg)}