*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: #1a1a1a; line-height: 1.75; } :root{
--c-primary: #2b61b3; --c-accent:  #ff6b6b; --c-bg:      #ffffff;
--c-mute:    #f5f7fb; --c-ink:     #1a1a1a;
--radius:    14px;
--shadow:    0 10px 24px rgba(0,0,0,.08);
--container: 1120px; }
body{
max-width:100%;
}
.wrapper{
max-width:1920px;
margin:auto;
}
.site-header a{
display:block;
max-width:100%;
margin:auto;
}
.site-header{
background-image:url(//haprot.com/wp-content/themes/harprot/assets/img/background-image.png);
background-size: contain;
background-repeat: no-repeat;
min-height:162px;
}
.header__inner{
position:relative;
}
.site-header .logo{
position:absolute;
left:calc((47/1920)*100vw);
top:calc((42/1920)*100vw);
}
.site-header .logo img{
max-width:255px;
width:calc((255/1920)*100vw);
}
.sns li,
.sns,
.site-description li,
.site-description ul{
list-style:none;
}
.sns{
display:flex;
gap:30%;
position:absolute;
left:calc((1235/1920)*100vw);
top:calc((25/1920)*100vw);
padding-left:0;
}
.sns a{
color:white;
font-size:calc((25/1920)*100vw);
}
.site-description ul{
display:flex;
gap:50px;
position:absolute;
left:calc((376/1920)*100vw);
top:calc((25/1920)*100vw);
}
.site-description li{
color:white;
font-size:calc((25/1920)*100vw);
}
.site-header .contact{
position:absolute;
left:auto;
left:calc((1505/1920)*100vw);
right:1vw;
top:calc((35/1920)*100vw);
transition: all .25s ease-out;
}
.a,
a{
transition: all .25s ease-out;
}
.a,
a:hover{
opacity:0.8;
}
a img{
transition: all .25s ease-out;
}
a:hover img{
opacity:0.8;
}
.site-header .contact:hover{
opacity:0.8;
}
.site-header .contact a{
display:block;
color:white;
text-decoration:none;
font-size:calc((36/1920)*100vw);
letter-spacing:3.5pt;
background:url(//haprot.com/wp-content/themes/harprot/assets/img/button-back.png) no-repeat;
background-size: contain;
width:calc((360/1920)*100vw);
text-align:center;
} .slick-slide img { display:block; width:100%; height:auto; } .purchase-list { margin:0; padding:0; list-style:none; } .slider-outer{
top:calc(10vw * -1);
z-index:-1;
margin-top:-2vw;
position:relative;
}
@media screen and (max-width: 960px) {
.slider-outer{
top:calc(-15vw - 40px);
}
}
@media screen and (max-width: 600px) {
.slider-outer{
top:calc(-16vw - 40px);
}
} .slider { --slide-h: 0px; } .slider .slick-slide { height: var(--slide-h) !important; }
.slider .slick-slide > div { height: 100%; } .slider img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;   } .v-rl {
writing-mode: vertical-rl; text-orientation: mixed; } .v-upright {
text-orientation: upright;
} .tcy-2 { text-combine-upright: digits 2; } .tcy-3 { text-combine-upright: digits 3; }
.tcy-4 { text-combine-upright: digits 4; } .v-nowrap { white-space: nowrap; } .v-label {
letter-spacing: .1em; line-height: 1.8; }
.right-button ul,
.right-button li{
list-style:none;
}
.right-button ul{
}
.right-button li{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-width:calc((60/1920)*100vw);
min-height:calc((350/1920)*100vw);
position:relative;
}
.right-button li a{
text-decoration:none;
color:white;
font-size:calc((27/1920)*100vw);
letter-spacing:0.4em;
display:block;
width:100%;
height:100%;
z-index:1;
}
.right-button li.l1:before{
content:'';
background:url(//haprot.com/wp-content/themes/harprot/assets/img/l1.png) no-repeat;
background-size: contain;
position: absolute;
top: 10%;
left: 8%; widtH: 85%;
min-height: 14%;
}
.right-button li.l2:before{
content:'';
background:url(//haprot.com/wp-content/themes/harprot/assets/img/l2.png) no-repeat;
background-size: contain;
position: absolute;
top: 15%;
left: 16%; widtH: 90%;
min-height: 14%;
}
.right-button li:hover{
opacity:0.8;
}
.right-button li.l1{
background:url(//haprot.com/wp-content/themes/harprot/assets/img/right-menu1.png) no-repeat;
background-size: cover;
padding-top:1em;
transition: all .25s ease-out;
}
.right-button li.l2{
background:url(//haprot.com/wp-content/themes/harprot/assets/img/right-menu2.png) no-repeat;
background-size: cover;	
padding-top:3em;
position:relative;
margin-top: -60%;
transition: all .25s ease-out;
} .site-header{
position: sticky;
top: 0px;
z-index: 1000;
}
.right-button{
position: fixed;
right: 0;
top: min(12.08vw, 232px);
z-index: 100;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
justify-content: center;
} :root{ --header-h: 64px; } html { scroll-padding-top: var(--header-h); }
.kokoro-inner{
background:url(//haprot.com/wp-content/themes/harprot/assets/img/kokoro-title.svg) no-repeat;
background-size: contain;	
min-height:calc((500/1920)*100vw);
}
.flex{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
}
.flex img{
max-width:100%;
}
.kokoro{
margin-top:-9%;
}
.kokoro-inner{
padding-top:18%;
}
.kokoro-inner .flex{
width:70%;
margin:auto;
gap: 10vw;
}
.kokoro-inner .fl{
width:60%;
}
.kokoro-inner .fr{
width:40%;
}
.kokoro-inner .fr img{
display:block;
max-width:100%;
}
.banner_list ul,
.banner_list li{
list-style:none;
margin-left:0;
padding-left:0;
}
.banner_list li a{
display:block;
}
.banner_list li{
margin:0 20px;
display:block;
}
.banner_list img{
display:block;
object-fit:contain;
width:80%;
max-width:120px;
height: 120%;
}
.banner_list ul{
max-height:90px;
}
.banner_list {
padding:5% 0;
}
html .banner_list a{
display: flex;
align-items: center; justify-content: center; width: var(--frame-w);
height: var(--ticker-h);
line-height: 0; }
.js-ticker .slick-slide{
height:90px;
}
.js-ticker .slick-slide{
width:auto!important;
}
.js-ticker{ direction:ltr; margin:0; padding:0; list-style:none; --ticker-h:64px; --gap:16px; }
.js-ticker .slick-slide{ margin: 0 calc(var(--gap)/2); }
.js-ticker a{ display:block; line-height:0; }
.js-ticker img{ display:block;  }
.js-ticker .slick-list{ overflow:hidden; }
.js-ticker .slick-track{ display:block !important; will-change: transform; } .ticker-mask{
--fade-w: 64px; --fade-color: #fff; position: relative;
} .ticker-mask::before,
.ticker-mask::after{
content: "";
position: absolute;
top: 0; bottom: 0;
width: var(--fade-w);
pointer-events: none;
z-index: 2; } .ticker-mask::before{
left: 0;
background: linear-gradient(
to right,
var(--fade-color) 0%,
rgb(255 255 255 / 0) 100%
);
} .ticker-mask::after{
right: 0;
background: linear-gradient(
to left,
var(--fade-color) 0%,
rgb(255 255 255 / 0) 100%
);
}
.page-link h2 {
display: block;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/h2.png) center center no-repeat;
background-size: contain;
font-size: calc((40 / 1920) * 100vw);
letter-spacing: 0.15em;
text-align: center;
font-weight: 400;
color: white;
padding-top: 0.25em;
padding-bottom: 0.25em;
margin-bottom:1.5em;
}
.page-link .flex{
width:70%;
margin:auto;
justify-content: center;
}
.page-link .flex img{
height:calc((530 / 1920) * 100vw);
}
.page-link .flex{
--gap: 5%;
display:flex;
column-gap: var(--gap);
}
.page-link .flex a:nth-of-type(2){
position: relative;
padding-left:2.5%;
}
.page-link .flex a:nth-of-type(2)::before{
content:"";
position:absolute;
top:0; bottom:0;
left: calc(-1 * var(--gap) / 2); width:1px;
background:#231815;
}
.safety-sustainability{
padding-top:10%;
position: relative;
z-index:1;
}
.safety-sustainability {
}
.safety-sustainability > img{
max-width:100%;
padding-top: -3.07%;
display:block;
background-color:white;
}
.safety-sustainability h2 {
display: block;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/h2-2.png) center center no-repeat;
background-size: cover;
font-size: calc((40 / 1920) * 100vw);
letter-spacing: 0.15em;
text-align: center;
font-weight: 400;
color: white;
padding-top: 0.25em;
padding-bottom: 0.25em;
margin-bottom: 1.5em;
margin-top: 0em;
width: 75%;
background-position: center center;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.safety-sustainability .content{
padding-top:5%;
}
.safety-sustainability .flex{
width:70%;
margin:auto;
gap:5%;
}
.safety-sustainability .flex .image{
position:relative;
}
.safety-sustainability .flex .image img {
display: block;
box-shadow: -12px 12px 0 #bdcce5;
}
.safety-sustainability .catch p{
font-size: calc((24 / 1920) * 100vw);	
letter-spacing:0;
}
.safety-sustainability .flex .image:before{
content:'';
background-color:#BDCCE5;
display:block;
position:absolute;
width:100%;
}
.safety-sustainability h2 small{
position:relative;
top:-0.2em;
}
.safety-sustainability .catch{
width:60%;
}
.safety-sustainability .catch img{
width:80%;
}
.safety-sustainability .image{
width:40%;
}
.safety-sustainability .content{
padding-bottom:2.5%;
background:#E3ECF3;
}
.safety-sustainability .table{
background:white;
width:75%;
margin:auto;
border-radius:1em;
overflow:hidden;
box-shadow:-5px -5px 3px rgba(0,0,0,0.15),
5px 5px 3px rgba(0,0,0,0.15),
-5px 5px 3px rgba(0,0,0,0.15),
5px -5px 3px rgba(0,0,0,0.15);
}
.safety-sustainability .table .flex{
width:90%
}
.safety-sustainability .table .flex > div{
width:50%;
}
.safety-sustainability .table h2{
display: block;
margin-bottom:0;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/h2-3.png) center center no-repeat;
background-size: cover;
padding-top:1.1em;
padding-bottom:1.1em;
color:#08607F;
font-size: calc((55 / 1920) * 100vw);
font-weight: 800;
letter-spacing: 0.25em;
width:100%;
}
.safety-sustainability .table .flex.under{
gap:8%;
margin-top:5%;
padding-bottom:2%;
}
.safety-sustainability .table .flex.under h3{
background: url(//haprot.com/wp-content/themes/harprot/assets/img/h3.png) center center no-repeat;
background-size: contain;	
display:block;
color:white;
font-size: calc((34 / 1920) * 100vw);
font-weight:300;
letter-spacing:0.4em;
text-align:center;
padding-top:0.2em;
padding-bottom:0.2em;
}
.safety-sustainability .table .flex.under > div{
display:block;
width:100%;
position:static;
}
.safety-sustainability .table .flex.under .image-data img {
display: block;
height: 22vw;
margin: auto;
}
.safety-sustainability .table .flex.under  p{
text-align:center;
}
.safety-sustainability .content.c-3 .flex{
flex-direction: row-reverse; 
}
.non-flex{
display:block;
width:75%;
margin:0 auto;
padding:3% 0 0;
}
.non-flex + .non-flex{
padding-top:0;
}
.content h3{
color:#08607F;
font-size: calc((45 / 1920) * 100vw);
position:relative;
padding-left:0.6em;
}
.content .non-flex h3:before{
content:"";
display:block;
background:#DD5F0D;
position:absolute;
left:0;
top:0;
width:0.65%;
height:100%;
}
.safety-sustainability .content.c-3 .flex.nayami{
flex-direction: row;
gap:0;
}
.safety-sustainability .content.c-3 .flex.nayami > div{
width:33.333%;
gap:0;
text-align:center;
background:url(//haprot.com/wp-content/themes/harprot/assets/img/nayami-bg.png) center center no-repeat;
background-size: contain;	
font-size: calc((30 / 1920) * 100vw);
font-weight:550;
color:#08607F;
line-height:1.1;
padding: 0.6% 0;
}
.safety-sustainability .content.c-3 h4 {
text-align: center;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/h4.svg) center center no-repeat;
background-size: cover;
font-size: calc((50 / 1920) * 100vw);
letter-spacing: 0.15em;
font-weight: 550;
color: #fff;
width: 100%;
padding-top: 0.2em;
padding-bottom: 0.6em;
margin-top:0.5em;
}
.safety-sustainability .content.c-3 .flex.design{
flex-direction: row;
gap: 3%;
}
.safety-sustainability .content.c-3 .flex.design > div{
width:33.333%;
gap:0;
text-align:center;
background:none;
background-size: contain;	
font-size: calc((30 / 1920) * 100vw);
font-weight:550;
color:#08607F;
line-height:1.1;
padding: 0.6% 0;
}
.safety-sustainability .content.c-3 .flex.design > div p{
font-size: calc((30 / 1920) * 100vw);
color:#231815;
font-weight:600;
}
.safety-sustainability .content .youtube iframe {
margin: auto;
text-align: center;
display: block; width: 54%;
height:25.5vw;
}
.safety-sustainability .content .youtube{
width:85%;
margin:auto;
position:relative;
}
.youtube img {
display: block;
position: absolute;
max-width: 187px;
width: 10%;
top: 50%;
left: 6%;
transform: translate(-0%, -50%);
height: auto;
}
.flex.safe {
overflow: hidden;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/safe.png) right -6% #B7CBE3 no-repeat;
background-size: 21%;
width: 75%;
margin: auto;
padding: 2.5%;
border-radius: 1em;
}
@media screen and (max-width: 800px) {
.flex.safe {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/safe.png) right bottom #B7CBE3 no-repeat;
background-size: 21%;
}
}
.flex.safe .message{
width:55%;
}
.flex.safe .director{
width:30%;
color:#08607F;
}
.flex.safe .blank{
width:15%;
color:#08607F;
}
.flex.safe .director{
}
.flex.safe .director .layout{
margin-top:7em
}
.flex.safe .director img{
width:57%;
}
.flex.safe .message img{
width:70%;
}
.contactform {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/contact.png) center center no-repeat;	
background-size:contain;
width: calc((1200 / 1920) * 100vw);;
margin:auto;
}
.contactform a{
display:block;
text-decoration:none;
color:white;
font-size: calc((33 / 1920) * 100vw);
font-weight:300;
letter-spacing:0.2em;
line-height:1.25;
text-align:center;
padding:2% 2% 2% 8%;
}
.welmap > img {
max-width: 90%;
margin: 0 auto;
padding-top: -3.07%;
display: block;
background-color: white;
}
.welmap .c-1 h2 {
display: block;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/welmap-h2.png) center center no-repeat;
background-size: contain;
font-size: calc((58 / 1920) * 100vw);
letter-spacing: 0.35em;
text-align: center;
font-weight: 400;
color: white;
padding-top: 0.25em;
padding-bottom: 0.25em;
margin-bottom: 1.5em;
margin-top: 0em;
width: 85%;
background-position: center center;
text-align: center;
margin-left: auto;
margin-right: auto;
width:100%;
}
#welmap .c-1{
padding-top:6vw;
}
.welmap .flex {
width: 100%;
margin: auto;
gap: 5%;
}
.welmap  .flex .catch{
width:55%;	
}
.welmap  .flex .image {
position: relative;
width:45%;	
}
.welmap  .flex .catch .h3{
width:50%;
margin-bottom:4%;
}
.welmap  .flex .catch .h4{
width:80%;
}
.welmap .flex .image:before {
content: '';
background-color: #BDCCE5;
display: block;
position: absolute;
width: 100%;
}
.welmap .c-1{
position:relative;
}
.welmap .bg4,
.welmap .bg3,
.welmap .bg2,
.welmap .bg1{
position:absolute;
z-index:-1;
}
.welmap .bg2 {
width: calc((277 / 1920) * 100vw);
top: 44%;
right: -10%;
}
.welmap .bg1 {
width: calc((1200 / 1920) * 100vw);
top: 1%;
left: -11%;
}
.welmap .bg3 {
width: calc((397 / 1920) * 100vw);
top: 1%;
left: -11%;
}
.welmap .c-1 .bg2 {
top: 44%;
right: -10%;
}
.welmap .c-1 .bg1 {
top: 1%;
left: -11%;
}
.welmap .c-2 .bg1 {
top: 30%;
right: -43%;
left: auto;
}
.welmap .c-2 .bg3 {
top: 46%;
left: -25%;
right: auto;
}
.welmap .flex .image img {
display: block;
box-shadow: -12px 12px 0 #EFB7B6;
}
.welmap .c-2{
width:85%;
margin:auto;
position:relative;
}
.welmap .c-5 h2 ,
.welmap .c-4 h2 ,
.welmap .c-3 h2 ,
.welmap .c-2 h2 {
display: inline-block;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/welmap-h2-2.svg) 0 0 no-repeat;
background-size: cover;
font-size: calc((40 / 1920) * 100vw);
letter-spacing: 0.1em;
text-align: center;
font-weight: 600;
color: #EC6D7B;
margin: 0;
margin-top: 5%; text-align: left;
padding: 2% 0 0 4%;
}
.welmap .c-2 .image-data img{
display:block;
width: calc((576 / 1920) * 100vw);
}
.welmap .c-2 .image-data {
position: absolute;
top: 18%;
right: 3%;
}
.welmap .c-2 ul{
margin-top:4%;
position: relative;
}
.welmap .c-2 ul,
.welmap .c-2 li{
list-style:none;
padding-left:3%;
margin-left:0;
}
.welmap .c-2 li{
font-size: calc((25 / 1920) * 100vw);
line-height:2;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/checkbox.png) left 0.4em  no-repeat;
background-size:1.2em;
}
.welmap .c-3 h3,
.welmap .c-2 h3{
background: url(//haprot.com/wp-content/themes/harprot/assets/img/welmap-h3-2.svg) top center  no-repeat;
background-size: contain;
color:white;
text-align:center;
font-weight:500;
font-size: calc((36 / 1920) * 100vw);
letter-spacing:0.2em;
padding-top:0.75%;
padding-bottom:1.5%;
margin-bottom:0;
}
.welmap .c-2 .message{
padding:0 5%;
}
.welmap .c-2 .bg4 {
width: calc((353 / 1920) * 100vw);
top: 125%;
left: -22%;
right: auto;
}
.welmap .c-1 .flex .catch p{
margin-top:0;
}
#welmap {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/welmap-background.svg) 39% 59vw repeat-y;
background-size: 144%;
margin-top:-6%;
padding-bottom:6%;
}
#welmap > img{
padding-top:6%;
}
.welmap .content{
width:75%;
margin:auto;
}
.welmap .c-4 p,
.welmap .c-3 p{
margin-left:4%;
}
.welmap .f-3 > div{
width:33.333%;
}
.welmap .c-3 .f-3 .image-data img{
display:block;
max-width:80%;
height:calc((355 / 1920) * 100vw);
margin:auto;
}
.welmap .f-2 > div{
width:calc(50% - 2.5%);
margin-bottom:2.5%;
}
.welmap .f-4 {
gap:2.5%
}
.welmap .f-4 > div{
width:calc(25% - 1.25%);
margin-bottom:2.5%;	
}
.welmap .c-4 .f-2{
flex-wrap:wrap;
width:92%;
}
.welmap .c-4 .f-2 p,
.welmap .c-3 .f-3 p{
text-align:center;
}
.welmap .c-3 h4{
font-size: calc((36 / 1920) * 100vw);
letter-spacing: 0.2em;
color:#F4A452;
text-align:center;
margin-top:1%;
}
.welmap .c-5 .f-4 {
width:92%;
margin-top:1%;
}
.welmap .c-5 .f-4 img{
height:calc((387 / 1920) * 100vw);
}
.welmap .c-5 .f-4 p{
text-align:center;
font-size: calc((22 / 1920) * 100vw);
}
.welmap .content.c-6{
margin-top:4%;
}
.welmap .c-6 .flex .catch p{
margin:0;
}
.welmap .c-6 .flex .catch .h3 {
width: 87%;
margin-bottom: -1%;
}
.welmap .c-6 .flex .catch .h4 {
width: 100%;
}
.welmap .c-7{
margin-top:6%;
padding-bottom: 2.5%;
}
.welmap .c-7 .content {
}
.welmap .c-7.content .flex{
overflow: hidden;
width: 100%;
margin: auto;
padding: 2.5%;
border-radius: 1em;
}
.welmap .c-7 .flex .message {
width: 65%;
}
.welmap .c-7 .flex .director {
width: 30%;
color: #08607F;
}
.welmap .c-7 .flex .blank {
width: 5%;
color: #08607F;
}
.welmap .c-7 .flex .message img {
width: 70%;
max-width: 100%;
}
.welmap .c-7 .flex .director .layout {
margin-top: 7em;
}
.welmap .c-7 .flex .director img {
width: 57%;
}
.welmap .c-7 .message .image-data img{
width:100%;
margin-bottom:3%;
}
.welmap .c-7 p{
margin-top:0;
}
.welmap .c-7 h4{
color:#EC6D7B;
font-size: calc((26 / 1920) * 100vw);
margin:0;
}
.welmap .c-7 .director p{
color:#EC6D7B;	
}
.welmap .c-7 .flex {
align-items: flex-end;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/y-m-photo.png) right 2% #FBD2D6 no-repeat;
background-size: 28%;
}
@media screen and (max-width: 940px) {
.welmap .c-7 .flex {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/y-m-photo.png) right bottom #FBD2D6 no-repeat;
background-size: 27%;
}
}
.welmap .c-8 .contact-link a {
text-decoration: none;
color: white;
font-size: calc((51 / 1920) * 100vw);
text-align: center;
line-height: 1.2em;
display: block;
margin-left: 23%;
letter-spacing:0.2em;
}
.welmap .c-8 .contact-link {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/contact-back.png) center center no-repeat;
background-size: contain; margin: auto;
padding: 2%;
}
.company {  position: relative;
overflow: visible;
padding-top: 200px;
}
.company::before {
content: "";
position: absolute;
top: -20px;
width: 100%;
height: 500px;
background: url(https://haprot.com/wp-content/themes/harprot/assets/img/sec-3-h2-back.png) no-repeat center / cover;
}
.company .content{
position:relative;
width:75%;
margin:auto;
}
.company .content h2{
opacity:0;
}
.company .logo{
position:absolute;
width: calc((437 / 1920) * 100vw);
top: 7vw;
}
.company .company-message{
position:absolute;
width: calc((989 / 1920) * 100vw);
top: 15vw;
}
.company .flex{
margin-top:19vw;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.company .flex .image-data img{
display:block;
width: calc((200 / 1920) * 100vw);
}
.company .message3 img{
display:block;
width: calc((643 / 1920) * 100vw);
}
.company .non-flex p,
.company .non-flex {
margin-top:0;
padding-top:0;
}
.company .non-flex {
width:94%
}
.company .non-flex p{
max-width:55%;
}
.company .flex h3{
color:#232584;
line-height:1.5em;
}
.company ul {
margin-top: 4%;
position: relative;
}
.company ul, 
.company li {
list-style: none;
padding-left: 0%;
margin-left: 0;
}
.company li {
list-style: none;
padding-left: 3%;
margin-left: 0;
}
.company li {
font-size: calc((25 / 1920) * 100vw);
line-height: 2;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/checkbox.png) left 0.4em no-repeat;
background-size: 1.2em;
}
.company .team {
display: block;
width: calc((860 / 1920) * 100vw);
position: absolute;
bottom: -12%;
right: -5.5%;
z-index:-1
}
section.contact{
padding:10% 0% 0;
}
section.contact .content{
width:60%;
margin:0 auto;
}
section.contact h2{
font-size: calc((48 / 1920) * 100vw);
text-align:center;
margin-bottom:0;
color:#C9A06B;
font-weight:900;
}
section.contact h2 + p{
font-size: calc((26 / 1920) * 100vw);
text-align:center;
margin-top:0;
color:#231815;
font-weight:400;
}
section.contact .form-wrapper{
border:solid 1px #231815;
padding:4%;
}
.contact .label{
font-size: calc((28 / 1920) * 100vw);
font-weight:600;
}
section.contact .label label{
width:8em;
display: inline-block;
}
section.contact .label .required{
font-size: calc((18 / 1920) * 100vw);
font-weight:normal;
color:white;
display:inline-block;
background-color:#F08300;
padding:0em 0.5em;
}
section.contact input[type=text],
section.contact input[type=tel],
section.contact input[type=email],
section.contact textarea{
border:none;
display:block;
width:100%;
font-size: calc((25 / 1920) * 100vw);
font-weight:600;
background:#F0EDEC;
padding:0.75% 1.5%;
}
section.contact textarea{
height:24em;
line-height:1.85;
}
section.contact .input-form{
margin-bottom:3%;
}
section.contact .input-form input::placeholder{
color:#A89990
}
section.contact input[type=submit]:hover{
opacity:0.8;
}
section.contact input[type=submit]{
background:#C9A06B;
display:block;
margin:auto;
font-size: calc((29 / 1920) * 100vw);
font-weight:600;
border:none;
color:white;
padding:0.45% 1.5% 0.45% 2%;
letter-spacing:0.2em;
box-shadow:3px 3px 0 #7B613F;
cursor:pointer;
transition: all .25s ease-out;
}
.site-footer{
background: url(//haprot.com/wp-content/themes/harprot/assets/img/footer-back.png) center bottom no-repeat;
background-size: cover;
position:relative;
}
.site-footer a {
display: block;
max-width: 100%;
margin: auto;
}
.site-footer .logo {
position: absolute;
left: calc((47 / 1920) * 100vw);
top: calc((42 / 1920) * 100vw);
}
.site-footer .logo img {
max-width: 255px;
width: calc((473 / 1920) * 100vw);
}
.site-footer small {
text-align: center;
color: white;
display: block;
margin: 0 auto 4%;
position: absolute;
bottom: 0;
width: 100%;
font-size:calc((21 / 1920) * 100vw);
letter-spacing:0.12em;
}
.site-footer {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/footer-back.svg) center top no-repeat;
background-size: cover;
position: relative;
height: 30em;
margin-top:7%;
}
.site-footer .sns {
display: flex
;
gap: 30%;
position: absolute;
left: calc((257 / 1920) * 100vw);
top: calc((182 / 1920) * 100vw);
padding-left: 0;
}
.site-footer  .fnav__list li,
.site-footer .fnav__list ul{
list-style:none;
margin-left:0;
padding-left:0;
}
.site-footer .fnav__list li a{
color:white;
text-decoration:none;
line-height:2em;
font-size:calc((24 / 1920) * 100vw);
}
.site-footer .fnav__list {
padding-left: 0;
position: absolute;
right: 24%;
left: auto;
bottom: auto;
top: 29%;
}
.site-header .site-menu a{
color:white;
text-decoration:none;
}
.sp{display:none;}
.pc{display:block;} .desktop-nav { display: none; }
.desktop-nav ul { display: flex; gap: 20px; }
.desktop-nav a { padding: 8px 4px; } .nav-toggle {
display: inline-flex; flex-direction: column; justify-content: center; gap: 10px;
width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.nav-toggle .bar {
display: block; height: 2px; width: 30px; background: #fff; transition: transform .25s ease, opacity .25s ease;
} .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.3);
opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; } .mobile-nav {
position: fixed; inset: 0 0 0 auto; width: 80vw; max-width: 360px; background: rgba(255,255,255,0.8);
transform: translateX(100%); transition: transform .3s ease; z-index: 45; padding: 20px 16px 32px;
display: flex; flex-direction: column; gap: 14px;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a {
display: block; padding: 0px 8px; border-radius: 8px;
}
.mobile-nav a:hover, .mobile-nav a:focus { background: transparent; outline: none; } .body-lock { overflow: hidden; } @media (min-width: 960px) {
.nav-toggle { display: none; }
.desktop-nav { display: block; }
.nav-overlay, .mobile-nav { display: none !important; }
}
.c-3 .f-3 .image-data img.pc{
display:block;
}
.c-3 .f-3 .image-data img.sp{
display:none;
}
.company .message3 img.sp ,
.company .flex .image-data img.sp,
.company .company-message.sp{
display:none;
}
.company .message3 img.pc ,
.company .flex .image-data img.pc,
.company .company-message.pc{
display:block;	
}
h2.sub small{
font-size:0.65em;
padding-left:0.5em;
}
#top h2.sub{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
} [data-reveal]{
opacity: 0;
transform: var(--reveal-transform, translateY(16px));
transition:
opacity .6s ease,
transform .6s cubic-bezier(.2,.6,.2,1);
will-change: opacity, transform;
} [data-reveal].is-inview{
opacity: 1;
transform: none;
} [data-reveal="fade"]      { --reveal-transform: none; }
[data-reveal="fade-up"]   { --reveal-transform: translateY(16px); }
[data-reveal="fade-down"] { --reveal-transform: translateY(-16px); }
[data-reveal="slide-left"]{ --reveal-transform: translateX(24px); }
[data-reveal="slide-right"]{--reveal-transform: translateX(-24px); } @media (prefers-reduced-motion: reduce){
[data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
} .sl2,
.sl1 { overflow: hidden; } .sl2 .js-ticker,
.sl1 .js-ticker{
display: inline-flex;
gap: 0; padding: 0;
margin: 0;
list-style: none;
white-space: nowrap;
will-change: transform;
transform: translate3d(0,0,0);
backface-visibility: hidden;
} .sl2 .js-ticker > li,
.sl1 .js-ticker > li{ flex: 0 0 auto; display:grid; margin:0; padding:0; 
height: auto;
justify-content: center;
align-items: center;
justify-items: center;
align-content: center;}
.sl2 .js-ticker img,
.sl1 .js-ticker img{ display:block; height:auto; }
#top .banner_list .js-ticker img{
max-height:90px;
max-width:120px;
}