.pc{display:none;}
.sp{display:block;}
.site-header {
background-image: url(//haprot.com/wp-content/themes/harprot/assets/img/background-image-sp.png);
background-size: contain;
background-repeat: no-repeat;
min-height: 162px;
background-position:0 -1px;
}
.right-button li a{
font-size:14px;
}
.right-button li.l1{
padding-top: 3em;
padding-bottom: 2em;
}
.right-button li.l2{
padding-top: 4em;
padding-bottom: 1em;
}
.site-header .logo img{
max-width:100%;
width:110px;
}
.site-header .logo{
top:14px;
}
.slider-outer {
top: -75px;
top:-30vw;
}
.kokoro-inner {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/kokoro-title-sp.svg) no-repeat;
background-size: contain;
min-height: calc((500 / 1920) * 100vw);
}
.kokoro {
margin-top: -17%;
margin-top:-29vw;
}
.kokoro-inner {
padding-top: 29%;
}
.flex{
display:block;
}
.kokoro-inner .fl,
.kokoro-inner .fr{
width:100%;
} .sl1 .js-ticker .slick-track,
.sl2 .js-ticker .slick-track {
will-change: transform;
transform: translate3d(0,0,0);
white-space: nowrap;
backface-visibility: hidden;
}
.sl1 .js-ticker .slick-slide,
.sl2 .js-ticker .slick-slide {
display: inline-block;
vertical-align: top;
}
.sl1, .sl2 { overflow: hidden; } .kokoro-inner .flex{
width:95%;
display:flex;
flex-direction: column; gap:10px;
}
.kokoro-inner .fl{
order: 2;
font-size:15px;
line-height:1.6;
}
.kokoro-inner .fr{
order: 1;
}
.page-link h2 {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/h2-sp.png) center center no-repeat;
background-size: contain;
font-size: 20px;
line-height: 1.3;
height: 70px;
max-width:95%;
margin:auto;
display:flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
margin-bottom:12px;
}
.page-link .flex img{
height:auto;
}
.nav-toggle.sp{
display:inline-flex;
position: absolute;
top: 3px;
right: 10px;
}
#mobile-nav ul,
#mobile-nav li{
margin-left:0;
padding-left:0;
list-style:none;
}
#mobile-nav li a{
text-decoration:none;
line-height:2;
font-size:18px;
}
.nav-toggle[aria-expanded="true"] .bar{
background:rgba(0,0,0,1);
z-index: 100;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
transform: translateY(17px) rotate(45deg);
}
#safety-sustainability{
overflow:hidden;
}
.safety-sustainability > img {
max-width: 130%;
padding-top: -3.07%;
display: block;
background-color: white;
margin:auto;
display:block;
margin-left:-20%;
margin-right:-20%;
}
.safety-sustainability h2 {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/h2-2-sp.png) center center no-repeat;
background-size: contain;
font-size: 22px;
width: 95%;
}
.safety-sustainability .table{
width:95%;
}
.safety-sustainability .content.sp{
background:transparent;
}
.safety-sustainability .content.sp.title{
background: #E3ECF3;
padding-bottom:0;
}
.safety-sustainability .c-2{
margin-top:0;
padding-top:2%;
}
.safety-sustainability .content.sp.title h2{
margin-bottom:0;
}
.safety-sustainability .table .flex > div{
width:100%;
}
.safety-sustainability .catch img,
.safety-sustainability .image{
width:100%;
}
.safety-sustainability .image{
margin-top:10px;
}
.safety-sustainability .text{
margin-top:22px;
}
.safety-sustainability .table .flex.under p,
.safety-sustainability .text p,
.safety-sustainability .catch p{
font-size:16px;
line-height:1.5em;
}
.safety-sustainability .table h2 {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/h2-3-sp.png) center center no-repeat;
background-size: cover;
font-size:24px;
}
.safety-sustainability .table .flex.under h3{
font-size:20px;
}
.safety-sustainability .table .flex.under .image-data img{
height:auto;
max-width:95%;
height:55vw;
}
.safety-sustainability .flex{
width:95%;
}
.safety-sustainability h2{
margin-bottom:10px;
}
.safety-sustainability .catch{
width:100%;
}
.safety-sustainability .catch > img{
display:block;
width:70%;
}
.non-flex{
width:95%
}
.content h3{
font-size:22px;
margin-bottom:10px;
}
.content .non-flex h3:before{
width:5px;
}
.safety-sustainability .content.c-3 .flex.nayami > div{
width:100%;
font-size:18px;
font-weight:600;
margin-bottom:20px;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/nayami-bg-sp.png) center center no-repeat;
background-size: contain;
}
.safety-sustainability .content.c-3 h4{
font-size:18px;
}
.safety-sustainability .content.c-3 .flex.design > div{
width:100%;
}
.safety-sustainability .content.c-3 .flex.design > div p{
font-size:20px;
margin:10px;
}
.safety-sustainability .content.c-3 .image-data img{
display: block;
max-height: 200px;
object-fit: cover;
width: 100%;
}
.safety-sustainability .content .youtube{
width:95%;
}
.youtube img{
position:static;
transform:none;
margin:10px auto;
max-width:120px;
width:auto;
}
.safety-sustainability .content .youtube iframe{
width:100%;
height:53.5vw;
}
.flex.safe .message{
width:100%;
}
.flex.safe .message p{
font-size:16px;
}
.flex.safe .director .layout{
margin-top:2em;
}
.flex.safe .director{
width:100%;
font-size:16px;
letter-spacing:0;
font-weight:600;
line-height:1.3;
}
.flex.safe .director img{
width:40%
}
.safety-sustainability .flex.safe{
padding-bottom:240px;
background: none;
background-color:#B7CBE3 ;
position:relative;
padding-top:30px;
}
.safety-sustainability .flex.safe:after{
content:'';
display:block;
width:95%;
margin:auto;
position:absolute;
height:280px;
bottom:0px;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/safe.png) right top transparent no-repeat;
background-size: 48%;
z-index:1;
}
.contactform {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/contact-sp.png) center center no-repeat;
background-size: cover;
height: 27vw;
margin: auto;
width:95%;
}
.contactform a {
font-size: 18px;
padding:34px 0 34px 120px;
}
#welmap{
margin-top:-47px;
padding-top:20px;
overflow:hidden;
}
.welmap > img{
padding-top:30px;
margin-left:-10%;
margin-right:-10%;
max-width:150%;
width:120%;
}
#welmap .c-1 h2,
.welmap .c-1 h2{
background: url(//haprot.com/wp-content/themes/harprot/assets/img/welmap-h2-sp.png) center center no-repeat;
background-size: contain;
font-size:24px;
margin-bottom:10px;
}
.welmap .flex .catch{
width:100%;
}
#welmap .flex .catch .h3{
margin:0;
}
#welmap .flex .catch .h4{
margin:28px 0 4px;
width:100%;
}
.welmap .flex .image{
width:100%;
}
.welmap .c-1 .flex .catch p{
font-size:16px;
}
.welmap .content{
width:95%;
}
.welmap .c-5 h2, .welmap .c-4 h2, .welmap .c-3 h2, .welmap .c-2 h2{
width:100%;
font-size:20px;
line-height:1.1;
padding-left:20px;
padding-top:15px;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/welmap-h2-2-sp.svg) 0 0 no-repeat;
background-size: cover;
}
.welmap .c-2 .image-data{
position:static;
}
.welmap .c-2 .image-data img{
width:100%;
}
.welmap .c-2 li{
font-size:15px;
line-height:1.3em;
margin-bottom:1.5em;
font-weight:600;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/checkbox.png) left top no-repeat;
background-size: 1.2em;
}
.welmap .c-2 li{
padding-left:1.5em;
}
.welmap .c-3 h3, .welmap .c-2 h3{
font-size:18px;
letter-spacing:0;
padding-bottom:10px;
background: url(//haprot.com/wp-content/themes/harprot/assets/img/welmap-h3-2.svg) top center no-repeat;
background-size: cover;
}
.welmap .c-2 .message p{
font-size:15px;
line-height:1.3em;
margin-bottom:1.5em;
font-weight:600;
}
.welmap .c-6 .flex .catch p{
font-size:15px;
line-height:1.75em;
}
#welmap .c-5 .f-4 p,
.welmap .c-4 p, .welmap .c-3 p {
margin: 10px 0 20px 0;
font-size:15px;
line-height:1.3em;
}
.welmap .f-3 > div{
width:100%;
margin-bottom:60px;
}
.welmap .c-3 .f-3 .image-data img{
max-width:100%;
width:auto;
height:auto;
}
#welmap .c-3 .f-3 .image-data img.pc{
display:none;
}
#welmap .c-3 .f-3 .image-data img.sp{
display:block;
}
#welmap .c-3 .f-3 > div:nth-of-type(3) .image-data,
#welmap .c-3 .f-3 > div:nth-of-type(2) .image-data{
margin-left:-10%;
}
#welmap .c-3 .f-3 > div:nth-of-type(1) .image-data img.sp{
width:calc(408px * 0.45);
height:calc(509px * 0.45);
}
#welmap .c-3 .f-3 > div:nth-of-type(2) .image-data img.sp{
width:calc(408px * 0.6);
height:calc(495px * 0.6);
}
#welmap .c-3 .f-3 > div:nth-of-type(3) .image-data img.sp{
width:calc(676px * 0.2);
height:calc(1589px * 0.2);
}
#welmap .c-3 .f-3 > div:nth-of-type(3) {
margin-bottom:0;
}
#welmap .c-3 h4{
font-size:18px;
letter-spacing:0;
font-weight:400;
}
#welmap .c-4 .f-2,
#welmap .f-2 > div{
width:100%;
}
#welmap .f-2 > div{
margin-bottom:20px;
}
#welmap .f-4 > div{
width:100%;
}
#welmap .c-5 .f-4 img{
height:auto;
}
#welmap .c-5 .f-4 > div{
margin-bottom:60px;
}
#welmap .c-5 .f-4 > div .image-data img.sp{
display:block;
margin:auto;
}
#welmap .c-5 .f-4 > div:nth-of-type(1) .image-data img.sp{
width:calc(831px * 0.28);
height:calc(1049px * 0.28);
}
#welmap .c-5 .f-4 > div:nth-of-type(2) .image-data img.sp{
width:calc(707px * .28);
height:calc(972px * 0.28);
}
#welmap .c-5 .f-4 > div:nth-of-type(3) .image-data img.sp{
width:calc(709px * 0.28);
height:calc(1076px * 0.28);
}
#welmap .c-5 .f-4 > div:nth-of-type(4) .image-data img.sp{
width:calc(673px * 0.28);
height:calc(943px * 0.28);
}
#welmap .c-6 .text{
margin-top:30px;
}
#welmap .c-6 .flex .catch .h4{
margin-top:10px;
width:80%;
}
#welmap .c-7 .flex .message{
width:100%;
}
#welmap .c-7 .message .image-data img{
margin-top:20px;
width:95%;
}
#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: 42%;
background-color: rgba(251, 210, 214, .6);
}
#welmap .c-7 h4{
font-size:18px;
line-height:1.2;
font-weight:400;
}
#welmap .c-7 p{
font-size:15px;
}
#welmap .c-7 .flex .director {
width: 65%;
color: #08607F;
}
#welmap .c-7 .flex .director .layout{
margin-top:2em;
margin-bottom:16em;
}
#welmap .c-7 .flex .director .layout p{
margin-bottom:5px;
}
#welmap .c-8 .contact-link {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/contact-back-sp.png) center center no-repeat;
background-size: cover; margin: auto; height: 28vw; display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: center;
padding-left: 26vw;
}
#welmap .c-8 .contact-link a{
font-size:17px;
letter-spacing:0;
} .company .content{
width:95%;
}
.company .logo{
position:static;
margin:auto;
display:block;
width: 50%;
}
.company .company-message{
position:static;
display:block;
margin:auto;
width: 90%;
margin-top:-35px;
}
.company .message3 img.sp ,
.company .flex .image-data img.sp,
.company .company-message.sp{
display:block;
}
.company .message3 img.pc ,
.company .flex .image-data img.pc,
.company .company-message.pc{
display:none;
}
.company {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/sec-3-h2-back.png) center 78px no-repeat;
background-size: contain;
}
.company .flex{
display:block;
margin-top:20px;
}
.company .image-data img.sp{
width:70%;
margin:auto;
}
.company .flex h3{
text-align:center;
}
.company .non-flex p{
max-width:100%;
font-size:15px;
}
.company .message3 img{
width:100%;
}
.company li{
font-size:15px;
padding-left:1.5em;
}
.company .team {
display: block;
width: 100%;
position: static;
margin-top:-70px;
}
section.company{
margin-bottom:-70px;
}
section.contact h2 {
font-size: 24px;
}
section.contact h2 + p{
font-size:15px;
}
section.contact input[type=submit],
.contact .label{
font-size:18px;
}
section.contact .label .required{
font-size:13px;
}
section.contact input[type=text], section.contact input[type=tel], section.contact input[type=email], section.contact textarea {
font-size:15px;
padding:5px;
}
section.contact textarea {
height: 14em;
line-height: 1.85;
}
.sns-menu li i{
margin-right:0.5em;
}
.site-footer {
background: url(//haprot.com/wp-content/themes/harprot/assets/img/footer-back-sp.svg) center top no-repeat;
background-size: cover;
position: relative;
height: 30em;
margin-top: 7%;
}
.site-footer .logo img,
.site-footer .logo{
display:block;
position:static;
margin:auto;
}
.site-footer div.logo{
padding-top:50px;
}
.site-footer .logo img{
width:40%;
}
.site-footer .fnav__list{
position:static;
margin-left:50px;
}
.site-footer .fnav__list li a{
font-size:15px;
}
.site-footer small{
font-size:14px;
}
.site-footer .sns{
position:static;
margin:20px auto ;
display: flex;
gap: 5%;
padding-left: 0;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: center;
align-items: center;
}
.site-footer .sns a{
font-size:15px;
}
.right-button{
}
#top{
max-width:100%;
}
.right-button ul,
.right-button li{
margin-left:0;
padding-left:0;
}
.right-button li{
min-width:2em;
}
.mobile-nav a {
color:#08607F;
}
.nav-toggle[aria-expanded="true"] span{
z-index:10;
}
section.contact .content {
width: 95%;
margin: 0 auto;
}
#top .banner_list .js-ticker li{
display:block;
}
#top .banner_list .js-ticker img{
max-height:90px;
max-width:120px;
}