@charset "UTF-8";
/*** reset ***/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ul, ol { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; cursor:pointer; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; margin: 1em 0; padding: 0; }
figure img { vertical-align:bottom; }
* { box-sizing: border-box; }
html { font-size: 62.5%; }
body { width: 100%; -webkit-text-size-adjust: 100%; width: 100%; }

/* google font & material icon*/
.material-symbols-outlined { vertical-align:middle; }
a .material-symbols-outlined { font-size:20px; display:inline-block; padding-left:4px; }
:root {
  --arrow-forward: '\e5c8';
  --arrow-back: '\e5c4';
  --send: '\e163';
  --list: '\e896';
}

/*** common ***/
body { background: #F4F2E7; scroll-behavior: smooth;}
a { text-decoration: none; outline: none; color:#009DFF; transition: all 0.6s;}
a:hover { color: #00a0e4; transition: all 0.4s;}
*:hover { transition: all 0.4s;}
figure img, div img { vertical-align: bottom;}
.brPC { display:block!important; }
.brSP { display:none!important; }
@media screen and (max-width: 1080px) {
    .brPC { display:none!important; }
    .brSP { display:block!important; }
}

/* font */
body { font-size: 1.8rem; color:#313529; font-family: "Roboto", "Noto Sans JP", sans-serif; line-height:1.8; font-weight: 400; }
h2 { font-size:2em; font-weight:400; line-height:1.4; }
h3 { font-size:1.8rem; font-weight:400; }
section .lead-text { font-size:1.8rem; line-height:1.8;}

@media screen and (max-width: 1280px) {
    h2 { font-size:2.4rem; }
    h3 { font-size:1.8rem; }
}
@media screen and (max-width: 1080px) {
    body { font-size: 1.6rem;}
    h2 { font-size:2rem; }
    h3 { font-size:1.6rem; }
}
@media screen and (max-width: 820px) {
    body { font-size: 1.4rem;}
    h2 { font-size:1.8rem; }
    h3 { font-size:1.6rem; }
}
@media screen and (max-width: 480px) {
    body { font-size: 1.4rem;}
    h2 { font-size:1.6rem; }
    h3 { font-size:1.4rem; }
}

/* image-fadeIn*/
.fade-in { opacity: 0; transform: translateY(100px); transition: opacity 1.2s ease-out, transform 1.2s ease-out;}
.fade-in.is-visible { opacity: 1; transform: translateY(0);}
.slide-in { opacity: 0; transform: translateX(-100px); transition: opacity 1.5s ease-out, transform 1.5s ease-out;}
.slide-in.is-visible { opacity: 1; transform: translateX(0);}
.border-line { position: relative;}
.border-line::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #9bc83c; transform: scaleX(0); transform-origin: left; transition: transform 1s ease-out;}
.border-line.is-visible::before { transform: scaleX(1);}

/* button */
.primary { padding:10px 40px 10px 20px; color:#FFF; border-radius: 50vw; border: 1px solid rgba(255,255,255,0.0); background: #468C32; display:flex; justify-content: center; max-width: 400px; min-width: 160px; position: relative;}
.primary:after { content: var(--arrow-forward); font-family: 'Material Symbols Outlined'; font-size: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.primary.prev:after { content: var(--arrow-back); font-family: 'Material Symbols Outlined'; font-size: 20px; right: 20px;}
.primary.btn-contact:after { content: var(--send); font-family: 'Material Symbols Outlined'; font-size: 32px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);}
.primary:hover { background:#9bc83c; border:1px solid #9bc83c; color:#FFF; transition: all 1s; -webkit-animation: ripple 2s infinite; animation: ripple 1.5s infinite;}
.primary:hover::after { right:10px; transition: all 1s;}
.primary.btn-contact:hover::after{ right:16px; top:40%; transition: all 1s;}
.secondary { padding:10px 40px 10px 20px; border-radius: 50vw; color:#468C32; border:1px solid #468C32; display:flex; justify-content: center; max-width: 400px; min-width: 140px; position: relative;}
.secondary:after { color:#468C32; content: var(--arrow-forward); font-family: 'Material Symbols Outlined'; font-size: 12px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);}
.secondary.prev, .secondary.list { padding:10px 20px 10px 40px;}
.secondary.prev:after { content: var(--arrow-back); font-family: 'Material Symbols Outlined'; font-size: 12px; position: absolute; left: 12px;}
.secondary.list:after { content: var(--list); font-family: 'Material Symbols Outlined'; font-size: 12px; position: absolute; left: 10px;}
.secondary:hover { background:#9bc83c; color:#FFF; border:1px solid #9bc83c; -webkit-animation: ripple 2s infinite; animation: ripple 1.5s infinite; }
.secondary:hover::after { right:4px; transition: all 0.5s; color: #FFF;}
.secondary.prev:hover::after { left:4px; transition: all 0.5s; color: #FFF;}
.cta-wrap {display: flex; gap: 20px; padding: 20px 0; align-items: center; justify-content: start;}
.text-link { color:#00a0e4; }
@keyframes ripple { 0% {box-shadow: 0 0 0 0 #961E28;} 70% {box-shadow: 0 0 0 15px rgb(0 0 0 / 0%);} 100% {box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);}}

@media screen and (max-width: 1080px) {
    .primary { padding:5px 40px 5px 20px;}
    .secondary { padding:5px 40px 5px 20px;}
}
@media screen and (max-width: 820px) {
    .primary.btn-contact:after { font-size: 20px;}
}

/* table */
.table-basic { border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; width:100%; border: 1px solid #FFF; background:#FFF;}
.table-basic th { text-align:left; font-weight:400;}
.table-basic th, .table-basic td { vertical-align: top; padding: 30px; border-bottom: 1px solid #F4F2E7;}
.table-basic tr:last-child th, .table-basic tr:last-child td { border-bottom: none;}

@media screen and (max-width: 767px) {
    .table-basic th, .table-basic td { padding: 20px; }
    .table-basic th { width: auto; min-width:25%; white-space:nowrap; }
}
@media screen and (max-width: 640px) {
    .table-basic th, .table-basic td { display: block; padding: 20px; width:100%; }
    .table-basic th { border-bottom:none; padding: 10px 0 0 20px; font-size:1.2rem; color:#468C32; }
    .table-basic td { padding: 0 20px 10px 20px; }
}

/* breadcrumb */
.breadcrumb { max-width: 1480px; margin: 0 auto; padding: 40px 40px 0 40px;}
.breadcrumb ul { display:flex;}
.breadcrumb ul li  { font-size:1.2rem; white-space:nowrap; }
.breadcrumb ul li a:after  {color: #999; content: "/"; font-size:10px; padding:0 10px; }
.breadcrumb ul li:last-child { max-width: 25em; overflow: hidden; text-overflow: ellipsis;}

@media screen and (max-width: 1080px) {
    .breadcrumb { padding: 40px 20px 0 20px;}
    .breadcrumb ul li:last-child { max-width: 18em;}
}

/* layout */
section { padding: 120px 0; width:100%;}
section.page { padding: 180px 0 20px 0;}
section.cta-area { padding: 100px 0;}
section .section-inner { max-width: 1480px; margin: 0 auto; padding: 0 40px;}
section h2 { font-size: 6.2rem; line-height: 0.8; font-family: "Scope One", san-serif; font-weight: 400; margin:10px 0 0; }
section h2 .jp-title { display: inline; color: #FFF; font-size: 1.4rem; font-family: "Roboto", "Noto Sans JP", sans-serif; background: #9bc83c; padding: 5px 10px; border-radius: 4px; white-space: nowrap;}
section h2 small { font-size: 3rem;}
section.quality-safety { border-bottom: 1px solid #9bc83c; }
.news-inner, .business-inner, .product-inner, .about-inner, .quality-safety-inner, .article-inner, .privacy-inner, .contact-inner { display:flex; gap: 0 40px; }

.section-header { width:18%; }
.section-body { width:40%; }
.section-photo { width:42%; }
.section-photo figure, .section-photo figure img  { width:100%; border-radius: 20px;}
.section-description { line-height:2; }
.section-page-header { width:22%; }
.section-page-contents {width: 78%; padding-top: 30px;}
.section-page-header h2 { font-size: 7rem; }
.section-page-contents h3 { font-size:2.4rem; font-weight:400; margin-bottom:20px; }
.page .section-page-contents .description { margin-bottom:60px; }
.page .section-page-contents .column-1 .contents-box { width:100%; margin-bottom:0; }
.page .section-page-contents .column-2 { display:flex; gap:0 40px; margin-bottom:0; }
.page .section-page-contents .column-2 .contents-box { width:calc(50% - 20px); margin-bottom:0; }

@media screen and (max-width: 1280px) {
    section.page .section-inner { flex-direction: column;}
    section h2 { font-size: 5.6rem;}
    .news-inner, .product-inner { flex-direction: column; gap: 40px 0; }
    .business-inner, .about-inner, .quality-safety-inner { flex-wrap:wrap; }
    .business-inner .section-header, .about-inner .section-header, .quality-safety-inner .section-header, .article-inner, .privacy-inner { width:100%; }
    .section-body { width: calc(50% - 20px); }
    .section-photo { width:calc(50% - 20px); }
    .section-page-contents {width: 100%;}	
}
@media screen and (max-width: 1080px) {
    section.page { padding: 100px 0 20px 0;}    
    section.cta-area { padding: 40px 0;}
    section h2 { font-size: 3.2rem;}
    section h2 .jp-title { font-size: 1.2rem;}
    .news-inner, .business-inner, .about-inner, .quality-safety-inner, .product-inner, .article-inner, .privacy-inner { flex-direction: column; gap: 20px 0; }
    .section-header { width:100%; }
    .section-body { width: 100%; }
    .section-photo { width:100%; }
    .section-page-header { width:100%; }
    .section-page-header h2 { font-size: 8rem; }
    .section-page-contents {width: 100%;}
    .page .section-page-contents .column-2 { gap:0 20px; }
}
@media screen and (max-width: 820px) {
    section h2 { margin-bottom: 0;}
    section { padding: 60px 0;}
    section .section-inner { padding: 0 20px;}
    .section-photo figure, .section-photo figure img  { border-radius: 10px;}
    .section-description { font-size:1.6rem }
}
@media screen and (max-width: 640px) {
    .section-page-header h2 { font-size: 6.2rem; }
    .page .section-page-contents .column-2 { flex-direction: column; gap:40px 0 ; margin-bottom:0; }
    .page .section-page-contents .column-2 .contents-box { width:100%; margin-bottom:0; }
}

/*** header ***/
header .header-inner { width: calc(100% - 40px); max-width: 1480px; padding: 10px 20px; margin: 0 auto; display:flex; align-items:center; gap:0 80px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background:#F4F2E7; background:#FFF; border-radius:0 0 20px 20px; box-shadow:0 0  20px rgba(70,140,50,0.08); }
header .header-inner .logo { width:174px;}
header .header-inner .logo img { height:60px;}
header .header-inner nav { display:flex; gap:0 40px; width: calc(100% - 314px); align-items:center;}
header .header-inner nav .header-menu { display:flex; gap:0 40px; align-items:center;}
header .header-cta a.primary { font-size: 1.4rem;}
header .header-cta a.primary:after { font-size: 20px;}
header .header-inner nav .header-menu a { font-size: 1.6rem; color: #313529; position: relative;}
header .header-inner nav .header-menu a:after { color: #468C32;content: "●"; color:#961E28; font-size:6px; position: absolute; left: 50%; top: -12px; transform: translateX(-50%);opacity: 0; transition: opacity 0.3s ease-in-out;}
header .header-inner nav .header-menu a:hover::after {opacity: 1;}

@media screen and (max-width: 1280px) {
    header .header-cta a.primary { font-size: 1.3rem;}
    header .header-cta a.primary:after { font-size: 14px;}
    header .header-inner { gap:0 30px;}
    header .header-inner nav .header-menu a { font-size: 1.3rem;}
}
@media screen and (max-width: 1080px) {
    header .header-inner { width:100%; gap:0 40px;}
    header .header-inner .logo { width:145px;}
    header .header-inner .logo img { height:50px;}
    header .header-cta a.primary, header .header-cta a.secondary { font-size: 1.3rem; padding: 4px 15px; min-width: 120px;}
    header .header-inner nav .header-menu { gap:0 25px;}
    header .header-inner nav .header-menu a.header-menu-link { font-size: 1.2rem;}
    header .header-cta a.primary:after { display: none;}
}
@media screen and (max-width: 820px) {
    header .header-inner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index:999; }
    header .header-inner .logo img { height:40px;}
    header .header-inner nav .header-menu { display: none;}
    header .header-cta {gap: 0 5px;}
    header .header-cta a.primary{ display: none;}
}

/*** news ***/
/* news-list */
.news-inner .section-body {width: calc(100% - 300px);}
.news-list-wrap { padding-top: 32px; }
.news-list-wrap li { margin-bottom:1.5em; padding-bottom:1.5em; }
.news-list-wrap li a { display:flex; gap: 0 40px; color:#313529; line-height: 1.4;}
.news-list-wrap li a .article-date { font-family: "Roboto", san-serif; margin-bottom: 10px;}
.news-list-wrap li a .article-title { border-bottom: 1px; position: relative;}
.news-list-wrap li a .article-title:after { position: absolute; left: 0; content: ''; width: 100%; height: 1px; background:#961E28; bottom: -10px; transform: scale(0, 1); transform-origin: right top; transition: transform 0.8s;}
.news-list-wrap li a:hover .article-title:after { transform: scale(1, 1); transform-origin: left top;}
.news-inner a.secondary { font-size:1.4rem; max-width:200px; }
.section-page-contents .news-list-wrap { padding-top: 10px; }
.nav-links { display:flex; gap:0 20px; }
.nav-links .page-numbers { font-size: 1.4rem; border:1px solid #468C32; border-radius:50vw; color:#468C32; min-width:40px; min-height:40px; line-height: 38px; display:inline-block; text-align:center; font-family: "Roboto", san-serif; }
.nav-links .page-numbers.next, .nav-links .page-numbers.prev { border-radius:50vw;min-width:80px; }
.nav-links .page-numbers.current { border:1px solid #FFF; color:#468C32; background:#FFF; }
.nav-links a.page-numbers:hover, .nav-links a.page-numbers.next:hover, .nav-links a.page-numbers.prev:hover { background:#9bc83c; border:1px solid #9bc83c; color:#FFF;  }

@media screen and (max-width: 1080px) {
    .news-inner .section-body {width: 100%;}
    .news-list-wrap { padding-top:0; }
    .news-list-wrap li a { display: flex; flex-direction: column; gap: 0;}
    .news-list-wrap li a .article-date { margin:0 0 5px 0; }
}
@media screen and (max-width: 480px) {
    .news-list-wrap li { margin-bottom:2em; }
    .news-list-wrap li a { font-size: 1.4rem;}
}

/*** news-article ***/
/* wp-table-reset */
.wp-block-table, .wp-block-table table { border-collapse: collapse !important; border-spacing: 0 !important; border: none !important; width: 100%; margin-bottom: 1em; }
.wp-block-table th, .wp-block-table td { border: none !important; background-color: transparent !important; padding: 0.5em; text-align: left; line-height: inherit; }
.wp-block-table.is-style-stripes table tr:nth-child(odd), .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: transparent !important; }
/* article-format */
.section-page-contents .article-wrap { max-width:800px; line-height:2; }
.section-page-contents .article-wrap .article-header { margin-bottom:60px;}
.section-page-contents .article-wrap .article-header h1.artcile-title { font-size:3.2rem; font-weight: 600; line-height: 1.6;}
.section-page-contents .article-wrap .article-header .article-date { font-size:1.3rem; color:#468C32; font-family: "Roboto", san-serif; border: 1px solid #468C32; padding:1px 20px; border-radius:50vw; display: inline-block; margin-bottom:10px; }
.section-page-contents .article-wrap .article-body { margin-bottom:60px; }
.section-page-contents .article-wrap .article-body h2 { font-size:2rem; margin: 3rem 0 1rem 0; font-weight: 600; line-height: 1.3;}
.section-page-contents .article-wrap .article-body h3 { font-size:1.8rem; font-weight: 600;}
.section-page-contents .article-wrap .article-body p { margin-bottom:2em; }
.section-page-contents .article-wrap .article-body figure { margin-bottom:2em; }
.section-page-contents .article-wrap .article-body img { border-radius: 10px;}
.section-page-contents .article-wrap .article-body strong { font-weight:600; }
.section-page-contents .article-wrap .article-body ul { margin-left: 20px;}
.section-page-contents .article-wrap .article-body ul li { margin-bottom: 0.5rem; list-style: circle;}
.section-page-contents .article-wrap .article-navi .article-navi-wrap { display: flex; gap: 0 20px; justify-content: center;}
.section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary { font-size: 1.4rem;}
.section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.next { padding:5px 40px 5px 30px;}
.section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.prev, .section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.list { padding:5px 30px 5px 40px;}
.section-page-contents .article-wrap table { border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; width:100%; border: 1px solid #FFF; background:#FFF;}
.section-page-contents .article-wrap table td:first-child { text-align:left; font-weight:400; width:30%;}
.section-page-contents .article-wrap table td { text-align:left; font-weight:400; width:100%; vertical-align: top; padding: 30px; border-bottom: 1px solid #F4F2E7;}
.section-page-contents .article-wrap table tr:last-child td { border-bottom: none;}
.section-page-contents .article-wrap .cta-wrap { justify-content: center;}
.section-page-contents .article-wrap .cta-wrap .primary { font-size:14px;}

@media screen and (max-width: 1080px) {
    .section-page-contents .article-wrap .article-header { margin-bottom:40px;}
    .section-page-contents .article-wrap .article-header h1.artcile-title { font-size:2.2rem;}
    .section-page-contents .article-wrap { max-width:100%; }
    .section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.prev, .section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.next { width: 40px; height: 40px;}
}
@media screen and (max-width: 767px) {
    .section-page-contents .article-wrap table th, .table-basic td { padding: 20px; }
    .section-page-contents .article-wrap table th { width: auto; min-width:25%; white-space:nowrap; }
}
@media screen and (max-width: 640px) {
    .section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.next, .section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.prev { padding: 0; text-align: center; min-width: 40px; width: 40px; max-width: 40px;}
    .section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.next span, .section-page-contents .article-wrap .article-navi .article-navi-wrap .secondary.prev span { display: none;}
    .section-page-contents .article-wrap table td { display: block; padding: 0 20px 10px 20px; width:100%; }
    .section-page-contents .article-wrap table td:first-child { border-bottom:none; padding: 10px 0 0 20px; font-size:1.2rem; color:#468C32; }
}

/*** business ***/
.page .business-inner .section-page-contents h2.tagline { line-height:1.3; font-weight:400; font-size:4rem; }
.page .business-inner .section-page-contents .business-key-visual {width:100%; max-height:460px; overflow:hidden; border-radius: 20px; margin-bottom: 40px;}
.page .business-inner .section-page-contents .business-key-visual img { width:100%; object-fit:contain; }
.page .business-inner .column-2 .column-box { background: #FFF; border-radius: 10px; padding: 20px;}

/*** product ***/
.page .section-page-contents h2 {font-size: 3.2rem; line-height: 0.85; font-weight: 700; margin-bottom: 20px; font-family: "Roboto", san-serif;}
.page .section-page-contents h2 .en-title {font-size: 1.8rem; font-family: "Roboto", san-serif;}
.page .section-page-contents h3 {font-size: 2rem; font-weight: 700; margin-bottom: 10px;}
.page .section-page-contents h4 {font-size: 1.8rem; font-weight: 700;}
.page .section-page-contents .product-trade { font-size: 1.2rem; margin-bottom: 40px;}
.page .section-page-contents .product-trade span { font-size: 1.4rem; background: #FFF; padding:2px 12px; border-radius:50vw; margin-right:5px; }
.page .section-page-contents .procuct-main-photo { max-width: 100%; margin-bottom: 40px;}
.page .section-page-contents .procuct-main-photo img { width: 100%; border-radius: 10px;}
.page .section-page-contents .procuct-main-description { margin-bottom: 40px;}
.page .section-page-contents .product-features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px;}
.page .section-page-contents .product-features li { width: calc(50% - 5px); background: #FFF; padding: 20px; border-radius: 5px;}
.page .section-page-contents .product-features li p { margin-bottom: 0;}
.page .section-page-contents .product-features-paragraph { background: #FFF; padding: 20px; border-radius: 5px; margin-bottom: 40px;}
.product-inner .column-1, .product-inner .column-2 { margin-bottom:60px; }

@media screen and (max-width: 640px) {
    .page .section-page-contents h4 {font-size: 1.6rem;}
    .page .section-page-contents .product-trade { font-size: 1.2rem; margin-bottom: 20px;}
    .page .section-page-contents .procuct-main-photo { margin-bottom: 20px;}
}

/*** about ***/
.company-outline { margin-bottom:60px; }
.board-member ul {display: flex; gap: 0 40px;}
.board-member ul li { text-align: center; max-width: 300px;}
.board-member ul li figure { background:#FFF; padding:20px 20px 0 20px; border-radius:20px; margin-bottom:10px; max-width: 300px; }
.board-member ul li figure img { width: 100%; }
.page .section-page-contents .board-member ul li h4 { font-size: 1.8rem; font-weight: 400;}
.page .section-page-contents .board-member ul li h4 .title { font-size: 1.6rem;}

@media screen and (max-width: 820px) {
    .board-member ul { gap: 0 20px;}
    .board-member ul li figure { border-radius:10px;}
}

/*** cta-area ***/
.cta-area { background: url(https://hanks-inc.co.jp/wp-content/themes/hanks/img/photo/img_photo_cta-bg.webp) no-repeat center 80%; background-size: cover; margin: 20px auto; border-radius: 20px; width: calc(100% - 40px); max-width: 1400px;}
.cta-area-inner { text-align: center; color: #FFF; padding: 0 40px;}
.cta-area-inner h2 { font-size: 2.6rem; margin-bottom: 20px; font-weight: 700; text-shadow: 0 0 8px rgba(0,0,0,0.4); line-height: 1.6; font-family: "Roboto", "Noto Sans JP", sans-serif;}
.cta-area-inner .cta-wrap { justify-content: center;}
.cta-area-inner .cta-wrap a.primary { padding: 20px 120px;}

@media screen and (max-width: 820px) {
    .cta-area { border-radius: 10px;}
    .cta-area-inner .cta-wrap a.primary { padding: 10px 80px 10px 60px;}
}
@media screen and (max-width: 480px) {
    .cta-area-inner { padding: 0 20px;}
    .cta-area-inner h2 { font-size: 2rem; font-weight: 400;}
    .cta-area-inner .cta-area-lead { font-size: 1.4rem; text-align: left;}
}

/*** contact form ***/
.contact-form { max-width: 640px; width: 100%;}
.contact-form p {margin-bottom: 30px;}
.contact-form p label {font-size: 1.4rem; color: #468C32;}
.contact-form p input[type=text], .contact-form p input[type=email], .contact-form p input[type=tel], .contact-form p select, .contact-form p textarea { padding: 16px; font-size: 1.6rem; border-radius:6px; width:100%; border:none; margin-top:5px; }
.contact-form p input[type=submit] { border:1px solid #468C32; background:#468C32; color: #FFF; font-size: 16px; width:240px; height: 48px; margin: 0 auto; border-radius:50vw; display:flex; justify-content:center; cursor:pointer; }
.contact-form p input[type=submit]:hover { border:1px solid #468C32; background:transparent; color: #468C32; }
.contact-form p select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; font-size:1.6rem; height:50px; display: block; padding: 16px; box-sizing: border-box;}
.contact-form p .require { font-size:1.1rem; color:#961E28; background:#FFF; border-radius:50vw; padding:2px 6px; margin-left:5px; }
.contact-form p .optional { font-size:1.1rem; color:#888; background:#EEE; border-radius:50vw; padding:2px 6px; margin-left:5px; }
.wpcf7-not-valid-tip { font-size:1.4rem; color:#961E28; }
.wpcf7-response-output { font-size:1.4rem; background:#FFF; border-radius:6px; margin: 10px 0;}
.contact-form p .wpcf7-spinner { display:flex; justify-content:center; margin: 10px auto; background:#468C32; opacity:1; }
.contact-form .privacy-check { width:24px; height:24px; border: 1px solid #313529; border-radius:4px;}
.contact-form .form-note { color:#313529; font-size:1.3rem; }
#wpcf7-f21-o1 > form > p:nth-child(10) > label > span.wpcf7-form-control-wrap > span > span { margin: 0;  }
#wpcf7-f21-o1 > form > p:nth-child(10) > label > span.wpcf7-form-control-wrap > span > span > label { display:flex; align-items:center; gap: 0 6px; }
#wpcf7-f21-o1 > form > p:nth-child(10) > label > span.wpcf7-form-control-wrap > span > span > label > span { color:#313529; }

/*** privacy ***/
.privacy-wrap { max-width: 820px; margin:0 auto; }
.privacy-wrap h3 { margin:2em 0 1em 0; }
.privacy-wrap p { margin-bottom:1em; }
.privacy-wrap p.privacy-2ndlayer { margin-left:1em; }

/*** footer ***/
footer { background:#212121; padding:80px 40px; }
.footer-inner {max-width: 1400px; margin: 0 auto;}
.footer-inner .footer-link-wrap { display:flex; gap:0 80px; align-items:start; justify-content:start; color:#FFF; margin-bottom:60px; }
.footer-inner .footer-link-wrap .footer-company-wrap .footer-company-logo {width: 174px; margin-bottom: 20px;}
.footer-inner .footer-link-wrap .footer-company-wrap .footer-company-logo img {width: 100%;}
.footer-inner .footer-link-wrap .footer-company-wrap .footer-company-address .footer-company-name {font-size: 1.6rem; font-weight: 700;}
.footer-inner .footer-link-wrap .footer-company-wrap .footer-company-address  .footer-company-info {font-size: 1.4rem;}
.footer-inner .footer-link-wrap ul { display:flex; align-items:center; gap:0 40px; margin-top:20px; }
.footer-inner .footer-link-wrap ul li a { color:#FFF; font-size: 1.3rem; position: relative;} 
.footer-inner .footer-link-wrap ul li a:after { color: #468C32;content: "●"; color:#961E28; font-size:6px; position: absolute; left: 50%; top: -12px; transform: translateX(-50%);opacity: 0; transition: opacity 0.3s ease-in-out;}
.footer-inner .footer-link-wrap ul li a:hover::after {opacity: 1;}
.footer-inner .footer-copyright { color:#999; font-size:1.3rem; }

@media screen and (max-width: 1080px) {
    .footer-inner .footer-link-wrap { flex-direction: column; gap: 30px 0; justify-content: start; align-items: start;}
    .footer-inner .footer-link-wrap .footer-company-wrap { display: flex; align-items:center; gap: 0 40px; }
    .footer-inner .footer-link-wrap .footer-company-wrap .footer-company-logo {margin-bottom: 0;}
}
@media screen and (max-width: 820px) {
    .footer-inner .footer-link-wrap ul { flex-wrap:wrap; gap: 20px; }
}
@media screen and (max-width: 480px) {
    footer { background:#212121; padding:60px 20px; }
    .footer-inner .footer-link-wrap .footer-company-wrap { flex-direction:column; gap:30px 0; justify-content:start; align-items:start; }
}

/*** scroll-menu ***/
.scroll-menu { display: block; visibility: hidden; opacity: 0; transition: opacity 1s ease; width: 60px; height: 60px; position: fixed; top: 20px; right: 20px; cursor: pointer; z-index: 1001; background: #468C32; border-radius: 50vw;}
.scroll-menu span { display: block; position: absolute; width: 24px; height: 1px; background-color: #FFF;
 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;}
.scroll-menu span:nth-child(1) { top: 20px; left: 18px;}
.scroll-menu span:nth-child(2) { top: 28px; left: 18px;}
.scroll-menu span:nth-child(3) { top: 36px; left: 18px;}
.scroll-menu.is-scrolled { visibility: visible; opacity: 1;}
.scroll-menu.is-active span:nth-child(1) { transform: rotate(45deg); top: 50%;}
.scroll-menu.is-active span:nth-child(2) { opacity: 0;}
.scroll-menu.is-active span:nth-child(3) { transform: rotate(-45deg); top: 50%;}
.overlay-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(244,242,231,0.95); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s;}
.overlay-menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s 0s; display: flex; align-items: center;}
.overlay-menu.is-open .header-inner {display: flex; flex-direction: column; max-width: 1280px; gap: 40px 0; margin: 0 auto;}
.overlay-menu.is-open .header-inner .logo a img {width: 220px;}
.overlay-menu.is-open .header-inner nav { margin: 0 0 0 90px;}
.overlay-menu.is-open .header-inner nav ul li { margin-bottom: 20px;}
.overlay-menu.is-open .header-inner nav ul li a { color: #313529; position: relative;}
.overlay-menu.is-open .header-inner nav ul li a:after {color: #468C32;content: "●"; color:#961E28; font-size:6px; position: absolute; left: -15px; top: 50%; transform: translateY(-50%);opacity: 0; transition: opacity 0.3s ease-in-out; }
.overlay-menu.is-open .header-inner nav ul li a:hover::after {opacity: 1;}
.overlay-menu.is-open .header-inner .header-cta .primary.btn-contact {width: 220px; font-size: 1.6rem; margin-left: 20px;}
.overlay-menu.is-open .header-inner .header-cta .primary.btn-contact:after { font-size:20px; }

@media screen and (max-width: 820px) {
    .scroll-menu { opacity: 1; position: fixed; top: 10px; right: 20px; width: 40px; height: 40px; z-index: 10001;}    
    .scroll-menu span { width: 18px;}
    .scroll-menu span:nth-child(1) { top: 13px; left: 11px;}
    .scroll-menu span:nth-child(2) { top: 19px; left: 11px;}
    .scroll-menu span:nth-child(3) { top: 25px; left: 11px;}
}