html {
scroll-behavior: smooth;
} body{
font-family: 'Noto Serif JP', serif;
font-size: 16px;
line-height: 28px;
color: #595757;
font-weight: 400;
background: #fff;
}
img{max-width: 100%;height: auto;}
img.aligncenter{
margin: 0 auto;
display: block;
}
.pagination{
margin: 20px 0 15px;
}
.pagination>li>a, .pagination>li>span{
border: 1px solid #4cae4c;
margin-right: 10px;
border-radius: 4px;
color: #333;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span, .pagination>li>span:hover{
background-color: #5cb85c;
border-color: #4cae4c;
color: #fff;
}   .wbreadcrumbs ul li a{
color: #333;
}
.wbreadcrumbs ul{
overflow: hidden;
padding: 20px 0 0;
}
.wbreadcrumbs ul li{
color: #d9251b;
list-style: none;
float: left
}
.wbreadcrumbs ul li+li:before{
display: inline-block;
padding-right: 10px;
padding-left: 10px;
color: #000;
font-weight: bold;
content: "\002192";
} a.gotop{
position: fixed;
right: 30px;
bottom: 120px;
z-index: 9999;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: translate(120px,120px);
}
a.gotop.active{
transform: translate(0,0);
}
a.gotop img{width:60px;}  .btn-trigger {
top: 50%;
right: 20px;
width: 30px;
height: 24px;
display: block;
position: absolute;
transform: translateY(-50%);
z-index: 9999;
display: none;
}
.btn-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #3fa64e;
border-radius: 4px;
display: inline-block;
}
.btn-trigger,
.btn-trigger span {
transition: all 0.5s;
box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
top: 0;
}
.btn-trigger span:nth-of-type(2) {
top: 11px;
}
.btn-trigger span:nth-of-type(3) {
bottom: 0;
}
.btn-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(11px) rotate(-45deg);
transform: translateY(11px) rotate(-45deg);
}
.btn-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.btn-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-11px) rotate(45deg);
transform: translateY(-11px) rotate(45deg);
} header{
padding: 25px 0;
}
@media (min-width:1024px){
.header{position:relative;} body .header .logo {
position: absolute;
left: 40px;
padding-left:0;
}
}
@media (min-width:1024px) and (max-width:1200px){
body .header .logo {width:220px;}
}	
.logo a{
color: #00913C;
font-size: 26px;
font-weight: 400;
letter-spacing: 3px;
font-family: 'Noto Sans JP';
text-decoration:none;
}
.logo.white a{
color: #fff;
}	
.logo span {
font-size: 40px;
font-weight: 700;
margin-left: 10px;
}
.logo img{
max-width: 300px;
}
@media (max-width:991px){
.logo{padding-left:20px;}
.logo a{font-size: 19px;}
.logo span {font-size: 30px;}
}
.main-menu{
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 70px;
position: relative;
}
.main-menu li a{
display: block;
text-decoration: none;
text-align: center;
border-bottom: 1px solid #00913C;
font-weight: 600;
}
.main-menu li a .txt-jp{
font-size: 18px;
line-height: 24px;
color: #595757;
display: block;
letter-spacing: 2px;
}
.main-menu li a .txt-en{
font-size: 14px;
color: #00913C;
display: block;
}
.main-menu li.contact_menu a{
background: #00913C url(//www.makino-h.com/makino/wp-content/themes/theme/img/icon_mail.png) left 10px top 10px no-repeat;
padding: 8px 10px 0 50px;
border-bottom: none;
text-align: left;
height: 56px;
position:relative;
}
@media (min-width:1024px){
.main-menu li.contact_menu a:before{content:'';position:absolute;height:1px;width:35px;background:#fff;left:10px;bottom:14px;}
}
.main-menu li.contact_menu a .txt-jp{
color: #fff;
line-height: 1;
}
.main-menu li.contact_menu a .txt-en{
color: #fff;
}
.container{
max-width: 1054px;
}
.container-fluid{
max-width: 1260px;
margin: 0 auto;
}
.section-banner{
position: relative;
}
.section-banner .banner-text img{
position: absolute;
left: 100px;
top: 40px;
max-height: calc(100% - 80px);
width: auto;
}
.txt-lg{
font-size: 18px;
line-height: 36px;
}
.section-business{
margin-bottom: 50px;
}
.section-business .txt-lg{
text-align: center;
margin: 30px 0 100px;
}
.title-section{
text-align: center;
padding-bottom: 10px;
margin-bottom: 30px;
border-bottom: 2px solid #00913C;
}
.title-section .txt-jp{
font-size: 30px;
line-height: 50px;
color: #00913C;
letter-spacing: 30px;
font-weight: 600;
display: block;
padding-left: 30px;
}
.title-section .txt-en{
font-size: 14px;
color: #595757;
display: block;
margin-right: 10px;
}
.list-business{
display: flex;
justify-content: flex-start;
align-items: stretch;
column-gap: 50px;
row-gap: 30px;
flex-wrap: wrap;
}
.list-business .item-business{
width: calc(100%/3 - 100px/3);
}
.list-business .item-business h3{
margin: 15px 0 0;
text-align: center;
}
.list-business .item-business h3 .txt-jp{
font-size: 24px;
line-height: 36px;
color: #00913C;
font-weight: 600;
display: block;
letter-spacing: 5px;
}
.list-business .item-business h3 .txt-en{
font-size: 14px;
color: #595757;
display: block;
}
.txt-en{font-family: 'Noto Sans JP', sans-serif;}
.title-box{
font-size: 22px;
line-height: 28px;
font-weight: 600;
color: #00913C;
letter-spacing: 20px;
margin-bottom: 20px;
}
.section-about{
background: rgba(0,145,60,0.07) url(//www.makino-h.com/makino/wp-content/themes/theme/img/bg_about.png) left top repeat;
padding: 60px 0 0;    
}
.section-about .title-box{
text-align: center;font-family: 'Noto Sans JP', sans-serif;
}
.inner-business-description{
display: flex;
justify-content: space-between;
align-items: stretch;
margin-bottom: 50px;
column-gap: 30px;
}
.inner-business-description .item-description{
max-width: 450px;
text-align: center;
}
.inner-business-description .item-description h3{
padding-bottom: 10px;
border-bottom: 1px solid #00913C;
}
.inner-business-description .item-description h3 .txt-jp{
font-size: 26px;
line-height: 45px;
color: #00913C;
font-weight: 600;
letter-spacing: 10px;
display: block;
}
.inner-business-description .item-description h3 .txt-en{
font-size: 17px;
line-height: 28px;
display: block;
}
.inner-business-description .item-description p{
font-size: 17px;
line-height: 37px;
color: #00913C;
font-weight: 600;
font-family: 'Noto Sans JP', sans-serif;
}
.section-about .lists-person{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
column-gap: 50px;
row-gap: 20px;
margin-bottom: 40px;
font-family: 'Noto Sans JP', sans-serif;
}
.section-about .lists-person span{
font-size: 19px;
line-height: 1;
padding-left: 10px;
position: relative;
}
.section-about .lists-person span:before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 5px;
height: 5px;
background: #00913C;
border-radius: 50%;
}
.block-contact-about{
padding-top: 40px;
text-align: center;
border-top: 2px solid #00913C;
margin-bottom: 50px;
}
.block-contact-about .logo img{max-width:300px;}
.tel{
display: flex;
justify-content: center;
align-items: center;
column-gap: 50px;
}
.tel span{
font-size: 33px;
line-height: 1.3;
color: #00913C;
font-weight: 600;
font-family: 'Noto Sans JP', sans-serif;
letter-spacing: 2px;
}
.tel span small{
font-size: 24px;
font-weight: 400;
}
.block-contact-about p{
font-family: 'Noto Sans JP', sans-serif;
}
.section-news{
padding: 60px 0 80px;
}
.section-news .title-section{
border-bottom: none;
}
.section-news .list-news{
border-top: 1px solid #B4B4B5;
}
.section-news dl{
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
margin-bottom: 0;
}
.section-news dl.active{
background: rgba(0,145,60,0.07) url(//www.makino-h.com/makino/wp-content/themes/theme/img/bg_about.png) left top repeat;
}
.section-news dl dt{
padding: 20px 0 20px 30px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
font-size: 18px;
line-height: 24px;
color: #00913C;
column-gap: 30px;
width: 285px;
border-bottom: 1px solid #B4B4B5;
font-weight: 400;
}
.section-news dl dt a{
font-size: 15px;
line-height: 26px;
color: #fff;
text-align: center;
padding: 0 12px;
background: #00913C;
border-radius: 20px;
width: 100px;
text-decoration: none;
}
.section-news dl dd{
width: calc(100% - 285px);
padding: 20px 0 20px 15px;
border-bottom: 1px solid #B4B4B5;
margin: 0;
position: relative;
}
.section-news dl dd a.btn-showmore{
position: absolute;
top: 28px;
right: 10px;
width: 20px;
height: 10px;
background: url(//www.makino-h.com/makino/wp-content/themes/theme/img/arrow_down.png) left center no-repeat;
}
.section-news dl dd h3{
font-size: 18px;
line-height: 24px;
margin: 0;
}
.section-news dl dd .excerpt-news{
margin-top: 10px;
display: none;
}
footer .content-footer{
background: #00913C url(//www.makino-h.com/makino/wp-content/themes/theme/img/bg_footer.png) center top no-repeat;
background-size: cover;
text-align: center;
}
footer .content-footer .container{
padding: 30px 0 20px;
border-bottom: 1px solid #fff;
}
footer .content-footer .container .flogo img{
max-width: 300px;
}
.address-footer{
font-size: 19px;
margin: 20px 0 10px;
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
}
footer .content-footer .tel span{
color: #fff;
}
footer .copyright{
background: rgba(0,145,60,0.8) url(//www.makino-h.com/makino/wp-content/themes/theme/img/bg_copyright.png) left top repeat;
padding: 30px 0 20px;
}
.menu-footer{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
column-gap: 70px;
row-gap: 15px;
list-style: none;
padding: 0;
margin: 0 0 40px;
}
.menu-footer li a{
display: block;
color: #fff;
font-size: 15px;
line-height: 1.4;
text-decoration: none;
font-family: 'Noto Sans JP', sans-serif;
}
.copyright p{
font-size: 13px;
line-height: 24px;
color: #fff;
margin-bottom: 0;
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
}
.map iframe{
display: block;
width: 100%;
}
#main_content{padding:60px 0;}
#main_content h1.title-page{text-align:center;margin:0 0 15px;font-size: 30px;font-weight: 700;color: #00913C;}
#main_content .sub_title{text-align:center;font-size: 18px;font-weight: 700;color: #00913C;display: block;line-height: 1;}
#main_content h2 {font-size: 23px;font-weight: 700;color: #00913C;}
#main_content h3{font-size: 20px;font-weight: 700;color: #00913C;margin: 0;}
.page-content{margin-top:50px;}
.privacy-policy p {margin: 0 0 30px;font-size:18px;line-height: 1.5;letter-spacing: 1px;}
@media (max-width: 991px){
header{
position: relative;
padding: 10px 0;
}
.logo img{
max-height: 40px;
width: auto;
}
.btn-trigger{
display: block;
}
.main-menu{
position: absolute;
top: 100%;
left: 0;
width: 100%;
flex-wrap: wrap;
z-index: 9999;
background: #fff;
display: none;
}
.main-menu li{
width: 100%;
}
.main-menu li a{
padding: 10px 0 10px;
}
.main-menu li:first-child a{
border-top: 1px solid #00931c;
}
.main-menu li:last-child a{
text-align: center;
background: #00913C;
padding: 10px 10px 0;
}
}
@media (max-width: 767px){
.section-business .txt-lg{
margin-bottom: 50px;
}
.title-section{
}
.title-section .txt-jp{
font-size: 24px;
line-height: 36px;
}
.list-business{
column-gap: 15px;
}
.list-business .item-business h3 .txt-jp{
font-size: 18px;
line-height: 28px;
}
.list-business .item-business{
width: calc(100%/3 - 10px);
}
.title-box{
font-size: 18px;
line-height: 28px;
}
.inner-business-description .item-description h3 .txt-jp{
font-size: 20px;
line-height: 32px;
}
.inner-business-description .item-description p,
.section-about .lists-person span,
.section-news dl dd h3,
.section-news dl dt{
font-size: 16px;
}
.section-about .lists-person {column-gap: 20px;}
}
@media (max-width: 575px){
.list-business .item-business{
width: calc(50% - 15px);
}
.inner-business-description{
flex-wrap: wrap;
row-gap: 30px;
}
.inner-business-description .item-description{
width: 100%;
margin: 0 auto;
}
.tel{
flex-wrap: wrap;
}
.tel span{
width: 100%;
}
.section-news{
padding: 30px 0 40px;
}
.section-news dl dt{
width: 100%;
border-bottom: none;
padding-bottom: 0;
justify-content: flex-start;
padding-left: 15px;
}
.section-news dl dd{
width: 100%;
}
} .section-hero {
position: relative;
overflow: hidden;
min-height: 620px;
background: #f5fbf7;
}
.section-hero:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 76, 35, 0.82) 0%, rgba(0, 145, 60, 0.72) 38%, rgba(0, 0, 0, 0.05) 72%);
}
.hero-image {
height: 620px;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-copy {
position: absolute;
z-index: 2;
top: 50%;
left: calc((100% - 1054px) / 2);
transform: translateY(-50%);
max-width: 620px;
color: #fff;
padding: 0 20px;
}
.hero-kicker {
display: inline-block;
padding: 5px 16px;
margin-bottom: 18px;
border: 1px solid rgba(255,255,255,0.8);
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 1.5;
}
.hero-copy h1 {
margin: 0 0 20px;
font-size: 42px;
line-height: 1.45;
font-weight: 700;
letter-spacing: 0;
}
.hero-copy p {
font-size: 18px;
line-height: 2;
font-family: 'Noto Sans JP', sans-serif;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.btn-primary-green,
.btn-outline-green {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 12px 24px;
border-radius: 4px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-decoration: none;
}
.btn-primary-green {
color: #00913C;
background: #fff;
}
.btn-outline-green {
color: #fff;
border: 1px solid rgba(255,255,255,0.9);
}
.section-promise,
.section-service,
.section-solution,
.section-flow {
padding: 70px 0;
}
.section-promise .txt-lg {
text-align: center;
margin-bottom: 36px;
color: #00913C;
font-weight: 700;
}
.promise-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.promise-card,
.service-panel,
.solution-layout > div,
.flow-list > div {
background: #fff;
border: 1px solid rgba(0, 145, 60, 0.18);
border-radius: 8px;
box-shadow: 0 14px 32px rgba(0, 70, 30, 0.08);
}
.promise-card {
padding: 28px;
}
.promise-card span {
display: block;
margin-bottom: 12px;
color: #00913C;
font-size: 15px;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
}
.promise-card h3,
.service-body h3,
.solution-layout h4 {
margin: 0 0 12px;
color: #00913C;
font-weight: 700;
}
.promise-card i,
.service-body h3 i,
.solution-layout h4 i,
.recruit-preview h3 i {
margin-right: 8px;
color: var(--makino-gold);
}
.promise-card p,
.service-body li,
.solution-layout li,
.flow-list p {
font-family: 'Noto Sans JP', sans-serif;
}
.section-service {
background: rgba(0,145,60,0.06);
}
.service-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.service-panel {
overflow: hidden;
}
.service-panel figure {
height: 210px;
margin: 0;
overflow: hidden;
}
.service-panel figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-body {
padding: 26px;
}
.service-label {
margin-bottom: 8px;
color: #7e8f86;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Noto Sans JP', sans-serif;
}
.service-body ul,
.check-list {
padding: 0;
margin: 0;
list-style: none;
}
.service-body li,
.check-list li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
}
.service-body li:before,
.check-list li:before {
content: "";
position: absolute;
top: 0.8em;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: #00913C;
}
.solution-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
.solution-layout > div {
padding: 30px;
}
.section-flow {
background: #f7faf8;
}
.flow-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.flow-list > div {
padding: 22px 16px;
text-align: center;
}
.flow-list span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-bottom: 12px;
border-radius: 50%;
background: #00913C;
color: #fff;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
}
.flow-list p {
margin: 0;
color: #304339;
font-weight: 700;
}
.contact-box {
background: #fff;
padding: 38px 24px;
border: 2px solid #00913C;
border-radius: 8px;
}
.contact-box > p:first-of-type {
color: #00913C;
font-weight: 700;
}
.text-link-green {
display: inline-block;
margin-top: 12px;
color: #00913C;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
text-decoration: underline;
}
.contact-page-link {
margin-top: 10px;
}
.site-page {
font-family: 'Noto Sans JP', sans-serif;
}
.site-page .page-lead {
max-width: 760px;
margin: 0 auto 42px;
text-align: center;
font-size: 18px;
line-height: 2;
color: #304339;
}
.page-section {
margin: 54px 0;
}
.page-visual {
height: 360px;
margin: 0 0 54px;
overflow: hidden;
border-radius: 8px;
border: 1px solid rgba(184, 152, 77, 0.28);
box-shadow: 0 16px 36px rgba(8, 61, 43, 0.09);
}
.page-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page-section h2 {
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 2px solid #00913C;
color: #00913C;
}
.page-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.page-grid.two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-card {
padding: 26px;
border: 1px solid rgba(0, 145, 60, 0.18);
border-radius: 8px;
background: #fff;
box-shadow: 0 12px 28px rgba(0, 70, 30, 0.08);
}
.page-card h3 {
margin: 0 0 12px !important;
color: #00913C !important;
}
.page-card h3 i {
margin-right: 8px;
color: var(--makino-gold);
}
.page-card ul {
padding: 0;
margin: 0;
list-style: none;
}
.page-card li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
}
.page-card li:before {
content: "";
position: absolute;
top: 0.8em;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: #00913C;
}
.company-table {
width: 100%;
border-collapse: collapse;
background: #fff;
}
.company-table th,
.company-table td {
padding: 18px 24px;
border-bottom: 1px solid rgba(0,145,60,0.18);
text-align: left;
vertical-align: top;
}
.company-table th {
width: 150px;
color: #00913C;
background: rgba(0,145,60,0.06);
white-space: nowrap;
}
.page-cta {
margin-top: 50px;
padding: 34px;
text-align: center;
border-radius: 8px;
background: #00913C;
color: #fff;
}
.page-cta h2,
.page-cta p {
color: #fff !important;
}
.page-cta h2 {
margin-top: 0;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.page-cta .btn-primary-green {
margin-top: 12px;
}
.section-recruit-preview {
padding: 64px 0;
background: var(--makino-deep);
}
.recruit-preview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 34px 40px;
border: 1px solid rgba(184, 152, 77, 0.5);
border-radius: 6px;
color: #fff;
}
.recruit-preview figure {
flex: 0 0 280px;
height: 180px;
margin: 0;
overflow: hidden;
border-radius: 6px;
}
.recruit-preview figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.recruit-preview h3 {
margin: 0 0 10px;
color: #fff;
font-size: 26px;
font-weight: 700;
}
.recruit-preview p {
margin-bottom: 0;
font-family: 'Noto Sans JP', sans-serif;
}
.recruit-preview .btn-outline-green {
flex: 0 0 auto;
}
@media (max-width: 1100px) {
.hero-copy {
left: 20px;
}
}
@media (max-width: 991px) {
.main-menu li.contact_menu a {
height: auto;
text-align: center;
padding: 12px 10px;
background-position: left 16px center;
}
.section-hero,
.hero-image {
min-height: 560px;
height: 560px;
}
.hero-copy h1 {
font-size: 32px;
}
.promise-grid,
.service-columns,
.solution-layout,
.page-grid,
.page-grid.two {
grid-template-columns: 1fr;
}
.flow-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.recruit-preview {
align-items: flex-start;
flex-direction: column;
}
.recruit-preview figure {
width: 100%;
flex-basis: auto;
}
}
@media (max-width: 575px) {
.section-hero,
.hero-image {
min-height: 600px;
height: 600px;
}
.section-hero:after {
background: rgba(0, 76, 35, 0.78);
}
.hero-copy {
left: 0;
right: 0;
}
.hero-copy h1 {
font-size: 26px;
}
.hero-copy p {
font-size: 15px;
line-height: 1.8;
}
.hero-actions a {
width: 100%;
}
.section-promise,
.section-service,
.section-solution,
.section-flow {
padding: 46px 0;
}
.flow-list {
grid-template-columns: 1fr;
}
.company-table th,
.company-table td {
display: block;
width: 100%;
}
.page-visual {
height: 240px;
}
} :root {
--makino-green: #006b35;
--makino-deep: #083d2b;
--makino-gold: #b8984d;
--makino-ivory: #fbfaf5;
--makino-ink: #27342f;
}
body {
color: var(--makino-ink);
background: var(--makino-ivory);
}
.logo a {
color: var(--makino-deep);
}
.main-menu {
column-gap: 42px;
}
.main-menu li a {
border-bottom: 1px solid rgba(184, 152, 77, 0.65);
}
.main-menu li a .txt-jp {
color: var(--makino-ink);
}
.main-menu li a .txt-en,
.title-section .txt-en,
.service-label {
color: var(--makino-gold);
}
.main-menu li.contact_menu a {
background-color: var(--makino-deep);
}
.section-hero {
background: var(--makino-deep);
}
.section-hero:after {
background:
linear-gradient(90deg, rgba(4, 42, 29, 0.92) 0%, rgba(8, 61, 43, 0.78) 42%, rgba(8, 61, 43, 0.18) 74%),
linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.18));
}
.hero-copy {
max-width: 690px;
}
.hero-kicker {
border-color: rgba(184, 152, 77, 0.88);
color: #f3e6c3;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero-copy h1 {
font-size: 48px;
line-height: 1.35;
font-family: 'Noto Serif JP', serif;
text-shadow: 0 2px 18px rgba(0,0,0,0.22);
}
.hero-copy p {
max-width: 600px;
}
.btn-primary-green {
color: var(--makino-deep);
background: #fff;
border: 1px solid rgba(184, 152, 77, 0.75);
}
.btn-outline-green {
color: #fff;
border-color: rgba(184, 152, 77, 0.9);
}
.btn-primary-green:hover,
.btn-outline-green:hover {
color: #fff;
background: var(--makino-gold);
border-color: var(--makino-gold);
text-decoration: none;
}
.title-section {
border-bottom-color: var(--makino-gold);
}
.title-section .txt-jp {
color: var(--makino-deep);
letter-spacing: 0.2em;
padding-left: 0.2em;
}
.section-promise,
.section-solution {
background: var(--makino-ivory);
}
.section-service,
.section-flow,
.section-about {
background: #f2f7f1;
}
.section-promise .txt-lg,
.promise-card span,
.promise-card h3,
.service-body h3,
.solution-layout h4,
.flow-list p,
.title-box,
#main_content h1.title-page,
#main_content h2,
#main_content h3,
.page-card h3,
.page-section h2,
.company-table th,
.contact-box > p:first-of-type,
.text-link-green {
color: var(--makino-deep) !important;
}
.promise-card,
.service-panel,
.solution-layout > div,
.flow-list > div,
.page-card {
border-color: rgba(184, 152, 77, 0.28);
border-radius: 6px;
box-shadow: 0 16px 36px rgba(8, 61, 43, 0.09);
}
.service-panel figure img {
filter: saturate(0.88) contrast(1.04);
}
.service-body li:before,
.check-list li:before,
.page-card li:before,
.section-about .lists-person span:before,
.flow-list span {
background: var(--makino-gold);
}
.flow-list span {
color: #fff;
}
.contact-box {
border-color: var(--makino-gold);
background: #fffdf8;
}
.tel span {
color: var(--makino-deep);
}
footer .content-footer {
background-color: var(--makino-deep);
}
footer .copyright {
background-color: #062f22;
}
@media (max-width: 991px) {
.hero-copy h1 {
font-size: 34px;
}
}
@media (max-width: 575px) {
.hero-copy h1 {
font-size: 29px;
}
.title-section .txt-jp {
letter-spacing: 0.12em;
padding-left: 0.12em;
}
} .logo.logo-brand a {
display: inline-flex;
align-items: center;
gap: 12px;
letter-spacing: 0;
}
.logo.logo-brand img {
width: 58px;
max-width: none;
height: auto;
display: block;
}
.logo.logo-brand .brand-name {
display: inline-flex;
align-items: baseline;
gap: 8px;
margin-left: 0;
color: var(--makino-deep);
font-size: 30px;
line-height: 1;
font-weight: 700;
font-family: 'Noto Serif JP', serif;
letter-spacing: 0.05em;
}
.logo.logo-brand .brand-name small {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.08em;
}
.logo.logo-brand.white .brand-name {
color: #fff;
}
.logo.logo-brand.white img {
width: 64px;
}
.logo-brand-center {
margin-bottom: 22px;
}
.logo-brand-center a {
justify-content: center;
}
.main-menu {
column-gap: 28px;
}
@media (min-width:1024px) and (max-width:1280px) {
body .header .logo.logo-brand {
left: 24px;
width: 230px;
}
.logo.logo-brand img {
width: 46px;
}
.logo.logo-brand .brand-name {
font-size: 24px;
}
.logo.logo-brand .brand-name small {
font-size: 12px;
}
.main-menu {
column-gap: 20px;
}
}
@media (max-width: 991px) {
.logo.logo-brand {
padding-left: 16px;
}
.logo.logo-brand img {
width: 42px;
}
.logo.logo-brand .brand-name {
font-size: 24px;
}
.logo.logo-brand .brand-name small {
font-size: 12px;
}
}
@media (max-width: 575px) {
.logo.logo-brand img {
width: 36px;
}
.logo.logo-brand .brand-name {
font-size: 21px;
}
.logo.logo-brand .brand-name small {
font-size: 11px;
}
} .section-achievements-preview {
padding: 70px 0;
background: #fffdf8;
}
.achievements-preview {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
gap: 28px;
align-items: stretch;
}
.achievements-preview > div:first-child,
.retail-store-box {
background: #fff;
border: 1px solid rgba(184, 152, 77, 0.28);
border-radius: 6px;
box-shadow: 0 16px 36px rgba(8, 61, 43, 0.09);
}
.achievements-preview > div:first-child {
padding: 34px 36px;
border-left: 4px solid var(--makino-gold);
}
.retail-store-box {
padding: 30px;
}
.achievements-preview h3,
.retail-store-box h4 {
margin: 0 0 14px;
color: var(--makino-deep);
font-weight: 700;
}
.achievements-preview h3 i,
.retail-store-box h4 i {
margin-right: 8px;
color: var(--makino-gold);
}
.achievements-preview p,
.retail-store-box li,
.achievement-note {
font-family: 'Noto Sans JP', sans-serif;
}
.achievements-preview p,
.achievement-note {
line-height: 1.9;
}
.retail-store-box ul {
padding: 0;
margin: 0;
list-style: none;
}
.retail-store-box li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
font-weight: 700;
color: var(--makino-ink);
}
.retail-store-box li:before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--makino-gold);
}
.achievement-note {
margin-bottom: 18px;
color: #4f5e58;
}
.achievement-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid rgba(184, 152, 77, 0.28);
border-radius: 6px;
box-shadow: 0 12px 28px rgba(0, 70, 30, 0.08);
}
.achievement-table th,
.achievement-table td {
padding: 16px 18px;
border: 1px solid rgba(0,145,60,0.16);
text-align: left;
vertical-align: top;
}
.achievement-table th {
color: var(--makino-deep);
background: rgba(184, 152, 77, 0.14);
font-weight: 700;
}
.main-menu {
column-gap: 20px;
}
.main-menu li a .txt-jp {
font-size: 16px;
letter-spacing: 1px;
}
.main-menu li a .txt-en {
font-size: 14px;
}
.main-menu li.contact_menu a {
padding-left: 46px;
}
@media (min-width:1024px) and (max-width:1280px) {
.main-menu {
column-gap: 14px;
}
.main-menu li a .txt-jp {
font-size: 14px;
}
.main-menu li a .txt-en {
font-size: 11px;
}
}
@media (max-width: 991px) {
.achievements-preview {
grid-template-columns: 1fr;
}
}
@media (max-width: 575px) {
.achievement-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.achievements-preview > div:first-child,
.retail-store-box {
padding: 24px;
}
} :root {
--makino-green: #0b7a3b;
--makino-deep: #164332;
--makino-gold: #9a8554;
--makino-ivory: #f7faf6;
--makino-ink: #26342f;
--makino-paper: #ffffff;
--makino-line: rgba(22, 67, 50, 0.14);
}
body {
background: #fff;
}
header {
background: rgba(255,255,255,0.96);
border-bottom: 1px solid rgba(22, 67, 50, 0.08);
}
.section-hero {
min-height: 600px;
background: #edf5ef;
}
.section-hero:after {
background:
linear-gradient(90deg, rgba(20, 70, 48, 0.82) 0%, rgba(20, 70, 48, 0.62) 46%, rgba(20, 70, 48, 0.10) 78%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(22,67,50,0.18));
}
.hero-image {
height: 600px;
}
.hero-image img {
filter: saturate(0.92) contrast(1.02) brightness(1.04);
}
.hero-copy {
max-width: 660px;
}
.hero-kicker {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.72);
color: #fff;
text-transform: none;
letter-spacing: 0.04em;
}
.hero-copy h1 {
font-size: 42px;
line-height: 1.42;
text-shadow: 0 1px 10px rgba(0,0,0,0.16);
}
.hero-copy p {
max-width: 620px;
line-height: 1.9;
}
.hero-points {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 0;
margin: 18px 0 0;
list-style: none;
}
.hero-points li {
padding: 6px 14px;
border: 1px solid rgba(255,255,255,0.68);
border-radius: 999px;
background: rgba(255,255,255,0.12);
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
font-weight: 700;
}
.btn-primary-green {
color: #fff;
background: var(--makino-green);
border-color: var(--makino-green);
}
.btn-outline-green {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.84);
}
.btn-primary-green:hover,
.btn-outline-green:hover {
background: var(--makino-deep);
border-color: var(--makino-deep);
}
.section-promise,
.section-service,
.section-solution,
.section-flow,
.section-achievements-preview {
padding: 64px 0;
}
.section-promise,
.section-solution,
.section-achievements-preview {
background: #fff;
}
.section-service,
.section-flow,
.section-about {
background: var(--makino-ivory);
}
.title-section {
border-bottom-color: rgba(154, 133, 84, 0.42);
}
.title-section .txt-jp {
color: var(--makino-deep);
letter-spacing: 0.12em;
padding-left: 0.12em;
}
.promise-card,
.service-panel,
.solution-layout > div,
.flow-list > div,
.page-card,
.retail-store-box,
.achievements-preview > div:first-child,
.contact-box {
border-color: var(--makino-line);
box-shadow: 0 10px 24px rgba(22, 67, 50, 0.06);
}
.promise-card span,
.main-menu li a .txt-en,
.title-section .txt-en,
.service-label {
color: #7f704d;
}
.promise-card i,
.service-body h3 i,
.solution-layout h4 i,
.recruit-preview h3 i,
.achievements-preview h3 i,
.retail-store-box h4 i,
.page-card h3 i {
color: #8f7a46;
}
.service-body li:before,
.check-list li:before,
.page-card li:before,
.section-about .lists-person span:before,
.flow-list span,
.retail-store-box li:before {
background: var(--makino-green);
}
.recruit-preview {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.28);
}
.section-recruit-preview {
background: var(--makino-deep);
}
.page-visual {
border-color: var(--makino-line);
box-shadow: 0 12px 26px rgba(22, 67, 50, 0.07);
}
.page-cta {
background: var(--makino-green);
}
.contact-box {
background: #fff;
}
footer .content-footer {
background-color: var(--makino-deep);
}
footer .copyright {
background-color: #113827;
}
@media (max-width: 575px) {
.hero-copy h1 {
font-size: 28px;
}
.hero-points li {
font-size: 12px;
}
} :root {
--makino-green: #16965f;
--makino-deep: #18533d;
--makino-soft: #eef8ef;
--makino-soft-2: #f8fcf7;
--makino-yellow: #f4d56b;
--makino-ink: #24352d;
--makino-muted: #61736a;
--makino-line: rgba(24, 83, 61, 0.12);
}
body {
font-family: 'Noto Sans JP', sans-serif;
color: var(--makino-ink);
background:
linear-gradient(180deg, #fbfefb 0%, #ffffff 42%, #f7fcf8 100%);
}
header {
padding: 16px 0;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(24,83,61,0.08);
}
.logo.logo-brand .brand-name {
font-family: 'Noto Sans JP', sans-serif;
color: var(--makino-deep);
letter-spacing: 0.02em;
}
.main-menu li a {
padding: 8px 3px;
border-bottom: 0;
}
.main-menu li a .txt-jp {
color: var(--makino-deep);
font-size: 15px;
letter-spacing: 0;
}
.main-menu li a .txt-en {
display: none;
}
.main-menu li.contact_menu a {
height: auto;
min-height: 44px;
padding: 10px 18px;
border-radius: 999px;
background: var(--makino-green);
box-shadow: 0 10px 22px rgba(22,150,95,0.20);
text-align: center;
}
.main-menu li.contact_menu a:before {
display: none;
}
.section-hero {
min-height: 650px;
background: var(--makino-soft);
border-bottom-left-radius: 42px;
border-bottom-right-radius: 42px;
}
.section-hero:after {
background:
linear-gradient(90deg, rgba(248,252,247,0.96) 0%, rgba(248,252,247,0.90) 35%, rgba(248,252,247,0.30) 68%, rgba(248,252,247,0.06) 100%);
}
.hero-image {
height: 650px;
}
.hero-image img {
object-position: center center;
filter: saturate(0.94) contrast(1.02) brightness(1.04);
}
.hero-copy {
max-width: 650px;
color: var(--makino-ink);
}
.hero-kicker {
padding: 8px 18px;
border: 1px solid rgba(22,150,95,0.18);
border-radius: 999px;
background: #fff;
color: var(--makino-green);
box-shadow: 0 8px 22px rgba(24,83,61,0.08);
font-weight: 700;
}
.hero-copy h1 {
max-width: 620px;
color: var(--makino-deep);
font-family: 'Noto Sans JP', sans-serif;
font-size: 48px;
line-height: 1.32;
letter-spacing: 0;
text-shadow: none;
}
.hero-copy p {
color: var(--makino-muted);
font-size: 17px;
line-height: 2;
}
.hero-points {
gap: 10px;
margin-top: 22px;
}
.hero-points li {
padding: 8px 14px;
border: 1px solid rgba(22,150,95,0.16);
border-radius: 999px;
background: #fff;
color: var(--makino-deep);
box-shadow: 0 8px 18px rgba(24,83,61,0.06);
}
.hero-actions {
margin-top: 30px;
}
.btn-primary-green,
.btn-outline-green {
min-height: 52px;
padding: 13px 24px;
border-radius: 999px;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary-green {
background: var(--makino-green);
border-color: var(--makino-green);
box-shadow: 0 12px 24px rgba(22,150,95,0.22);
}
.btn-outline-green {
color: var(--makino-green);
background: #fff;
border-color: rgba(22,150,95,0.24);
}
.btn-primary-green:hover,
.btn-outline-green:hover {
transform: translateY(-2px);
color: #fff;
background: var(--makino-deep);
border-color: var(--makino-deep);
box-shadow: 0 12px 28px rgba(24,83,61,0.20);
}
.section-promise,
.section-service,
.section-solution,
.section-flow,
.section-achievements-preview,
.section-recruit-preview,
.section-history {
padding: 82px 0;
}
.section-promise,
.section-solution,
.section-achievements-preview,
.section-history {
background: #fff;
}
.section-service,
.section-flow,
.section-about {
background: var(--makino-soft-2);
}
.title-section {
margin-bottom: 38px;
border-bottom: 0;
}
.title-section .txt-jp {
color: var(--makino-deep);
font-family: 'Noto Sans JP', sans-serif;
font-size: 32px;
letter-spacing: 0;
padding-left: 0;
}
.title-section .txt-en,
.service-label {
color: var(--makino-green);
font-weight: 700;
}
.section-promise .txt-lg {
max-width: 760px;
margin: 0 auto 38px;
color: var(--makino-deep);
font-size: 21px;
line-height: 2;
}
.promise-card,
.service-panel,
.solution-layout > div,
.flow-list > div,
.page-card,
.retail-store-box,
.achievements-preview > div:first-child,
.contact-box,
.history-steps > div {
border: 1px solid var(--makino-line);
border-radius: 22px;
box-shadow: 0 14px 34px rgba(24,83,61,0.07);
}
.promise-card,
.solution-layout > div,
.flow-list > div,
.page-card,
.retail-store-box,
.achievements-preview > div:first-child,
.history-steps > div {
background: #fff;
}
.promise-card {
padding: 30px;
}
.promise-card span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--makino-soft);
color: var(--makino-green);
}
.promise-card h3,
.service-body h3,
.solution-layout h4,
.achievements-preview h3,
.retail-store-box h4,
.page-card h3 {
color: var(--makino-deep) !important;
}
.service-panel {
overflow: hidden;
}
.service-panel figure {
height: 230px;
}
.service-body {
padding: 28px;
}
.service-body li:before,
.check-list li:before,
.page-card li:before,
.section-about .lists-person span:before,
.retail-store-box li:before {
background: var(--makino-green);
}
.flow-list > div {
padding: 26px 16px;
}
.flow-list span {
background: var(--makino-yellow);
color: var(--makino-deep);
}
.section-recruit-preview {
background: var(--makino-green);
border-top-left-radius: 42px;
border-top-right-radius: 42px;
}
.recruit-preview {
border: 1px solid rgba(255,255,255,0.30);
border-radius: 24px;
background: rgba(255,255,255,0.12);
}
.achievements-preview > div:first-child {
border-left: 0;
}
.contact-box {
background: #fff;
}
.tel span {
color: var(--makino-green);
}
.page-visual,
.page-cta {
border-radius: 24px;
}
.page-cta {
background: var(--makino-green);
}
footer .content-footer {
background: var(--makino-green);
}
footer .copyright {
background: var(--makino-deep);
}
.section-history {
position: relative;
overflow: hidden;
}
.section-history:before {
content: "";
position: absolute;
right: -120px;
top: 36px;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(22,150,95,0.08);
}
.history-intro {
position: relative;
max-width: 760px;
margin: 0 auto 34px;
text-align: center;
}
.history-intro h3 {
margin: 0 0 14px;
color: var(--makino-deep);
font-size: 32px;
line-height: 1.5;
font-weight: 700;
}
.history-intro p {
color: var(--makino-muted);
font-size: 17px;
line-height: 2;
}
.history-steps {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.history-steps > div {
padding: 28px;
}
.history-steps span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 50px;
margin-bottom: 16px;
border-radius: 50%;
background: var(--makino-yellow);
color: var(--makino-deep);
font-weight: 700;
}
.history-steps h4 {
margin: 0 0 10px;
color: var(--makino-deep);
font-size: 20px;
font-weight: 700;
}
.history-steps p {
margin: 0;
color: var(--makino-muted);
line-height: 1.9;
}
.page-history {
margin-top: 18px;
}
.company-history-layout {
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
gap: 28px;
align-items: start;
}
.history-photo {
margin: 0;
padding: 14px;
border: 1px solid var(--makino-line);
border-radius: 24px;
background: #fff;
box-shadow: 0 14px 34px rgba(24,83,61,0.07);
}
.history-photo img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
.company-history-section .achievement-note {
margin-top: 2px;
margin-bottom: 20px;
color: var(--makino-muted);
font-size: 16px;
}
.company-history-section .history-steps {
grid-template-columns: 1fr;
gap: 16px;
}
.company-history-section .history-steps > div {
padding: 22px;
}
.company-brochure-section {
overflow: hidden;
}
.brochure-preview {
margin: 22px 0 0;
padding: 14px;
border: 1px solid var(--makino-line);
border-radius: 24px;
background: #fff;
box-shadow: 0 18px 42px rgba(24,83,61,0.09);
}
.brochure-preview img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
.company-timeline {
position: relative;
display: grid;
gap: 8px;
width: min(1240px, calc(100vw - 28px));
margin: 24px 50% 0;
padding-left: 30px;
transform: translateX(-50%);
}
.company-timeline:before {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
width: 2px;
border-radius: 2px;
background: var(--makino-line);
}
.company-timeline > div {
position: relative;
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
gap: 26px;
padding: 16px 8px 16px 20px;
border-bottom: 1px solid rgba(22,150,95,0.14);
}
.company-timeline > div:before {
content: "";
position: absolute;
top: 26px;
left: -25px;
width: 12px;
height: 12px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--makino-green);
box-shadow: 0 0 0 1px var(--makino-green);
}
.company-timeline time {
display: block;
color: var(--makino-green);
font-weight: 700;
line-height: 1.6;
white-space: nowrap;
}
.company-timeline time span,
.company-timeline time small {
display: block;
}
.company-timeline time span {
font-size: 22px;
}
.company-timeline time small {
margin-top: 2px;
color: var(--makino-muted);
font-size: 13px;
font-weight: 600;
}
.company-timeline p {
margin: 0;
color: var(--makino-text);
font-size: 17px;
line-height: 1.8;
}
@media (max-width: 991px) {
.section-hero,
.hero-image {
min-height: 620px;
height: 620px;
}
.section-hero:after {
background: rgba(248,252,247,0.90);
}
.hero-copy h1 {
font-size: 36px;
}
.main-menu li.contact_menu a {
border-radius: 0;
box-shadow: none;
}
.history-steps {
grid-template-columns: 1fr;
}
.company-history-layout {
grid-template-columns: 1fr;
}
.brochure-preview {
padding: 10px;
border-radius: 18px;
}
.brochure-preview img {
border-radius: 12px;
}
.company-timeline {
width: min(1000px, calc(100vw - 28px));
margin: 24px 50% 0;
padding-left: 26px;
transform: translateX(-50%);
}
.company-timeline > div {
grid-template-columns: 104px minmax(0, 1fr);
gap: 20px;
padding: 14px 0 14px 16px;
}
.company-timeline time span {
font-size: 18px;
}
.company-timeline p {
font-size: 15px;
line-height: 1.75;
}
}
@media (max-width: 575px) {
.section-hero,
.hero-image {
min-height: 660px;
height: 660px;
}
.hero-copy h1 {
font-size: 30px;
}
.section-promise,
.section-service,
.section-solution,
.section-flow,
.section-achievements-preview,
.section-recruit-preview,
.section-history {
padding: 56px 0;
}
.history-intro h3 {
font-size: 25px;
}
} .company-timeline-section {
overflow: visible;
}
.timeline-scroll {
width: min(1040px, 100%);
margin: 24px auto 0;
transform: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.company-timeline-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
background: #fff;
border-top: 1px solid rgba(22,150,95,0.18);
}
.company-timeline-table th,
.company-timeline-table td {
border-bottom: 1px solid rgba(22,150,95,0.18);
vertical-align: middle;
}
.company-timeline-table th {
width: 136px;
padding: 18px 18px 18px 0;
color: var(--makino-green);
font-weight: 700;
text-align: left;
white-space: nowrap;
}
.company-timeline-table th span,
.company-timeline-table th small {
display: block;
}
.company-timeline-table th span {
font-size: 22px;
line-height: 1.25;
}
.company-timeline-table th small {
margin-top: 4px;
color: var(--makino-muted);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.company-timeline-table td {
padding: 18px 0 18px 24px;
color: var(--makino-text);
font-size: 16px;
line-height: 1.8;
white-space: nowrap;
}
@media (max-width: 575px) {
.timeline-scroll {
width: 100%;
}
.company-timeline-table th {
width: 118px;
}
.company-timeline-table th span {
font-size: 18px;
}
.company-timeline-table td {
font-size: 15px;
}
} .company-page {
max-width: 1120px;
margin: 0 auto;
}
.company-page .page-lead {
max-width: 820px;
margin-bottom: 52px;
}
.company-page .page-section {
margin: 76px 0;
}
.company-page .page-section > h2 {
border-bottom: 0;
}
.company-section-title {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 34px;
align-items: end;
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(22,150,95,0.22);
}
.company-section-title span {
color: rgba(22,150,95,0.82);
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
}
.company-section-title h2 {
margin: 0;
padding: 0;
border: 0;
color: var(--makino-deep);
font-size: 30px;
line-height: 1.45;
font-weight: 700;
}
.company-message-section {
padding-top: 8px;
}
.company-message-layout {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.76fr);
gap: 48px;
align-items: center;
}
.company-message-layout h3 {
margin: 0 0 22px;
color: var(--makino-deep);
font-size: 28px;
line-height: 1.65;
font-weight: 700;
}
.company-message-layout p {
margin: 0 0 14px;
color: var(--makino-text);
font-size: 16px;
line-height: 2;
}
.company-message-layout .message-sign {
margin-top: 22px;
text-align: right;
font-weight: 700;
}
.company-message-layout figure {
margin: 0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 16px 38px rgba(24,83,61,0.09);
}
.company-message-layout img {
display: block;
width: 100%;
height: 360px;
object-fit: cover;
}
.company-page .history-photo,
.company-page .brochure-preview {
border-radius: 18px;
box-shadow: 0 16px 38px rgba(24,83,61,0.08);
}
.company-page .history-photo img,
.company-page .brochure-preview img {
border-radius: 12px;
}
.company-overview-section .company-table {
border-top: 1px solid rgba(22,150,95,0.22);
}
.company-overview-section .company-table th,
.company-overview-section .company-table td {
background: #fff;
border-bottom: 1px solid rgba(22,150,95,0.18);
}
.company-overview-section .company-table th {
width: 170px;
color: var(--makino-green);
}
.company-business-list,
.supplier-list {
padding: 0;
margin: 0;
list-style: none;
}
.company-business-list li {
margin-bottom: 8px;
line-height: 1.9;
}
.company-business-list li:last-child {
margin-bottom: 0;
}
.company-business-list strong {
color: var(--makino-green);
}
.supplier-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 22px;
}
.supplier-list li {
position: relative;
padding-left: 18px;
line-height: 1.8;
}
.supplier-list li:before {
content: "";
position: absolute;
top: 0.75em;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--makino-green);
}
@media (max-width: 991px) {
.company-page {
max-width: 100%;
}
.company-section-title {
grid-template-columns: 1fr;
gap: 6px;
}
.company-message-layout {
grid-template-columns: 1fr;
gap: 28px;
}
.company-message-layout img {
height: 280px;
}
.supplier-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 575px) {
.company-page .page-section {
margin: 58px 0;
}
.company-section-title h2 {
font-size: 25px;
}
.company-message-layout h3 {
font-size: 23px;
}
} .section-hero {
isolation: isolate;
}
.section-hero:after {
background: linear-gradient(90deg, rgba(248,252,247,0.94) 0%, rgba(248,252,247,0.88) 46%, rgba(248,252,247,0.18) 76%);
}
.hero-copy {
color: var(--makino-deep);
}
.hero-kicker {
border-color: rgba(22,150,95,0.28);
color: var(--makino-green);
background: rgba(255,255,255,0.72);
border-radius: 999px;
}
.hero-copy h1 {
color: var(--makino-deep);
}
.hero-copy p {
color: #304339;
}
.hero-points li {
background: rgba(255,255,255,0.78);
border-color: rgba(22,150,95,0.18);
box-shadow: 0 10px 24px rgba(24,83,61,0.06);
}
.hero-actions .btn-primary-green {
color: #fff;
background: var(--makino-green);
box-shadow: 0 14px 30px rgba(22,150,95,0.22);
}
.hero-actions .btn-outline-green {
color: var(--makino-green);
background: rgba(255,255,255,0.72);
border-color: rgba(22,150,95,0.28);
}
.hero-illustration {
position: absolute;
z-index: 2;
right: max(32px, calc((100% - 1054px) / 2));
top: 50%;
width: min(430px, 38vw);
transform: translateY(-50%);
animation: makinoFadeUp 900ms ease both 180ms;
}
.hero-illustration-image {
margin: 0;
overflow: hidden;
border: 1px solid rgba(22,150,95,0.18);
border-radius: 24px;
background: rgba(255,255,255,0.88);
box-shadow: 0 24px 60px rgba(24,83,61,0.13);
backdrop-filter: blur(10px);
}
.hero-illustration-image img {
display: block;
width: 100%;
height: auto;
}
.floating-ticket {
position: absolute;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
border: 1px solid rgba(22,150,95,0.16);
border-radius: 999px;
color: var(--makino-deep);
background: #fff;
box-shadow: 0 14px 30px rgba(24,83,61,0.10);
font-size: 13px;
font-weight: 700;
animation: makinoFloat 4.8s ease-in-out infinite;
}
.floating-ticket i {
color: var(--makino-green);
}
.ticket-1 {
left: -34px;
top: 60px;
}
.ticket-2 {
right: -22px;
bottom: 52px;
animation-delay: 1.1s;
}
.section-consult {
padding: 76px 0;
background: #fff;
}
.sg-heading {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 34px;
align-items: end;
margin-bottom: 30px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(22,150,95,0.18);
}
.sg-heading span {
color: rgba(22,150,95,0.82);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
}
.sg-heading h2 {
margin: 0;
color: var(--makino-deep);
font-size: 30px;
line-height: 1.55;
font-weight: 700;
}
.consult-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.consult-card {
position: relative;
padding: 30px;
border: 1px solid rgba(22,150,95,0.16);
border-radius: 22px;
background: #f8fcf7;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.consult-card:hover {
transform: translateY(-6px);
border-color: rgba(22,150,95,0.32);
box-shadow: 0 20px 44px rgba(24,83,61,0.10);
}
.consult-illust {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 18px;
border-radius: 18px;
color: #fff;
background: var(--makino-green);
box-shadow: 0 12px 26px rgba(22,150,95,0.20);
}
.consult-illust i {
font-size: 24px;
}
.consult-card h3 {
margin: 0 0 10px;
color: var(--makino-deep);
font-size: 20px;
font-weight: 700;
}
.consult-card p {
margin: 0;
color: var(--makino-muted);
line-height: 1.9;
}
.consult-card ul {
padding: 0;
margin: 0;
list-style: none;
}
.consult-card li {
position: relative;
padding-left: 18px;
margin-bottom: 9px;
color: var(--makino-text);
font-size: 14px;
line-height: 1.8;
}
.consult-card li:before {
content: "";
position: absolute;
top: 0.72em;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--makino-green);
}
.section-service {
background: #f8fcf7;
}
.service-panel {
border-radius: 22px;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.service-panel:hover {
transform: translateY(-6px);
box-shadow: 0 22px 48px rgba(24,83,61,0.12);
}
.service-panel figure.service-illustration {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 210px;
color: var(--makino-green);
background:
linear-gradient(135deg, rgba(22,150,95,0.08), rgba(255,255,255,0.72)),
repeating-linear-gradient(90deg, rgba(22,150,95,0.08) 0 1px, transparent 1px 30px);
}
.service-illustration i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
margin-bottom: 14px;
border-radius: 24px;
color: #fff;
background: var(--makino-green);
box-shadow: 0 14px 30px rgba(22,150,95,0.20);
font-size: 32px;
}
.service-illustration span {
color: var(--makino-deep);
font-weight: 700;
letter-spacing: 0.12em;
}
@keyframes makinoFadeUp {
from {
opacity: 0;
transform: translateY(calc(-50% + 24px));
}
to {
opacity: 1;
transform: translateY(-50%);
}
}
@keyframes makinoFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-illustration,
.floating-ticket,
.consult-card,
.service-panel {
animation: none;
transition: none;
}
}
@media (max-width: 991px) {
.hero-illustration {
display: none;
}
.sg-heading {
grid-template-columns: 1fr;
gap: 8px;
}
.consult-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 575px) {
.section-consult {
padding: 56px 0;
}
.sg-heading h2 {
font-size: 24px;
}
} .makino-home {
--mh-green: #0d5039;
--mh-deep: #073629;
--mh-mint: #e9f3ee;
--mh-cream: #f7f5ed;
--mh-yellow: #eec84f;
--mh-ink: #20342d;
color: var(--mh-ink);
font-family: "Noto Sans JP", sans-serif;
overflow: hidden;
}
.makino-home *, .makino-home *:before, .makino-home *:after { box-sizing: border-box; }
.makino-home img { display: block; max-width: 100%; }
.makino-home h1, .makino-home h2, .makino-home h3, .makino-home p { margin-top: 0; }
.mh-eyebrow, .mh-heading > p { color: var(--mh-green); font-size: 12px; font-weight: 700; letter-spacing: .2em; margin-bottom: 13px; text-transform: uppercase; }
.mh-hero { background: var(--mh-cream); min-height: 760px; overflow: hidden; position: relative; }
.mh-hero:before { background: var(--mh-green); content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 27%; }
.mh-hero__photos { height: 100%; left: 47%; position: absolute; right: 3.5%; top: 0; }
.mh-hero__photo { margin: 0; overflow: hidden; position: absolute; }
.mh-hero__photo img { height: 100%; object-fit: cover; width: 100%; }
.mh-hero__photo--school { height: 58%; left: 0; top: 8%; width: 67%; z-index: 2; }
.mh-hero__photo--business { bottom: 6%; height: 45%; right: 0; width: 53%; z-index: 3; }
.mh-hero__copy { left: max(calc((100vw - 1170px) / 2), 6vw); max-width: 600px; position: absolute; top: 50%; transform: translateY(-50%); width: 43%; z-index: 5; }
.mh-hero h1 { color: var(--mh-deep); font-family: "Noto Serif JP", serif; font-size: clamp(43px, 4.8vw, 72px); font-weight: 700; letter-spacing: .04em; line-height: 1.32; margin-bottom: 28px; }
.mh-hero h1 em, .mh-solution h2 em { color: var(--mh-green); font-style: normal; position: relative; z-index: 1; }
.mh-hero h1 em:after, .mh-solution h2 em:after { background: var(--mh-yellow); bottom: .08em; content: ""; height: .22em; left: -.03em; position: absolute; right: -.03em; z-index: -1; }
.mh-hero__lead { font-size: 15px; line-height: 2; margin-bottom: 30px; max-width: 520px; }
.mh-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mh-button { align-items: center; border: 1px solid var(--mh-green); display: inline-flex; font-size: 14px; font-weight: 700; justify-content: center; min-height: 58px; padding: 13px 25px; transition: .2s; }
.mh-button:hover, .mh-button:focus { text-decoration: none; transform: translateY(-2px); }
.mh-button--solid { background: var(--mh-green); color: #fff; }
.mh-button--solid:hover, .mh-button--solid:focus { background: var(--mh-deep); color: #fff; }
.mh-button--outline { background: #fff; color: var(--mh-green); }
.mh-button--outline:hover, .mh-button--outline:focus { background: var(--mh-mint); color: var(--mh-deep); }
.mh-scroll { bottom: 24px; color: var(--mh-green); font-size: 10px; left: 30px; letter-spacing: .16em; position: absolute; writing-mode: vertical-rl; z-index: 5; }
.mh-scroll:hover { color: var(--mh-deep); text-decoration: none; }
.mh-scroll i { margin-top: 8px; }
.mh-heading { margin-bottom: 45px; }
.mh-heading--center { margin-left: auto; margin-right: auto; max-width: 800px; text-align: center; }
.mh-heading h2, .mh-solution h2, .mh-service h2, .mh-works h2, .mh-about h2 { color: var(--mh-deep); font-family: "Noto Serif JP", serif; font-size: clamp(31px, 3.5vw, 48px); font-weight: 700; line-height: 1.55; margin-bottom: 0; }
.mh-concerns { background: #fff; padding: 105px 0 120px; }
.mh-concern-grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: 1000px; }
.mh-concern-grid article { background: var(--mh-cream); border-top: 5px solid var(--mh-green); padding: 38px 42px; }
.mh-concern-grid__label { color: var(--mh-green); display: block; font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.mh-concern-grid ul { list-style: none; margin: 0; padding: 0; }
.mh-concern-grid li { border-bottom: 1px solid #d8dfdb; font-size: 14px; line-height: 1.6; padding: 11px 0 11px 28px; position: relative; }
.mh-concern-grid li:before { color: var(--mh-green); content: "\f00c"; font-family: FontAwesome; left: 2px; position: absolute; }
.mh-solution { background: var(--mh-mint); padding: 115px 0; }
.mh-solution .container { align-items: start; display: grid; gap: 9%; grid-template-columns: 45% 46%; }
.mh-solution h2 { font-size: clamp(34px, 4vw, 55px); }
.mh-solution__body > p { font-size: 15px; line-height: 2.1; margin-bottom: 32px; }
.mh-capability-list { display: grid; gap: 0 20px; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; }
.mh-capability-list li { border-bottom: 1px solid #b9cec3; font-weight: 700; padding: 14px 0; }
.mh-capability-list span { color: var(--mh-green); font-size: 10px; letter-spacing: .1em; margin-right: 12px; }
.mh-service { display: grid; grid-template-columns: 50% 50%; min-height: 640px; }
.mh-service--business .mh-service__image { order: 2; }
.mh-service--business .mh-service__content { background: var(--mh-cream); order: 1; }
.mh-service__image img { height: 100%; object-fit: cover; width: 100%; }
.mh-service__content { align-self: stretch; background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 70px max(6vw, 45px); position: relative; }
.mh-service__number { color: #dce9e2; font-family: "Noto Serif JP", serif; font-size: 88px; font-weight: 700; line-height: 1; position: absolute; right: 7%; top: 45px; }
.mh-service h2 { font-size: clamp(34px, 3.4vw, 48px); margin-bottom: 20px; }
.mh-service__intro { font-size: 15px; line-height: 1.9; max-width: 580px; }
.mh-tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 25px 0 35px; padding: 0; }
.mh-tag-list li { background: var(--mh-mint); border-radius: 2px; color: var(--mh-deep); font-size: 13px; font-weight: 700; padding: 9px 13px; }
.mh-link-row { align-items: flex-start; display: flex; flex-direction: column; gap: 14px; }
.mh-business-catalog { align-items: center; background: #fff; border: 1px solid #dbe4df; border-radius: 12px; display: grid; gap: 16px; grid-template-columns: 64px minmax(0, 1fr) auto; margin: 0 0 30px; max-width: 610px; padding: 16px 18px; }
.mh-business-catalog__cover { align-items: center; background: #173f2b; border-radius: 4px 8px 8px 4px; box-shadow: 4px 4px 0 #d8ebc3; color: #fff; display: flex; flex-direction: column; height: 76px; justify-content: center; text-align: center; width: 56px; }
.mh-business-catalog__cover i { color: #bddd9e; font-size: 19px; margin-bottom: 6px; }
.mh-business-catalog__cover small { font-family: Arial, sans-serif; font-size: 7px; font-weight: 700; letter-spacing: .09em; line-height: 1.25; }
.mh-business-catalog__text { display: flex; flex-direction: column; min-width: 0; }
.mh-business-catalog__text > small { color: #1e9c33; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .14em; margin-bottom: 3px; text-transform: uppercase; }
.mh-business-catalog__text > strong { color: #173f2b; font-size: 16px; margin-bottom: 4px; }
.mh-business-catalog__text > span { color: #64736b; font-size: 11px; line-height: 1.55; }
.mh-business-catalog__button { background: #173f2b; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; padding: 11px 15px; white-space: nowrap; }
.mh-business-catalog__button:hover, .mh-business-catalog__button:focus { background: #1e9c33; color: #fff; text-decoration: none; }
.mh-business-catalog__button i { margin-left: 6px; }
.mh-arrow-link { border-bottom: 1px solid var(--mh-green); color: var(--mh-green); display: inline-block; font-size: 14px; font-weight: 700; padding-bottom: 7px; }
.mh-arrow-link i { margin-left: 12px; transition: .2s; }
.mh-arrow-link:hover { color: var(--mh-deep); text-decoration: none; }
.mh-arrow-link:hover i { transform: translateX(5px); }
.mh-print { background: var(--mh-yellow); padding: 115px 0; }
.mh-print .container { display: grid; gap: 35px 7%; grid-template-columns: 42% 51%; }
.mh-print__intro h2 { color: var(--mh-deep); font-family: "Noto Serif JP", serif; font-size: clamp(34px, 3.7vw, 52px); font-weight: 700; line-height: 1.5; margin-bottom: 22px; }
.mh-print__intro > p:not(.mh-eyebrow) { line-height: 2; margin-bottom: 28px; }
.mh-print__visual { align-items: center; display: flex; justify-content: center; min-height: 320px; position: relative; }
.mh-print-shirt { align-items: center; background: var(--mh-green); clip-path: polygon(20% 0, 34% 8%, 66% 8%, 80% 0, 100% 20%, 86% 38%, 76% 31%, 76% 100%, 24% 100%, 24% 31%, 14% 38%, 0 20%); color: #fff; display: flex; flex-direction: column; font-size: 34px; font-weight: 700; height: 270px; justify-content: center; letter-spacing: .08em; transform: rotate(-4deg); width: 285px; }
.mh-print-shirt i { color: var(--mh-yellow); font-size: 42px; margin-bottom: 8px; }
.mh-print-towel { align-items: center; background: #fff; border: 6px solid var(--mh-deep); bottom: 20px; color: var(--mh-green); display: flex; font-size: 15px; font-weight: 700; height: 95px; justify-content: center; letter-spacing: .12em; position: absolute; right: 0; transform: rotate(7deg); width: 250px; }
.mh-print-towel:before, .mh-print-towel:after { border-left: 2px dashed #a7b9b1; bottom: 4px; content: ""; position: absolute; top: 4px; }
.mh-print-towel:before { left: 14px; }
.mh-print-towel:after { right: 14px; }
.mh-print-grid { display: grid; gap: 18px; grid-column: 1 / 3; grid-template-columns: 1fr 1fr; }
.mh-print-grid article { background: #fff; min-height: 240px; padding: 35px 38px 30px 115px; position: relative; }
.mh-print-grid__icon { align-items: center; background: var(--mh-mint); border-radius: 50%; color: var(--mh-green); display: flex; font-size: 28px; height: 58px; justify-content: center; left: 35px; position: absolute; top: 38px; width: 58px; }
.mh-print-grid article > p { color: var(--mh-green); font-size: 10px; font-weight: 700; letter-spacing: .15em; margin-bottom: 5px; text-transform: uppercase; }
.mh-print-grid h3 { color: var(--mh-deep); font-size: 21px; font-weight: 700; margin-bottom: 14px; }
.mh-print-grid ul { list-style: none; margin: 0; padding: 0; }
.mh-print-grid li { font-size: 13px; line-height: 1.65; padding: 4px 0 4px 17px; position: relative; }
.mh-print-grid li:before { color: var(--mh-green); content: "\f00c"; font-family: FontAwesome; font-size: 10px; left: 0; position: absolute; top: 6px; }
.mh-strengths { background: #fff; padding: 110px 0; }
.mh-strength-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); }
.mh-strength-grid article { border-left: 1px solid #cad8d1; min-height: 315px; padding: 28px 45px; }
.mh-strength-grid article:last-child { border-right: 1px solid #cad8d1; }
.mh-strength-grid strong { color: var(--mh-green); display: block; font-family: "Noto Serif JP", serif; font-size: 53px; line-height: 1.2; margin-bottom: 30px; }
.mh-strength-grid strong small { font-family: "Noto Sans JP", sans-serif; font-size: 14px; margin-left: 5px; }
.mh-strength-grid h3 { color: var(--mh-deep); font-size: 19px; font-weight: 700; margin-bottom: 15px; }
.mh-strength-grid p { color: #53655e; font-size: 14px; line-height: 1.9; }
.mh-flow { background: var(--mh-cream); padding: 105px 0; }
.mh-flow-list { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.mh-flow-list li { background: #fff; min-height: 245px; padding: 27px; position: relative; }
.mh-flow-list li:after { color: var(--mh-green); content: "\f105"; font-family: FontAwesome; font-size: 27px; position: absolute; right: -7px; top: 50%; z-index: 2; }
.mh-flow-list li:last-child:after { display: none; }
.mh-flow-list span { color: #9ab7a9; font-size: 11px; letter-spacing: .1em; }
.mh-flow-list i { color: var(--mh-green); display: block; font-size: 35px; margin: 22px 0; }
.mh-flow-list h3 { color: var(--mh-deep); font-size: 18px; font-weight: 700; }
.mh-flow-list p { color: #66756f; font-size: 13px; line-height: 1.7; }
.mh-works { background: var(--mh-green); color: #fff; padding: 110px 0; }
.mh-works__inner { align-items: center; display: grid; gap: 8%; grid-template-columns: 55% 37%; }
.mh-works .mh-eyebrow { color: var(--mh-yellow); }
.mh-works h2 { color: #fff; margin-bottom: 20px; }
.mh-works p:not(.mh-eyebrow) { line-height: 1.9; margin-bottom: 28px; }
.mh-arrow-link--light { border-color: #fff; color: #fff; }
.mh-arrow-link--light:hover { color: var(--mh-yellow); }
.mh-works ul { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; }
.mh-works li { align-items: center; background: rgba(255,255,255,.1); display: flex; flex-direction: column; font-weight: 700; justify-content: center; min-height: 135px; }
.mh-works li i { color: var(--mh-yellow); font-size: 30px; margin-bottom: 12px; }
.mh-about { background: #fff; padding: 120px 0; }
.mh-about__inner { align-items: center; display: grid; gap: 9%; grid-template-columns: 48% 43%; }
.mh-about__photos { min-height: 520px; position: relative; }
.mh-about__photos img:first-child { height: 72%; left: 0; object-fit: cover; position: absolute; top: 0; width: 73%; }
.mh-about__photos img:last-child { border: 10px solid #fff; bottom: 0; height: 52%; object-fit: cover; position: absolute; right: 0; width: 57%; }
.mh-about__content > p:not(.mh-eyebrow) { line-height: 2; margin: 25px 0 30px; }
.mh-news { background: var(--mh-cream); padding: 95px 0; }
.mh-news .container { display: grid; gap: 8%; grid-template-columns: 22% 70%; }
.mh-news-list { border-top: 1px solid #c9d4cf; }
.mh-news-list a { align-items: center; border-bottom: 1px solid #c9d4cf; color: var(--mh-ink); display: grid; gap: 25px; grid-template-columns: 100px 1fr 20px; padding: 20px 5px; }
.mh-news-list a:hover { color: var(--mh-green); text-decoration: none; }
.mh-news-list time { color: #718079; font-size: 12px; }
.mh-news-list i { color: var(--mh-green); }
.mh-contact { background: var(--mh-deep); color: #fff; padding: 105px 0 75px; }
.mh-contact .mh-heading > p { color: var(--mh-yellow); }
.mh-contact .mh-heading h2 { color: #fff; }
.mh-contact-grid { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; margin: 0 auto 45px; max-width: 1000px; }
.mh-contact-grid article { background: #fff; color: var(--mh-ink); padding: 38px; text-align: center; }
.mh-contact-grid article > i { color: var(--mh-green); font-size: 38px; margin-bottom: 15px; }
.mh-contact-grid article > p { color: var(--mh-green); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.mh-contact-grid h3 { font-size: 18px; font-weight: 700; margin-bottom: 25px; }
.mh-contact__info { display: flex; flex-wrap: wrap; font-size: 13px; gap: 12px 35px; justify-content: center; }
.mh-contact__info a { color: #fff; }
@media (max-width: 991px) {
.mh-hero { min-height: 900px; }
.mh-hero:before { height: 42%; top: 0; width: 23%; }
.mh-hero__photos { height: 48%; left: 7%; right: 5%; }
.mh-hero__copy { bottom: 50px; left: 7%; max-width: 760px; top: auto; transform: none; width: 86%; }
.mh-hero__photo--school { height: 75%; }
.mh-hero__photo--business { height: 55%; }
.mh-service { min-height: 570px; }
.mh-service__content { padding: 55px 35px; }
.mh-service__number { font-size: 65px; }
.mh-strength-grid article { padding: 25px; }
}
@media (max-width: 767px) {
.mh-hero { min-height: 810px; }
.mh-hero__photos { height: 320px; left: 0; right: 0; }
.mh-hero__photo--school { height: 100%; left: 0; top: 0; width: 76%; }
.mh-hero__photo--business { bottom: -35px; height: 55%; width: 48%; }
.mh-hero__copy { bottom: 35px; left: 20px; width: calc(100% - 40px); }
.mh-hero h1 { font-size: 38px; }
.mh-hero__lead { font-size: 13px; line-height: 1.8; }
.mh-hero__actions { display: grid; grid-template-columns: 1fr; }
.mh-button { width: 100%; }
.mh-scroll { display: none; }
.mh-heading h2, .mh-solution h2, .mh-service h2, .mh-works h2, .mh-about h2 { font-size: 28px; }
.mh-concerns, .mh-print, .mh-strengths, .mh-flow, .mh-about, .mh-news { padding: 70px 0; }
.mh-concern-grid { grid-template-columns: 1fr; }
.mh-concern-grid article { padding: 28px 22px; }
.mh-solution { padding: 75px 0; }
.mh-solution .container, .mh-works__inner, .mh-about__inner { gap: 40px; grid-template-columns: 1fr; }
.mh-capability-list { grid-template-columns: 1fr; }
.mh-service { grid-template-columns: 1fr; min-height: 0; }
.mh-service__image, .mh-service--business .mh-service__image { height: 290px; order: 1; }
.mh-service__content, .mh-service--business .mh-service__content { order: 2; padding: 50px 20px 60px; }
.mh-business-catalog { gap: 12px; grid-template-columns: 54px minmax(0, 1fr); padding: 14px; }
.mh-business-catalog__cover { height: 68px; width: 50px; }
.mh-business-catalog__button { grid-column: 2; justify-self: start; }
.mh-service__number { font-size: 52px; right: 20px; top: 25px; }
.mh-print .container { grid-template-columns: 1fr; }
.mh-print__visual { min-height: 280px; }
.mh-print-shirt { height: 240px; width: 250px; }
.mh-print-towel { right: 3%; width: 210px; }
.mh-print-grid { grid-column: auto; grid-template-columns: 1fr; }
.mh-print-grid article { padding: 30px 22px 28px 92px; }
.mh-print-grid__icon { left: 20px; top: 30px; }
.mh-strength-grid, .mh-flow-list { grid-template-columns: 1fr; }
.mh-strength-grid article { border-bottom: 1px solid #cad8d1; border-left: 0; min-height: 0; padding: 30px 8px; }
.mh-strength-grid article:last-child { border-right: 0; }
.mh-strength-grid strong { font-size: 42px; margin-bottom: 15px; }
.mh-flow-list li { min-height: 0; padding: 25px; }
.mh-flow-list li:after { bottom: -15px; left: 50%; right: auto; top: auto; transform: rotate(90deg); }
.mh-works { padding: 75px 0; }
.mh-about__photos { min-height: 350px; }
.mh-news .container { gap: 20px; grid-template-columns: 1fr; }
.mh-news-list a { gap: 8px; grid-template-columns: 1fr 20px; }
.mh-news-list time { grid-column: 1 / 3; }
.mh-contact { padding: 75px 0 55px; }
.mh-contact-grid { grid-template-columns: 1fr; }
.mh-contact-grid article { padding: 30px 20px; }
.mh-contact__info { align-items: center; flex-direction: column; }
} .mh-about__photos {
align-items: start;
gap: 18px;
padding: 22px;
}
.mh-about__photo-card {
overflow: hidden;
border: 1px solid rgba(23, 59, 44, .1);
border-radius: 20px;
background: #fff;
box-shadow: 0 14px 32px rgba(23, 59, 44, .1);
position: relative;
z-index: 2;
}
.mh-about__photo-card img,
.mh-about__photos .mh-about__photo-card img:first-child {
display: block;
width: 100%;
height: auto;
min-height: 0;
border: 0;
border-radius: 0;
box-shadow: none;
filter: none;
object-fit: contain;
position: static;
}
.mh-about__photo-card--past img { filter: grayscale(1) contrast(1.04); }
.mh-about__photo-card > span {
display: flex;
min-height: 66px;
align-items: center;
gap: 10px;
padding: 13px 16px;
color: #173d29;
font-size: 14px;
font-weight: 800;
}
.mh-about__photo-card > span small {
color: #87958d;
font-family: Arial, sans-serif;
font-size: 9px;
letter-spacing: .16em;
}
.mh-about__photo-card--present > span { color: #16852b; }
@media (max-width: 767px) {
.mh-about__photos { gap: 14px; padding: 16px; }
.mh-about__photo-card > span { min-height: 56px; }
} .page-company .company-photo-slider__slides {
position: relative;
height: clamp(420px, 52vw, 650px);
overflow: hidden;
}
.page-company .company-photo-slide {
position: absolute;
inset: 0;
z-index: 0;
display: block;
height: 100%;
margin: 0;
opacity: 0;
visibility: hidden;
transform: scale(1.008);
transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1),
transform 1.8s cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 1.4s;
pointer-events: none;
will-change: opacity, transform;
}
.page-company .company-photo-slide.is-active {
z-index: 1;
opacity: 1;
visibility: visible;
transform: scale(1);
transition-delay: 0s;
pointer-events: auto;
}
.page-company .company-photo-slide:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(9, 38, 21, .68) 0%, rgba(9, 38, 21, .25) 43%, rgba(9, 38, 21, 0) 72%);
pointer-events: none;
}
.page-company .company-photo-slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.page-company .company-photo-slide figcaption {
position: absolute;
z-index: 2;
left: clamp(28px, 6vw, 78px);
bottom: clamp(72px, 9vw, 112px);
max-width: 560px;
color: #fff;
}
@media (max-width: 767px) {
.page-company .company-photo-slider__slides {
height: 470px;
}
.page-company .company-photo-slide:after {
background: linear-gradient(0deg, rgba(7, 34, 17, .8) 0%, rgba(7, 34, 17, .16) 64%, transparent 100%);
}
} .mh-aftercare {
background: #f3f7f3;
padding: 110px 0;
}
.mh-aftercare__heading {
display: grid;
gap: 18px 7%;
grid-template-columns: 52% 41%;
margin-bottom: 42px;
}
.mh-aftercare__heading .mh-eyebrow { grid-column: 1 / 3; margin: 0; }
.mh-aftercare__heading h2 {
color: #171c1a;
font-family: "Noto Serif JP", serif;
font-size: clamp(32px, 3.4vw, 44px);
line-height: 1.5;
margin: 0;
}
.mh-aftercare__heading h2 span { white-space: nowrap; }
.mh-aftercare__heading > p:last-child {
align-self: end;
color: #56635c;
line-height: 2;
margin: 0 0 8px;
}
.mh-aftercare__grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mh-aftercare__grid article {
background: #fff;
border: 1px solid #dce6df;
border-radius: 18px;
min-height: 245px;
padding: 32px 30px 28px;
position: relative;
}
.mh-aftercare__grid article > span {
align-items: center;
background: #e6f1df;
border-radius: 50%;
color: #1e9c33;
display: flex;
font-family: "Noto Serif JP", serif;
font-size: 18px;
font-weight: 700;
height: 48px;
justify-content: center;
margin-bottom: 28px;
width: 48px;
}
.mh-aftercare__grid article > small {
color: #9aaba0;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
position: absolute;
right: 28px;
top: 34px;
}
.mh-aftercare__grid h3 { color: #173d29; font-size: 21px; margin: 0 0 13px; }
.mh-aftercare__grid p { color: #65716a; font-size: 13px; line-height: 1.85; margin: 0; }
.mh-aftercare__note { color: #748078; font-size: 11px; margin: 20px 0 0; }
.service-aftercare-feature {
background: #f3f7f3;
border: 1px solid #dce6df;
border-radius: 26px;
margin: 85px 0;
padding: 52px;
}
.service-aftercare-feature__head { margin-bottom: 30px; max-width: 780px; }
.service-aftercare-feature__head > p {
color: #1e9c33;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: .17em;
margin: 0 0 9px;
}
.service-aftercare-feature__head h2 { color: #173d29 !important; font-size: 34px; margin: 0 0 14px; }
.service-aftercare-feature__head span { color: #5f6d65; line-height: 1.9; }
.service-aftercare-feature__grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-aftercare-feature__grid article { background: #fff; border-radius: 14px; padding: 24px 22px; }
.service-aftercare-feature__grid small { color: #1e9c33; font-family: Arial, sans-serif; font-weight: 800; }
.service-aftercare-feature__grid h3 { color: #173d29; font-size: 18px; margin: 8px 0 10px; }
.service-aftercare-feature__grid p { color: #67736c; font-size: 13px; line-height: 1.75; margin: 0; }
.service-aftercare-feature__note { color: #748078; font-size: 11px; margin: 18px 0 0; }
@media (max-width: 767px) {
.mh-aftercare { padding: 70px 0; }
.mh-aftercare__heading { grid-template-columns: 1fr; margin-bottom: 30px; }
.mh-aftercare__heading .mh-eyebrow { grid-column: 1; }
.mh-aftercare__heading h2 { font-size: 32px; }
.mh-aftercare__heading h2 span { white-space: normal; }
.mh-aftercare__grid { grid-template-columns: 1fr; }
.mh-aftercare__grid article { min-height: 0; padding: 27px 24px 24px; }
.service-aftercare-feature { border-radius: 18px; margin: 58px 0; padding: 34px 22px; }
.service-aftercare-feature__head h2 { font-size: 27px; }
.service-aftercare-feature__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.page-company .company-photo-slide {
transition-duration: .01ms;
}
} .makino-home {
--mh-green: #21483d;
--mh-deep: #142f28;
--mh-mint: #ecebe5;
--mh-cream: #f3efe6;
--mh-yellow: #a88e5c;
--mh-ink: #262d2a;
background: #fdfcf9;
}
.mh-eyebrow,
.mh-heading > p {
color: #806c48;
font-family: Georgia, "Times New Roman", serif;
font-size: 11px;
letter-spacing: .28em;
}
.mh-heading h2,
.mh-solution h2,
.mh-service h2,
.mh-works h2,
.mh-about h2,
.mh-print__intro h2 {
letter-spacing: .07em;
}
.mh-hero {
background:
linear-gradient(90deg, rgba(243,239,230,.98) 0%, rgba(243,239,230,.94) 42%, rgba(243,239,230,0) 59%),
#f3efe6;
}
.mh-hero:before { background: #183b32; width: 25%; }
.mh-hero__photo {
background: #d9d5ca;
box-shadow: 0 20px 50px rgba(16,42,34,.16);
}
.mh-hero__photo img,
.mh-service__image img {
filter: saturate(.58) sepia(.08) contrast(1.03);
}
.mh-hero__photo:after,
.mh-service__image:after {
background: linear-gradient(135deg, rgba(22,53,44,.08), rgba(180,154,101,.07));
content: "";
inset: 0;
pointer-events: none;
position: absolute;
}
.mh-service__image { position: relative; }
.mh-hero__photo--school { border: 1px solid rgba(255,255,255,.7); }
.mh-hero__photo--business { border: 8px solid #f3efe6; }
.mh-hero__photo--main {
bottom: 5%;
height: 90%;
left: 0;
top: 5%;
width: 100%;
}
.mh-hero h1 { font-weight: 700; letter-spacing: .075em; }
.mh-hero h1 em:after,
.mh-solution h2 em:after {
background: rgba(180,154,101,.55);
height: .13em;
}
.mh-hero__lead { color: #404a46; }
.mh-button { border-radius: 0; letter-spacing: .06em; }
.mh-button--solid { background: #21483d; border-color: #21483d; }
.mh-button--solid:hover,
.mh-button--solid:focus { background: #142f28; }
.mh-button--outline { background: rgba(255,255,255,.7); }
.mh-concerns { background: #fdfcf9; }
.mh-concern-grid { gap: 1px; }
.mh-concern-grid article {
background: #f5f2eb;
border: 1px solid #ddd5c5;
border-top: 3px solid #806c48;
}
.mh-concern-grid__label { color: #21483d; font-family: "Noto Serif JP", serif; letter-spacing: .07em; }
.mh-concern-grid li:before { color: #947d51; }
.mh-solution { background: #e8ece7; }
.mh-capability-list li { border-color: #b9c2bc; }
.mh-capability-list span { color: #806c48; font-family: Georgia, "Times New Roman", serif; }
.mh-service__content { background: #fdfcf9; }
.mh-service--business .mh-service__content { background: #f3efe6; }
.mh-service__number { color: rgba(128,108,72,.16); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.mh-tag-list li {
background: transparent;
border: 1px solid #aebbb4;
border-radius: 0;
color: #314a42;
font-weight: 500;
}
.mh-arrow-link { border-color: #806c48; color: #52655e; letter-spacing: .04em; }
.mh-print {
background: #263e36;
color: #f5f1e8;
position: relative;
}
.mh-print:before {
border: 1px solid rgba(180,154,101,.28);
bottom: 22px;
content: "";
left: 22px;
pointer-events: none;
position: absolute;
right: 22px;
top: 22px;
}
.mh-print .mh-eyebrow { color: #cab889; }
.mh-print__intro h2 { color: #fff; }
.mh-print .mh-arrow-link { border-color: #cab889; color: #f5f1e8; }
.mh-print__visual {
border: 1px solid rgba(202,184,137,.48);
box-shadow: 0 24px 55px rgba(0,0,0,.2);
margin: 0;
min-height: 0;
overflow: hidden;
}
.mh-print__visual img {
filter: saturate(.68) sepia(.06) contrast(1.03);
height: 100%;
object-fit: cover;
width: 100%;
}
.mh-print-shirt {
background: #172e27;
box-shadow: 0 24px 50px rgba(0,0,0,.22);
color: #e7ddc6;
}
.mh-print-shirt i { color: #b49a65; }
.mh-print-towel {
background: #e9e3d6;
border: 4px solid #8f7950;
color: #263e36;
box-shadow: 0 15px 35px rgba(0,0,0,.18);
}
.mh-print-grid { gap: 1px; }
.mh-print-grid article {
background: #f5f1e8;
color: #2c3733;
}
.mh-print-grid__icon {
background: #e2ddd1;
border: 1px solid #c7b992;
color: #52675f;
}
.mh-print-grid article > p { color: #806c48; font-family: Georgia, "Times New Roman", serif; }
.mh-print-grid li:before { color: #947d51; }
.mh-strengths { background: #fdfcf9; }
.mh-strength-grid { gap: 20px; }
.mh-strength-grid article {
border: 1px solid #ded8cb;
min-height: 330px;
padding: 38px 42px;
}
.mh-strength-grid article:last-child { border-right: 1px solid #ded8cb; }
.mh-strength-grid strong { color: #806c48; font-weight: 400; }
.mh-flow { background: #f3efe6; }
.mh-flow-list { gap: 12px; }
.mh-flow-list li {
background: rgba(255,255,255,.72);
border-top: 2px solid #806c48;
}
.mh-flow-list span { color: #806c48; font-family: Georgia, "Times New Roman", serif; }
.mh-flow-list i { color: #52675f; }
.mh-works { background: #183b32; }
.mh-works .mh-eyebrow { color: #cab889; }
.mh-works li {
background: rgba(255,255,255,.05);
border: 1px solid rgba(202,184,137,.35);
}
.mh-works li i { color: #cab889; }
.mh-about { background: #fdfcf9; }
.mh-about__photos img { filter: saturate(.5) sepia(.16) contrast(1.05); }
.mh-about__photos img:last-child { border-color: #fdfcf9; }
.mh-news { background: #f3efe6; }
.mh-news-list,
.mh-news-list a { border-color: #cbc3b4; }
.mh-contact { background: #142f28; }
.mh-contact .mh-heading > p { color: #cab889; }
.mh-contact-grid { gap: 1px; }
.mh-contact-grid article {
background: #f5f1e8;
border-top: 3px solid #9a8355;
}
.mh-contact-grid article > i,
.mh-contact-grid article > p { color: #52675f; }
@media (max-width: 767px) {
.mh-hero { background: #f3efe6; }
.mh-hero__photo--business { border-width: 5px; }
.mh-hero__photo--main { bottom: 0; height: 100%; top: 0; width: 100%; }
.mh-print:before { bottom: 10px; left: 10px; right: 10px; top: 10px; }
.mh-strength-grid { gap: 12px; }
.mh-strength-grid article { border: 1px solid #ded8cb; padding: 30px 24px; }
} :root {
--makino-green: #21483d;
--makino-deep: #142f28;
--makino-gold: #a88e5c;
--makino-yellow: #a88e5c;
--makino-soft: #ecebe5;
--makino-soft-2: #f3efe6;
--makino-ivory: #f3efe6;
--makino-paper: #fdfcf9;
--makino-ink: #262d2a;
--makino-muted: #66706b;
--makino-line: rgba(33,72,61,.18);
}
body {
--makino-green: #21483d;
--makino-deep: #142f28;
--makino-gold: #a88e5c;
--makino-yellow: #a88e5c;
--makino-soft: #ecebe5;
--makino-soft-2: #f3efe6;
--makino-ivory: #f3efe6;
--makino-paper: #fdfcf9;
--makino-ink: #262d2a;
--makino-muted: #66706b;
--makino-line: rgba(33,72,61,.18);
background: #fdfcf9;
color: #262d2a;
}
header {
background: rgba(253,252,249,.95);
border-bottom-color: rgba(33,72,61,.14);
}
.main-menu li.contact_menu a {
background: #21483d;
border-radius: 2px;
box-shadow: none;
}
.logo.logo-brand .brand-name,
.main-menu li a .txt-jp { color: #142f28; }
.btn-trigger span { background-color: #21483d; } :root,
body {
--makino-green: #1e9c33;
--makino-deep: #184f23;
--makino-gold: #1e9c33;
--makino-yellow: #c5e1a8;
--makino-soft: #f0f2f1;
--makino-soft-2: #f6f8f7;
--makino-ivory: #f6f8f7;
--makino-paper: #fff;
--makino-ink: #171c1a;
--makino-muted: rgba(23,28,26,.58);
--makino-line: #e1e6e3;
}
body {
background: #fff;
color: #171c1a;
font-family: "Noto Sans JP", sans-serif;
}
header {
background: rgba(255,255,255,.96);
border-bottom: 1px solid #e9ecea;
padding: 14px 0;
}
.logo.logo-brand .brand-name,
.main-menu li a .txt-jp { color: #171c1a; }
.main-menu li a .txt-jp { font-size: 14px; font-weight: 700; }
.main-menu li.contact_menu a {
background: #1e9c33;
border-radius: 999px;
padding-left: 24px;
padding-right: 24px;
}
.btn-trigger span { background-color: #1e9c33; }
.makino-home {
--mh-green: #1e9c33;
--mh-deep: #171c1a;
--mh-mint: #d8ebc3;
--mh-cream: #f6f8f7;
--mh-yellow: #c5e1a8;
--mh-ink: #171c1a;
background: #fff;
color: #171c1a;
}
.mh-eyebrow,
.mh-heading > p,
.mh-print-grid article > p {
color: #1e9c33;
font-family: Arial, "Noto Sans JP", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
}
.mh-heading h2,
.mh-solution h2,
.mh-service h2,
.mh-works h2,
.mh-about h2,
.mh-print__intro h2,
.mh-hero h1 {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
letter-spacing: .02em;
}
.mh-hero {
background: #f6f8f7;
min-height: 780px;
}
.mh-hero:before {
background: #d8ebc3;
border-radius: 0 0 0 80px;
height: 78%;
width: 28%;
}
.mh-hero__photos { left: 48%; right: 0; }
.mh-hero__photo {
border: 0;
border-radius: 32px 0 0 32px;
box-shadow: none;
}
.mh-hero__photo img,
.mh-service__image img,
.mh-print__visual img,
.mh-about__photos img { filter: none; }
.mh-hero__photo:after,
.mh-service__image:after { display: none; }
.mh-hero__copy { max-width: 620px; }
.mh-hero h1 {
color: #171c1a;
font-size: clamp(46px, 5.2vw, 78px);
line-height: 1.25;
}
.mh-hero h1 em { color: #1e9c33; }
.mh-hero h1 em:after,
.mh-solution h2 em:after { display: none; }
.mh-hero__lead { color: rgba(23,28,26,.7); line-height: 2; }
.mh-button {
border: 0;
border-radius: 999px;
min-height: 58px;
padding-left: 30px;
padding-right: 30px;
}
.mh-button--solid { background: #1e9c33; }
.mh-button--solid:hover,
.mh-button--solid:focus { background: #1b7a2c; }
.mh-button--outline { background: #fff; border: 1px solid #d2d9d5; color: #171c1a; }
.mh-button--outline:hover,
.mh-button--outline:focus { background: #f0f2f1; color: #171c1a; }
.mh-scroll { color: #1e9c33; }
.mh-hero {
background: #173f2b;
min-height: 760px;
}
.mh-hero:before {
background: linear-gradient(90deg, rgba(247,250,248,.96) 0%, rgba(247,250,248,.86) 25%, rgba(247,250,248,.42) 43%, rgba(247,250,248,0) 60%);
border-radius: 0;
height: 100%;
left: 0;
right: 0;
width: 100%;
z-index: 2;
}
.mh-hero__photos { inset: 0; }
.mh-hero__photo,
.mh-hero__photo--main {
border-radius: 0;
bottom: 0;
height: 100%;
inset: 0;
top: 0;
width: 100%;
}
.mh-hero__photo img { object-position: center center; }
.mh-hero__copy {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
left: max(calc((100vw - 1320px) / 2), 2.5vw);
max-width: 520px;
padding: 0;
width: 38%;
z-index: 5;
}
.mh-hero .mh-eyebrow { color: #1e9c33; }
.mh-hero h1 { color: #171c1a; font-size: clamp(40px, 3.7vw, 56px); text-shadow: none; }
.mh-hero h1 em { color: #1e9c33; }
.mh-hero__lead { color: rgba(23,28,26,.74); max-width: 590px; text-shadow: none; }
.mh-hero .mh-button--outline { background: #fff; border: 1px solid #d2d9d5; color: #171c1a; backdrop-filter: none; }
.mh-hero .mh-button--outline:hover,
.mh-hero .mh-button--outline:focus { background: #eef3ef; color: #173f2b; }
.mh-hero .mh-scroll { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.mh-heading { margin-bottom: 55px; }
.mh-heading h2,
.mh-solution h2,
.mh-service h2,
.mh-works h2,
.mh-about h2 { color: #171c1a; }
.mh-concerns { background: #fff; padding-bottom: 130px; }
.mh-concern-grid { gap: 20px; }
.mh-concern-grid article {
background: #f6f8f7;
border: 0;
border-radius: 24px;
padding: 44px;
}
.mh-concern-grid article:first-child { background: #d8ebc3; }
.mh-concern-grid__label { color: #171c1a; font-family: "Noto Sans JP", sans-serif; }
.mh-concern-grid li {
border-color: rgba(23,28,26,.12);
min-height: 54px;
padding-left: 46px;
}
.mh-concern-grid li:before {
background: url(//www.makino-h.com/makino/wp-content/themes/theme/img/makino-concern-icons-generated.webp) no-repeat;
background-size: 400% 200%;
content: "";
height: 34px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
}
.mh-concern-grid article:first-child li:nth-child(1):before { background-position: 0 0; }
.mh-concern-grid article:first-child li:nth-child(2):before { background-position: 33.333% 0; }
.mh-concern-grid article:first-child li:nth-child(3):before { background-position: 66.666% 0; }
.mh-concern-grid article:first-child li:nth-child(4):before { background-position: 100% 0; }
.mh-concern-grid article:last-child li:nth-child(1):before { background-position: 0 100%; }
.mh-concern-grid article:last-child li:nth-child(2):before { background-position: 33.333% 100%; }
.mh-concern-grid article:last-child li:nth-child(3):before { background-position: 66.666% 100%; }
.mh-concern-grid article:last-child li:nth-child(4):before { background-position: 100% 100%; }
.mh-solution { background: #1e9c33; color: #fff; }
.mh-solution .container {
gap: 6%;
grid-template-columns: 50% 44%;
}
.mh-solution .mh-eyebrow { color: rgba(255,255,255,.75); }
.mh-solution h2,
.mh-solution h2 em { color: #fff; }
.mh-solution h2 {
font-size: clamp(38px, 3.2vw, 52px);
letter-spacing: -.035em;
line-height: 1.5;
}
.mh-solution h2 em { white-space: nowrap; }
.mh-solution__body > p {
color: rgba(255,255,255,.9);
max-width: 620px;
}
.mh-capability-list { gap: 10px; }
.mh-capability-list li {
align-items: center;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
border-radius: 12px;
display: flex;
min-height: 62px;
padding: 12px 15px;
transition: background .2s ease, transform .2s ease;
}
.mh-capability-list li:hover {
background: rgba(255,255,255,.14);
transform: translateY(-2px);
}
.mh-capability-list span {
align-items: center;
background: rgba(255,255,255,.14);
border-radius: 50%;
color: #fff;
display: inline-flex;
flex: 0 0 30px;
font-family: Arial, sans-serif;
height: 30px;
justify-content: center;
margin-right: 12px;
}
.mh-service { gap: 0; padding: 80px 5%; }
.mh-service__image {
background: #f0f3f1;
border-radius: 28px;
min-height: 540px;
overflow: hidden;
}
.mh-service__image img {
filter: saturate(.94) contrast(1.03);
object-position: center;
transition: transform .7s ease;
}
.mh-service:hover .mh-service__image img { transform: scale(1.025); }
.mh-service__content,
.mh-service--business .mh-service__content {
background: #fff;
padding: 70px 8%;
}
.mh-service--business { background: #f6f8f7; }
.mh-service--business .mh-service__content { background: #f6f8f7; }
.mh-service__number {
color: #d8ebc3;
font-family: Arial, sans-serif;
font-size: 100px;
font-weight: 700;
}
.mh-tag-list li {
background: #f0f2f1;
border: 0;
border-radius: 999px;
color: #333c38;
padding: 10px 16px;
}
.mh-service--business .mh-tag-list li { background: #fff; }
.mh-arrow-link {
align-items: center;
border: 0;
color: #1e9c33;
display: inline-flex;
font-weight: 700;
gap: 12px;
line-height: 1.5;
padding: 0;
width: fit-content;
}
.mh-arrow-link i {
align-items: center;
background: #1e9c33;
border-radius: 50%;
color: #fff;
display: inline-flex;
flex: 0 0 30px;
height: 30px;
justify-content: center;
margin-left: 0;
vertical-align: middle;
width: 30px;
}
.mh-arrow-link i:before {
content: "\2192";
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
}
.mh-print {
background: #f6f8f7;
color: #171c1a;
}
.mh-print:before { display: none; }
.mh-print .mh-eyebrow { color: #1e9c33; }
.mh-print__intro h2 { color: #171c1a; }
.mh-print__intro h2 {
font-size: clamp(38px, 3.2vw, 46px);
letter-spacing: -.03em;
line-height: 1.5;
}
.mh-print__intro h2 span { white-space: nowrap; }
.mh-print .mh-arrow-link { color: #1e9c33; }
.mh-print__visual {
border: 0;
border-radius: 24px;
box-shadow: none;
}
.mh-print-grid { gap: 20px; }
.mh-print-grid article {
background: #fff;
border-radius: 20px;
color: #171c1a;
}
.mh-print-grid__icon {
background: #d8ebc3;
border: 0;
color: #1e9c33;
}
.mh-print-grid__icon:before {
background: url(//www.makino-h.com/makino/wp-content/themes/theme/img/makino-print-category-icons-generated.webp) no-repeat;
background-size: 200% 100%;
content: "";
height: 38px;
width: 38px;
}
.mh-print-grid article:first-child .mh-print-grid__icon:before { background-position: 0 0; }
.mh-print-grid article:last-child .mh-print-grid__icon:before { background-position: 100% 0; }
.mh-print-grid__icon i { display: none; }
.mh-print-grid li { padding-left: 22px; }
.mh-print-grid li:before {
align-items: center;
background: #d8ebc3;
border-radius: 50%;
color: #167d2a;
content: "\2713";
display: flex;
font-family: Arial, sans-serif;
font-size: 9px;
font-weight: 700;
height: 14px;
justify-content: center;
left: 0;
line-height: 1;
top: 7px;
width: 14px;
}
.mh-strengths { background: #fff; }
.mh-strength-grid { gap: 20px; }
.mh-strength-grid article,
.mh-strength-grid article:last-child {
background: linear-gradient(145deg, #fff 0%, #f3f7f4 100%);
border: 0;
border-radius: 24px;
box-shadow: 0 14px 36px rgba(23, 59, 44, .08);
overflow: hidden;
padding: 46px 45px 42px;
position: relative;
transition: box-shadow .25s ease, transform .25s ease;
}
.mh-strength-grid article:before {
background: #1e9c33;
content: "";
height: 5px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.mh-strength-grid article:hover {
box-shadow: 0 20px 46px rgba(23, 59, 44, .13);
transform: translateY(-5px);
}
.mh-strength-grid article:nth-child(2) {
background: linear-gradient(145deg, #e3f2d3 0%, #cce6b2 100%);
}
.mh-strength-grid article:nth-child(2):before { height: 8px; }
.mh-strength-grid strong {
color: #1e9c33;
font-family: Arial, sans-serif;
font-size: 62px;
font-weight: 700;
letter-spacing: -.04em;
margin-bottom: 34px;
}
.mh-strength-grid strong small {
letter-spacing: .02em;
margin-left: 7px;
}
.mh-strength-grid strong .mh-strength-grid__prefix {
display: inline-block;
font-size: 16px;
margin: 0 8px 0 0;
transform: translateY(-6px);
}
.mh-strength-grid h3 { font-size: 21px; }
.mh-flow {
background: linear-gradient(180deg, #f7f9f8 0%, #eef4f0 100%);
}
.mh-flow .mh-heading {
background: transparent;
max-width: none;
}
.mh-flow-list { gap: 22px; }
.mh-flow-list li {
background: #fff;
border: 0;
border-radius: 20px;
box-shadow: 0 12px 30px rgba(23, 59, 44, .07);
min-height: 270px;
overflow: visible;
padding: 38px 30px 32px;
transition: box-shadow .25s ease, transform .25s ease;
}
.mh-flow-list li:before {
background: #1e9c33;
border-radius: 20px 20px 0 0;
content: "";
height: 5px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.mh-flow-list li:after {
align-items: center;
background: #1e9c33;
border: 5px solid #eef4f0;
border-radius: 50%;
color: #fff;
content: "\2192";
display: flex;
font-family: Arial, sans-serif;
font-size: 18px;
height: 38px;
justify-content: center;
right: -31px;
top: 50%;
transform: translateY(-50%);
width: 38px;
z-index: 3;
}
.mh-flow-list li:last-child {
background: linear-gradient(145deg, #e0f0cf 0%, #cce6b2 100%);
}
.mh-flow-list li:last-child:after { display: none; }
.mh-flow-list li:hover {
box-shadow: 0 18px 38px rgba(23, 59, 44, .12);
transform: translateY(-4px);
}
.mh-flow-list span {
background: #e7f3dc;
border-radius: 999px;
color: #167d2a;
display: inline-block;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
margin-bottom: 34px;
padding: 7px 11px;
}
.mh-flow-list h3 {
font-size: 20px;
line-height: 1.5;
margin-bottom: 14px;
}
.mh-flow-list p { font-size: 14px; line-height: 1.9; }
.mh-works {
background: linear-gradient(145deg, #e2f0d4 0%, #f4f8f1 72%);
color: #171c1a;
position: relative;
}
.mh-works:before {
background: #1e9c33;
content: "";
height: 6px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.mh-works__inner { gap: 6%; grid-template-columns: 54% 40%; }
.mh-works .mh-eyebrow { color: #1e9c33; }
.mh-works h2 {
color: #171c1a;
font-size: clamp(36px, 3.15vw, 48px);
letter-spacing: -.035em;
line-height: 1.55;
}
.mh-works h2 span { white-space: nowrap; }
.mh-works p:not(.mh-eyebrow) {
color: #43534b;
max-width: 610px;
}
.mh-works ul { gap: 12px; }
.mh-works li {
align-items: flex-start;
background: rgba(255,255,255,.78);
border: 1px solid rgba(30,156,51,.12);
border-radius: 16px;
box-shadow: 0 10px 26px rgba(23,59,44,.06);
min-height: 150px;
padding: 28px;
position: relative;
transition: border-color .2s ease, transform .2s ease;
}
.mh-works li:before {
background: #1e9c33;
border-radius: 50%;
content: "";
height: 8px;
margin-bottom: 22px;
width: 8px;
}
.mh-works li:hover {
border-color: rgba(30,156,51,.35);
transform: translateY(-3px);
}
.mh-works li small {
color: #1e9c33;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
margin-bottom: 6px;
text-transform: uppercase;
}
.mh-works li span { color: #171c1a; font-size: 19px; font-weight: 700; }
.mh-works .mh-arrow-link { color: #1e9c33; }
.mh-works .mh-arrow-link i { background: #1e9c33; color: #fff; }
.mh-arrow-link--light { color: #fff; }
.mh-arrow-link--light i { background: #fff; color: #1e9c33; }
.mh-about {
background: linear-gradient(180deg, #fff 0%, #f8faf8 100%);
}
.mh-about__inner {
gap: 6%;
grid-template-columns: 44% 50%;
}
.mh-about__photos:before {
background: #d8ebc3;
border-radius: 28px;
bottom: 24px;
content: "";
left: -24px;
position: absolute;
right: 38px;
top: 28px;
transform: rotate(-2deg);
}
.mh-about__photos img {
box-shadow: 0 18px 40px rgba(23,59,44,.12);
}
.mh-about__photos img:first-child { border-radius: 24px; }
.mh-about__photos img:nth-of-type(2) {
border: 8px solid #fff;
border-radius: 20px;
box-shadow: 0 20px 42px rgba(23,59,44,.18);
}
.mh-about__content {
background: #fff;
border: 1px solid #e5ece7;
border-radius: 28px;
box-shadow: 0 16px 42px rgba(23,59,44,.07);
padding: 52px 54px;
position: relative;
}
.mh-about__content:before {
background: #1e9c33;
border-radius: 0 0 5px 5px;
content: "";
height: 7px;
left: 54px;
position: absolute;
top: 0;
width: 62px;
}
.mh-about h2 {
font-size: clamp(32px, 2.35vw, 38px);
letter-spacing: -.035em;
line-height: 1.55;
}
.mh-about h2 span { white-space: nowrap; }
.mh-about__content > p:not(.mh-eyebrow) {
border-left: 2px solid #d8ebc3;
color: #43534b;
padding-left: 20px;
}
.mh-news { background: #f6f8f7; }
.mh-news-list { border-color: #d2d9d5; }
.mh-news-list a { border-color: #d2d9d5; }
.mh-news-list i { color: #1e9c33; }
.mh-contact {
background: linear-gradient(145deg, #e4f1d8 0%, #d5eabc 100%);
color: #171c1a;
padding: 95px 0 90px;
position: relative;
}
.mh-contact:before {
border: 1px solid rgba(30,156,51,.15);
border-radius: 50%;
content: "";
height: 320px;
position: absolute;
right: -110px;
top: -150px;
width: 320px;
}
.mh-contact .mh-heading {
background: transparent;
margin-bottom: 48px;
max-width: 980px;
}
.mh-contact .mh-heading > p { color: #1e9c33; }
.mh-contact .mh-heading h2 {
color: #171c1a;
font-size: clamp(34px, 3.2vw, 50px);
letter-spacing: -.035em;
line-height: 1.5;
}
.mh-contact-grid { gap: 22px; margin-bottom: 0; max-width: 1080px; }
.mh-contact-grid article {
background: #fff;
border: 0;
border-radius: 22px;
box-shadow: 0 15px 36px rgba(23,59,44,.08);
overflow: hidden;
padding: 38px 42px 34px;
position: relative;
text-align: left;
transition: box-shadow .25s ease, transform .25s ease;
}
.mh-contact-grid article:before {
background: #1e9c33;
content: "";
height: 5px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.mh-contact-grid article:hover {
box-shadow: 0 21px 44px rgba(23,59,44,.13);
transform: translateY(-4px);
}
.mh-contact-grid article > p {
color: #1e9c33;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
margin-bottom: 14px;
text-transform: uppercase;
}
.mh-contact-grid h3 { font-size: 21px; margin-bottom: 12px; }
.mh-contact-grid article > span {
color: #59675f;
display: block;
font-size: 13px;
line-height: 1.8;
margin-bottom: 25px;
}
.mh-contact-grid .mh-button {
display: inline-flex;
font-size: 13px;
min-width: 0;
padding: 13px 22px;
} #main_content.page-service { background: linear-gradient(180deg, #f7faf8 0%, #fff 30%); padding: 72px 0 95px; }
#main_content.page-service h1.title-page { color: #171c1a !important; font-size: clamp(38px, 4vw, 58px); letter-spacing: -.035em; margin-bottom: 24px; }
.page-service .site-page .page-lead { color: #43534b; font-size: 16px; line-height: 2; margin-bottom: 44px; max-width: 850px; }
.page-service .page-visual { border: 0; border-radius: 26px; box-shadow: 0 18px 44px rgba(23,59,44,.1); height: 420px; margin-bottom: 80px; }
.page-service .page-section { margin: 80px 0; }
.page-service .page-section > h2 { border: 0; color: #171c1a !important; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.025em; margin-bottom: 30px; padding: 0 0 16px 22px; position: relative; }
.page-service .page-section > h2:before { background: #1e9c33; border-radius: 999px; bottom: 12px; content: ""; left: 0; position: absolute; top: 5px; width: 6px; }
.page-service .page-grid { gap: 20px; }
.page-service .page-card { background: linear-gradient(145deg, #fff 0%, #f6f9f7 100%); border: 1px solid #e1e9e4; border-radius: 20px; box-shadow: 0 12px 30px rgba(23,59,44,.07); min-height: 220px; padding: 30px 28px; position: relative; transition: box-shadow .25s ease, transform .25s ease; }
.page-service .page-card:hover { box-shadow: 0 18px 40px rgba(23,59,44,.12); transform: translateY(-4px); }
.page-service .page-card h3 { align-items: center; display: flex; font-size: 19px; margin-bottom: 20px !important; }
.page-service .page-card h3 i { background: url(//www.makino-h.com/makino/wp-content/themes/theme/img/makino-concern-icons-generated.webp) no-repeat; background-size: 400% 200%; display: inline-block; flex: 0 0 34px; font-size: 0; height: 34px; margin-right: 12px; width: 34px; }
.page-service .page-card h3 i:before { content: none; }
.page-service .page-section:nth-of-type(1) .page-card:nth-child(1) h3 i { background-position: 33.333% 0; }
.page-service .page-section:nth-of-type(1) .page-card:nth-child(2) h3 i { background-position: 0 0; }
.page-service .page-section:nth-of-type(1) .page-card:nth-child(3) h3 i { background-position: 66.666% 0; }
.page-service .page-section:nth-of-type(2) .page-card:nth-child(1) h3 i { background-position: 0 100%; }
.page-service .page-section:nth-of-type(2) .page-card:nth-child(2) h3 i { background-position: 33.333% 100%; }
.page-service .page-section:nth-of-type(2) .page-card:nth-child(3) h3 i { background-position: 66.666% 100%; }
.page-service .page-card li { color: #536159; margin-bottom: 10px; padding-left: 20px; }
.page-service .page-card li:before { background: #d8ebc3; border: 3px solid #1e9c33; height: 10px; top: .65em; width: 10px; }
.service-print-feature { align-items: stretch; background: #173f2b; border-radius: 28px; color: #fff; display: grid; grid-template-columns: 48% 52%; margin: 85px 0; overflow: hidden; }
.service-print-feature figure { margin: 0; min-height: 430px; }
.service-print-feature figure img { height: 100%; object-fit: cover; width: 100%; }
.service-print-feature > div { align-self: center; padding: 48px 52px; }
.service-print-feature__label { color: #bddd9e; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .15em; margin-bottom: 9px; text-transform: uppercase; }
.service-print-feature h2 { color: #fff !important; font-size: 34px; margin: 0 0 18px; }
.service-print-feature > div > p:not(.service-print-feature__label) { color: rgba(255,255,255,.8); line-height: 1.9; }
.service-print-feature ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 28px; padding: 0; }
.service-print-feature li { background: rgba(255,255,255,.1); border-radius: 999px; font-size: 12px; padding: 8px 12px; }
.service-print-feature .btn-primary-green { background: #fff; color: #167d2a; }
.page-service .page-cta { background: linear-gradient(145deg, #d8ebc3 0%, #c6e3aa 100%); border-radius: 26px; color: #171c1a; padding: 55px; }
.page-service .page-cta h2 { color: #171c1a !important; }
.contact-type-notice {
background: linear-gradient(145deg, #e4f1d8 0%, #f4f8f1 100%);
border-left: 5px solid #1e9c33;
border-radius: 14px;
margin: 0 auto 42px;
max-width: 900px;
padding: 24px 28px;
}
.contact-type-notice span { color: #1e9c33; display: block; font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .14em; margin-bottom: 7px; text-transform: uppercase; }
.contact-type-notice strong { color: #171c1a; display: block; font-size: 19px; margin-bottom: 5px; }
.contact-type-notice p { color: #536159; margin: 0; } .makino-contact-form { background: #f4f7f4; border-radius: 24px; margin: 55px auto 90px; max-width: 960px; padding: 56px 70px 64px; }
.makino-contact-form__intro { margin-bottom: 38px; text-align: center; }
.makino-contact-form__eyebrow { color: #1e9c33; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; margin-bottom: 8px; text-transform: uppercase; }
.makino-contact-form__intro h2 { color: #173f2b; font-size: 30px; margin: 0 0 15px; }
.makino-contact-form__intro > p:last-child { color: #536159; line-height: 1.8; margin: 0; }
.contact-form { margin: 0; }
.contact-field-grid { display: grid; gap: 0 24px; grid-template-columns: 1fr 1fr; }
.contact-field { margin-bottom: 26px; }
.contact-field label { color: #24332c; display: block; font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.required-mark, .optional-mark { border-radius: 4px; display: inline-block; font-size: 10px; font-weight: 700; line-height: 1; margin-left: 5px; padding: 5px 6px; vertical-align: 2px; }
.required-mark { background: #1e9c33; color: #fff; }
.optional-mark { background: #dfe6e1; color: #65726b; }
.contact-field input, .contact-field select, .contact-field textarea { background: #fff; border: 1px solid #ced9d2; border-radius: 8px; box-shadow: none; color: #17231d; font-family: inherit; font-size: 16px; line-height: 1.5; margin: 0; padding: 14px 15px; transition: border-color .2s ease, box-shadow .2s ease; width: 100%; }
.contact-field input::placeholder,
.contact-field textarea::placeholder {
color: #9aa59f;
opacity: 1;
}
.contact-field select { appearance: auto; min-height: 54px; }
.contact-field textarea { min-height: 190px; resize: vertical; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { border-color: #1e9c33; box-shadow: 0 0 0 3px rgba(30,156,51,.13); outline: none; }
.field-help { color: #718078; display: block; font-size: 12px; line-height: 1.6; margin-top: 7px; }
.field-error { color: #b3261e; display: block; font-size: 12px; font-weight: 700; margin-top: 7px; }
.contact-privacy { background: #fff; border: 1px solid #dce4df; border-radius: 10px; margin: 4px 0 30px; padding: 20px 22px; }
.contact-privacy label { align-items: flex-start; cursor: pointer; display: flex; gap: 10px; line-height: 1.7; margin: 0; }
.contact-privacy input { flex: 0 0 auto; height: 18px; margin-top: 4px; width: 18px; }
.contact-submit { text-align: center; }
.contact-submit button { background: #173f2b; border: 0; border-radius: 999px; color: #fff; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; min-width: 290px; padding: 18px 30px; transition: background .2s ease, transform .2s ease; }
.contact-submit button span { margin-left: 15px; }
.contact-submit button:hover, .contact-submit button:focus { background: #1e9c33; transform: translateY(-2px); }
.contact-message { border-radius: 12px; margin: 0 0 30px; padding: 22px 24px; }
.contact-message strong { display: block; font-size: 17px; margin-bottom: 5px; }
.contact-message p { margin: 0; }
.contact-message--success { background: #e5f3df; border: 1px solid #b9dcae; color: #234c25; text-align: center; }
.contact-message--error { background: #fff0ef; border: 1px solid #efc5c1; color: #8c211b; }
.contact-confirm { background: #fff; border: 1px solid #d8e2db; border-radius: 16px; padding: 34px 38px 38px; }
.contact-confirm h3 { color: #173f2b; font-size: 24px; margin: 0 0 8px; text-align: center; }
.contact-confirm > p { color: #536159; margin: 0 0 28px; text-align: center; }
.contact-confirm dl { border-top: 1px solid #d8e2db; margin: 0 0 32px; }
.contact-confirm dl > div { border-bottom: 1px solid #d8e2db; display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.contact-confirm dt, .contact-confirm dd { line-height: 1.8; margin: 0; padding: 17px 18px; }
.contact-confirm dt { background: #f1f6f2; color: #173f2b; font-weight: 700; }
.contact-confirm dd { color: #34483b; overflow-wrap: anywhere; }
.contact-confirm__actions { display: flex; gap: 16px; justify-content: center; }
.contact-confirm__actions button { border: 1px solid #173f2b; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; min-width: 230px; padding: 17px 24px; }
.contact-confirm__actions button[type="submit"] { background: #173f2b; color: #fff; }
.contact-confirm__actions .contact-confirm__back { background: #fff; color: #173f2b; }
.contact-honeypot { height: 0; left: -10000px; overflow: hidden; position: absolute; width: 0; } .catalog-page { background: #f5f7f5; }
.catalog-hero { background: #173f2b; color: #fff; padding: 92px 0 82px; position: relative; }
.catalog-hero:after { background: #bddd9e; bottom: 0; content: ""; height: 5px; left: 0; position: absolute; width: 24%; }
.catalog-eyebrow { color: #bddd9e; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; margin-bottom: 12px; text-transform: uppercase; }
.catalog-hero h1 { color: #fff; font-family: "Noto Serif JP", serif; font-size: clamp(34px, 4vw, 52px); margin: 0 0 20px; }
.catalog-hero .container > p:last-child { color: rgba(255,255,255,.75); line-height: 1.9; margin: 0; max-width: 700px; }
.catalog-content { min-height: 520px; padding: 70px 0 100px; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 42px; }
.catalog-filters button { background: #fff; border: 1px solid #d5dfd9; border-radius: 999px; color: #52635a; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; padding: 11px 17px; }
.catalog-filters button:hover, .catalog-filters button:focus, .catalog-filters button.is-active { background: #173f2b; border-color: #173f2b; color: #fff; }
.catalog-grid { display: grid; gap: 28px; grid-template-columns: repeat(4, 1fr); }
.catalog-card { background: #fff; border: 1px solid #e0e7e2; border-radius: 14px; box-shadow: 0 10px 25px rgba(23,63,43,.06); overflow: hidden; }
.catalog-card[hidden] { display: none; }
.catalog-card__cover { align-items: center; background: #e7eee9; display: flex; height: 280px; justify-content: center; margin: 0; overflow: hidden; }
.catalog-card__cover img { height: 100%; object-fit: cover; width: 100%; }
.catalog-card__cover > span { align-items: center; background: #173f2b; box-shadow: 9px 9px 0 #bddd9e; color: #fff; display: flex; flex-direction: column; font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; height: 190px; justify-content: center; letter-spacing: .1em; width: 140px; }
.catalog-card__cover i { color: #bddd9e; font-size: 34px; margin-bottom: 15px; }
.catalog-card__body { padding: 23px 22px 25px; }
.catalog-card__category { color: #1e9c33; font-size: 10px; font-weight: 700; }
.catalog-card__body p { color: #7a8780; font-size: 11px; margin: 10px 0 3px; }
.catalog-card__body h2 { color: #213128; font-size: 16px; line-height: 1.55; margin: 0 0 20px; }
.catalog-card__body a { border-bottom: 1px solid #1e9c33; color: #167d2a; display: inline-block; font-size: 12px; font-weight: 700; padding-bottom: 5px; }
.catalog-card__body a i { margin-left: 6px; }
.catalog-empty { background: #fff; border: 1px solid #dce5df; border-radius: 20px; margin: 20px auto 0; max-width: 760px; padding: 65px 60px; text-align: center; }
.catalog-empty__icon { align-items: center; background: #e4f1d8; border-radius: 50%; color: #1e9c33; display: flex; font-size: 28px; height: 72px; justify-content: center; margin: 0 auto 23px; width: 72px; }
.catalog-empty h2 { color: #173f2b; font-size: 25px; margin: 0 0 14px; }
.catalog-empty p { color: #66756d; line-height: 1.9; margin: 0 auto 28px; max-width: 570px; }
.catalog-empty a { background: #173f2b; border-radius: 999px; color: #fff; display: inline-block; font-size: 13px; font-weight: 700; padding: 15px 24px; }
.catalog-empty a:hover, .catalog-empty a:focus { background: #1e9c33; text-decoration: none; }
.catalog-empty a i { margin-left: 10px; }
.catalog-no-results { color: #66756d; padding: 45px 0; text-align: center; }
@media screen and (max-width: 767px) {
.makino-contact-form { border-radius: 16px; margin: 38px 0 60px; padding: 38px 20px 44px; }
.makino-contact-form__intro h2 { font-size: 25px; }
.contact-field-grid { grid-template-columns: 1fr; }
.contact-submit button { min-width: 0; width: 100%; }
.contact-confirm { padding: 26px 18px 30px; }
.contact-confirm dl > div { display: block; }
.contact-confirm dt, .contact-confirm dd { padding: 12px 14px; }
.contact-confirm__actions { flex-direction: column-reverse; }
.contact-confirm__actions button { min-width: 0; width: 100%; }
.catalog-hero { padding: 65px 0 58px; }
.catalog-content { padding: 45px 0 70px; }
.catalog-filters { gap: 7px; margin-bottom: 30px; }
.catalog-filters button { font-size: 11px; padding: 9px 12px; }
.catalog-grid { grid-template-columns: 1fr 1fr; }
.catalog-card__cover { height: 220px; }
.catalog-empty { padding: 45px 20px; }
}
@media screen and (min-width: 768px) and (max-width: 1050px) {
.catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 520px) {
.catalog-grid { grid-template-columns: 1fr; }
} .page-company .page-visual {
background: #eef3ef;
border: 0;
border-radius: 24px;
height: auto;
overflow: hidden;
position: relative;
}
.page-company .page-visual img {
height: auto;
object-fit: contain;
width: 100%;
}
.page-company .page-visual:after,
.page-company .company-message-layout figure:after {
background: rgba(12,48,28,.86);
border-radius: 999px;
bottom: 18px;
color: #fff;
font-size: 12px;
font-weight: 700;
left: 18px;
letter-spacing: .08em;
padding: 8px 14px;
position: absolute;
}
.page-company .page-visual:after { content: "物流センター"; }
.page-company .company-message-layout figure { position: relative; }
.page-company .company-message-layout figure:after { content: "本社正面"; }
.page-company .history-photo-current {
position: relative;
overflow: hidden;
background: #eef5ea;
}
.page-company .history-photo-current img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
.page-company .history-photo-current figcaption {
position: absolute;
left: 18px;
bottom: 18px;
padding: 8px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, .92);
color: #137c39;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
box-shadow: 0 8px 24px rgba(15, 54, 30, .12);
}
.page-company .company-history-archive {
display: grid;
grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
gap: 28px;
align-items: center;
margin: 30px 0 38px;
padding: 22px;
border: 1px solid #e1e9df;
border-radius: 22px;
background: #f7faf6;
}
.page-company .company-history-archive__photo {
width: 100%;
max-width: 360px;
aspect-ratio: 3 / 2;
margin: 0;
overflow: hidden;
border-radius: 14px;
background: #f7faf6;
}
.page-company .company-history-archive img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.06);
transform-origin: center;
filter: grayscale(1) sepia(.12);
}
.page-company .company-history-archive span {
color: #189c43;
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
}
.page-company .company-history-archive p {
margin: 10px 0 0;
line-height: 1.9;
}
@media (max-width: 767px) {
.page-company .company-history-archive {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
} .page-company .company-building-slider {
width: min(100%, 1220px);
margin: 34px auto 88px;
position: relative;
overflow: hidden;
border-radius: 30px;
background: #eef4ec;
box-shadow: 0 24px 70px rgba(20, 66, 36, .12);
}
.page-company .company-building-slider .carousel-item {
position: relative;
height: clamp(420px, 52vw, 650px);
margin: 0;
}
.page-company .company-building-slider .carousel-item:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(9, 38, 21, .7) 0%, rgba(9, 38, 21, .28) 43%, rgba(9, 38, 21, 0) 72%);
pointer-events: none;
}
.page-company .company-building-slider img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.page-company .company-building-slider figcaption {
position: absolute;
z-index: 2;
left: clamp(28px, 6vw, 78px);
bottom: clamp(72px, 9vw, 112px);
max-width: 520px;
color: #fff;
}
.page-company .company-building-slider figcaption small,
.page-company .company-building-slider figcaption strong,
.page-company .company-building-slider figcaption span {
display: block;
}
.page-company .company-building-slider figcaption small {
margin-bottom: 14px;
color: #bfe49e;
font-size: 12px;
font-weight: 800;
letter-spacing: .17em;
}
.page-company .company-building-slider figcaption strong {
font-size: clamp(28px, 4vw, 54px);
line-height: 1.25;
letter-spacing: .02em;
word-break: keep-all;
overflow-wrap: normal;
text-wrap: balance;
}
.page-company .company-building-slider figcaption span {
margin-top: 14px;
font-size: clamp(13px, 1.4vw, 17px);
line-height: 1.8;
}
.page-company .company-building-controls {
position: absolute;
z-index: 3;
right: clamp(18px, 4vw, 52px);
bottom: 28px;
display: flex;
gap: 8px;
padding: 7px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
background: rgba(8, 35, 19, .62);
backdrop-filter: blur(10px);
}
.page-company .company-building-controls button {
appearance: none;
border: 0;
border-radius: 999px;
padding: 10px 16px;
background: transparent;
color: rgba(255, 255, 255, .72);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background .25s ease, color .25s ease;
}
.page-company .company-building-controls button span {
margin-right: 7px;
font-size: 10px;
letter-spacing: .08em;
}
.page-company .company-building-controls button.active {
background: #fff;
color: #147b38;
}
.page-company .company-building-slider.carousel-fade .carousel-item {
opacity: 0;
transform: scale(1.012);
transition: opacity 1.15s ease-in-out, transform 1.8s ease-out;
will-change: opacity, transform;
}
.page-company .company-building-slider.carousel-fade .carousel-item.active,
.page-company .company-building-slider.carousel-fade .carousel-item-next.carousel-item-start,
.page-company .company-building-slider.carousel-fade .carousel-item-prev.carousel-item-end {
z-index: 1;
opacity: 1;
transform: scale(1);
}
.page-company .company-building-slider.carousel-fade .active.carousel-item-start,
.page-company .company-building-slider.carousel-fade .active.carousel-item-end {
z-index: 0;
opacity: 0;
}
@media (max-width: 767px) {
.page-company .company-building-slider {
margin: 24px auto 58px;
border-radius: 20px;
}
.page-company .company-building-slider .carousel-item {
height: 470px;
}
.page-company .company-building-slider .carousel-item:after {
background: linear-gradient(0deg, rgba(7, 34, 17, .82) 0%, rgba(7, 34, 17, .18) 62%, transparent 100%);
}
.page-company .company-building-slider img {
object-position: center;
}
.page-company .company-building-slider figcaption {
left: 24px;
right: 24px;
bottom: 88px;
}
.page-company .company-building-slider figcaption strong {
font-size: clamp(23px, 7.4vw, 30px);
}
.page-company .company-building-controls {
right: 16px;
bottom: 16px;
}
}
.page-company .company-message-layout img {
height: auto;
object-fit: contain;
} .mh-footer {
background: linear-gradient(145deg, #103823 0%, #17452d 58%, #1b4b33 100%);
color: #fff;
overflow: hidden;
padding: 46px 0 18px;
position: relative;
}
.mh-footer:before {
background: rgba(255,255,255,.025);
content: "";
height: 150%;
position: absolute;
right: 13%;
top: -25%;
transform: rotate(24deg);
width: 90px;
}
.mh-footer__inner { position: relative; z-index: 1; }
.mh-footer__lead {
align-items: center;
border-bottom: 1px solid rgba(255,255,255,.16);
display: grid;
gap: 6%;
grid-template-columns: 52% 42%;
padding: 0 30px 30px;
}
.mh-footer__lead > div > p,
.mh-footer__label {
color: #bddd9e;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .16em;
margin-bottom: 12px;
text-transform: uppercase;
}
.mh-footer__lead h2 {
color: #fff;
font-size: clamp(25px, 2.1vw, 34px);
font-weight: 700;
letter-spacing: -.025em;
line-height: 1.5;
margin: 0;
}
.mh-footer__actions {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
}
.mh-footer__actions a {
align-items: center;
border: 1px solid rgba(255,255,255,.28);
border-radius: 999px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 58px;
padding: 9px 10px;
text-align: center;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mh-footer__actions a:hover {
background: #1e9c33;
border-color: #1e9c33;
color: #fff;
text-decoration: none;
transform: translateY(-3px);
}
.mh-footer__actions span { font-size: 11px; font-weight: 700; }
.mh-footer__actions small {
color: #bddd9e;
font-family: Georgia, serif;
font-size: 10px;
letter-spacing: .08em;
margin-top: 4px;
}
.mh-footer__body {
display: grid;
gap: 26px;
grid-template-columns: 26% 39% 29%;
padding: 28px 30px 30px;
}
.mh-footer__brand img { height: auto; max-width: 190px; width: 100%; }
.mh-footer__brand > p {
color: rgba(255,255,255,.67);
font-size: 12px;
line-height: 1.75;
margin: 13px 0 0;
max-width: 290px;
}
.mh-footer__company {
border: 1px solid rgba(255,255,255,.14);
border-radius: 14px;
padding: 18px 22px;
}
.mh-footer__company h3 { color: #fff; font-size: 16px; margin: 0 0 8px; }
.mh-footer__company address {
color: rgba(255,255,255,.72);
font-size: 12px;
font-style: normal;
line-height: 1.6;
margin-bottom: 8px;
}
.mh-footer__contact { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; }
.mh-footer__contact a { color: #fff; font-family: Arial, sans-serif; font-size: 18px; font-weight: 700; }
.mh-footer__contact span { color: rgba(255,255,255,.62); font-size: 11px; }
.mh-footer__nav {
align-content: start;
display: grid;
gap: 11px 20px;
grid-template-columns: 1fr 1fr;
padding-top: 10px;
}
.mh-footer__nav a {
color: rgba(255,255,255,.78);
font-size: 12px;
position: relative;
}
.mh-footer__nav a:before { color: #84c95f; content: "—"; margin-right: 9px; }
.mh-footer__nav a:hover { color: #fff; text-decoration: none; }
.mh-footer__bottom {
align-items: center;
border-top: 1px solid rgba(255,255,255,.16);
display: flex;
justify-content: space-between;
padding: 15px 30px 0;
}
.mh-footer__bottom p,
.mh-footer__bottom a {
color: rgba(255,255,255,.5);
font-family: Arial, sans-serif;
font-size: 10px;
letter-spacing: .05em;
margin: 0;
}
@media (max-width: 991px) {
.mh-hero:before { border-radius: 0; }
.mh-hero__photo { border-radius: 0; }
.mh-hero__copy { bottom: auto; left: 2.5%; top: 50%; transform: translateY(-50%); width: 48%; }
.mh-solution .container { gap: 40px; grid-template-columns: 1fr; }
.mh-solution h2 em { white-space: normal; }
.mh-about__inner { gap: 45px; grid-template-columns: 1fr; }
.mh-footer__lead { grid-template-columns: 1fr; }
.mh-footer__actions { max-width: 680px; }
.mh-footer__body { grid-template-columns: 1fr 1fr; }
.mh-footer__brand { grid-column: 1 / 3; }
.service-print-feature { grid-template-columns: 1fr; }
.service-print-feature figure { min-height: 320px; }
.mh-service { padding: 60px 4%; }
}
@media (max-width: 767px) {
.mh-hero { background: #f6f8f7; min-height: 980px; }
.mh-hero:before { display: none; }
.mh-hero__photos { bottom: auto; height: 420px; inset: 0 0 auto; }
.mh-hero__photo { border-radius: 0; }
.mh-hero__photo img { object-position: 58% center; }
.mh-hero__copy { background: #fff; bottom: 55px; border-radius: 20px; left: 20px; padding: 30px 24px; top: auto; transform: none; width: calc(100% - 40px); }
.mh-hero h1 { font-size: 39px; }
.mh-hero__lead { color: rgba(23,28,26,.74); }
.mh-solution h2 { font-size: 34px; line-height: 1.55; }
.mh-capability-list { grid-template-columns: 1fr; }
.mh-print__intro h2 { font-size: 34px; }
.mh-print__intro h2 span { white-space: normal; }
.mh-strength-grid article,
.mh-strength-grid article:last-child { padding: 34px 26px 30px; }
.mh-strength-grid strong { font-size: 48px; margin-bottom: 20px; }
.mh-flow-list { gap: 24px; }
.mh-flow-list li { min-height: 0; padding: 32px 26px 28px; }
.mh-flow-list li:after {
bottom: -31px;
left: 50%;
right: auto;
top: auto;
transform: translateX(-50%) rotate(90deg);
}
.mh-flow-list span { margin-bottom: 22px; }
.mh-works__inner { gap: 40px; grid-template-columns: 1fr; }
.mh-works h2 { font-size: 34px; }
.mh-works h2 span { white-space: normal; }
.mh-works li { min-height: 125px; padding: 22px; }
.mh-about__content { border-radius: 20px; padding: 38px 26px 34px; }
.mh-about__content:before { left: 26px; }
.mh-about h2 { font-size: 32px; }
.mh-about h2 span { white-space: normal; }
.mh-footer { padding-top: 40px; }
.mh-footer__lead,
.mh-footer__body { padding-left: 20px; padding-right: 20px; }
.mh-footer__actions { grid-template-columns: 1fr; }
.mh-footer__actions a { min-height: 56px; }
.mh-footer__body { grid-template-columns: 1fr; }
.mh-footer__brand { grid-column: auto; }
.mh-footer__nav { padding-top: 0; }
.mh-footer__bottom { align-items: flex-start; flex-direction: column; gap: 9px; padding-left: 20px; padding-right: 20px; }
#main_content.page-service { padding: 52px 0 70px; }
.page-service .page-visual { border-radius: 18px; height: 270px; margin-bottom: 55px; }
.page-service .page-section { margin: 58px 0; }
.page-service .page-card { min-height: 0; padding: 26px 22px; }
.service-print-feature { border-radius: 20px; margin: 60px 0; }
.service-print-feature figure { min-height: 240px; }
.service-print-feature > div { padding: 34px 26px 38px; }
.service-print-feature h2 { font-size: 29px; }
.page-service .page-cta { border-radius: 20px; padding: 38px 24px; }
.mh-contact { padding: 70px 0 65px; }
.mh-contact .mh-heading h2 { font-size: 31px; }
.mh-contact-grid article { padding: 32px 26px 28px; }
.mh-concern-grid article { border-radius: 18px; padding: 30px 22px; }
.mh-service { padding: 45px 20px; }
.mh-service__image { border-radius: 18px; min-height: 0; }
.mh-service__content,
.mh-service--business .mh-service__content { padding-left: 0; padding-right: 0; }
.mh-print__visual,
.mh-print-grid article,
.mh-strength-grid article,
.mh-flow-list li,
.mh-contact-grid article { border-radius: 16px; }
}
@media (max-width: 575px) {
#main_content.page-service h1.title-page { font-size: 38px; }
.page-service .site-page .page-lead { font-size: 14px; line-height: 1.9; text-align: left; }
.page-service .page-section > h2 { font-size: 27px; padding-left: 17px; }
.page-service .page-card h3 { font-size: 17px; }
.service-print-feature ul { align-items: flex-start; flex-direction: column; }
.contact-type-notice { padding: 20px; }
} .page-company .company-payment-section {
background: #f7faf6;
border: 1px solid #e1e9df;
border-radius: 24px;
padding: 38px;
}
.company-payment-logos {
display: grid;
grid-template-columns: repeat(6, minmax(90px, 1fr));
gap: 12px;
margin: 28px 0;
}
.company-payment-logos span {
align-items: center;
background: #fff;
border: 1px solid #e1e6e3;
border-radius: 10px;
display: flex;
justify-content: center;
min-height: 72px;
padding: 12px;
}
.company-payment-logos img { display: block; max-height: 38px; max-width: 100%; width: auto; }
.company-payment-methods { margin: 0; }
.company-payment-methods div {
border-top: 1px solid #dce6da;
display: grid;
gap: 20px;
grid-template-columns: 180px minmax(0, 1fr);
padding: 18px 0;
}
.company-payment-methods dt { color: #184f23; font-weight: 700; }
.company-payment-methods dd { line-height: 1.8; margin: 0; }
.company-payment-notice {
background: #fff8ec;
border-left: 5px solid #d38a19;
margin-top: 24px;
padding: 22px 24px;
}
.company-payment-notice strong { color: #9a5a00; display: block; font-size: 18px; margin-bottom: 8px; }
.company-payment-notice p { line-height: 1.8; margin: 0; }
@media (max-width: 991px) {
.company-payment-logos { grid-template-columns: repeat(4, minmax(80px, 1fr)); }
}
@media (max-width: 575px) {
.page-company .company-payment-section { padding: 26px 20px; }
.company-payment-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.company-payment-methods div { gap: 8px; grid-template-columns: 1fr; }
} .mh-about__photos--single {
margin: 0;
min-height: 0;
padding: 24px;
}
.mh-about__photos--single:before {
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.mh-about__photos--single img:first-child,
.mh-about__photos--single img:last-child {
border: 8px solid #fff;
border-radius: 24px;
box-shadow: 0 20px 42px rgba(23,59,44,.18);
display: block;
height: auto;
object-fit: contain;
position: relative;
width: 100%;
} .mh-about__photo-labels {
inset: 0;
pointer-events: none;
position: absolute;
z-index: 3;
}
.mh-about__photo-label {
background: rgba(23,28,26,.86);
border-radius: 999px;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
padding: 7px 13px;
position: absolute;
}
.mh-about__photo-label--past {
left: 18px;
top: 18px;
}
.mh-about__photo-label--present {
background: #1e9c33;
bottom: 18px;
right: 18px;
} .mh-about__photos {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
min-height: 0;
padding: 18px;
}
.mh-about__photos:before {
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.mh-about__photos img:first-child,
.mh-about__photos img:nth-of-type(2) {
border: 6px solid #fff;
border-radius: 20px;
box-sizing: border-box;
display: block;
height: 390px;
inset: auto;
object-fit: contain;
object-position: center;
background: #fff;
position: relative;
width: 100%;
z-index: 1;
}
.mh-about__photos img:first-child {
filter: grayscale(1) contrast(1.04);
}
.mh-about__photo-label--past,
.mh-about__photo-label--present {
bottom: auto;
top: 34px;
z-index: 4;
}
.mh-about__photo-label--past { left: 34px; }
.mh-about__photo-label--present {
left: calc(50% + 24px);
right: auto;
}
@media (max-width: 767px) {
.mh-about__photos {
grid-template-columns: 1fr;
padding: 14px;
}
.mh-about__photos img:first-child,
.mh-about__photos img:nth-of-type(2) { height: 280px; }
.mh-about__photo-label--past { left: 28px; top: 28px; }
.mh-about__photo-label--present {
bottom: 28px;
left: 28px;
top: auto;
}
} .page-title-heading {
margin: 10px auto 52px;
position: relative;
text-align: center;
}
.page-title-heading__en {
color: #1e9c33;
font-family: Arial, "Noto Sans JP", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: .2em;
margin: 0 0 12px;
text-transform: uppercase;
}
.page-title-heading__en:after {
background: #1e9c33;
content: "";
display: block;
height: 2px;
margin: 13px auto 0;
width: 34px;
}
#main_content .page-title-heading h1.title-page {
color: #171c1a;
font-size: clamp(36px, 4vw, 54px);
letter-spacing: .04em;
margin: 0;
}
@media (max-width: 575px) {
.page-title-heading { margin-bottom: 38px; }
#main_content .page-title-heading h1.title-page { font-size: 34px; }
} .main-menu li a {
align-items: center;
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
min-height: 58px;
position: relative;
}
.main-menu li a .txt-jp {
color: #171c1a;
font-size: 14px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.2;
}
.main-menu li a .txt-en {
color: #1e9c33;
display: block;
font-family: Arial, "Noto Sans JP", sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1;
text-transform: uppercase;
}
.main-menu li:not(.contact_menu) a:after {
background: #1e9c33;
bottom: 2px;
content: "";
height: 2px;
left: 50%;
position: absolute;
transform: translateX(-50%) scaleX(0);
transition: transform .25s ease;
width: 28px;
}
.main-menu li:not(.contact_menu) a:hover:after,
.main-menu li:not(.contact_menu) a:focus:after { transform: translateX(-50%) scaleX(1); }
.main-menu li.contact_menu a .txt-jp,
.main-menu li.contact_menu a .txt-en { color: #fff; }
@media (max-width: 991px) {
.main-menu li a { align-items: flex-start; gap: 3px; min-height: 0; padding: 13px 22px; }
.main-menu li a .txt-jp { font-size: 15px; }
.main-menu li a .txt-en { font-size: 9px; }
.main-menu li:not(.contact_menu) a:after { display: none; }
.main-menu li.contact_menu a { align-items: center; border-radius: 0; }
} .achievement-schools { margin-top: 70px; }
.achievement-schools__head { margin-bottom: 32px; text-align: center; }
.achievement-schools__head > p,
.achievement-school-group header p {
color: #1e9c33;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
margin: 0 0 8px;
}
.achievement-schools__head h2 { color: #171c1a; font-size: clamp(30px, 3vw, 42px); margin: 0 0 14px; }
.achievement-schools__head > span { color: #66706b; }
.achievement-school-groups { display: grid; gap: 28px; }
.achievement-school-group {
background: #f7faf6;
border: 1px solid #e1e9df;
border-radius: 22px;
overflow: hidden;
}
.achievement-school-group summary {
align-items: center;
cursor: pointer;
display: grid;
gap: 24px;
grid-template-columns: minmax(180px, 1fr) auto minmax(130px, auto);
list-style: none;
padding: 28px 30px;
transition: background .2s ease;
}
.achievement-school-group summary::-webkit-details-marker { display: none; }
.achievement-school-group summary:hover { background: #eef6eb; }
.achievement-school-group__title { display: flex; flex-direction: column; gap: 6px; }
.achievement-school-group__title small {
color: #1e9c33;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
}
.achievement-school-group__title strong { color: #184f23; font-size: 24px; }
.achievement-school-group__count { align-items: baseline; color: #184f23; display: flex; font-weight: 700; gap: 5px; }
.achievement-school-group__count b { color: #1e9c33; font-size: clamp(42px, 5vw, 64px); line-height: 1; }
.achievement-school-group__toggle { align-items: center; color: #184f23; display: flex; font-weight: 700; gap: 10px; justify-content: flex-end; }
.achievement-school-group__toggle i {
border: 2px solid #1e9c33;
border-radius: 50%;
height: 28px;
position: relative;
width: 28px;
}
.achievement-school-group__toggle i:before,
.achievement-school-group__toggle i:after { background: #1e9c33; content: ""; left: 7px; position: absolute; top: 11px; width: 10px; height: 2px; }
.achievement-school-group__toggle i:after { transform: rotate(90deg); transition: transform .2s ease; }
.achievement-school-group[open] .achievement-school-group__toggle i:after { transform: rotate(0); }
.achievement-school-group[open] .achievement-school-group__toggle em { font-size: 0; }
.achievement-school-group[open] .achievement-school-group__toggle em:after { content: "閉じる"; font-size: 14px; font-style: normal; }
.achievement-school-group__toggle em { font-style: normal; }
.achievement-school-group__body { border-top: 1px solid #dce6da; padding: 8px 30px 28px; }
.achievement-school-group ul {
display: grid;
gap: 0 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
.achievement-school-group li {
border-top: 1px solid #dce6da;
color: #26312c;
line-height: 1.6;
padding: 12px 4px 12px 20px;
position: relative;
}
.achievement-school-group li:before { color: #1e9c33; content: "•"; left: 4px; position: absolute; }
.achievement-schools__note { color: #66706b; font-size: 13px; line-height: 1.8; margin: 22px 0 0; }
.achievement-schools__more {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 18px;
margin: 26px 0 30px;
padding: 22px 26px;
border: 1px solid #b8dba9;
border-left: 5px solid #1e9c33;
border-radius: 14px;
background: linear-gradient(110deg, #f1f8ec 0%, #fff 72%);
}
.achievement-schools__more > span {
color: #16852b;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
white-space: nowrap;
}
.achievement-schools__more > span b {
display: block;
margin-top: 4px;
color: #173d29;
font-size: 34px;
line-height: 1;
letter-spacing: -.03em;
}
.achievement-schools__more > span b small {
margin-left: 3px;
font-size: 13px;
letter-spacing: 0;
}
.achievement-schools__more strong {
display: block;
margin-bottom: 5px;
color: #173d29;
font-size: 18px;
}
.achievement-schools__more p {
margin: 0;
color: #56645c;
font-size: 13px;
line-height: 1.8;
}
.achievement-suppliers__more {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 18px;
margin: 26px 0 0;
padding: 22px 26px;
border: 1px solid #d7dfda;
border-left: 5px solid #173d29;
border-radius: 14px;
background: linear-gradient(110deg, #f4f7f5 0%, #fff 72%);
}
.achievement-suppliers__more > span {
color: #597066;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
white-space: nowrap;
}
.achievement-suppliers__more > span b {
display: block;
margin-top: 4px;
color: #173d29;
font-size: 34px;
line-height: 1;
letter-spacing: -.03em;
}
.achievement-suppliers__more > span b small {
margin-left: 3px;
font-size: 13px;
letter-spacing: 0;
}
.achievement-suppliers__more strong {
display: block;
margin-bottom: 5px;
color: #173d29;
font-size: 18px;
}
.achievement-suppliers__more p {
margin: 0;
color: #56645c;
font-size: 13px;
line-height: 1.8;
}
@media (max-width: 575px) {
.achievement-schools__more,
.achievement-suppliers__more {
grid-template-columns: 1fr;
gap: 8px;
padding: 20px;
}
.achievement-schools__more strong,
.achievement-suppliers__more strong { font-size: 16px; }
}
.page-company .company-message-layout figure {
background: #f3f4f2;
border-radius: 22px;
overflow: hidden;
}
.page-company .company-message-layout figure:after { display: none; }
.page-company .company-message-layout figure img {
height: 520px;
object-fit: cover;
object-position: center 18%;
width: 100%;
}
@media (max-width: 991px) {
.achievement-school-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-company .company-message-layout figure img { height: 480px; }
}
@media (max-width: 575px) {
.achievement-school-group summary { gap: 12px; grid-template-columns: 1fr auto; padding: 22px 20px; }
.achievement-school-group__title strong { font-size: 21px; }
.achievement-school-group__count b { font-size: 44px; }
.achievement-school-group__toggle { grid-column: 1 / 3; justify-content: flex-start; }
.achievement-school-group__body { padding: 6px 20px 22px; }
.achievement-school-group ul { grid-template-columns: 1fr; }
.page-company .company-message-layout figure img { height: 420px; }
} .page-company .company-message-layout .message-sign {
align-items: baseline;
color: #17261f;
display: flex;
font-family: "Noto Sans JP", sans-serif;
font-size: 12px;
font-weight: 500;
gap: 10px;
justify-content: flex-end;
letter-spacing: .1em;
line-height: 1.6;
margin-top: 34px;
}
.page-company .company-message-layout .message-sign span {
display: inline-block;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
font-size: clamp(24px, 2vw, 28px);
font-weight: 700;
letter-spacing: .09em;
line-height: 1.25;
}
.page-company .company-message-layout h3 { margin-bottom: 38px; }
@media (max-width: 575px) {
.page-company .company-message-layout .message-sign { gap: 8px; margin-top: 26px; }
.page-company .company-message-layout .message-sign span { font-size: 24px; }
.page-company .company-message-layout h3 { margin-bottom: 28px; }
} .page-company .company-message-section {
background: #123e2c;
border-radius: 30px;
color: #fff;
overflow: hidden;
padding: 52px;
position: relative;
}
.page-company .company-message-section:before {
color: rgba(255,255,255,.035);
content: "MESSAGE";
font-family: Arial, sans-serif;
font-size: clamp(80px, 13vw, 190px);
font-weight: 800;
letter-spacing: -.05em;
line-height: 1;
position: absolute;
right: -12px;
top: -22px;
}
.page-company .company-message-section .company-section-title { position: relative; z-index: 1; }
.page-company .company-message-section .company-section-title span { color: #a8db84; }
.page-company .company-message-section .company-section-title h2 { color: #fff; }
.page-company .company-message-section .company-message-layout {
align-items: stretch;
gap: 54px;
grid-template-columns: minmax(0, 1.12fr) minmax(280px, .68fr);
position: relative;
z-index: 1;
}
.page-company .company-message-section .company-message-layout > div:first-child { padding: 18px 0 8px; }
.page-company .company-message-section .company-message-layout h3 {
color: #fff;
font-family: "Noto Serif JP", serif;
font-size: clamp(30px, 3.2vw, 46px);
letter-spacing: .04em;
line-height: 1.55;
margin-bottom: 40px;
}
.page-company .company-message-section .company-message-layout p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 2.05; }
.page-company .company-message-section .company-message-layout figure { border-radius: 18px; box-shadow: 0 28px 65px rgba(0,0,0,.28); }
.page-company .company-message-section .company-message-layout figure img { height: 100%; min-height: 650px; object-position: center 15%; }
.page-company .company-message-section .company-credo {
border-bottom: 1px solid rgba(168,219,132,.55);
color: #d7f0c5;
display: inline-block;
font-family: "Noto Serif JP", serif;
font-size: 18px;
letter-spacing: .04em;
margin: 8px 4px 7px 0;
padding: 8px 0 10px;
}
.page-company .company-message-section .company-credo small {
color: #a8db84;
display: block;
font-family: Arial, sans-serif;
font-size: 9px;
letter-spacing: .2em;
margin-bottom: 2px;
}
.page-company .company-message-section .message-sign { color: rgba(255,255,255,.68); }
.page-company .company-message-section .message-sign span { color: #fff; }
@media (max-width: 991px) {
.page-company .company-message-section { padding: 40px; }
.page-company .company-message-section .company-message-layout { grid-template-columns: 1fr; }
.page-company .company-message-section .company-message-layout figure { margin: 0 auto; max-width: 480px; width: 100%; }
.page-company .company-message-section .company-message-layout figure img { height: 560px; min-height: 0; }
}
@media (max-width: 575px) {
.page-company .company-message-section { border-radius: 22px; padding: 30px 22px; }
.page-company .company-message-section .company-message-layout { gap: 34px; }
.page-company .company-message-section .company-message-layout h3 { font-size: 29px; margin-bottom: 30px; }
.page-company .company-message-section .company-message-layout figure img { height: 440px; }
} .page-company .company-message-section {
background: #f7f8f5;
border: 1px solid #e1e7df;
border-radius: 22px;
box-shadow: none;
color: #26312c;
overflow: hidden;
padding: 44px 48px;
}
.page-company .company-message-section:before { display: none; }
.page-company .company-message-section .company-section-title span { color: #6d8f79; }
.page-company .company-message-section .company-section-title h2 { color: #1d2c25; }
.page-company .company-message-section .company-message-layout {
align-items: center;
gap: 52px;
grid-template-columns: minmax(0, 1.12fr) minmax(280px, .68fr);
}
.page-company .company-message-section .company-message-layout > div:first-child { padding: 0; }
.page-company .company-message-section .company-message-layout h3 {
color: #1d2c25;
font-family: "Noto Serif JP", serif;
font-size: clamp(27px, 2.5vw, 36px);
letter-spacing: .035em;
line-height: 1.65;
margin-bottom: 32px;
}
.page-company .company-message-section .company-message-layout p {
color: #4f5c56;
font-size: 15px;
line-height: 2;
}
.page-company .company-message-section .company-message-layout figure {
border: 7px solid #fff;
border-radius: 16px;
box-shadow: 0 16px 36px rgba(25,52,39,.1);
}
.page-company .company-message-section .company-message-layout figure img {
height: 520px;
min-height: 0;
object-position: center 16%;
}
.page-company .company-message-section .company-credo {
background: transparent;
border: 0;
border-left: 3px solid #82a98d;
color: #284b39;
display: inline-block;
font-family: "Noto Serif JP", serif;
font-size: 16px;
letter-spacing: .03em;
margin: 8px 4px 6px 0;
padding: 4px 0 4px 14px;
}
.page-company .company-message-section .company-credo small {
color: #7c9686;
font-size: 8px;
letter-spacing: .18em;
margin-bottom: 1px;
}
.page-company .company-message-section .message-sign { color: #66736d; }
.page-company .company-message-section .message-sign span { color: #1d2c25; }
@media (max-width: 991px) {
.page-company .company-message-section { padding: 38px; }
.page-company .company-message-section .company-message-layout { gap: 38px; grid-template-columns: 1fr; }
.page-company .company-message-section .company-message-layout figure { max-width: 400px; }
.page-company .company-message-section .company-message-layout figure img { height: 500px; }
}
@media (max-width: 575px) {
.page-company .company-message-section { border-radius: 18px; padding: 28px 20px; }
.page-company .company-message-section .company-message-layout h3 { font-size: 26px; margin-bottom: 26px; }
.page-company .company-message-section .company-message-layout figure img { height: 420px; }
} .mh-authorized-badge {
align-items: center;
border-left: 3px solid #1e9c33;
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
margin: 22px 0 25px;
padding: 6px 0 6px 16px;
}
.mh-authorized-badge > span { display: flex; flex-direction: column; gap: 5px; }
.mh-authorized-badge small,
.company-authorized-dealer small {
color: #1e9c33;
font-family: Arial, sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .17em;
}
.mh-authorized-badge strong { color: #184f23; font-size: 15px; }
.company-authorized-dealer {
align-items: center;
background: #f3f8f1;
border: 1px solid #dce9d8;
border-radius: 18px;
margin: 24px 0;
padding: 26px 30px;
display: grid;
gap: 24px;
grid-template-columns: 240px minmax(0, 1fr);
}
.company-authorized-dealer strong { color: #184f23; display: block; font-size: 23px; margin: 6px 0 9px; }
.company-authorized-dealer p { color: #66706b; line-height: 1.8; margin: 0; }
@media (max-width: 575px) {
.mh-authorized-badge { align-items: flex-start; flex-direction: column; }
.company-authorized-dealer { padding: 22px 20px; }
.company-authorized-dealer strong { font-size: 19px; }
}
.page-authorized-dealer {
align-items: center;
background: #f3f8f1;
border: 1px solid #dce9d8;
border-left: 4px solid #1e9c33;
border-radius: 12px;
display: grid;
gap: 5px 24px;
grid-template-columns: 240px minmax(0, 1fr);
margin: 28px auto 34px;
max-width: 920px;
padding: 20px 24px;
}
.page-authorized-dealer > div { display: flex; flex-direction: column; gap: 5px; }
.page-authorized-dealer small {
color: #1e9c33;
font-family: Arial, sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .17em;
}
.page-authorized-dealer strong { color: #184f23; font-size: 18px; }
.page-authorized-dealer span { color: #66706b; font-size: 13px; line-height: 1.7; }
.tombow-official-link { display: inline-block; line-height: 0; max-width: 240px; }
.tombow-official-link img { display: block; height: auto; max-width: 100%; width: 240px; }
@media (max-width: 575px) {
.page-authorized-dealer { grid-template-columns: 1fr; padding: 18px 20px; }
.page-authorized-dealer strong { font-size: 17px; }
.company-authorized-dealer { grid-template-columns: 1fr; }
}
.service-school-catalog { margin-top: 72px; }
.service-school-catalog__head { margin-bottom: 30px; }
.service-school-catalog__head > p { color: #1e9c33; font-family: Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .18em; margin: 0 0 8px; }
.service-school-catalog__head h2 { margin-bottom: 12px; }
.service-school-catalog__head > span { color: #66706b; line-height: 1.8; }
.service-school-products { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-school-product { align-items: flex-start; background: #fff; border: 1px solid #dce6df; border-radius: 14px; display: grid; gap: 15px; grid-template-columns: 34px minmax(0, 1fr); padding: 22px 20px; }
.service-school-product__number { color: #1e9c33; font-family: Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding-top: 4px; }
.service-school-product small { color: #1e9c33; display: block; font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .1em; margin-bottom: 6px; }
.service-school-product h3 { color: #173d29; font-size: 20px; margin: 0 0 9px; }
.service-school-product p { color: #68736d; font-size: 13px; line-height: 1.75; margin: 0; }
.service-school-catalog__note { background: #f3f8f1; border-radius: 8px; color: #59665f; font-size: 13px; margin: 24px 0 0; padding: 15px 18px; }
@media (max-width: 991px) {
.service-school-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
.service-school-catalog { margin-top: 50px; }
.service-school-products { gap: 16px; grid-template-columns: 1fr; }
.service-school-product { grid-template-columns: 30px minmax(0, 1fr); padding: 18px 16px; }
.service-school-product h3 { font-size: 17px; }
.service-school-product p { font-size: 12px; }
} .mh-aftercare__heading h2 {
font-family: "Noto Sans JP", sans-serif;
font-size: clamp(32px, 3.2vw, 43px);
font-weight: 700;
letter-spacing: -.025em;
line-height: 1.5;
}
.mh-aftercare__heading > p:last-child {
color: #4f5e55;
font-size: 15px;
font-weight: 500;
line-height: 2;
}
.mh-aftercare__grid article {
border: 0;
border-radius: 20px;
box-shadow: 0 12px 28px rgba(23, 59, 44, .055);
min-height: 240px;
padding: 35px 38px 30px 115px;
transition: box-shadow .2s ease, transform .2s ease;
}
.mh-aftercare__grid article:hover {
box-shadow: 0 18px 38px rgba(23, 59, 44, .1);
transform: translateY(-3px);
}
.mh-aftercare__grid article > span {
background: #e6f3df;
border: 2px solid #c8aa67;
border-radius: 50%;
box-shadow: 0 5px 12px rgba(23, 59, 44, .12), inset 0 0 0 2px #fff;
box-sizing: border-box;
height: 50px;
left: 35px;
margin: 0;
overflow: hidden;
padding: 4px;
position: absolute;
top: 38px;
width: 50px;
}
.mh-aftercare__grid article > span img {
display: block;
height: 38px;
margin: auto;
max-width: none;
object-fit: contain;
object-position: center;
width: 38px;
}
.mh-aftercare__grid article > .mh-aftercare-card__label {
color: #1e9c33;
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.4;
margin: 0 0 10px;
position: static;
}
.mh-aftercare__heading h2 { grid-column: 1; grid-row: 2; }
.mh-aftercare__heading > p:last-of-type {
align-self: start;
grid-column: 1;
grid-row: 3;
margin: 0;
}
.mh-aftercare__visual {
border-radius: 22px;
box-shadow: 0 18px 40px rgba(23, 59, 44, .11);
grid-column: 2;
grid-row: 2 / 4;
height: 300px;
margin: 0;
overflow: hidden;
}
.mh-aftercare__visual img { height: 100%; object-fit: cover; width: 100%; }
@media (max-width: 767px) {
.mh-aftercare__heading h2,
.mh-aftercare__heading > p:last-of-type,
.mh-aftercare__visual { grid-column: 1; grid-row: auto; }
.mh-aftercare__visual { border-radius: 16px; height: 230px; margin-top: 8px; }
}
.mh-aftercare__grid h3 {
font-family: "Noto Sans JP", sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: .01em;
}
.mh-aftercare__grid p {
color: #56645c;
font-size: 14px;
line-height: 1.9;
}
.mh-aftercare__grid ul {
list-style: none;
margin: 16px 0 0;
padding: 0;
}
.mh-aftercare__grid li {
color: #26322b;
font-size: 14px;
font-weight: 500;
line-height: 1.7;
margin-top: 8px;
padding-left: 26px;
position: relative;
}
.mh-aftercare__grid li::before {
align-items: center;
background: #dff0d5;
border-radius: 50%;
color: #1e9c33;
content: "✓";
display: flex;
font-size: 11px;
font-weight: 700;
height: 18px;
justify-content: center;
left: 0;
position: absolute;
top: .25em;
width: 18px;
}
.mh-aftercare__note { font-size: 12px; line-height: 1.7; }
.service-aftercare-feature__head h2,
.service-aftercare-feature__grid h3 {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
}
.service-aftercare-feature {
display: grid;
gap: 30px 42px;
grid-template-columns: 44% minmax(0, 1fr);
}
.service-aftercare-feature__head { align-self: center; margin: 0; }
.service-aftercare-feature__visual {
border-radius: 18px;
height: 280px;
margin: 0;
overflow: hidden;
}
.service-aftercare-feature__visual img { height: 100%; object-fit: cover; width: 100%; }
.service-aftercare-feature__grid,
.service-aftercare-feature__note { grid-column: 1 / 3; }
@media (max-width: 767px) {
.mh-aftercare__grid article { min-height: 0; padding: 28px 22px 26px 88px; }
.mh-aftercare__grid article > span { left: 22px; top: 29px; }
.service-aftercare-feature { grid-template-columns: 1fr; }
.service-aftercare-feature__visual { height: 220px; }
.service-aftercare-feature__grid,
.service-aftercare-feature__note { grid-column: 1; }
} .mh-news .mh-heading > span {
color: #627068;
display: block;
font-size: 13px;
line-height: 1.8;
margin-top: 14px;
}
.mh-news .container {
display: grid;
gap: 34px;
grid-template-columns: minmax(0, 1fr);
}
.mh-news .mh-heading {
max-width: 820px;
}
.mh-news .mh-heading h2 {
line-height: 1.35;
white-space: nowrap;
}
.mh-news-list a {
grid-template-columns: 100px minmax(0, 1fr) auto 28px;
min-height: 76px;
}
.mh-news-list a > span {
font-size: 15px;
font-weight: 600;
line-height: 1.75;
word-break: auto-phrase;
overflow-wrap: break-word;
}
.mh-news-list a > small {
background: #e6f3df;
border-radius: 999px;
color: #197f2c;
font-size: 10px;
font-weight: 700;
padding: 6px 10px;
white-space: nowrap;
}
.mh-news-list__empty {
align-items: center;
border-bottom: 1px solid #d2d9d5;
display: grid;
gap: 20px;
grid-template-columns: 100px minmax(0, 1fr);
min-height: 96px;
padding: 20px 5px;
}
.mh-news-list__empty > span {
color: #1e9c33;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.mh-news-list__empty p { color: #66736c; font-size: 14px; margin: 0; }
@media (max-width: 767px) {
.mh-news .mh-heading h2 { white-space: normal; }
.mh-news-list a { grid-template-columns: 1fr auto 22px; }
.mh-news-list time { grid-column: 1 / 4; }
.mh-news-list a > small { grid-column: 2; grid-row: 2; }
.mh-news-list a > i { grid-column: 3; grid-row: 2; }
.mh-news-list__empty { gap: 8px; grid-template-columns: 1fr; }
} .page-cta,
.page-service .page-cta {
background: linear-gradient(135deg, #ffffff 0%, #f4f8f3 100%);
border: 1px solid #d9e5dc;
border-radius: 22px;
box-shadow: 0 16px 40px rgba(23, 59, 44, .08);
color: #171c1a;
display: grid;
gap: 10px 40px;
grid-template-columns: minmax(0, 1fr) auto;
margin-top: 64px;
overflow: hidden;
padding: 44px 48px 42px 54px;
position: relative;
text-align: left;
}
.page-cta:before {
background: #1e9c33;
content: "";
inset: 0 auto 0 0;
position: absolute;
width: 6px;
}
.page-cta h2,
.page-service .page-cta h2 {
border: 0;
color: #173d29 !important;
font-size: clamp(24px, 2.4vw, 32px);
letter-spacing: .015em;
line-height: 1.45;
margin: 0;
padding: 0;
}
.page-cta p,
.page-service .page-cta p {
color: #637068 !important;
font-size: 14px;
line-height: 1.85;
margin: 0;
}
.page-cta .btn-primary-green {
align-items: center;
align-self: center;
background: #173d29;
border: 1px solid #173d29;
border-radius: 999px;
box-shadow: none;
color: #fff;
display: inline-flex;
font-size: 14px;
font-weight: 700;
grid-column: 2;
grid-row: 1 / 3;
justify-content: center;
margin: 0;
min-height: 52px;
min-width: 190px;
padding: 14px 24px;
transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.page-cta .btn-primary-green:after {
content: "\2192";
font-size: 18px;
line-height: 1;
margin-left: 16px;
}
.page-cta .btn-primary-green:hover,
.page-cta .btn-primary-green:focus {
background: #1e9c33;
border-color: #1e9c33;
color: #fff;
text-decoration: none;
transform: translateX(3px);
}
@media (max-width: 767px) {
.page-cta,
.page-service .page-cta {
border-radius: 16px;
gap: 12px;
grid-template-columns: 1fr;
margin-top: 48px;
padding: 32px 24px 28px 30px;
}
.page-cta h2,
.page-service .page-cta h2 { font-size: 23px; }
.page-cta .btn-primary-green {
grid-column: 1;
grid-row: auto;
margin-top: 8px;
min-width: 0;
width: 100%;
}
}