@charset "UTF-8";


@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
:root {
--icon-arrow-right: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M6%2014c-.26%200-.51-.1-.71-.29a.996.996%200%200%201%200-1.41L9.59%208l-4.3-4.29A.996.996%200%201%201%206.7%202.3l5%205c.19.18.3.43.3.7s-.11.52-.29.71l-5%205c-.2.19-.45.29-.71.29z%22%2F%3E%3C%2Fsvg%3E");
--icon-check: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M5.61%2011.71c.2.19.46.29.72.29.26%200%20.52-.1.72-.29L13.2%205.7c.4-.39.4-1.02%200-1.41-.4-.39-1.04-.39-1.44%200L6.33%209.6%204.24%207.56c-.4-.39-1.04-.39-1.44%200-.4.39-.4%201.02%200%201.41l2.81%202.74z%22%2F%3E%3C%2Fsvg%3E");
--icon-plus: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M14%207H9V2H7v5H2v2h5v5h2V9h5V7z%22%2F%3E%3C%2Fsvg%3E");
--icon-tel: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M6.3%206.5c-.3-.4-.1-.9.3-1.2L8%204.5c.4-.2.5-.7.3-1.1L6.6.4C6.4%200%205.9-.1%205.5.1L4%201c-1.8%201.1-3%204.1.2%209.6s6.4%206%208.2%205l1.5-.8c.4-.2.5-.7.3-1.1l-1.7-2.9c-.2-.4-.7-.5-1.1-.3l-1.5.8c-.4.2-.9.1-1.1-.3L6.3%206.5z%22%2F%3E%3C%2Fsvg%3E");
--icon-mail: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22m16%209.2-2.1-2.1L16%205.3zM2.1%207.1%200%209.2V5.3zM16%2011.2V14H0v-2.8L3.1%208%208%2012.2%2012.9%208z%22%2F%3E%3Cpath%20d%3D%22M16%202v1.7l-8%206.9-8-6.9V2z%22%2F%3E%3C%2Fsvg%3E");
--icon-new-window: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M4.25%202v9.75H14V2H4.25zm8.81%208.81H5.19V2.94h7.88v7.87z%22%2F%3E%3Cpath%20d%3D%22M2.94%2013.06V4.25H2V14h9.75v-.94H2.94z%22%2F%3E%3Cpath%20d%3D%22m7.46%209.33%202.76-2.76v1.99h.94V4.97H7.57v.94h1.99L6.79%208.67l.67.66z%22%2F%3E%3C%2Fsvg%3E");
--color-white: #fff;
--color-black: #000;
--color-black-light: #222;
--color-gray: #666;
--color-gray-light: #909090;
--color-gray-light-b: #707070;
--color-gray-light-c: #ddd;
--color-gray-pale: #f6f6f6;
--color-gray-pale-b: #eee;
--color-blue: #0086cd;
--color-green: #0b6d7d;
--color-blue-gradient: linear-gradient(45deg, #0077CA 0%, #0086cd 100%);
--color-red: #c7192a;
--font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--font-serif: "Times New Roman", "Noto Serif JP", YuMincho, "Yu Mincho", "HGP明朝B", serif;
--font-en: Satisfy, cursive, sans-serif;
--transition-duration: 0.15s;
--transition-opacity: 0.65;
--container-size-xsmall: 90vw;
--container-size-small: 90vw;
--container-size-medium: 90vw;
--container-size-large: 95vw;
--font-10: 10px;
--font-11: clamp(11px, 0.8088235294vw, 11px);
--font-12: clamp(11px, 0.8823529412vw, 12px);
--font-13: clamp(12px, 0.9558823529vw, 13px);
--font-14: clamp(13px, 1.0294117647vw, 14px);
--font-15: clamp(13px, 1.1029411765vw, 15px);
--font-16: clamp(14px, 1.1764705882vw, 16px);
--font-17: clamp(14px, 1.25vw, 17px);
--font-18: clamp(15px, 1.3235294118vw, 18px);
--font-19: clamp(16px, 1.3970588235vw, 19px);
--font-20: clamp(16px, 1.4705882353vw, 20px);
--font-21: clamp(17px, 1.5441176471vw, 21px);
--font-22: clamp(18px, 1.6176470588vw, 22px);
--font-23: clamp(18px, 1.6911764706vw, 23px);
--font-24: clamp(19px, 1.7647058824vw, 24px);
--font-25: clamp(19px, 1.8382352941vw, 25px);
--font-26: clamp(20px, 1.9117647059vw, 26px);
--font-27: clamp(21px, 1.9852941176vw, 27px);
--font-28: clamp(21px, 2.0588235294vw, 28px);
--font-29: clamp(22px, 2.1323529412vw, 29px);
--font-30: clamp(23px, 2.2058823529vw, 30px);
--font-31: clamp(23px, 2.2794117647vw, 31px);
--font-32: clamp(24px, 2.3529411765vw, 32px);
--font-33: clamp(24px, 2.4264705882vw, 33px);
--font-34: clamp(25px, 2.5vw, 34px);
--font-35: clamp(26px, 2.5735294118vw, 35px);
--font-36: clamp(26px, 2.6470588235vw, 36px);
--font-37: clamp(27px, 2.7205882353vw, 37px);
--font-38: clamp(28px, 2.7941176471vw, 38px);
--font-39: clamp(28px, 2.8676470588vw, 39px);
--font-40: clamp(29px, 2.9411764706vw, 40px);
--font-41: clamp(29px, 3.0147058824vw, 41px);
--font-42: clamp(30px, 3.0882352941vw, 42px);
--font-43: clamp(31px, 3.1617647059vw, 43px);
--font-44: clamp(31px, 3.2352941176vw, 44px);
--font-45: clamp(32px, 3.3088235294vw, 45px);
--font-46: clamp(33px, 3.3823529412vw, 46px);
--font-47: clamp(33px, 3.4558823529vw, 47px);
--font-48: clamp(34px, 3.5294117647vw, 48px);
--font-49: clamp(34px, 3.6029411765vw, 49px);
--font-50: clamp(35px, 3.6764705882vw, 50px);
--font-51: clamp(36px, 3.75vw, 51px);
--font-52: clamp(36px, 3.8235294118vw, 52px);
--font-53: clamp(37px, 3.8970588235vw, 53px);
--font-54: clamp(38px, 3.9705882353vw, 54px);
--font-55: clamp(38px, 4.0441176471vw, 55px);
--font-56: clamp(39px, 4.1176470588vw, 56px);
--font-57: clamp(39px, 4.1911764706vw, 57px);
--font-58: clamp(40px, 4.2647058824vw, 58px);
--font-59: clamp(41px, 4.3382352941vw, 59px);
--font-60: clamp(41px, 4.4117647059vw, 60px);
--font-65: clamp(44px, 4.7794117647vw, 65px);
--font-100: clamp(66px, 7.3529411765vw, 100px) ;
} body {
font-family: "Times New Roman", "Noto Serif JP", YuMincho, "Yu Mincho", "HGP明朝B", serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
outline: none;
} .wrapper {
display: block;
margin: 0px auto;
padding: 0px;
min-height: 100vh;
}
html.sr {
margin-top: 0 !important;
}
#wpadminbar {
z-index: 10000000 !important;
} *,
*::before,
*::after {
box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul[role=list],
ol[role=list] {
list-style: none;
}
html {
scroll-behavior: auto;
}
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
img,
picture {
max-width: 100%;
display: block;
}
input,
button,
textarea,
select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@keyframes menu-container-appeared {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes menu-container-leaved {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
@keyframes menu-overlay-appeared {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes menu-overlay-leaved {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
} @keyframes modal-photo-open {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes modal-photo-close {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
} .alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float: right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
} .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; }
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; }  .nav-header {
position: relative;
width: 100%;
}
.nav-header:hover {
background: rgba(255, 255, 255, 0.89);
}
.nav-header:hover .nav-header__link {
color: #222222;
}
.nav-header:hover .dropdown__menu > a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-down-solid-black.svg);
display: inline-block;
width: 12px;
margin-left: 4px;
}
.nav-header__container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1980px;
height: 80px;
margin: 0 auto;
padding: 0 0 0 15px;
}
@media (min-width: 1100px) {
.nav-header__container {
padding: 0 60px 0 45px;
}
}
.nav-header__logo {
width: 149px;
height: 40px;
}
.nav-header__menu {
display: none;
list-style: none;
width: 852px;
margin: 0;
padding: 0;
}
@media (min-width: 1100px) {
.nav-header__menu {
display: flex;
align-items: end;
justify-content: end;
}
}
.nav-header__menu-item {
display: flex;
justify-content: center;
align-items: end;
position: relative;
width: 100%;
height: 100%;
}
.nav-header__link {
align-items: center;
color: #ffffff;
text-align: center;
font-size: 16px;
font-weight: 900;
letter-spacing: 0.1em;
line-height: 1.125;
padding: 0 0px;
filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));
}
.nav-header__menu-hover::after {
display: block;
opacity: 0;
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 4px;
background: #0086CD;
content: "";
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transition: all 0.2s;
}
.nav-header__menu-hover:hover::after {
opacity: 1;
width: 100%;
}
.nav-header__contact {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 200px;
height: 50px;
background-color: #0086CD;
color: #ffffff;
margin-left: 40px;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 1.142;
font-weight: 200;
}
.nav-header__contact::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
@media (min-width: 1050px) {
.nav-header div.hamburger {
display: none;
}
}
.dropdown__menu {
position: relative;
z-index: 1000;
}
.dropdown__menu > a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-down-solid-white.svg);
display: inline-block;
width: 12px;
margin-left: 4px;
}
.dropdown__menu:hover > ul {
display: block;
}
.dropdown__lists {
display: none;
width: -moz-max-content;
width: max-content;
background: rgba(255, 255, 255, 0.89);
padding: 20px 28px 20px 28px;
margin-top: 15px;
line-height: 0.5em;
list-style: none;
position: absolute;
top: 100%;
left: 0;
}
.dropdown__lists li {
padding: 10px 0;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 0.88;
}
.dropdown__lists a {
color: #222222;
}
.nav-header-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1000;
width: 100%;
transition: all 0.65s;
}
.nav-header-top:hover {
background: rgba(255, 255, 255, 0.89);
}
.nav-header-top:hover .nav-header-top__link {
color: #222222;
}
.nav-header-top:hover .dropdown__menu > a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-down-solid-black.svg);
display: inline-block;
width: 12px;
margin-left: 4px;
}
.nav-header-top__container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1980px;
margin: 0 auto;
padding: 0 0 0 15px;
}
@media (min-width: 1100px) {
.nav-header-top__container {
padding: 0 60px 0 45px;
}
}
.nav-header-top__logo {
width: 149px;
height: 40px;
}
.nav-header-top__menu {
display: none;
list-style: none;
width: 852px;
margin: 0;
padding: 0;
}
@media (min-width: 1100px) {
.nav-header-top__menu {
display: flex;
align-items: end;
justify-content: end;
}
}
.nav-header-top__menu-item {
display: flex;
justify-content: center;
align-items: end;
position: relative;
width: 100%;
height: 100%;
}
.nav-header-top__link {
align-items: center;
color: #ffffff;
text-align: center;
font-size: var(--font-16);
font-weight: 900;
letter-spacing: 0.1em;
line-height: 1.125;
padding-top: 35px;
padding-bottom: 20px;
filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));
}
.nav-header-top__menu-hover::after {
display: block;
opacity: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 4px;
background: #0086CD;
content: "";
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transition: all 0.2s;
}
.nav-header-top__menu-hover:hover::after {
opacity: 1;
width: 100%;
}
.nav-header-top__contact {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 200px;
height: 50px;
background-color: #0086CD;
color: #ffffff;
margin-left: 40px;
margin-bottom: 10px;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 1.142;
font-weight: 200;
}
.nav-header-top__contact::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
@media (min-width: 1100px) {
.nav-header-top div.hamburger {
display: none;
}
}
.dropdown__menu {
position: relative;
z-index: 1000;
}
.dropdown__menu > a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-down-solid-white.svg);
display: inline-block;
width: 12px;
margin-left: 4px;
}
.dropdown__menu:hover > ul {
display: block;
}
.dropdown__lists {
display: none;
width: -moz-max-content;
width: max-content;
background: rgba(255, 255, 255, 0.89);
padding: 20px 28px 20px 28px;
line-height: 0.5em;
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 0;
}
.dropdown__lists li {
padding: 10px 0;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 0.88;
}
.dropdown__lists a {
color: #222222;
}
.nav-drawer {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 1002;
}
.nav-drawer__container {
display: flex;
flex-direction: column;
position: absolute;
right: 0;
top: 0;
width: 80%;
height: 100%;
max-width: 350px;
min-width: 200px;
background: #fff;
border-left: #e2e2e2 1px solid;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
animation-duration: var(--nav-drawer-duration);
animation-fill-mode: forwards;
}
.nav-drawer[data-open=true] .nav-drawer__container {
animation-name: menu-container-appeared;
}
.nav-drawer[data-open=false] .nav-drawer__container {
animation-name: menu-container-leaved;
}
.nav-drawer__menu {
display: block;
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
}
.nav-drawer__menu-item {
border-bottom: #e2e2e2 1px dashed;
}
.nav-drawer__menu-item:hover {
background: #efefef;
}
.nav-drawer__menu-subitem {
list-style: none;
}
.nav-drawer__menu-subitem:hover {
background: #efefef;
}
.nav-drawer__menu-subitem a {
padding: 4px;
}
.nav-drawer__link {
position: relative;
display: block;
align-items: center;
justify-content: space-between;
color: inherit;
letter-spacing: 0.01em;
padding: 1em 2.5em 1em 2em;
text-decoration: none;
}
.nav-drawer__link-main {
display: block;
font-weight: 500;
}
.nav-drawer__link-sub {
color: #aaa;
display: block;
}
.nav-drawer__menu-button {
display: flex;
margin: 0px;
padding: 0px;
}
.nav-drawer__button-close {
position: relative;
background-color: #0086CD;
margin: 0px 0px 0px auto;
padding: 0px;
width: 80px;
height: 80px;
border: none;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.nav-drawer__button-close:hover, .nav-drawer__button-close:focus {
outline: none;
background: #0097e7;
}
.nav-drawer__button-close-line {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 40%;
height: 2px;
margin: auto;
background: #fff;
}
.nav-drawer__button-close-line:nth-child(1) {
transform: translateY(0) rotate(45deg);
}
.nav-drawer__button-close-line:nth-child(2) {
transform: translateY(0) rotate(-45deg);
}
.nav-drawer__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: rgba(0, 0, 0, 0.08);
animation-duration: var(--nav-drawer-duration);
animation-fill-mode: forwards;
}
.nav-drawer[data-open=true] .nav-drawer__overlay {
animation-name: menu-overlay-appeared;
}
.nav-drawer[data-open=false] .nav-drawer__overlay {
animation-name: menu-overlay-leaved;
}
.nav-pagetop {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
bottom: 60px;
right: 15px;
z-index: -1000;
width: 70px;
height: 70px;
font-size: 10px;
font-weight: 400;
line-height: 1.6;
color: #fff;
background: #0086CD;
border-radius: 50%;
opacity: 0;
cursor: pointer;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
transition: all 0.2s;
}
.nav-pagetop.active {
opacity: 1;
z-index: 1000;
}
.nav-pagetop:before {
display: block;
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e5ce";
transition: all 0.2s;
}
.nav-pagetop:after {
content: "PAGETOP";
display: block;
padding: 4px 0px;
}
.nav-pagetop:hover {
background: #0075b4;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
.nav-pagetop:hover:before {
transform: translateY(-4px);
}
.mainvisual {
position: relative;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/top/mainvisual.jpg);
background-position: top;
background-size: cover;
background-repeat: no-repeat;
}
.mainvisual::before {
display: block;
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
content: "";
}
.mainvisual__container {
display: flex;
flex-direction: column;
justify-content: left;
max-width: 1980px;
height: 100vh;
margin: 0 20px;
padding-top: 56vh;
position: relative;
z-index: 1;
width: 350px;
}
@media screen and (min-width: 1100px) {
.mainvisual__container {
margin: 0 145px;
}
}
@media screen and (min-width: 600px) {
.mainvisual__container {
width: 600px;
}
}
.mainvisual__container hr {
color: #ffffff;
width: 100%;
margin: 16px 0 0 0;
}
@media (min-width: 600px) {
.mainvisual__container hr {
width: 70%;
}
}
@media (min-width: 768px) {
.mainvisual__container hr {
width: 100%;
}
}
.mainvisual__text-main {
font-weight: 700;
font-family: "Times New Roman", "Noto Serif JP", YuMincho, "Yu Mincho", "HGP明朝B", serif;
font-weight: 800;
font-size: 32px;
line-height: 1.45;
letter-spacing: 1.5px;
color: #ffffff;
}
@media (min-width: 768px) {
.mainvisual__text-main {
font-size: 60px;
}
}
.mainvisual__text-main-eng {
color: #ffffff;
letter-spacing: 0.025em;
font-size: 12px;
font-weight: normal;
font-family: "Satisfy";
}
@media screen and (min-width: 600px) {
.mainvisual__text-main-eng {
font-size: 20px;
}
}
.mainvisual__text-sub {
padding-top: 16px;
color: #ffffff;
font-size: 24px;
letter-spacing: 0.025em;
line-height: 1.5;
}
@media screen and (min-width: 600px) {
.mainvisual__text-sub {
font-size: 30px;
}
}
.pagevisual {
position: relative;
z-index: 0;
margin: 0;
padding-top: calc(80px + 6.4rem);
padding-bottom: 6.4rem;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/mainvisual.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (min-width: 1100px) {
.pagevisual {
padding-top: calc(80px + 9.6rem);
padding-bottom: 9.6rem;
}
}
.pagevisual::before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
content: "";
}
.pagevisual__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
position: relative;
z-index: 2;
padding-top: 0;
padding-bottom: 0;
}
.pagevisual__text-main {
font-weight: 700;
font-family: "Times New Roman", "Noto Serif JP", YuMincho, "Yu Mincho", "HGP明朝B", serif;
font-size: 3.2rem;
}
@media screen and (min-width: 1100px) {
.pagevisual__text-main {
font-size: 4rem;
}
}
.pagevisual__text-main:after {
display: block;
max-width: 20rem;
margin: 1.6rem 0rem;
border-bottom: 3px solid #222222;
background: #222222;
content: "";
}
.pagevisual__text-sub {
color: #222222;
}
.page-heading {
max-width: 800px;
margin: 0 auto;
padding: 0 100px;
}
.page-heading__content {
margin: 0;
padding: 0;
}
.page-heading__content--left {
text-align: left;
}
.page-heading__content--center {
text-align: center;
}
.page-heading__content--right {
text-align: right;
}
.page-heading__text-main {
font-family: "Times New Roman", "Noto Serif JP", YuMincho, "Yu Mincho", "HGP明朝B", serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: normal;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/logo2.svg);
background-position: top left;
background-size: 36px;
background-repeat: no-repeat;
width: -moz-fit-content;
width: fit-content;
padding-left: 32px;
margin: 0 auto;
font-size: 26px;
}
@media screen and (min-width: 600px) {
.page-heading__text-main {
font-size: 50px;
line-height: 1;
letter-spacing: 0.05em;
background-size: 50px;
}
}
.page-heading__content--left .page-heading__text-main::after {
margin-left: 0;
margin-right: auto;
}
.page-heading__content--center .page-heading__text-main::after {
margin-left: auto;
margin-right: auto;
}
.page-heading__content--right .page-heading__text-main::after {
margin-left: auto;
margin-right: 0;
}
.page-heading__text-sub {
font-weight: normal;
font-size: 18px;
line-height: 1;
letter-spacing: 0;
color: #222222;
padding-top: 0;
}
@media screen and (min-width: 600px) {
.page-heading__text-sub {
font-size: 24px;
line-height: 2;
letter-spacing: 0.6px;
}
}
.page-heading__message {
max-width: 800px;
margin: 0 auto;
padding-top: 6.4rem;
color: #aaaaaa;
font-weight: 400;
font-size: 1.6rem;
text-align: center;
}
.page-heading-sub__content {
margin: 0;
padding: 0;
}
.page-heading-sub__content--left {
text-align: left;
}
.page-heading-sub__content--center {
text-align: center;
}
.page-heading-sub__content--right {
text-align: right;
}
.page-heading-sub__text {
position: relative;
font-size: 2.4rem;
}
.page-heading-sub__text:before {
display: inline-block;
vertical-align: middle;
width: 6px;
height: 1.6em;
margin-right: 0.8rem;
border-radius: 3px;
background: #0086CD;
content: "";
}
.page-heading-sub__message {
margin: 0 auto;
padding-top: 1.6rem;
color: #aaaaaa;
font-weight: 400;
font-size: 1.6rem;
}
.footer {
background-color: #4a4949;
color: #ffffff;
}
.footer__container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
text-align: left;
position: relative;
max-width: 971px;
min-height: 370px;
padding: 32px;
}
@media screen and (min-width: 600px) {
.footer__container {
justify-content: space-evenly;
}
}
@media screen and (min-width: 1100px) {
.footer__container {
padding: 80px 15px;
justify-content: space-between;
}
}
.footer__logo {
width: 200px;
height: 83px;
display: flex;
justify-content: center;
}
@media screen and (min-width: 600px) {
.footer__logo {
width: 100%;
margin: 20px auto;
}
}
@media screen and (min-width: 1100px) {
.footer__logo {
width: 310px;
display: block;
margin: 0;
}
}
.footer__works {
width: 100%;
}
@media screen and (min-width: 600px) {
.footer__works {
width: -moz-fit-content;
width: fit-content;
}
}
.footer__works h3 {
font-weight: bold;
font-size: 16px;
margin: 8px 0;
line-height: 32px;
}
@media screen and (min-width: 600px) {
.footer__works h3 {
font-size: 14px;
margin: 0;
}
}
.footer__works ul {
padding-left: 0;
}
.footer__works li {
font-size: 14px;
list-style: none;
padding-left: 8px;
border-left: 1px solid #ffffff;
line-height: 32px;
}
@media screen and (min-width: 1100px) {
.footer__works li {
font-size: 13px;
line-height: 32px;
}
}
.footer__works li a {
color: #ffffff;
text-decoration: none;
}
.footer__company {
width: 100%;
}
@media screen and (min-width: 600px) {
.footer__company {
width: -moz-fit-content;
width: fit-content;
}
}
.footer__company h3 {
font-weight: bold;
font-size: 16px;
margin: 8px 0;
line-height: 32px;
}
@media screen and (min-width: 600px) {
.footer__company h3 {
font-size: 14px;
margin: 0;
}
}
.footer__company ul {
padding-left: 0;
}
.footer__company li {
font-size: 14px;
list-style: none;
padding-left: 8px;
border-left: 1px solid #ffffff;
line-height: 32px;
}
@media screen and (min-width: 1100px) {
.footer__company li {
font-size: 13px;
line-height: 32px;
}
}
.footer__company li a {
color: #ffffff;
text-decoration: none;
}
.footer__info {
width: 100%;
margin: 8px 0;
}
@media screen and (min-width: 600px) {
.footer__info {
width: -moz-fit-content;
width: fit-content;
margin: 0;
}
}
.footer__info ul {
padding-left: 0;
margin-top: 0;
}
.footer__info li {
list-style: none;
font-weight: bold;
font-size: 16px;
line-height: 32px;
}
@media screen and (min-width: 1100px) {
.footer__info li {
font-size: 13px;
line-height: 32px;
}
}
.footer__info li a {
color: #ffffff;
text-decoration: none;
}
.footer__copy {
background-color: #000000;
padding: 1.6rem 0;
color: #ffffff;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.19;
letter-spacing: 0.4px;
text-align: center;
}
.photo-modal {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1002;
width: 100%;
height: 100%;
overflow: hidden;
animation-duration: var(--photo-modal-duration);
animation-fill-mode: forwards;
}
.photo-modal[data-open=true] {
animation-name: modal-photo-open;
}
.photo-modal[data-open=false] {
animation-name: modal-photo-close;
}
.photo-modal__container {
max-width: 800px;
max-height: 80%;
margin: auto;
overflow: auto;
}
.photo-modal__image img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.photo-modal .button-detail__button--next, .photo-modal .button-detail__button--prev, .photo-modal .button-detail__button--back, .photo-modal .button-detail__button, .photo-modal .photo-modal__button--next, .photo-modal .photo-modal__button--prev, .photo-modal .photo-modal__button--close, .photo-modal .photo-modal__button {
position: absolute;
width: 4rem;
height: 4rem;
margin: 0;
padding: 0;
border: none;
background-color: transparent;
color: #ffffff;
cursor: pointer;
transition: color 0.4s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.photo-modal .button-detail__button--next:hover, .photo-modal .button-detail__button--prev:hover, .photo-modal .button-detail__button--back:hover, .photo-modal .button-detail__button:hover, .photo-modal .photo-modal__button--next:hover, .photo-modal .photo-modal__button--prev:hover, .photo-modal .photo-modal__button--close:hover, .photo-modal .photo-modal__button:hover, .photo-modal .button-detail__button--next:focus, .photo-modal .button-detail__button--prev:focus, .photo-modal .button-detail__button--back:focus, .photo-modal .button-detail__button:focus, .photo-modal .photo-modal__button--next:focus, .photo-modal .photo-modal__button--prev:focus, .photo-modal .photo-modal__button--close:focus, .photo-modal .photo-modal__button:focus {
color: #f2f2f2;
outline: none;
}
.photo-modal .button-detail__button--next::before, .photo-modal .button-detail__button--prev::before, .photo-modal .button-detail__button--back::before, .photo-modal .button-detail__button::before, .photo-modal .photo-modal__button--next::before, .photo-modal .photo-modal__button--prev::before, .photo-modal .photo-modal__button--close::before, .photo-modal .photo-modal__button::before {
font-size: 2.5rem;
}
.photo-modal__button--close {
top: 0;
right: 0;
}
.photo-modal__button--close::before {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e5cd";
}
.photo-modal__button--prev {
top: 50%;
left: 0;
}
.photo-modal__button--prev::before {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e5cb";
}
.photo-modal__button--next {
top: 50%;
right: 0;
}
.photo-modal__button--next::before {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e5cc";
}
.photo-modal__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: rgba(0, 0, 0, 0.85);
}
.button-guide {
display: flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
display: flex;
width: 100%;
max-width: 60rem;
margin: 0 auto;
padding: 1.6rem;
border: none;
border-radius: 8px;
background: #efefef;
color: #222222;
font-weight: 400;
font-size: 1.6rem;
}
.button-guide:hover, .button-guide:focus {
background: #0086CD;
color: #ffffff;
}
.button-detail {
display: flex;
flex-wrap: wrap;
max-width: 60rem;
margin: 0 auto;
}
.button-detail .button-detail__button--next, .button-detail .button-detail__button--prev, .button-detail .button-detail__button--back, .button-detail .button-detail__button, .button-detail .photo-modal__button, .button-detail .photo-modal__button--close, .button-detail .photo-modal__button--prev, .button-detail .photo-modal__button--next {
display: flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
margin-bottom: 2.4rem;
padding: 1.6rem 2.4rem;
border-radius: 0.4rem;
background: #efefef;
color: #222222;
}
.button-detail .button-detail__button--next:hover, .button-detail .button-detail__button--prev:hover, .button-detail .button-detail__button--back:hover, .button-detail .button-detail__button:hover, .button-detail .photo-modal__button:hover, .button-detail .photo-modal__button--close:hover, .button-detail .photo-modal__button--prev:hover, .button-detail .photo-modal__button--next:hover, .button-detail .button-detail__button--next:focus, .button-detail .button-detail__button--prev:focus, .button-detail .button-detail__button--back:focus, .button-detail .button-detail__button:focus, .button-detail .photo-modal__button:focus, .button-detail .photo-modal__button--close:focus, .button-detail .photo-modal__button--prev:focus, .button-detail .photo-modal__button--next:focus {
background: #0086CD;
color: #ffffff;
}
.button-detail__button--back {
width: 100%;
}
.button-detail__button--back:before {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e896";
margin-right: 0.8rem;
}
.button-detail__button--prev {
width: 100%;
}
@media screen and (min-width: 1100px) {
.button-detail__button--prev {
width: calc(50% - 15px);
margin-right: 15px;
}
}
.button-detail__button--prev:before {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e5cb";
margin-right: 0.8rem;
}
.button-detail__button--next {
width: 100%;
}
@media screen and (min-width: 1100px) {
.button-detail__button--next {
width: calc(50% - 15px);
margin-left: 15px;
}
}
.button-detail__button--next:after {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e5cc";
margin-left: 0.8rem;
}
.pagination__list,
.pagination .page-numbers {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.pagination__list-item,
.pagination .page-numbers > li {
margin: 0.3rem;
}
.pagination .pagination__link--next, .pagination .pagination__link.next,
.pagination .page-numbers > li > a--next, .pagination .pagination__link--prev, .pagination .pagination__link.prev,
.pagination .page-numbers > li > a--prev, .pagination .pagination__link,
.pagination .page-numbers > li > a {
transition: background-color 0.2s;
display: flex;
justify-content: center;
align-items: center;
padding: 1.2rem 1.6rem;
border-radius: 6px;
font-weight: 400;
font-size: 1.6rem;
line-height: 1;
text-align: center;
cursor: pointer;
}
.pagination__link,
.pagination .page-numbers > li > a {
background-color: #efefef;
color: #222222;
}
.pagination__link:hover, .pagination__link:focus,
.pagination .page-numbers > li > a:hover,
.pagination .page-numbers > li > a:focus {
background-color: #0086CD;
color: #ffffff;
}
.pagination__link--prev, .pagination__link.prev,
.pagination .page-numbers > li > a--prev,
.pagination .page-numbers > li > a.prev {
min-width: 12rem;
background-color: #efefef;
color: #222222;
}
.pagination__link--prev:before, .pagination__link.prev:before,
.pagination .page-numbers > li > a--prev:before,
.pagination .page-numbers > li > a.prev:before {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e5cb";
display: inline-block;
margin-right: 0.6rem;
transition: transform 0.2s;
}
.pagination__link--prev:hover, .pagination__link--prev:focus, .pagination__link.prev:hover, .pagination__link.prev:focus,
.pagination .page-numbers > li > a--prev:hover,
.pagination .page-numbers > li > a--prev:focus,
.pagination .page-numbers > li > a.prev:hover,
.pagination .page-numbers > li > a.prev:focus {
background-color: #0086CD;
color: #ffffff;
}
.pagination__link--prev:hover:before, .pagination__link--prev:focus:before, .pagination__link.prev:hover:before, .pagination__link.prev:focus:before,
.pagination .page-numbers > li > a--prev:hover:before,
.pagination .page-numbers > li > a--prev:focus:before,
.pagination .page-numbers > li > a.prev:hover:before,
.pagination .page-numbers > li > a.prev:focus:before {
transform: translateX(-4px);
}
.pagination__link--next, .pagination__link.next,
.pagination .page-numbers > li > a--next,
.pagination .page-numbers > li > a.next {
min-width: 12rem;
background-color: #efefef;
color: #222222;
}
.pagination__link--next:after, .pagination__link.next:after,
.pagination .page-numbers > li > a--next:after,
.pagination .page-numbers > li > a.next:after {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga";
content: "\e5cc";
display: inline-block;
margin-left: 0.6rem;
transition: transform 0.2s;
}
.pagination__link--next:hover, .pagination__link--next:focus, .pagination__link.next:hover, .pagination__link.next:focus,
.pagination .page-numbers > li > a--next:hover,
.pagination .page-numbers > li > a--next:focus,
.pagination .page-numbers > li > a.next:hover,
.pagination .page-numbers > li > a.next:focus {
background-color: #0086CD;
color: #ffffff;
}
.pagination__link--next:hover:after, .pagination__link--next:focus:after, .pagination__link.next:hover:after, .pagination__link.next:focus:after,
.pagination .page-numbers > li > a--next:hover:after,
.pagination .page-numbers > li > a--next:focus:after,
.pagination .page-numbers > li > a.next:hover:after,
.pagination .page-numbers > li > a.next:focus:after {
transform: translateX(4px);
}
.pagination .pagination__text--dots, .pagination .pagination__text.dots,
.pagination .page-numbers > li > span--dots, .pagination .pagination__text--current, .pagination .pagination__text.current,
.pagination .page-numbers > li > span--current, .pagination .pagination__text,
.pagination .page-numbers > li > span {
display: flex;
justify-content: center;
align-items: center;
padding: 1.2rem 1.6rem;
border-radius: 6px;
font-weight: 400;
font-size: 1.6rem;
line-height: 1;
text-align: center;
}
.pagination__text,
.pagination .page-numbers > li > span {
background-color: #efefef;
color: #222222;
}
.pagination__text--current, .pagination__text.current,
.pagination .page-numbers > li > span--current,
.pagination .page-numbers > li > span.current {
background-color: #0086CD;
color: #ffffff;
}
.pagination__text--dots, .pagination__text.dots,
.pagination .page-numbers > li > span--dots,
.pagination .page-numbers > li > span.dots {
background-color: #efefef;
color: #222222;
}
@media screen and (min-width: 1100px) {
.form__form-group {
display: flex;
}
}
.form__form-group-title {
padding: 1rem;
}
@media screen and (min-width: 1100px) {
.form__form-group-title {
width: 260px;
padding: 1.6rem;
}
}
.form__form-group-content {
padding: 1rem;
display: flex;
}
@media screen and (min-width: 1100px) {
.form__form-group-content {
width: calc(100% - 260px);
padding: 1.6rem;
}
}
.form .form__label--required, .form .form__label--itemname, .form .form__label {
display: inline-block;
font-weight: 400;
line-height: 1;
letter-spacing: 0.08em;
}
.form__label--itemname {
color: #222222;
}
.form__label--required {
margin-left: 0.4rem;
padding: 0.4em 0.6em;
border-radius: 3px;
background: #fafafa;
color: #aaaaaa;
font-size: 1.4rem;
}
.form__list {
list-style: none;
margin: 0;
padding: 0;
}
.form__list-item {
margin-bottom: 0.6rem;
}
.form .form__input--check, .form .form__input--radio, .form .form__input--select, .form .form__input--textarea-half, .form .form__input--textarea, .form .form__input--text-half, .form .form__input--text, .form .form__input {
position: relative;
width: 100%;
padding: 0.4rem;
}
.form .form__input--select select, .form__input--select .form select, .form .form__input--textarea-half textarea, .form__input--textarea-half .form textarea, .form .form__input--textarea textarea, .form__input--textarea .form textarea, .form .form__input--text-half input, .form__input--text-half .form input, .form .form__input--text input, .form__input--text .form input {
display: inline-flex;
align-items: center;
position: relative;
width: 100%;
margin: 0;
border: 2px solid #efefef;
background: #ffffff;
font-weight: 400;
font-size: 1.6rem;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;  }
.form .form__input--select select::-ms-expand, .form__input--select .form select::-ms-expand, .form .form__input--textarea-half textarea::-ms-expand, .form__input--textarea-half .form textarea::-ms-expand, .form .form__input--textarea textarea::-ms-expand, .form__input--textarea .form textarea::-ms-expand, .form .form__input--text-half input::-ms-expand, .form__input--text-half .form input::-ms-expand, .form .form__input--text input::-ms-expand, .form__input--text .form input::-ms-expand {
display: none;
}
.form .form__input--select select::-moz-placeholder, .form__input--select .form select::-moz-placeholder, .form .form__input--textarea-half textarea::-moz-placeholder, .form__input--textarea-half .form textarea::-moz-placeholder, .form .form__input--textarea textarea::-moz-placeholder, .form__input--textarea .form textarea::-moz-placeholder, .form .form__input--text-half input::-moz-placeholder, .form__input--text-half .form input::-moz-placeholder, .form .form__input--text input::-moz-placeholder, .form__input--text .form input::-moz-placeholder {
color: #cccccc;
}
.form .form__input--select select::placeholder, .form__input--select .form select::placeholder, .form .form__input--textarea-half textarea::placeholder, .form__input--textarea-half .form textarea::placeholder, .form .form__input--textarea textarea::placeholder, .form__input--textarea .form textarea::placeholder, .form .form__input--text-half input::placeholder, .form__input--text-half .form input::placeholder, .form .form__input--text input::placeholder, .form__input--text .form input::placeholder {
color: #cccccc;
}
.form .form__input--select select::-ms-input-placeholder, .form__input--select .form select::-ms-input-placeholder, .form .form__input--textarea-half textarea::-ms-input-placeholder, .form__input--textarea-half .form textarea::-ms-input-placeholder, .form .form__input--textarea textarea::-ms-input-placeholder, .form__input--textarea .form textarea::-ms-input-placeholder, .form .form__input--text-half input::-ms-input-placeholder, .form__input--text-half .form input::-ms-input-placeholder, .form .form__input--text input::-ms-input-placeholder, .form__input--text .form input::-ms-input-placeholder {
color: #cccccc;
}
.form .form__input--select select:-ms-input-placeholder, .form__input--select .form select:-ms-input-placeholder, .form .form__input--textarea-half textarea:-ms-input-placeholder, .form__input--textarea-half .form textarea:-ms-input-placeholder, .form .form__input--textarea textarea:-ms-input-placeholder, .form__input--textarea .form textarea:-ms-input-placeholder, .form .form__input--text-half input:-ms-input-placeholder, .form__input--text-half .form input:-ms-input-placeholder, .form .form__input--text input:-ms-input-placeholder, .form__input--text .form input:-ms-input-placeholder {
color: #cccccc;
}
.form .form__input--text-half input, .form__input--text-half .form input, .form .form__input--text input, .form__input--text .form input {
padding: 0.8rem 1.6rem;
transition: border-color 0.4s;
}
.form .form__input--text-half input:focus, .form__input--text-half .form input:focus, .form .form__input--text input:focus, .form__input--text .form input:focus {
border: 2px solid #0086CD;
}
.form .form__input--textarea-half textarea, .form__input--textarea-half .form textarea, .form .form__input--textarea textarea, .form__input--textarea .form textarea {
padding: 1.6rem;
transition: border-color 0.4s;
}
.form .form__input--textarea-half textarea:focus, .form__input--textarea-half .form textarea:focus, .form .form__input--textarea textarea:focus, .form__input--textarea .form textarea:focus {
border: 2px solid #0086CD;
}
.form__input--text-half {
max-width: 50%;
}
.form__input--textarea-half {
max-width: 50%;
}
.form__input--select {
max-width: 300px;
}
.form__input--select select {
padding: 0.8rem 2.4rem 0.8rem 1.6rem;
cursor: pointer;
}
.form__input--select::after {
display: inline-block;
position: absolute;
top: 0;
right: 12px;
bottom: 0;
z-index: 1;
width: 0;
height: 0;
margin: auto 0;
border-width: 6px 4px 0;
border-style: solid;
border-color: #cccccc transparent transparent transparent;
content: "";
pointer-events: none;
}
.form__input--radio {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.form__input--radio .radio-input {
display: block !important;
visibility: visible !important;
opacity: 0 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 4px !important;
height: 4px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: none !important;
}
.form__input--radio .radio-icon {
display: inline-block;
position: relative;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.8rem;
border: 1px solid #cccccc;
border-radius: 50%;
}
.form__input--radio .radio-icon:before {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 1.5rem;
height: 1.5rem;
margin: auto;
border-radius: 50%;
background: #0086CD;
content: "";
transition: opacity 0.4s;
}
.form__input--radio .radio-text {
color: #cccccc;
transition: color 0.4s;
}
.form__input--radio .radio-input:checked + .radio-icon {
border-color: #0086CD;
}
.form__input--radio .radio-input:checked + .radio-icon:before {
opacity: 1;
}
.form__input--radio .radio-input:checked ~ .radio-text {
color: #0086CD;
}
.form__input--check {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.form__input--check .check-input {
display: block !important;
visibility: visible !important;
opacity: 0 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 4px !important;
height: 4px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: none !important;
}
.form__input--check .check-icon {
display: inline-block;
position: relative;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.8rem;
border: 2px solid #cccccc;
}
.form__input--check .check-icon:after {
opacity: 0;
position: absolute;
top: 0.5rem;
left: 0.3rem;
width: 1.6rem;
height: 0.8rem;
border-bottom: 2px solid transparent;
border-left: 2px solid transparent;
content: "";
transition: opacity 0.4s;
}
.form__input--check .check-text {
color: #cccccc;
transition: color 0.4s;
}
.form__input--check .check-input:checked + .check-icon {
border-color: #0086CD;
}
.form__input--check .check-input:checked + .check-icon:after {
opacity: 1;
transform: rotate(-45deg);
border-bottom: 2px solid #0086CD;
border-left: 2px solid #0086CD;
}
.form__input--check .check-input:checked ~ .check-text {
color: #0086CD;
}
.table-overview {
width: 100%;
line-height: 1.8;
text-align: left;
}
.table-overview tr th {
width: 16rem;
padding: 0.8rem;
vertical-align: top;
}
.table-overview tr td {
width: calc(100% - 16rem);
padding: 0.8rem 1.6rem;
vertical-align: top;
}
.breadcrumbs {
width: 100%;
padding-left: 12px;
padding-top: 28px;
font-size: 13px;
text-align: left;
}
@media (min-width: 768px) {
.breadcrumbs {
padding-left: clamp(0px, 8.4302325581vw, 145px);
}
}
.footer_recruit__container {
max-width: 100%;
text-align: center;
color: #ffffff;
}
.footer_recruit__content {
display: grid;
place-content: center;
place-items: center;
margin: clamp(50px, 4.6511627907vw, 80px) auto;
max-width: 1360px;
height: clamp(280px, 23.8372093023vw, 410px);
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/recruit_banner.jpg);
background-position: top;
background-size: cover;
background-repeat: no-repeat;
}
.footer_recruit__main {
margin-top: clamp(0px, 2.3255813953vw, 40px);
font-size: var(--font-50);
line-height: 1.5em;
}
.footer_recruit__sub {
font-size: var(--font-24);
font-weight: bold;
}
.footer_recruit__button {
margin-top: 20px;
width: 200px;
height: 48px;
padding-top: 10px;
background-color: #0086CD;
font-size: var(--font-18);
font-weight: bold;
color: #ffffff;
border: 1px solid #0086CD;
}
.footer_recruit__button:hover {
opacity: 100 !important;
background-color: #ffffff;
color: #0086CD;
}
.footer_recruit__button:hover a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-blue.svg);
}
@media screen and (min-width: 600px) {
.footer_recruit__button {
padding-top: 26px;
width: 400px;
height: 80px;
}
}
.footer_recruit__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.footer_company__container {
display: flex;
flex-wrap: wrap;
max-width: 1300px;
text-align: center;
margin: clamp(60px, 4.6511627907vw, 80px) auto;
justify-content: center;
}
.footer_company__button {
position: relative;
margin: 10px;
width: 360px;
height: 61px;
font-size: 18px;
font-weight: bold;
border: 1px solid #222222;
display: grid;
place-items: center;
place-content: center;
}
@media screen and (min-width: 600px) {
.footer_company__button {
width: 400px;
height: 80px;
}
}
.footer_company__button:hover {
background-color: #222222;
color: #ffffff;
}
.footer_company__button:hover ::after {
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
}
.footer_company__button a {
padding: 15px 65px;
}
@media (min-width: 768px) {
.footer_company__button a {
padding: 25px 100px;
}
}
.footer_company__button a:hover {
opacity: 100 !important;
}
.footer_company__button a::after {
content: "";
display: block;
position: absolute;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
background-size: 100%;
width: 12px;
height: 17px;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
}
.about-icon {
display: flex;
flex-wrap: wrap;
max-width: 500px;
margin: 0 auto 0 auto;
}
.about-icon__image {
width: 100%;
max-width: 200px;
max-height: 200px;
margin: 0 auto;
margin-bottom: 3.2rem;
overflow: hidden;
border-radius: 100%;
}
@media screen and (min-width: 1100px) {
.about-icon__image {
margin-bottom: 0;
}
}
.about-icon__image img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.about-icon__content {
width: 100%;
text-align: center;
}
@media screen and (min-width: 1100px) {
.about-icon__content {
display: flex;
flex-direction: column;
justify-content: center;
width: calc(100% - 200px);
padding-left: 2.4rem;
text-align: left;
}
}
.about-icon__content-name {
margin-bottom: 0.8rem;
font-weight: bold;
font-size: 3.2rem;
}
.about-icon__content-job {
margin-bottom: 3.2rem;
font-size: 1.6rem;
}
.skillset__item {
display: flex;
align-items: center;
}
.skillset__item:not(:first-child) {
margin-top: 1.6rem;
}
.skillset__image {
display: block;
width: 6.4rem;
height: 6.4rem;
margin-right: 1.6rem;
border-radius: 100%;
}
.skillset__content {
display: block;
width: 100%;
}
.skillset__content-title {
font-weight: 400;
font-size: 1.6rem;
}
.skillset .skillset__content-bar--100, .skillset .skillset__content-bar--90, .skillset .skillset__content-bar--80, .skillset .skillset__content-bar--70, .skillset .skillset__content-bar--60, .skillset .skillset__content-bar--50, .skillset .skillset__content-bar--40, .skillset .skillset__content-bar--30, .skillset .skillset__content-bar--20, .skillset .skillset__content-bar--10, .skillset .skillset__content-bar {
height: 1.6rem;
margin-top: 0.8rem;
overflow: hidden;
box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
.skillset .skillset__content-bar--100::after, .skillset .skillset__content-bar--90::after, .skillset .skillset__content-bar--80::after, .skillset .skillset__content-bar--70::after, .skillset .skillset__content-bar--60::after, .skillset .skillset__content-bar--50::after, .skillset .skillset__content-bar--40::after, .skillset .skillset__content-bar--30::after, .skillset .skillset__content-bar--20::after, .skillset .skillset__content-bar--10::after, .skillset .skillset__content-bar::after {
display: block;
height: 1.6rem;
background: #0086CD;
content: "";
}
.skillset__content-bar--10::after {
width: 10%;
}
.skillset__content-bar--20::after {
width: 20%;
}
.skillset__content-bar--30::after {
width: 30%;
}
.skillset__content-bar--40::after {
width: 40%;
}
.skillset__content-bar--50::after {
width: 50%;
}
.skillset__content-bar--60::after {
width: 60%;
}
.skillset__content-bar--70::after {
width: 70%;
}
.skillset__content-bar--80::after {
width: 80%;
}
.skillset__content-bar--90::after {
width: 90%;
}
.skillset__content-bar--100::after {
width: 100%;
}
.about-definition {
display: flex;
flex-wrap: wrap;
}
.about-definition__term {
width: 40%;
margin-bottom: 0.8rem;
font-weight: 700;
font-size: 1.6rem;
}
.about-definition__term:after {
content: "：";
}
.about-definition__description {
width: 60%;
margin-bottom: 0.8rem;
font-size: 1.6rem;
text-align: right;
}
.works-item {
box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.15);
transition: all 0.2s;
display: block;
max-width: 600px;
margin: 0 auto;
padding: 0;
overflow: hidden;
border-radius: 0.8rem;
background: #ffffff;
color: #222222;
cursor: pointer;
}
.works-item__thumbnail {
overflow: hidden;
}
.works-item__thumbnail-image {
transition: all 0.2s;
display: block;
max-width: 100%;
margin: 0 auto;
}
.works-item__content {
padding: 0.8rem;
}
@media (min-width: 992px) {
.works-item__content {
padding: 1.6rem;
}
}
.works-item__content-title {
color: #222222;
font-weight: 400;
font-size: 1.6rem;
text-align: center;
}
.works-item:hover {
box-shadow: 0 0 2.4rem 0 rgba(0, 0, 0, 0.3);
}
.works-item:hover .works-item__thumbnail-image {
transform: scale(1.1);
}
.works-item:hover .works-item__button-more {
background: #222222;
color: #ffffff;
}
.works-item:hover .works-item__button-more:after {
transform: translateX(4px);
}  .top-concept {
position: relative;
margin: 0 auto;
}
.top-concept__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
}
@media screen and (min-width: 1100px) {
.top-concept .top-business__layout--right, .top-concept .top-business__layout--left, .top-concept .top-business__layout, .top-concept .top-concept__layout--right, .top-concept .top-concept__layout--left, .top-concept .top-concept__layout {
display: flex;
}
}
.top-concept__layout--right {
flex-direction: row-reverse;
}
.top-concept__layout--left .top-concept__layout-content {
margin-bottom: 2.4rem;
}
@media screen and (min-width: 1100px) {
.top-concept__layout--left .top-concept__layout-content {
width: 60%;
margin-bottom: 0;
padding-right: 2.4rem;
}
}
.top-concept__layout--right .top-concept__layout-content {
margin-bottom: 2.4rem;
}
@media screen and (min-width: 1100px) {
.top-concept__layout--right .top-concept__layout-content {
width: 60%;
margin-bottom: 0;
padding-left: 2.4rem;
}
}
@media screen and (min-width: 1100px) {
.top-concept__layout-image {
width: 40%;
}
}
.top-concept__layout-image img {
display: block;
max-width: 100%;
border-radius: 1.6rem;
}
.top-concept__heading {
margin-bottom: 3.2rem;
}
.top-concept__text {
color: #aaaaaa;
font-size: 1.4rem;
line-height: 1.8;
}
.top-concept__link {
display: inline-flex;
align-items: center;
position: relative;
z-index: 1;
margin-right: 2.4rem;
margin-left: 3.6rem;
padding: 3.6rem 0;
color: #222222;
transition: padding-left 0.2s;
}
.top-concept__link::before {
display: block;
position: absolute;
left: -3.6rem;
z-index: -1;
width: 5.6rem;
height: 5.6rem;
border-radius: 100%;
background: #0086CD;
content: "";
}
.top-concept__link:hover, .top-concept__link:focus {
padding-left: 0.4rem;
}
.top-concept__link:hover::before, .top-concept__link:focus::before {
background: #007cbe;
}
.top-news {
background-color: #F2F5F7;
}
.top-news__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
padding: clamp(30px, 5.5813953488vw, 96px) 0px 6rem;
}
.top-news__content {
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
}
.top-news__heading {
margin-bottom: 1rem;
}
.top-news__text {
color: #aaaaaa;
font-size: 1.6rem;
}
.top-news__list {
margin: 0 auto;
display: flex;
flex-direction: column;
}
@media (min-width: 560px) {
.top-news__list {
margin: 0 10px;
flex-wrap: wrap;
flex-direction: row;
--c-row-gutter-x: 10px;
--c-row-gutter-y: 10px;
}
}
@media (min-width: 901px) {
.top-news__list {
margin: 0 20px;
flex-wrap: nowrap;
}
}
.top-news__list-item {
margin-bottom: 1em;
flex-basis: 100%;
max-width: 100%;
overflow: hidden;
}
@media (min-width: 560px) {
.top-news__list-item {
flex-basis: 50%;
max-width: 50%;
margin: 0 0 20px;
padding: calc(var(--c-row-gutter-y, 0) / 2) calc(var(--c-row-gutter-x, 0) / 2);
}
}
@media (min-width: 901px) {
.top-news__list-item {
width: auto;
flex-basis: 25%;
max-width: 25%;
overflow: hidden;
}
}
@media (min-width: 1630px) {
.top-news__list-item {
margin: 0 15px;
}
}
.top-news__list-item:hover {
opacity: 0.65;
}
.top-news-item {
width: 90%;
margin: 0 auto;
}
@media (min-width: 560px) {
.top-news-item {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.top-news-item__content {
margin-bottom: 0;
}
}
.top-news-item__content span {
margin-left: 0;
}
@media screen and (min-width: 600px) {
.top-news-item__content span {
margin-left: 20px;
}
}
.top-news-item__content-title {
color: #000000;
margin-left: 0;
width: 94%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (min-width: 600px) {
.top-news-item__content-title {
margin-left: 20px;
}
}
.top-news figure {
margin-bottom: 8px;
}
.top-news-item__thumbnail {
margin: 0 auto 1em;
aspect-ratio: 335/250;
}
.top-news-item__thumbnail img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.top-news__guide {
padding-top: 6.4rem;
}
.top-news__button {
margin: 40px auto;
width: -moz-fit-content;
width: fit-content;
}
.top-news__button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 280px;
background-color: #0086CD;
color: #ffffff;
padding: 1.5em;
font-size: 18px;
font-weight: bold;
}
@media (min-width: 768px) {
.top-news__button a {
width: 320px;
height: 80px;
}
}
@media (min-width: 992px) {
.top-news__button a {
width: 400px;
}
}
.top-news__button a:hover {
background-color: #ffffff;
color: #0086CD;
border: 1px solid #0086CD;
}
.top-news__button a:hover::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-blue.svg);
}
.top-news__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.top-news__button-news {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.top-news__button-news {
margin-left: 20px;
}
}
.top-news__button-news a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #000000;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.top-news__button-news a:hover {
background-color: black;
}
.top-news__button-event {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.top-news__button-event {
margin-left: 20px;
}
}
.top-news__button-event a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #0086CD;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.top-news__button-event a:hover {
background-color: #0075b4;
}
.top-news__button-event p {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #0086CD;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
cursor: unset;
}
.top-business {
position: relative;
margin: 48px auto;
}
.top-business__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
background-color: #efefef;
padding: 0;
margin-bottom: 40px;
}
@media screen and (min-width: 1100px) {
.top-business__container {
margin-bottom: 120px;
min-height: auto;
}
}
@media screen and (min-width: 1100px) {
.top-business .top-business__layout--right, .top-business .top-business__layout--left, .top-business .top-business__layout, .top-business .top-concept__layout, .top-business .top-concept__layout--left, .top-business .top-concept__layout--right {
display: flex;
}
}
.top-business__layout {
position: relative;
}
.top-business__layout--left {
display: flex;
flex-direction: column;
}
@media (min-width: 900px) {
.top-business__layout--left {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
}
.top-business__layout--right {
display: flex;
flex-direction: column;
}
@media (min-width: 900px) {
.top-business__layout--right {
display: flex;
justify-content: center;
flex-direction: row-reverse;
align-items: center;
}
}
.top-business__layout-container {
position: relative;
margin: 0 auto;
width: 97%;
}
@media (min-width: 900px) {
.top-business__layout-container {
width: 50%;
}
}
@media screen and (min-width: 1100px) {
.top-business__layout-container {
width: 50%;
margin: 0;
}
}
.top-business__layout-content {
background-color: #4a4949;
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
}
@media screen and (min-width: 1100px) {
.top-business__layout-content {
position: absolute;
top: 0;
}
}
@media (min-width: 992px) {
.top-business__layout-content {
top: 0;
min-height: 436px;
position: relative;
}
}
.top-business__layout-content p {
margin-bottom: 0px;
font-weight: bold;
}
@media (min-width: 992px) {
.top-business__layout-content p {
margin-bottom: 4px;
font-size: 16px;
}
}
@media (min-width: 1600px) {
.top-business__layout-content p {
font-size: 28px;
}
}
@media screen and (min-width: 1100px) {
.top-business__layout--left .top-business__layout-content {
left: -40px;
top: clamp(0px, 3.488372093vw, 60px);
}
}
@media screen and (min-width: 1100px) {
.top-business__layout--right .top-business__layout-content {
right: -60px;
top: clamp(0px, 3.488372093vw, 60px);
}
}
.top-business__layout-content.business_marg {
padding: clamp(45px, 5.2325581395vw, 90px) 0;
}
.top-business__layout-content.jyu_marg {
padding: clamp(45px, 5.2325581395vw, 90px) 0;
}
@media (min-width: 1100px) {
.top-business__layout-content.jyu_marg {
padding: 0;
}
}
.top-business__layout-image {
margin: 0 0 auto 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
height: 100%;
position: relative;
width: 100%;
}
.top-business__layout-image.right {
right: 0;
left: 0;
}
@media (min-width: 1100px) {
.top-business__layout-image.right {
left: -40px;
}
}
.top-business__layout-image_left {
margin-right: 1%;
}
.top-business__layout-image_under {
margin-top: 1%;
}
@media (min-width: 900px) {
.top-business__layout-image {
margin: 0px;
width: 50%;
}
}
@media (min-width: 1100px) {
.top-business__layout-image {
max-width: 888px;
width: 50%;
right: -40px;
}
}
.top-business__layout-image figure {
display: block;
max-width: 48%;
margin-bottom: 0;
}
.top-business__heading {
font-size: 32px;
padding-top: clamp(0px, 2.0930232558vw, 36px);
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 992px) {
.top-business__heading {
font-size: 36px;
margin-top: 0;
}
}
@media (min-width: 1600px) {
.top-business__heading {
font-size: 48px;
}
}
.top-business__sub {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
}
@media (min-width: 992px) {
.top-business__sub {
margin-top: 0;
}
}
@media (min-width: 1600px) {
.top-business__sub {
margin-top: 24px;
}
}
.top-business__text {
margin: 20px;
font-size: 13px;
text-align: left;
display: flex;
justify-content: center;
}
@media screen and (min-width: 600px) {
.top-business__text {
font-size: 16px;
}
}
@media (min-width: 992px) {
.top-business__text {
margin: clamp(0px, 2.3255813953vw, 40px) 0;
}
}
@media (min-width: 1800px) {
.top-business__text {
margin: 40px 120px;
}
}
.top-business__button {
margin: 0 auto;
padding-bottom: clamp(0px, 2.0930232558vw, 36px);
width: -moz-fit-content;
width: fit-content;
}
.top-business__button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 220px;
background-color: #4a4949;
color: #ffffff;
padding: 1.5em;
font-size: 14px;
font-weight: bold;
border: solid 1px;
border-color: #ffffff;
}
@media (min-width: 768px) {
.top-business__button a {
width: 280px;
height: clamp(60px, 4.6511627907vw, 80px);
font-size: 18px;
}
}
.top-business__button a:hover {
opacity: 100 !important;
background-color: #ffffff;
color: #4a4949;
}
.top-business__button a:hover::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
}
.top-business__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.top-business__button__link {
display: inline-flex;
align-items: center;
position: relative;
z-index: 1;
margin-right: 2.4rem;
margin-left: 3.6rem;
padding: 3.6rem 0;
color: #222222;
transition: padding-left 0.2s;
}
.top-business__button__link::before {
display: block;
position: absolute;
left: -3.6rem;
z-index: -1;
width: 5.6rem;
height: 5.6rem;
border-radius: 100%;
background: #0086CD;
content: "";
}
.top-business__button__link:hover, .top-business__button__link:focus {
padding-left: 0.4rem;
}
.top-business__button__link:hover::before, .top-business__button__link:focus::before {
background: #007cbe;
}
.top-pickup {
background-color: #ffffff;
}
.top-pickup__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
max-width: 1900px;
padding: 6rem 15px;
}
.top-pickup__content {
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
}
.top-pickup__heading {
margin-bottom: 1rem;
}
.top-pickup__text {
color: #aaaaaa;
font-size: 1.6rem;
}
.top-pickup__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 80px;
}
.top-pickup__list a {
display: block;
width: 100%;
margin: 2px;
}
@media (min-width: 600px) {
.top-pickup__list a {
width: 48%;
margin: 4px;
}
}
@media (min-width: 767px) {
.top-pickup__list a {
width: 23%;
margin: 8px;
}
}
.top-pickup__list img {
margin-top: 8px;
width: 100%;
}
.top-pickup__list-item {
max-width: 385px;
}
@media (min-width: 768px) {
.top-pickup__list-item {
width: 320px;
}
}
@media (min-width: 992px) {
.top-pickup__list-item {
width: 385px;
margin: 15px;
}
}
.top-pickup-item__content span {
margin-left: 20px;
}
.top-pickup-item__content-title {
color: #000000;
margin-left: 20px;
}
.top-pickup__guide {
padding-top: 6.4rem;
}
.top-pickup__button {
margin: 40px auto;
width: -moz-fit-content;
width: fit-content;
}
.top-pickup__button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 280px;
height: 80px;
background-color: #0086CD;
color: #ffffff;
margin-left: 1.6rem;
padding: 8px 14px;
font-size: 18px;
font-weight: bold;
}
@media (min-width: 768px) {
.top-pickup__button a {
width: 320px;
}
}
@media (min-width: 992px) {
.top-pickup__button a {
width: 400px;
}
}
.top-pickup__button a:hover {
background-color: #0075b4;
}
.top-pickup__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.top-pickup__button-news {
margin-left: 20px;
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
}
.top-pickup__button-news a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #000000;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.top-pickup__button-news a:hover {
background-color: black;
}
.top-pickup__button-event {
margin-left: 20px;
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
}
.top-pickup__button-event a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #0086CD;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.top-pickup__button-event a:hover {
background-color: #0075b4;
}
.top-pickup__story {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 80px;
color: #ffffff;
}
.top-pickup__story img {
max-width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 1100px) {
.top-pickup__story img {
max-width: 700px;
}
}
.top-pickup__story-content {
display: grid;
place-content: center;
place-items: center;
min-width: 400px;
background-color: #0086CD;
text-align: center;
min-height: 300px;
}
.top-pickup__story-content h3 {
font-size: 48px;
font-weight: normal;
}
.top-pickup__story-sub {
font-size: 20px;
}
.top-pickup__story-button a {
font-size: 18px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 270px;
height: 30px;
background-color: #ffffff;
color: #000000;
padding: 28px 14px;
font-weight: normal;
margin: 20px;
border: 1px solid #0086CD;
}
.top-pickup__story-button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron-right-solid-black.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.top-pickup__story-button a:hover {
background-color: #0086CD;
color: #ffffff;
opacity: 100 !important;
border: 1px solid #ffffff;
}
.top-works {
background-color: #ffffff;
}
.top-works__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
padding: 0 15px clamp(50px, 4.6511627907vw, 80px);
}
.top-works__content {
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
}
.top-works__heading {
margin-bottom: 1rem;
}
.top-works__text {
color: #aaaaaa;
font-size: 1.6rem;
}
.top-works__list {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 560px) {
.top-works__list {
margin: 0;
flex-direction: row;
--c-row-gutter-x: 10px;
--c-row-gutter-y: 10px;
}
}
@media (min-width: 901px) {
.top-works__list {
margin: 0;
flex-wrap: nowrap;
}
}
.top-works__list-item {
max-width: 100%;
margin: 0 4px;
margin-bottom: 8px;
flex-basis: 100%;
max-width: 100%;
overflow: hidden;
}
@media (min-width: 560px) {
.top-works__list-item {
width: 48%;
margin-bottom: 20px;
flex-basis: 50%;
max-width: 50%;
overflow: hidden;
margin: 0 0 20px;
padding: calc(var(--c-row-gutter-y, 0) / 2) calc(var(--c-row-gutter-x, 0) / 2);
}
}
@media (min-width: 901px) {
.top-works__list-item {
width: auto;
flex-basis: 25%;
max-width: 25%;
overflow: hidden;
}
}
@media (min-width: 1630px) {
.top-works__list-item {
margin: 0 15px;
}
}
.top-works__list-item:hover {
opacity: 0.65;
}
@media (min-width: 901px) {
.top-works-item {
min-width: 227px;
}
}
@media screen and (min-width: 1100px) {
.top-works-item__content {
margin-bottom: 0;
}
}
.top-works-item__content span {
margin-left: 0;
}
@media screen and (min-width: 600px) {
.top-works-item__content span {
margin-left: 20px;
}
}
.top-works-item__content-title {
color: #000000;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.top-works-item__content-title {
margin-left: 20px;
}
}
.top-works figure {
margin-bottom: 8px;
}
.top-works-item__thumbnail {
margin: 0 auto 1em;
aspect-ratio: 335/250;
}
.top-works-item__thumbnail img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.top-works__guide {
padding-top: 6.4rem;
}
.top-works__button {
margin: 40px auto;
width: -moz-fit-content;
width: fit-content;
}
.top-works__button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 280px;
height: 80px;
background-color: #222222;
color: #ffffff;
padding: 1.5em;
font-size: 18px;
font-weight: bold;
border: 1px solid #222222;
}
@media (min-width: 768px) {
.top-works__button a {
width: 320px;
}
}
@media (min-width: 992px) {
.top-works__button a {
width: 400px;
}
}
.top-works__button a:hover {
background-color: #ffffff;
color: #222222;
border: 1px solid #222222;
opacity: 100 !important;
}
.top-works__button a:hover::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
}
.top-works__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.top-works__button-residential {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.top-works__button-residential {
margin-left: 20px;
}
}
.top-works__button-residential a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #0086CD;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.top-works__button-residential a:hover {
background-color: #0075b4;
}
.top-works__button-etc {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.top-works__button-etc {
margin-left: 20px;
}
}
.top-works__button-etc a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #222222;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.top-works__button-etc a:hover {
background-color: #151515;
}
.top-works__button-civil_engineering {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.top-works__button-civil_engineering {
margin-left: 20px;
}
}
.top-works__button-civil_engineering a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #aaaaaa;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.top-works__button-civil_engineering a:hover {
background-color: #9d9d9d;
}
.top-about {
background-color: #F2F5F7;
}
.top-about__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
padding: clamp(50px, 4.6511627907vw, 80px) 15px;
}
.top-about__list {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (min-width: 767px) {
.top-about__list {
flex-wrap: nowrap;
}
}
.top-about__list a {
display: block;
}
.top-about__list a:hover {
opacity: 100 !important;
}
.top-about__list-item {
border: 1px solid #aaaaaa;
margin-bottom: 8px;
}
@media screen and (min-width: 1100px) {
.top-about__list-item {
margin-bottom: 0;
}
}
@media (min-width: 767px) {
.top-about__list-item.border-left_none {
border-left: none;
}
.top-about__list-item.border-light_none {
border-right: none;
}
}
.top-about-item__thumbnail {
margin-bottom: 0;
max-width: 543px;
}
@media (min-width: 767px) {
.top-about-item__thumbnail {
max-height: 224px;
}
}
.top-about-item__thumbnail figure {
-o-object-fit: cover;
object-fit: cover;
}
.top-about-item__thumbnail figure img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 600px) {
.top-about-item__thumbnail figure img {
height: 226px;
}
}
.top-about-item__content-title {
color: #000000;
}
.top-about-item__content-sub {
color: #000000;
font-family: "Satisfy";
}
.top-about-item__button {
margin: 0 auto;
padding: 12px 0;
width: 100%;
height: 80px;
display: grid;
place-items: center;
place-content: center;
position: relative;
}
.top-about-item__button:hover {
opacity: 100 !important;
background-color: #eaeaea;
}
.top-about-item__button::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
width: 8px;
margin-left: 8px;
position: absolute;
top: 30%;
right: 20px;
}
.top-recruit {
background-color: #ffffff;
color: #ffffff;
}
.top-recruit .top-recruit__content-sdgs, .top-recruit .top-recruit__content-csr, .top-recruit .top-recruit__content {
display: grid;
place-items: center;
place-content: center;
margin: 0 auto;
text-align: center;
position: relative;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 20px;
}
.top-recruit__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
padding: 6rem 15px;
}
.top-recruit__content {
max-width: 1360px;
height: 410px;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/bg_recruit.jpg);
margin-bottom: 40px !important;
}
.top-recruit__content h3 {
margin-top: 40px;
font-size: 48px;
font-weight: normal;
line-height: 48px;
}
.top-recruit__content .sub {
font-size: 28px;
font-weight: bold;
}
.top-recruit__content .button {
margin: 0 auto;
width: -moz-fit-content;
width: fit-content;
border: 1px solid #0086CD;
}
.top-recruit__content .button:hover {
opacity: 100 !important;
}
.top-recruit__content .button:hover ::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-blue.svg);
}
.top-recruit__content .button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 280px;
height: 80px;
background-color: #0086CD;
color: #ffffff;
padding: 8px 14px;
font-size: 18px;
font-weight: bold;
}
.top-recruit__content .button a:hover {
opacity: 100 !important;
background-color: #ffffff;
color: #0086CD;
}
@media (min-width: 768px) {
.top-recruit__content .button a {
width: 320px;
}
}
@media (min-width: 992px) {
.top-recruit__content .button a {
width: 400px;
}
}
.top-recruit__content .button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.top-recruit__content-csr {
max-width: 857px;
height: 255px;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/bg_csr.jpg);
}
.top-recruit__content-csr h3 {
font-size: 40px;
font-weight: bold;
margin-bottom: 1rem;
float: left;
}
.top-recruit__content-csr h3 span {
font-size: 20px;
}
.top-recruit__content-csr .sub {
font-size: 1.6rem;
}
.top-recruit__content-csr .button {
margin: 0 auto;
width: -moz-fit-content;
width: fit-content;
}
.top-recruit__content-csr .button:hover {
opacity: 100 !important;
}
.top-recruit__content-csr .button:hover ::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
}
.top-recruit__content-csr .button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 240px;
height: 60px;
background-color: #ffffff;
color: #222222;
margin-left: 1.6rem;
padding: 8px 14px;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2.78;
letter-spacing: 0.45px;
}
.top-recruit__content-csr .button a:hover {
opacity: 100 !important;
background-color: #000000;
color: #ffffff;
}
.top-recruit__content-csr .button a:hover ::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
}
.top-recruit__content-csr .button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.top-recruit__content-sdgs {
max-width: 857px;
height: 255px;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/bg_sdgs.jpg);
}
.top-recruit__content-sdgs h3 {
font-size: 40px;
font-weight: bold;
margin-bottom: 1rem;
float: left;
}
.top-recruit__content-sdgs h3 span {
font-size: 20px;
}
.top-recruit__content-sdgs .sub {
font-size: 1.6rem;
}
.top-recruit__content-sdgs .button {
margin: 0 auto;
width: -moz-fit-content;
width: fit-content;
}
.top-recruit__content-sdgs .button:hover {
opacity: 100 !important;
}
.top-recruit__content-sdgs .button:hover ::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
}
.top-recruit__content-sdgs .button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 240px;
height: 60px;
background-color: #ffffff;
color: #222222;
margin-left: 1.6rem;
padding: 8px 14px;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2.78;
letter-spacing: 0.45px;
}
.top-recruit__content-sdgs .button a:hover {
opacity: 100 !important;
background-color: #000000;
color: #ffffff;
}
.top-recruit__content-sdgs .button a:hover ::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
}
.top-recruit__content-sdgs .button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.top-service__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
}
.top-service__heading {
margin-bottom: 6.4rem;
}
.top-service__list {
background: #fff;
box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 1100px) {
.top-service__list {
display: flex;
padding: 3.2rem;
}
}
.top-service__list-item {
padding: 2.4rem 1.6rem;
}
@media screen and (min-width: 1100px) {
.top-service__list-item:not(:first-child) {
border-left: 1px dashed #aaaaaa;
}
}
.top-service__guide {
padding-top: 6.4rem;
}
.top-about {
background-color: #F2F5F7;
}
.top-about__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
padding: clamp(50px, 4.6511627907vw, 80px) 15px;
}
.top-about__list {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (min-width: 767px) {
.top-about__list {
flex-wrap: nowrap;
}
}
.top-about__list a {
display: block;
}
.top-about__list a:hover {
opacity: 100 !important;
}
.top-about__list-item {
border: 1px solid #aaaaaa;
margin-bottom: 8px;
}
@media screen and (min-width: 1100px) {
.top-about__list-item {
margin-bottom: 0;
}
}
@media (min-width: 767px) {
.top-about__list-item.border-left_none {
border-left: none;
}
.top-about__list-item.border-light_none {
border-right: none;
}
}
.top-about-item__thumbnail {
margin-bottom: 0;
max-width: 543px;
}
@media (min-width: 767px) {
.top-about-item__thumbnail {
max-height: 224px;
}
}
.top-about-item__thumbnail figure {
-o-object-fit: cover;
object-fit: cover;
}
.top-about-item__thumbnail figure img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 600px) {
.top-about-item__thumbnail figure img {
height: 226px;
}
}
.top-about-item__content-title {
color: #000000;
}
.top-about-item__content-sub {
color: #000000;
font-family: "Satisfy";
}
.top-about-item__button {
margin: 0 auto;
padding: 12px 0;
width: 100%;
height: 80px;
display: grid;
place-items: center;
place-content: center;
position: relative;
}
.top-about-item__button:hover {
opacity: 100 !important;
background-color: #eaeaea;
}
.top-about-item__button::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
width: 8px;
margin-left: 8px;
position: absolute;
top: 30%;
right: 20px;
}
.top-blog {
background: #fafafa;
}
.top-blog__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
}
.top-blog__heading {
margin-bottom: 6.4rem;
}
.top-blog__list {
margin: 0;
}
.top-blog__list-item:not(:last-child) {
margin: 0 0 4.8rem 0;
}
.top-blog__guide {
padding-top: 6.4rem;
}
.contact-guide {
padding: 12.4rem 15px;
}
.contact-guide__container {
box-shadow: 0 0 0.8rem 0 rgba(0, 0, 0, 0.15);
max-width: 1980px;
margin: 0 auto;
padding: 6.4rem 15px;
background: #fafafa;
}
.contact-guide__heading {
margin: 0 0 4.8rem 0;
text-align: center;
}
.contact-guide__heading-main {
font-weight: 700;
font-family: "Times New Roman", "Noto Serif JP", YuMincho, "Yu Mincho", "HGP明朝B", serif;
font-size: 4.8rem;
}
.contact-guide__heading-main:after {
display: block;
max-width: 300px;
margin: 1.6rem auto 1.6rem auto;
border-bottom: 3px solid #222222;
content: "";
}
.contact-guide__heading-sub {
font-weight: 400;
font-size: 1.4rem;
}
.contact-guide__message {
margin: 0 0 4.8rem 0;
color: #aaaaaa;
font-size: 1.6rem;
text-align: center;
}
.contact-guide__list-item {
margin: 0 0 2.4rem 0;
text-align: center;
}
.contact-guide__button {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 100%;
max-width: 600px;
padding: 1.6rem;
border: 1px solid #0086CD;
border-radius: 50px;
background: #0086CD;
color: #ffffff;
}
.contact-guide__button:hover {
background: #0075b4;
}
.contact-form__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
}
.contact-form__heading {
margin-bottom: 3.2rem;
}
.contact-form__content {
margin: 0 auto;
padding: 3.2rem 1rem;
background: #fff;
border: 4px solid #efefef;
}
@media (min-width: 992px) {
.contact-form__content {
padding: 6.4rem 4rem;
}
}
.contact-form__form {
max-width: 850px;
margin: 0 auto 1.6rem auto;
}
@media (min-width: 992px) {
.contact-form__form {
margin: 0 auto 6.4rem auto;
}
}
.contact-form__button {
text-align: center;
}
.contact-form__button-submit {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
background: #0086CD;
padding: 1em 3em;
color: #fff;
border-radius: 50px;
width: 100%;
max-width: 100%;
}
@media (min-width: 992px) {
.contact-form__button-submit {
max-width: 240px;
}
}
.contact-form__button-submit:hover, .contact-form__button-submit:focus {
background: #0075b4;
}
.company__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/company/mainvisual.jpg);
}
@media (min-width: 768px) {
.company__mainvisual {
height: 494px;
}
}
.company__mainvisual__heading {
font-weight: normal;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
font-size: var(--font-60);
}
.company__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.company__message {
margin: clamp(50px, 4.6511627907vw, 80px) 0;
font-size: 20px;
text-align: center;
}
.company__message__main {
font-size: var(--font-30);
font-weight: bold;
margin: 0 1em;
}
@media (min-width: 768px) {
.company__message__main {
margin: 0;
}
}
.company__message__eng {
font-family: satisfy;
color: #aaaaaa;
margin: 20px 1em;
margin-top: 20px;
}
.company__message__sub {
font-size: var(--font-20);
line-height: 2em;
margin: 20px 1em 0;
}
@media (min-width: 768px) {
.company__message__sub {
margin: 20px 0 0;
}
}
.company__message hr {
margin: 0 auto;
width: 80%;
}
@media (min-width: 768px) {
.company__message hr {
max-width: 708px;
}
}
.company__wrapper-right {
max-width: 100%;
padding: clamp(50px, 4.6511627907vw, 80px) 0;
background-color: #efefef;
}
.company__wrapper-right .company__container {
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
margin: 0 auto;
flex-direction: row-reverse;
gap: 1em;
}
@media (min-width: 768px) {
.company__wrapper-right .company__container {
gap: clamp(0px, 6.976744186vw, 120px);
flex-wrap: nowrap;
}
}
@media (min-width: 768px) {
.company__wrapper-right .company__container .company__content {
margin-right: 2em;
}
}
@media (min-width: 768px) {
.company__wrapper-right .company__container .company__content__image {
margin-left: 2em;
}
}
.company__wrapper {
max-width: 100%;
padding: clamp(50px, 4.6511627907vw, 80px) 0;
}
.company__wrapper .company__container {
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
margin: 0 auto;
gap: 1em;
}
@media (min-width: 768px) {
.company__wrapper .company__container {
gap: clamp(0px, 6.976744186vw, 120px);
flex-wrap: nowrap;
}
}
@media (min-width: 768px) {
.company__wrapper .company__container .company__content {
margin-left: 2em;
}
}
@media (min-width: 768px) {
.company__wrapper .company__container .company__content__image {
margin-right: 2em;
}
}
.company__content {
text-align: center;
display: grid;
place-content: center;
place-items: center;
}
.company__content__main {
font-size: var(--font-50);
line-height: 1em;
}
.company__content__image > img {
width: 80%;
margin: 0 auto;
}
@media (min-width: 768px) {
.company__content__image > img {
width: 100%;
}
}
.company__content__sub {
font-size: var(--font-24);
font-weight: bold;
}
.company__content__text {
margin: 24px 1em;
font-size: var(--font-18);
}
@media (min-width: 768px) {
.company__content__text {
margin: 24px 0;
}
}
@media (min-width: 768px) {
.company__content__button {
margin-bottom: 40px;
}
}
.company__content__button a {
background-color: #222222;
font-size: var(--font-18);
font-weight: bold;
display: block;
width: clamp(220px, 15.1162790698vw, 260px);
height: 60px;
color: #ffffff;
padding-top: 18px;
}
.company__content__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.company__group {
margin: clamp(50px, 4.6511627907vw, 80px) 0;
}
.company__group__banner {
margin: 20px auto 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1600px;
}
.company__group__banner img {
margin: 20px;
max-width: 300px;
filter: drop-shadow(0px 0px 4px #aaaaaa);
}
@media screen and (min-width: 600px) {
.company__group__banner img {
margin: 20px 16px;
max-width: 500px;
}
}
.company__list {
background: #fff;
box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 1100px) {
.company__list {
display: flex;
padding: 3.2rem;
}
}
.company__list-item {
padding: 2.4rem 1.6rem;
}
@media screen and (min-width: 1100px) {
.company__list-item:not(:first-child) {
border-left: 1px dashed #aaaaaa;
}
}
.profile__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/profile/mainvisual.jpg);
}
@media (min-width: 768px) {
.profile__mainvisual {
height: 494px;
}
}
.profile__mainvisual__heading {
font-size: var(--font-40);
font-weight: normal;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 600px) {
.profile__mainvisual__heading {
font-size: 60px;
}
}
.profile__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.profile__message {
max-width: 1600px;
margin: 80px auto 40px auto;
padding-left: 0;
font-size: var(--font-24);
line-height: 1.2;
text-align: center;
}
@media (min-width: 901px) {
.profile__message {
text-align: left;
padding-left: clamp(20px, 9.8837209302vw, 170px);
}
}
.profile__message__main {
font-size: var(--font-50);
}
.profile__message__sub {
margin-top: 0px;
}
.profile__wrapper-right {
max-width: 100%;
padding: 0;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/profile/bg.png);
background-position: top;
background-size: cover;
background-repeat: no-repeat;
}
.profile__wrapper-right .profile__container {
max-width: 1920px;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column-reverse;
margin: 0 1em;
}
@media (min-width: 768px) {
.profile__wrapper-right .profile__container {
margin: 0 clamp(20px, 8.4302325581vw, 145px);
}
}
@media (min-width: 901px) {
.profile__wrapper-right .profile__container {
flex-wrap: nowrap;
flex-direction: row-reverse;
}
}
.profile__wrapper-right .profile__content {
max-width: 700px;
text-align: left;
margin-left: 0;
}
@media (min-width: 901px) {
.profile__wrapper-right .profile__content {
margin-left: clamp(0px, 4.6511627907vw, 80px);
}
}
.profile__wrapper-right .profile__content__heading {
font-size: var(--font-60);
font-weight: normal;
line-height: 1.5em;
margin-bottom: 40px;
margin-top: 40px;
}
@media (min-width: 901px) {
.profile__wrapper-right .profile__content__heading {
margin-top: 0;
}
}
.profile__wrapper-right .profile__content__text {
font-size: var(--font-16);
line-height: 1.5em;
}
.profile__wrapper-right .profile__content__sign {
text-align: right;
font-size: var(--font-16);
margin: 40px 0 70px;
}
.profile__wrapper-right .profile__content__image {
margin: 0;
}
.profile__wrapper-right .profile__content__image img {
height: clamp(300px, 89.2857142857vw, 500px);
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
@media (min-width: 561px) {
.profile__wrapper-right .profile__content__image img {
width: 80%;
}
}
@media (min-width: 901px) {
.profile__wrapper-right .profile__content__image img {
height: auto;
width: 100%;
}
}
.profile__philosophy__content {
max-width: 800px;
margin: clamp(50px, 4.6511627907vw, 80px) auto;
text-align: center;
}
.profile__philosophy__content hr {
margin: clamp(20px, 2.3255813953vw, 40px) clamp(20px, 3.488372093vw, 60px);
color: #efefef;
}
.profile__philosophy__heading {
font-size: var(--font-50);
}
.profile__philosophy__sub {
font-size: var(--font-24);
font-weight: bold;
}
.profile__philosophy__main {
margin-bottom: clamp(20px, 2.3255813953vw, 40px);
font-size: var(--font-30);
padding: 0 1em;
}
@media (min-width: 768px) {
.profile__philosophy__main {
font-size: var(--font-48);
padding: 0;
}
}
.profile__philosophy__text {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1em;
}
@media (min-width: 768px) {
.profile__philosophy__text {
padding: 0;
}
}
.profile__philosophy__text li {
list-style: none;
text-align: left;
font-size: var(--font-18);
}
.profile__number__wrapper {
max-width: 100%;
padding: 80px 0;
text-align: center;
background-color: #F2F5F7;
}
.profile__number__content {
margin: 0 auto;
max-width: 800px;
}
.profile__number__heading {
font-size: 50px;
}
.profile__number__sub {
font-size: 24px;
font-weight: bold;
}
.profile__number__text {
margin: 40px 0;
text-align: left;
font-size: 18px;
}
.profile__number__panel1 {
margin: 0 auto;
max-width: 1500px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.profile__number__panel1 img {
padding: 10px;
filter: drop-shadow(0px 0px 4px #aaaaaa);
}
.profile__number__panel2 {
max-width: 772px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.profile__number__panel2 img {
padding: 10px;
filter: drop-shadow(0px 0px 4px #aaaaaa);
}
.profile__number__panel3 img {
margin: 0 auto;
padding: 0 2em;
}
.profile__detail__wrapper {
max-width: 100%;
padding: clamp(50px, 4.6511627907vw, 80px) 0;
text-align: center;
}
.profile__detail__content {
margin: 0 auto;
max-width: 900px;
}
.profile__detail__heading {
font-size: var(--font-50);
}
.profile__detail__sub {
font-size: var(--font-24);
font-weight: bold;
}
.profile__detail__text {
margin: 40px 0 40px 0;
text-align: left;
padding: 0 1em;
font-size: var(--font-18);
}
.profile__detail__text dl {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.profile__detail__text dt {
width: 25%;
padding: 20px 0 20px clamp(5px, 1.1627906977vw, 20px);
border-bottom: 1px solid #0086CD;
}
@media (min-width: 768px) {
.profile__detail__text dt {
width: 20%;
}
}
.profile__detail__text dd {
width: 75%;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #efefef;
}
.profile__detail__text dd span {
display: inline-block;
width: 50%;
}
@media (min-width: 768px) {
.profile__detail__text dd {
width: 80%;
}
}
.profile__history__wrapper {
max-width: 100%;
padding: clamp(50px, 4.6511627907vw, 80px) 0;
text-align: center;
background-color: #efefef;
}
.profile__history__content {
margin: 0 auto;
max-width: 900px;
}
.profile__history__heading {
font-size: var(--font-50);
}
.profile__history__sub {
font-size: var(--font-24);
font-weight: bold;
}
.profile__history__text {
margin: 40px 0 40px 0;
text-align: left;
font-size: var(--font-18);
padding: 0 1em;
}
.profile__history__text dl {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.profile__history__text dt {
width: 25%;
padding: 20px 0 20px clamp(5px, 1.1627906977vw, 20px);
border-bottom: 1px solid #0086CD;
}
@media (min-width: 768px) {
.profile__history__text dt {
width: 20%;
}
}
.profile__history__text dd {
width: 75%;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #efefef;
}
@media (min-width: 768px) {
.profile__history__text dd {
width: 80%;
}
}
.profile__awards__wrapper {
max-width: 100%;
text-align: center;
padding: clamp(50px, 4.6511627907vw, 80px) 0 0;
}
@media (min-width: 768px) {
.profile__awards__wrapper {
padding: clamp(50px, 4.6511627907vw, 80px) 0;
}
}
.profile__awards__content {
margin: 0 auto;
max-width: 900px;
}
.profile__awards__heading {
font-size: var(--font-50);
}
.profile__awards__sub {
font-size: var(--font-24);
font-weight: bold;
}
.profile__awards__text {
margin: 40px 0 40px 0;
text-align: left;
font-size: var(--font-18);
padding: 0 1em;
}
.profile__awards__text dl {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.profile__awards__text dt {
width: 25%;
padding: 20px 0 20px clamp(5px, 1.1627906977vw, 20px);
border-bottom: 1px solid #0086CD;
}
@media (min-width: 768px) {
.profile__awards__text dt {
width: 20%;
}
}
.profile__awards__text dd {
width: 75%;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #efefef;
}
@media (min-width: 768px) {
.profile__awards__text dd {
width: 80%;
}
}
.profile__number__wrapper {
max-width: 100%;
padding: clamp(50px, 4.6511627907vw, 80px) 0;
text-align: center;
background-color: #F2F5F7;
}
.profile__number__content {
margin: 0 auto;
max-width: 800px;
}
.profile__number__heading {
font-size: var(--font-50);
}
.profile__number__sub {
font-size: var(--font-24);
font-weight: bold;
}
.profile__number__text {
margin: 40px 0;
text-align: left;
font-size: var(--font-18);
display: flex;
justify-content: center;
padding: 0 1em;
}
.profile__number__panel1 {
margin: 0 auto;
max-width: 1500px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.profile__number__panel1 img {
width: 100%;
padding: 0.5em 1em;
filter: drop-shadow(0px 0px 4px #aaaaaa);
}
.profile__number__panel2 {
max-width: 772px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.profile__number__panel2 img {
width: 50%;
padding: 0.5em 1em;
filter: drop-shadow(0px 0px 4px #aaaaaa);
}
.profile__number__panel2 img + img {
padding-left: 0;
}
.profile__number__panel3 img {
margin: 0 auto;
padding: 0 2em;
}
.business__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/business/mainvisual.jpg);
}
@media (min-width: 768px) {
.business__mainvisual {
height: 494px;
}
}
.business__mainvisual__heading {
font-size: var(--font-60);
text-align: center;
font-weight: normal;
padding-top: 1em;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
.business__mainvisual__heading {
padding-top: 0;
}
}
.business__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.business__message {
max-width: 1600px;
margin: 80px auto 40px auto;
padding-left: 80px;
font-size: 20px;
}
.business__message__main {
font-size: 30px;
font-weight: bold;
}
.business__message__sub {
margin-top: 0px;
}
.business__wrapper-right {
max-width: 100%;
padding: 0;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/profile/bg.png);
background-position: top;
background-size: cover;
background-repeat: no-repeat;
}
.business__wrapper-right .profile__container {
max-width: 1920px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 145px;
flex-direction: row-reverse;
}
.business__wrapper-right .profile__content {
max-width: 700px;
text-align: left;
margin-left: 80px;
}
.business__wrapper-right .profile__content__heading {
font-size: 60px;
font-weight: normal;
line-height: 1.5em;
margin-bottom: 40px;
}
@media screen and (min-width: 600px) {
.business__wrapper-right .profile__content__heading {
font-size: 60px;
}
}
.business__wrapper-right .profile__content__text {
font-size: 16px;
line-height: 1.5em;
}
.business__wrapper-right .profile__content__sign {
text-align: right;
font-size: 16px;
line-height: 10 em;
}
.business__philosophy__content {
max-width: 800px;
margin: 80px auto;
text-align: center;
}
.business__philosophy__content hr {
margin: 40px 60px;
color: #efefef;
}
.business__philosophy__heading {
font-size: 50px;
}
.business__philosophy__sub {
font-size: 24px;
font-weight: bold;
}
.business__philosophy__main {
font-size: 48px;
}
.business__philosophy__text li {
margin-left: 80px;
list-style: none;
text-align: left;
font-size: 18px;
}
.business__number__wrapper {
max-width: 100%;
padding: 80px 0;
text-align: center;
background-color: #F2F5F7;
}
.business__number__content {
margin: 0 auto;
max-width: 800px;
}
.business__number__heading {
font-size: 50px;
}
.business__number__sub {
font-size: 24px;
font-weight: bold;
}
.business__number__text {
margin: 40px 0 40px 60px;
text-align: left;
font-size: 18px;
}
.business__number__panel1 {
margin: 0 auto;
max-width: 1500px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.business__number__panel1 img {
padding: 10px;
filter: drop-shadow(0px 0px 4px #aaaaaa);
}
.business__number__panel2 {
max-width: 772px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.business__number__panel2 img {
padding: 10px;
filter: drop-shadow(0px 0px 4px #aaaaaa);
}
.business__detail__wrapper {
max-width: 100%;
padding: 80px 0;
text-align: center;
}
.business__detail__content {
margin: 0 auto;
max-width: 900px;
}
.business__detail__heading {
font-size: 50px;
}
.business__detail__sub {
font-size: 24px;
font-weight: bold;
}
.business__detail__text {
margin: 40px 0 40px 60px;
text-align: left;
font-size: 18px;
}
.business__detail__text dl {
width: 990px;
display: flex;
flex-wrap: wrap;
}
.business__detail__text dt {
width: 150px;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #0086CD;
}
.business__detail__text dd {
width: 757px;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #efefef;
}
.business__detail__text dd span {
display: inline-block;
width: 220px;
}
.business__history__wrapper {
max-width: 100%;
padding: 80px 0;
text-align: center;
background-color: #efefef;
}
.business__history__content {
margin: 0 auto;
max-width: 900px;
}
.business__history__heading {
font-size: 50px;
}
.business__history__sub {
font-size: 24px;
font-weight: bold;
}
.business__history__text {
margin: 40px 0 40px 60px;
text-align: left;
font-size: 18px;
}
.business__history__text dl {
width: 990px;
display: flex;
flex-wrap: wrap;
}
.business__history__text dt {
width: 200px;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #0086CD;
}
.business__history__text dd {
width: 707px;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #efefef;
}
.business__awards__wrapper {
max-width: 100%;
padding: 80px 0;
text-align: center;
}
.business__awards__content {
margin: 0 auto;
max-width: 900px;
}
.business__awards__heading {
font-size: 50px;
}
.business__awards__sub {
font-size: 24px;
font-weight: bold;
}
.business__awards__text {
margin: 40px 0 40px 60px;
text-align: left;
font-size: 18px;
}
.business__awards__text dl {
width: 990px;
display: flex;
flex-wrap: wrap;
}
.business__awards__text dt {
width: 200px;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #0086CD;
}
.business__awards__text dd {
width: 707px;
padding: 20px 0 20px 20px;
border-bottom: 1px solid #efefef;
}
.residential__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/residential/mainvisual.jpg);
}
@media (min-width: 768px) {
.residential__mainvisual {
height: 494px;
}
}
.residential__mainvisual__heading {
font-size: var(--font-60);
font-weight: normal;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
padding-top: 1em;
text-align: center;
}
@media (min-width: 768px) {
.residential__mainvisual__heading {
padding-top: 0;
}
}
.residential__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.residential__message {
max-width: 1600px;
margin: clamp(50px, 4.6511627907vw, 80px) auto;
text-align: center;
}
.residential__message__main {
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/residential/enjoy.jpg);
background-position: top;
background-size: 80%;
background-repeat: no-repeat;
margin: 0 auto;
padding-top: clamp(30px, 3.7209302326vw, 64px);
padding-bottom: clamp(20px, 3.7209302326vw, 64px);
max-width: 704px;
font-size: var(--font-40);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: 1px;
}
@media (min-width: 768px) {
.residential__message__main {
height: 133px;
padding-bottom: 0;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
}
.residential__message__sub {
font-size: var(--font-20);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.5px;
margin: 1em 1em 0;
text-align: left;
}
@media (min-width: 539px) {
.residential__message__sub {
text-align: center;
margin: 1em 5em 0;
}
}
@media (min-width: 768px) {
.residential__message__sub {
margin: 0;
}
}
.residential__house {
text-align: center;
margin: clamp(50px, 9.3023255814vw, 160px) auto clamp(50px, 4.6511627907vw, 80px);
}
.residential__house__heading {
font-size: var(--font-50);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: 2.5px;
}
.residential__house__sub {
font-size: var(--font-24);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2.08;
letter-spacing: 0.6px;
margin-bottom: 40px;
}
.residential__house__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
background-color: #efefef;
padding: 0;
margin-bottom: clamp(60px, 6.976744186vw, 120px);
}
.residential__house__wrapper-right {
display: flex;
justify-content: center;
flex-direction: row-reverse;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.residential__house__wrapper-right {
flex-wrap: nowrap;
}
}
.residential__house__wrapper-right .residential__house__image {
width: 95%;
}
@media (min-width: 768px) {
.residential__house__wrapper-right .residential__house__image {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.residential__house__wrapper-right .residential__house__image {
max-width: 845px;
width: 50%;
min-width: 512px;
padding-bottom: 0;
}
}
.residential__house__wrapper-right .residential__house__image img {
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 1100px) {
.residential__house__wrapper-right .residential__house__image img {
margin-left: -40px;
}
}
.residential__house__wrapper-left {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.residential__house__wrapper-left {
flex-wrap: nowrap;
}
}
.residential__house__wrapper-left .residential__house__image {
width: 95%;
}
@media (min-width: 768px) {
.residential__house__wrapper-left .residential__house__image {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.residential__house__wrapper-left .residential__house__image {
max-width: 845px;
width: 50%;
min-width: 512px;
padding-bottom: 0;
}
}
.residential__house__wrapper-left .residential__house__image img {
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 1100px) {
.residential__house__wrapper-left .residential__house__image img {
margin-left: 40px;
}
}
.residential__house__wrapper {
width: 95%;
padding: 0;
position: relative;
}
@media (min-width: 768px) {
.residential__house__wrapper {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.residential__house__wrapper {
width: 50%;
max-width: 845px;
max-height: 679px;
min-width: 512px;
}
}
@media screen and (min-width: 1100px) {
.residential__house {
flex-wrap: nowrap;
}
}
.residential__house__content {
margin: 0 auto;
background-color: #4a4949;
display: grid;
place-items: center;
place-content: center;
color: #ffffff;
text-align: left;
position: relative;
height: 100%;
width: 100%;
padding: 2em;
}
@media screen and (min-width: 1100px) {
.residential__house__content {
width: 100%;
margin-top: 40px;
max-width: 845px;
min-width: 512px;
}
}
.residential__house__content._right {
margin-left: 0;
}
@media (min-width: 1100px) {
.residential__house__content._right {
margin-left: 40px;
}
}
.residential__house__content._left {
margin-left: 0;
}
@media (min-width: 1100px) {
.residential__house__content._left {
margin-left: -40px;
}
}
.residential__house__logo {
width: 70%;
}
@media (min-width: 1100px) {
.residential__house__logo {
width: 100%;
}
}
.residential__house__logo img {
margin: 0 auto;
}
.residential__house__logo h2 {
font-size: var(--font-50);
font-weight: bold;
text-align: center;
}
.residential__house__main {
font-size: var(--font-30);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.08;
letter-spacing: 0.75px;
margin: 30px 0;
}
.residential__house__text {
font-size: var(--font-18);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.3px;
}
@media (min-width: 1100px) {
.residential__house__text {
font-size: var(--font-15);
}
}
@media screen and (min-width: 600px) {
.residential__house__text {
letter-spacing: 0.45px;
}
}
.residential__house__button {
padding-top: 30px;
margin: 0 auto;
width: -moz-fit-content;
width: fit-content;
}
.residential__house__button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
width: 220px;
background-color: #4a4949;
color: #ffffff;
padding: 1.5em;
font-size: var(--font-16);
font-weight: bold;
border: solid 1px;
border-color: #ffffff;
transition: all 0.4s;
}
.residential__house__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
transition: all 0.4s;
}
.residential__house__button a:hover {
opacity: 100 !important;
background-color: #ffffff;
color: #4a4949;
transition: all 0.4s;
}
.residential__house__button a:hover::after {
transition: all 0.4s;
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
}
.residential__casa {
max-width: 1335px;
margin: 40px auto 100px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.residential__casa__container {
width: 95%;
height: 100%;
margin: 10px;
padding: 20px;
box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #fff;
}
@media (min-width: 740px) {
.residential__casa__container {
width: clamp(350px, 24.7093023256vw, 425px);
}
}
.residential__casa__content {
width: 90%;
height: auto;
margin: 0 auto;
}
@media (min-width: 740px) {
.residential__casa__content {
height: 190px;
}
}
.residential__casa__main {
text-align: center;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.45px;
margin: 17px 0;
font-size: 20px;
height: auto;
}
@media (min-width: 740px) {
.residential__casa__main {
font-size: var(--font-18);
}
}
.residential__casa__text {
text-align: left;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.35px;
font-size: 14px;
}
@media (min-width: 740px) {
.residential__casa__text {
font-size: var(--font-14);
}
}
.residential__casa__button {
margin: 2em auto 1em;
font-size: var(--font-16);
font-weight: bold;
font-stretch: normal;
font-style: normal;
letter-spacing: 0.4px;
text-align: center;
width: 175px;
}
.residential__casa__button a {
height: 50px;
background-color: #ffffff;
display: block;
color: #000000;
padding-top: 13px;
border: 1px solid #000000;
}
.residential__casa__button a:hover {
background-color: #000000;
color: #ffffff;
opacity: 100 !important;
}
.residential__casa__button a:hover::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
}
.residential__casa__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
display: inline-block;
width: 8px;
margin-left: 18px;
}
.residential__renovation {
max-width: 1298px;
margin: clamp(50px, 4.6511627907vw, 80px) auto;
}
.residential__renovation__container {
display: flex;
justify-content: center;
max-width: 95%;
margin: 0 auto;
padding: 40px clamp(10px, 2.3255813953vw, 40px);
box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
background-color: #fff;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.residential__renovation__container {
flex-wrap: nowrap;
}
}
.residential__renovation__image {
width: 605px;
margin-bottom: 40px;
}
@media screen and (min-width: 1100px) {
.residential__renovation__image {
margin-bottom: 0;
}
}
.residential__renovation__image img {
-o-object-fit: cover;
object-fit: cover;
}
.residential__renovation__content {
width: 605px;
display: grid;
place-items: center;
justify-items: center;
}
.residential__renovation__logo {
width: 80%;
margin: 0 auto;
}
.residential__renovation__text {
max-width: 387px;
font-size: var(--font-18);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.45px;
text-align: left;
margin: clamp(0px, 2.3255813953vw, 40px) auto;
padding: 0 1em;
}
@media (min-width: 768px) {
.residential__renovation__text {
padding: 0 0 0 1em;
}
}
@media screen and (min-width: 1100px) {
.residential__renovation__text {
margin: 0 auto;
}
}
.residential__renovation__button {
margin: 1em auto 0;
font-size: var(--font-18);
font-weight: bold;
font-stretch: normal;
font-style: normal;
letter-spacing: 0.45px;
text-align: center;
width: 260px;
}
.residential__renovation__button a {
height: 60px;
background-color: #222222;
display: block;
color: #ffffff;
padding-top: 18px;
border: 1px solid #222222;
transition: all 0.4s;
}
.residential__renovation__button a:hover {
background-color: #ffffff;
color: #222222;
opacity: 100 !important;
transition: all 0.4s;
}
.residential__renovation__button a:hover::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
transition: all 0.4s;
}
.residential__renovation__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 18px;
transition: all 0.4s;
}
.construction__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/construction/mainvisual.jpg);
}
@media (min-width: 768px) {
.construction__mainvisual {
height: 494px;
}
}
.construction__mainvisual__heading {
font-size: var(--font-60);
font-weight: normal;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
padding-top: 1em;
text-align: center;
}
@media (min-width: 768px) {
.construction__mainvisual__heading {
padding-top: 0;
}
}
.construction__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.construction__message {
max-width: 1600px;
margin: clamp(60px, 4.6511627907vw, 80px) auto;
text-align: center;
}
.construction__message__main {
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/construction/architecture.jpg);
background-position: top;
background-size: 80%;
background-repeat: no-repeat;
margin: 0 auto;
padding-top: 64px;
max-width: 704px;
height: 133px;
font-size: var(--font-40);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: 1px;
}
@media (min-width: 768px) {
.construction__message__main {
height: 133px;
padding-bottom: 0;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
}
.construction__message__sub {
font-size: var(--font-20);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.5px;
text-align: left;
margin: 0 1em 0;
}
@media (min-width: 539px) {
.construction__message__sub {
text-align: center;
margin: 1em 5em 0;
}
}
@media (min-width: 768px) {
.construction__message__sub {
margin: 0;
}
}
.construction__building {
text-align: center;
margin: clamp(50px, 4.6511627907vw, 80px) auto;
}
.construction__building__heading {
font-size: var(--font-50);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: 2.5px;
}
.construction__building__sub {
font-size: var(--font-24);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2.08;
letter-spacing: 0.6px;
margin-bottom: 40px;
}
.construction__building__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
background-color: #efefef;
padding: 0;
margin-bottom: clamp(30px, 6.976744186vw, 120px);
}
.construction__building__wrapper-right {
display: flex;
justify-content: center;
flex-direction: row-reverse;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.construction__building__wrapper-right {
flex-wrap: nowrap;
}
}
.construction__building__wrapper-right .construction__building__image {
width: 95%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 768px) {
.construction__building__wrapper-right .construction__building__image {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.construction__building__wrapper-right .construction__building__image {
max-width: 845px;
width: 50%;
min-width: 512px;
padding-bottom: 0;
}
}
.construction__building__wrapper-right .construction__building__image img {
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 1100px) {
.construction__building__wrapper-right .construction__building__image img {
margin-left: -40px;
}
}
.construction__building__wrapper-left {
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.construction__building__wrapper-left {
flex-wrap: nowrap;
}
}
.construction__building__wrapper-left .construction__building__image {
width: 95%;
}
@media (min-width: 768px) {
.construction__building__wrapper-left .construction__building__image {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.construction__building__wrapper-left .construction__building__image {
max-width: 845px;
width: 50%;
min-width: 512px;
padding-bottom: 0;
}
}
.construction__building__wrapper-left .construction__building__image img {
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 1100px) {
.construction__building__wrapper-left .construction__building__image img {
margin-left: 40px;
}
}
.construction__building__wrapper {
width: 95%;
padding: 0;
position: relative;
}
@media (min-width: 768px) {
.construction__building__wrapper {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.construction__building__wrapper {
width: 50%;
max-width: 845px;
max-height: 679px;
min-width: 512px;
}
}
@media screen and (min-width: 1100px) {
.construction__building {
flex-wrap: nowrap;
}
}
.construction__building__content {
margin: 0 auto;
background-color: #4a4949;
display: grid;
place-items: center;
place-content: center;
color: #ffffff;
text-align: left;
position: relative;
height: 100%;
width: 100%;
padding: 2em;
}
@media screen and (min-width: 1100px) {
.construction__building__content {
width: 100%;
margin-top: 40px;
max-width: 845px;
min-width: 512px;
}
}
.construction__building__content._right {
margin-left: 0;
}
@media (min-width: 1100px) {
.construction__building__content._right {
margin-left: 40px;
}
}
.construction__building__content._left {
margin-left: 0;
}
@media (min-width: 1100px) {
.construction__building__content._left {
margin-left: -40px;
}
}
.construction__building__logo img {
width: 250px;
height: auto;
}
.construction__building__main {
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: 0.75px;
margin-bottom: 30px;
font-weight: bold;
font-size: 25px;
}
@media (min-width: 768px) {
.construction__building__main {
font-size: var(--font-30);
}
}
.construction__building__text {
font-size: var(--font-18);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.3px;
}
@media (min-width: 1100px) {
.construction__building__text {
font-size: var(--font-15);
}
}
@media screen and (min-width: 600px) {
.construction__building__text {
letter-spacing: 0.45px;
}
}
.construction__building__text p {
margin-top: 20px;
font-size: var(--font-14);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.35px;
}
.construction__building__button {
padding-top: 30px;
margin: 0 auto 40px;
width: -moz-fit-content;
width: fit-content;
}
.construction__building__button a {
width: 280px;
height: 80px;
font-size: 18px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
width: 220px;
height: 60px;
background-color: #4a4949;
color: #ffffff;
padding: 8px 14px;
font-size: 16px;
font-weight: bold;
border: solid 1px;
border-color: #ffffff;
transition: all 0.4s;
}
.construction__building__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
transition: all 0.4s;
}
.construction__building__button a:hover {
opacity: 100 !important;
background-color: #ffffff;
color: #4a4949;
transition: all 0.4s;
}
.construction__building__button a:hover::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
transition: all 0.4s;
}
.civil_engineering__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/civil_engineering/mainvisual.jpg);
}
@media (min-width: 768px) {
.civil_engineering__mainvisual {
height: 494px;
}
}
.civil_engineering__mainvisual__heading {
font-size: var(--font-60);
font-weight: normal;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
text-align: center;
}
.civil_engineering__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.civil_engineering__message {
max-width: 1600px;
margin: clamp(60px, 4.6511627907vw, 80px) auto;
text-align: center;
}
.civil_engineering__message__main {
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/civil_engineering/civilengineering.jpg);
background-position: top;
background-size: 80%;
background-repeat: no-repeat;
margin: 0 auto;
padding-top: clamp(30px, 3.7209302326vw, 64px);
padding-bottom: clamp(20px, 3.7209302326vw, 64px);
max-width: 704px;
font-size: var(--font-40);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: 1px;
}
@media (min-width: 768px) {
.civil_engineering__message__main {
height: 133px;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
}
.civil_engineering__message__sub {
font-size: var(--font-20);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.5px;
text-align: left;
margin: 0 1em 0;
}
@media (min-width: 539px) {
.civil_engineering__message__sub {
text-align: center;
margin: 1em 5em 0;
}
}
@media (min-width: 768px) {
.civil_engineering__message__sub {
margin: 0;
}
}
.civil_engineering-works {
background-color: #ffffff;
}
.civil_engineering-works__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
padding: 0 15px clamp(50px, 4.6511627907vw, 80px);
}
.civil_engineering-works__content {
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
}
.civil_engineering-works__heading {
margin-bottom: 1rem;
}
.civil_engineering-works__text {
color: #aaaaaa;
font-size: 1.6rem;
}
.civil_engineering-works__list {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 560px) {
.civil_engineering-works__list {
margin: 0;
flex-direction: row;
--c-row-gutter-x: 10px;
--c-row-gutter-y: 10px;
}
}
@media (min-width: 901px) {
.civil_engineering-works__list {
margin: 0 20px;
flex-wrap: wrap;
}
}
.civil_engineering-works__list-item {
max-width: 100%;
margin: 0 4px;
margin-bottom: 8px;
flex-basis: 100%;
max-width: 100%;
overflow: hidden;
}
@media (min-width: 560px) {
.civil_engineering-works__list-item {
width: 48%;
margin-bottom: 20px;
flex-basis: 50%;
max-width: 50%;
overflow: hidden;
margin: 0 0 20px;
padding: calc(var(--c-row-gutter-y, 0) / 2) calc(var(--c-row-gutter-x, 0) / 2);
}
}
@media (min-width: 901px) {
.civil_engineering-works__list-item {
width: auto;
flex-basis: 25%;
max-width: 25%;
overflow: hidden;
}
}
.civil_engineering-works__list-item:hover {
opacity: 0.65;
}
@media (min-width: 901px) {
.civil_engineering-works-item {
min-width: 227px;
}
}
@media screen and (min-width: 1100px) {
.civil_engineering-works-item__content {
margin-bottom: 0;
}
}
.civil_engineering-works-item__content span {
margin-left: 0;
}
@media screen and (min-width: 600px) {
.civil_engineering-works-item__content span {
margin-left: 20px;
}
}
.civil_engineering-works-item__content-title {
color: #000000;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.civil_engineering-works-item__content-title {
margin-left: 20px;
}
}
.civil_engineering-works figure {
margin-bottom: 8px;
}
.civil_engineering-works-item__thumbnail {
margin: 0 auto 1em;
aspect-ratio: 335/250;
}
.civil_engineering-works-item__thumbnail img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.civil_engineering-works__guide {
padding-top: 6.4rem;
}
.civil_engineering-works__button {
margin: 40px auto;
width: -moz-fit-content;
width: fit-content;
}
.civil_engineering-works__button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 280px;
height: 80px;
background-color: #222222;
color: #ffffff;
padding: 1.5em;
font-size: 18px;
font-weight: bold;
border: 1px solid #222222;
}
@media (min-width: 768px) {
.civil_engineering-works__button a {
width: 320px;
}
}
@media (min-width: 992px) {
.civil_engineering-works__button a {
width: 400px;
}
}
.civil_engineering-works__button a:hover {
background-color: #ffffff;
color: #222222;
border: 1px solid #222222;
opacity: 100 !important;
}
.civil_engineering-works__button a:hover::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
}
.civil_engineering-works__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.civil_engineering-works__button-residential {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.civil_engineering-works__button-residential {
margin-left: 20px;
}
}
.civil_engineering-works__button-residential a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #0086CD;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.civil_engineering-works__button-residential a:hover {
background-color: #0075b4;
}
.civil_engineering-works__button-etc {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.civil_engineering-works__button-etc {
margin-left: 20px;
}
}
.civil_engineering-works__button-etc a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #222222;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.civil_engineering-works__button-etc a:hover {
background-color: #151515;
}
.civil_engineering-works__button-civil_engineering {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 8px;
margin-left: 0;
}
@media screen and (min-width: 600px) {
.civil_engineering-works__button-civil_engineering {
margin-left: 20px;
}
}
.civil_engineering-works__button-civil_engineering a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 117px;
height: 30px;
background-color: #aaaaaa;
color: #ffffff;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
}
.civil_engineering-works__button-civil_engineering a:hover {
background-color: #9d9d9d;
}
.spirits {
background-color: #efefef;
}
.spirits__mainvisual {
width: 100%;
height: 580px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/spirits/mainvisual.jpg);
padding-top: 3em;
}
@media (min-width: 768px) {
.spirits__mainvisual {
height: 850px;
padding-top: 0;
}
}
.spirits__mainvisual__title {
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
font-size: var(--font-25);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.63px;
position: relative;
display: inline-block;
padding: 0 55px;
margin-bottom: 20px;
}
.spirits__mainvisual__title::after, .spirits__mainvisual__title::before {
content: "";
position: absolute;
top: 50%;
display: inline-block;
width: 40px;
height: 1px;
background-color: #ffffff;
}
@media screen and (min-width: 600px) {
.spirits__mainvisual__title::after, .spirits__mainvisual__title::before {
width: 80px;
}
}
.spirits__mainvisual__title::after {
right: -10px;
}
@media screen and (min-width: 600px) {
.spirits__mainvisual__title::after {
right: -50px;
}
}
.spirits__mainvisual__title::before {
left: -10px;
}
@media screen and (min-width: 600px) {
.spirits__mainvisual__title::before {
left: -50px;
}
}
.spirits__mainvisual__heading {
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
font-size: var(--font-32);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.83;
letter-spacing: 3px;
margin-bottom: 8px;
}
@media screen and (min-width: 600px) {
.spirits__mainvisual__heading {
font-size: var(--font-60);
}
}
.spirits__mainvisual__sub {
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
font-size: var(--font-25);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.63px;
margin-bottom: clamp(10px, 2.3255813953vw, 40px);
}
.spirits__mainvisual__main {
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
font-size: var(--font-25);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.63px;
margin-bottom: clamp(10px, 2.3255813953vw, 40px);
padding: 0 1em;
}
.spirits__mainvisual__text {
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
font-size: var(--font-18);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.45px;
margin-bottom: clamp(10px, 2.3255813953vw, 40px);
padding: 0 1em;
text-align: left;
}
@media (min-width: 768px) {
.spirits__mainvisual__text {
text-align: center;
}
}
.spirits__mainvisual__button {
margin: 0 auto;
padding-bottom: clamp(0px, 2.0930232558vw, 36px);
width: -moz-fit-content;
width: fit-content;
}
.spirits__mainvisual__button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
color: #ffffff;
padding: 1.5em;
font-size: var(--font-14);
font-weight: bold;
border: solid 1px;
border-color: #ffffff;
}
@media (min-width: 768px) {
.spirits__mainvisual__button a {
width: 400px;
height: 80px;
height: clamp(60px, 4.6511627907vw, 80px);
font-size: var(--font-18);
}
}
.spirits__mainvisual__button a:hover {
opacity: 100 !important;
background-color: #4a4949;
color: #ffffff;
}
.spirits__mainvisual__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.spirits__history {
background-color: #efefef;
padding-bottom: clamp(50px, 9.3023255814vw, 160px);
margin-bottom: clamp(50px, 4.6511627907vw, 80px);
}
.spirits__history__main {
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.75;
letter-spacing: 1px;
text-align: center;
padding: clamp(20px, 4.6511627907vw, 80px) 1em;
font-size: var(--font-25);
}
@media (min-width: 768px) {
.spirits__history__main {
font-size: var(--font-40);
}
}
.spirits__history__image {
margin: 0 auto;
margin-bottom: clamp(20px, 4.6511627907vw, 80px);
}
.spirits__history__image img {
margin: 0 auto;
padding: 0 1em;
}
.spirits__history__sub {
margin: 35px 0;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.93;
letter-spacing: 0.75px;
text-align: center;
padding: 0 1em;
font-size: var(--font-20);
}
@media (min-width: 768px) {
.spirits__history__sub {
font-size: var(--font-30);
}
}
.spirits__history__text {
max-width: 1298px;
margin: 0 auto;
font-size: var(--font-20);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.5px;
padding: 0 1em;
}
.spirits__works__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 40px 0;
}
.spirits__works__image img {
height: 250px;
width: 100%;
}
@media screen and (min-width: 600px) {
.spirits__works__image img {
width: 100%;
height: 300px;
}
}
.spirits__works__text {
display: grid;
place-items: center;
place-content: center;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.57;
letter-spacing: 0.35px;
background-color: #222;
text-align: center;
color: #ffffff;
width: 100%;
height: 79px;
font-size: var(--font-12);
}
@media screen and (min-width: 600px) {
.spirits__works__text {
width: 217px;
height: 79px;
font-size: var(--font-14);
}
}
.spirits__works__text-gr {
background-color: #4a4949;
display: grid;
place-items: center;
place-content: center;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.57;
letter-spacing: 0.35px;
text-align: center;
color: #ffffff;
width: 100%;
height: 79px;
font-size: var(--font-12);
}
@media screen and (min-width: 600px) {
.spirits__works__text-gr {
font-size: 14px;
width: 217px;
height: 79px;
}
}
.action__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/action/mainvisual.jpg);
}
@media (min-width: 768px) {
.action__mainvisual {
height: 494px;
}
}
.action__mainvisual__heading {
font-size: var(--font-60);
text-align: center;
font-weight: normal;
padding-top: 1em;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
.action__mainvisual__heading {
padding-top: 0;
}
}
.action__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.action__announce {
margin: clamp(50px, 4.6511627907vw, 80px) auto;
font-size: var(--font-20);
}
@media screen and (min-width: 1100px) {
.action__announce {
max-width: 1300px;
}
}
.action__announce__main {
font-size: var(--font-30);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.93;
letter-spacing: 0.75px;
text-align: center;
padding: 0 1em clamp(30px, 4.1860465116vw, 72px);
}
.action__announce__text {
font-size: var(--font-20);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.5px;
padding: 0 1em;
}
.action__plan {
background-color: #efefef;
padding: clamp(50px, 4.6511627907vw, 80px) 0;
text-align: center;
}
.action__plan__main {
font-size: var(--font-50);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: 2.5px;
}
.action__plan__sub {
font-size: var(--font-24);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2.08;
letter-spacing: 0.6px;
}
.action__plan__content {
max-width: 95%;
background-color: #ffffff;
margin: 40px auto;
padding: clamp(50px, 4.6511627907vw, 80px) 20px;
text-align: left;
}
@media screen and (min-width: 1100px) {
.action__plan__content {
max-width: 1298px;
}
}
.action__plan__title {
font-size: var(--font-20);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: 0.45px;
text-align: left;
}
@media (min-width: 768px) {
.action__plan__title {
text-align: center;
}
}
.action__plan__detail {
padding-top: clamp(30px, 4.1860465116vw, 72px);
}
.action__plan__detail dt {
font-size: var(--font-16);
font-weight: bold;
font-stretch: normal;
font-style: normal;
letter-spacing: 0.4px;
max-width: 900px;
margin: 0 auto;
}
.action__plan__detail dd {
max-width: 900px;
margin: 0 auto;
padding: 17px 0;
}
.action__plan__detail dd.action_marg {
padding-left: 3em;
text-indent: -3em;
}
.action__plan__detail > dt {
position: relative;
padding: 17px 0;
border-bottom: 1px solid #CECACA;
}
.action__plan__detail > dt::before {
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-blue-b);
}
.action__plan__solution {
max-width: 900px;
margin: 0 auto;
position: relative;
padding: 17px 0;
border-bottom: 1px solid #CECACA;
font-size: var(--font-16);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.88;
letter-spacing: 0.4px;
}
.action__plan__solution::before {
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-blue-b);
}
.action__plan__solution ul li {
margin-left: 7.3em;
text-indent: -7.3em;
}
.atempt__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/atempt/mainvisual.jpg);
}
@media (min-width: 768px) {
.atempt__mainvisual {
height: 494px;
}
}
.atempt__mainvisual__heading {
font-size: var(--font-60);
text-align: center;
font-weight: normal;
padding-top: 1em;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
.atempt__mainvisual__heading {
padding-top: 0;
}
}
.atempt__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.atempt__announce {
max-width: 90%;
margin: 0 auto;
font-size: var(--font-20);
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/atempt/women.png);
background-position: top;
background-size: 80%;
background-repeat: no-repeat;
text-align: center;
padding: clamp(15px, 3.90625vw, 30px) 0;
}
@media (min-width: 768px) {
.atempt__announce {
padding: 48px 0;
}
}
@media screen and (min-width: 1100px) {
.atempt__announce {
max-width: 1300px;
}
}
.atempt__announce__main {
font-size: var(--font-25);
line-height: 1.75;
letter-spacing: 1px;
text-align: center;
position: relative;
max-width: 665px;
margin: 0 auto;
display: inline-block;
}
@media (min-width: 768px) {
.atempt__announce__main {
font-size: var(--font-40);
}
}
.atempt__announce__main::after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 2px;
border-bottom: solid 12px #00a0e9;
opacity: 0.2;
}
@media (min-width: 768px) {
.atempt__announce__main::after {
bottom: 12px;
}
}
.atempt__message {
text-align: center;
margin: clamp(50px, 4.6511627907vw, 80px) auto;
}
.atempt__message__heading {
font-size: var(--font-50);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: 2.5px;
text-align: center;
}
.atempt__message__sub {
font-size: var(--font-24);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2.08;
letter-spacing: 0.6px;
margin-bottom: clamp(10px, 2.3255813953vw, 40px);
}
.atempt__message__container {
position: relative;
max-width: 1980px;
margin: 0 auto;
background-color: #efefef;
padding-bottom: 1em;
margin-bottom: clamp(60px, 6.976744186vw, 120px);
}
@media (min-width: 768px) {
.atempt__message__container {
padding: 0;
}
}
.atempt__message__wrapper-right {
display: flex;
justify-content: center;
flex-direction: row-reverse;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.atempt__message__wrapper-right {
flex-wrap: nowrap;
}
}
.atempt__message__wrapper-right .atempt__message__image {
width: 95%;
}
@media (min-width: 768px) {
.atempt__message__wrapper-right .atempt__message__image {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.atempt__message__wrapper-right .atempt__message__image {
max-width: 845px;
width: 50%;
min-width: 512px;
padding-bottom: 0;
}
}
.atempt__message__wrapper-right .atempt__message__image img {
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 1100px) {
.atempt__message__wrapper-right .atempt__message__image img {
margin-left: -20px;
}
}
.atempt__message__wrapper-left {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.atempt__message__wrapper-left {
flex-wrap: nowrap;
}
}
.atempt__message__wrapper-left .atempt__message__image {
width: 95%;
}
@media (min-width: 768px) {
.atempt__message__wrapper-left .atempt__message__image {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.atempt__message__wrapper-left .atempt__message__image {
max-width: 845px;
width: 50%;
min-width: 512px;
padding-bottom: 0;
}
}
.atempt__message__wrapper-left .atempt__message__image img {
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 1100px) {
.atempt__message__wrapper-left .atempt__message__image img {
margin-left: 20px;
}
}
.atempt__message__wrapper {
width: 95%;
padding: 0;
position: relative;
}
@media (min-width: 768px) {
.atempt__message__wrapper {
width: 100%;
}
}
@media screen and (min-width: 1100px) {
.atempt__message__wrapper {
width: 50%;
max-width: 845px;
max-height: 679px;
min-width: 512px;
}
}
@media screen and (min-width: 1100px) {
.atempt__message {
flex-wrap: nowrap;
}
}
.atempt__message__content {
margin: 0 auto;
background-color: #ffffff;
display: grid;
place-items: center;
place-content: center;
color: #000000;
text-align: left;
position: relative;
height: 100%;
width: 100%;
padding: 1em;
}
@media screen and (min-width: 1100px) {
.atempt__message__content {
width: 100%;
margin-top: 40px;
max-width: 845px;
min-width: 512px;
margin-left: 20px;
}
}
.atempt__message__content._right {
margin-left: 0;
}
@media (min-width: 1100px) {
.atempt__message__content._right {
margin-left: 20px;
}
}
.atempt__message__content._left {
margin-left: 0;
}
@media (min-width: 1100px) {
.atempt__message__content._left {
margin-left: -20px;
}
}
.atempt__message__logo {
width: 70%;
}
@media (min-width: 1100px) {
.atempt__message__logo {
width: 100%;
}
}
.atempt__message__logo img {
margin: 0 auto;
}
.atempt__message__logo h2 {
font-size: var(--font-50);
font-weight: bold;
text-align: center;
}
.atempt__message__main {
font-size: var(--font-30);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.08;
letter-spacing: 0.75px;
margin: 30px 0;
}
.atempt__message__text {
font-size: var(--font-18);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.3px;
padding: 0 1em;
}
@media (min-width: 768px) {
.atempt__message__text {
padding: 0;
}
}
@media (min-width: 1100px) {
.atempt__message__text {
font-size: var(--font-15);
}
}
@media screen and (min-width: 600px) {
.atempt__message__text {
letter-spacing: 0.45px;
}
}
.atempt__message__button {
padding-top: 30px;
margin: 0 auto;
width: -moz-fit-content;
width: fit-content;
}
.atempt__message__button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
width: 220px;
background-color: #4a4949;
color: #ffffff;
padding: 1.5em;
font-size: var(--font-16);
font-weight: bold;
border: solid 1px;
border-color: #ffffff;
transition: all 0.4s;
}
.atempt__message__button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
transition: all 0.4s;
}
.atempt__message__button a:hover {
opacity: 100 !important;
background-color: #ffffff;
color: #4a4949;
transition: all 0.4s;
}
.atempt__message__button a:hover::after {
transition: all 0.4s;
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-black.svg);
}
.atempt__powerup {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0 20px 40px;
}
@media (min-width: 768px) {
.atempt__powerup {
flex-wrap: nowrap;
}
}
.atempt__powerup__main {
font-size: var(--font-30);
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.93;
letter-spacing: 0.75px;
color: #0086cd;
}
.atempt__powerup__sub {
font-size: var(--font-12);
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: 0.3px;
margin-bottom: 20px;
margin-top: 10px;
}
.atempt__powerup__text {
font-size: var(--font-18);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.45px;
}
.atempt__gallery {
display: flex;
justify-content: center;
padding: 40px 0;
width: 90%;
margin: 0 auto;
}
@media (min-width: 768px) {
.atempt__gallery {
width: 85%;
}
}
@media (min-width: 900px) {
.atempt__gallery {
width: 75%;
}
}
.atempt__gallery img {
max-width: 25%;
}
.atempt__info {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.atempt__info {
padding: 20px 20px 40px;
}
}
.atempt__info__text {
font-size: var(--font-18);
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.45px;
}
.atempt__info__main {
font-size: var(--font-25);
line-height: 1.75;
letter-spacing: 1px;
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: clamp(50px, 4.6511627907vw, 80px) 0;
}
@media (min-width: 768px) {
.atempt__info__main {
font-size: var(--font-40);
}
}
.atempt__info__main-marg {
display: inline-block;
position: relative;
}
.atempt__info__main-marg::after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 2px;
border-bottom: solid 12px #00a0e9;
opacity: 0.2;
}
@media (min-width: 768px) {
.atempt__info__main-marg::after {
bottom: 12px;
}
}
.atempt__voice__wrapper-left {
width: 100%;
background-color: #efefef;
}
.atempt__voice__content {
padding-top: clamp(50px, 4.6511627907vw, 80px);
}
.atempt__voice__heading {
line-height: 1;
letter-spacing: 2.5px;
text-align: center;
padding: 0 1em;
font-size: var(--font-50);
}
.atempt__voice__sub {
font-size: var(--font-24);
font-weight: bold;
line-height: 2.08;
letter-spacing: 0.6px;
text-align: center;
}
.atempt__voice__container {
padding: clamp(50px, 4.6511627907vw, 80px) 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (min-width: 768px) {
.atempt__voice__container {
flex-wrap: nowrap;
}
}
@media (min-width: 768px) {
.atempt__voice__image {
width: 50%;
padding: 0 1em;
}
}
@media (min-width: 1100px) {
.atempt__voice__image {
width: 540px;
}
}
.atempt__voice__image img {
width: 95%;
margin: 0 auto;
}
.atempt__voice__text {
font-size: var(--font-18);
line-height: 1.8;
letter-spacing: 0.45px;
display: flex;
align-items: center;
width: 95%;
margin: 0;
padding-top: 1em;
}
@media (min-width: 768px) {
.atempt__voice__text {
margin-left: 1em;
width: 40%;
}
}
.atempt__voice__text.-right {
margin: 0;
padding-top: 1em;
}
@media (min-width: 768px) {
.atempt__voice__text.-right {
margin-right: 1em;
}
}
.atempt__voice__wrapper-right > .atempt__voice__container {
flex-direction: row-reverse;
}
.category__button {
position: relative;
overflow: hidden;
margin: 40px 0 clamp(50px, 4.6511627907vw, 80px);
}
.category__button ul {
position: relative;
left: 50%;
float: left;
margin: 0 auto;
float: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.category__button li {
float: left;
position: relative;
left: -50%;
}
.category__button a {
color: #cecece;
background: #fff;
border: 1px solid #cecece;
padding: 10px 20px;
font-size: 13.69px;
line-height: 1em;
border-radius: 24px;
display: block;
margin: 8px;
}
.category__button a.on {
color: #fff;
background: #0d3387;
border: 1px solid #0d3387;
}
.category__button a:hover {
color: #fff;
background: #0d3387;
border: 1px solid #0d3387;
}
.category__mainvisual {
width: 100%;
height: 300px;
margin: 0 auto;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
display: grid;
place-content: center;
place-items: center;
background-image: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/action/mainvisual.jpg);
}
@media (min-width: 768px) {
.category__mainvisual {
height: 494px;
}
}
.category__mainvisual__heading {
font-size: var(--font-60);
text-align: center;
font-weight: normal;
padding-top: 1em;
line-height: 1.5em;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
.category__mainvisual__heading {
padding-top: 0;
}
}
.category__mainvisual__sub {
font-size: var(--font-25);
font-weight: bold;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}
.category__list {
margin: 0 auto;
max-width: 95%;
padding-bottom: clamp(50px, 4.6511627907vw, 80px);
}
@media (min-width: 768px) {
.category__list {
max-width: clamp(0px, 83.4558823529vw, 1135px);
}
}
.category__list__container {
--c-row-gutter-x: clamp(20px, 3.488372093vw, 60px);
--c-row-gutter-y: clamp(25px, 4.6511627907vw, 80px);
display: flex;
flex-wrap: wrap;
margin: calc(var(--c-row-gutter-y) / 2 * -1) calc(var(--c-row-gutter-x) / 2 * -1);
padding: 0;
}
@media (min-width: 560px) {
.category__list__container {
flex-wrap: wrap;
flex-direction: row;
}
}
.category__list__container .archive_pagenation {
margin-top: clamp(47px, 5.5147058824vw, 75px);
}
.category__list__content {
flex: 1 1 0%;
display: flex;
flex-direction: column;
padding: calc(var(--c-row-gutter-y, 0) / 2) calc(var(--c-row-gutter-x, 0) / 2);
flex-basis: 100%;
max-width: 100%;
}
@media (min-width: 560px) {
.category__list__content {
flex-basis: 50%;
max-width: 50%;
}
}
@media (min-width: 768px) {
.category__list__content {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
}
.category__list__image {
width: 100%;
height: 100%;
}
.category__list__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.category__item__content {
margin-top: 0.5em;
text-align: left;
}
.archive_pagenation {
margin-bottom: clamp(50px, 4.6511627907vw, 80px);
}
.archive_pagenation .wp-pagenavi {
text-align: center;
}
.archive_pagenation .wp-pagenavi span.pages {
display: none;
}
.archive_pagenation .wp-pagenavi span.current {
padding: 5px 8px;
background-color: #0d3387;
border: 1px solid #0d3387;
color: #fff;
}
.archive_pagenation .wp-pagenavi a.page {
padding: 5px 8px;
}
.archive_pagenation .wp-pagenavi a.nextpostslink {
padding: 5px 8px;
}
.single__tlt {
font-size: var(--font-32) !important;
font-weight: bold;
color: #555;
padding-bottom: clamp(16px, 1.8382352941vw, 25px);
border-bottom: 1px solid var(--color-gray-light);
margin: 0 !important;
}
.single_marg {
margin: clamp(75px, 8.8235294118vw, 120px) 0 clamp(88px, 10.2941176471vw, 140px);
}
.single__blog {
text-align: center;
background: #fafafa;
}
.single__blog__category-name {
font-size: 24px;
padding-top: clamp(45px, 4.4117647059vw, 60px);
}
@media (min-width: 960px) {
.single__blog__category-name {
padding-top: clamp(26px, 2.5735294118vw, 35px);
}
}
.single__blog__category-name div::before {
content: "";
position: relative;
top: 4px;
font-size: 40px;
font-weight: normal;
margin-right: 16px;
background: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/single/ttl_bdr_l.png) no-repeat;
background-position: left center;
padding: 20px 0 28px 20px;
}
.single__blog__category-name div::after {
content: "";
position: relative;
top: 4px;
font-weight: normal;
font-size: 40px;
margin-left: 16px;
background: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/single/ttl_bdr_r.png) no-repeat;
background-position: right center;
padding: 20px 0 28px 20px;
}
.single__blog__release_date {
color: #555;
text-align: right;
margin: clamp(16px, 1.8382352941vw, 25px) 0;
font-size: var(--font-16);
}
.single__blog__container {
text-align: initial;
position: relative;
max-width: 1980px;
margin: 0 auto;
padding: 12.4rem 15px;
padding: clamp(47px, 5.5147058824vw, 75px) clamp(16px, 1.8382352941vw, 25px);
width: 95%;
border: 1px solid #aaaaaa;
font-size: 18px;
line-height: 2.2;
}
@media (min-width: 768px) {
.single__blog__container {
padding: clamp(63px, 7.3529411765vw, 100px);
max-width: clamp(0px, 74.2647058824vw, 1010px);
}
}
.single__blog__container h2 {
font-size: var(--font-25);
margin: 2em 0 0.75em;
font-weight: bold;
}
.single__blog__container h3 {
font-size: var(--font-20);
margin: 2em 0 0.75em;
font-weight: bold;
}
.single__blog__container p {
margin-top: 2em;
margin-bottom: 0;
font-size: var(--font-16);
}
.single__blog__container figure, .single__blog__container .wp-block-image {
margin-top: 2em;
margin-bottom: 0;
}
.single__blog__container a {
color: #0086CD;
text-decoration: underline;
transition: all 0.4s;
}
.single__blog__container a:hover {
opacity: 0.65;
transition: all 0.4s;
}
.single__blog__container .wp-block-button {
margin: 40px auto;
width: -moz-fit-content;
width: fit-content;
border-radius: initial;
padding: 20px 0;
}
.single__blog__container .wp-block-button a {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
line-height: 1;
text-decoration: none;
text-align: center;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
width: 280px;
height: 80px;
background-color: #0086CD;
color: #ffffff;
margin-left: 1.6rem;
padding: 8px 14px;
font-size: 18px;
font-weight: bold;
}
@media (min-width: 768px) {
.single__blog__container .wp-block-button a {
width: 320px;
}
}
@media (min-width: 992px) {
.single__blog__container .wp-block-button a {
width: 400px;
}
}
.single__blog__container .wp-block-button a:hover {
background-color: #ffffff;
color: #0086CD;
border: 1px solid #0086CD;
}
.single__blog__container .wp-block-button a:hover::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-blue.svg);
}
.single__blog__container .wp-block-button a::after {
content: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/chevron/chevron-right-solid-white.svg);
display: inline-block;
width: 8px;
margin-left: 8px;
}
.single__blog__container .wp-block-button__link {
border-radius: initial;
}
.single__blog__container__heading {
margin-bottom: 6.4rem;
}
.single__blog__container__list {
margin: 0;
}
.single__blog__container__list-item:not(:last-child) {
margin: 0 0 4.8rem 0;
}
.single__blog__container__guide {
padding-top: 6.4rem;
}
.front_rear_posts {
display: flex;
justify-content: center;
align-items: center;
gap: 2em;
line-height: 1.5;
font-size: var(--font-14);
max-width: 95%;
margin: 2em auto;
}
@media (min-width: 768px) {
.front_rear_posts {
max-width: clamp(0px, 74.2647058824vw, 1010px);
}
}
.front_rear_posts .prev-post {
flex: 1 1 0%;
text-align: left;
}
.front_rear_posts .prev-post a {
gap: 0.5em;
display: inline-flex;
align-items: center;
-webkit-text-decoration: underline;
text-decoration: underline;
color: #000;
transition: all 0.4s;
}
.front_rear_posts .prev-post a::before {
content: "";
width: 1em;
height: 1em;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/cover;
mask: var(--icon-arrow-right) no-repeat center/cover;
transform: rotate(180deg);
transition: all 0.4s;
opacity: 0.65;
}
.front_rear_posts .next-post {
text-align: right;
flex: 1 1 0%;
}
.front_rear_posts .next-post a {
gap: 0.5em;
display: inline-flex;
align-items: center;
-webkit-text-decoration: underline;
text-decoration: underline;
color: #000;
transition: all 0.4s;
}
.front_rear_posts .next-post a::after {
content: "";
width: 1em;
height: 1em;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/cover;
mask: var(--icon-arrow-right) no-repeat center/cover;
transition: all 0.4s;
opacity: 0.65;
}:root {
--icon-arrow-right: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M6%2014c-.26%200-.51-.1-.71-.29a.996.996%200%200%201%200-1.41L9.59%208l-4.3-4.29A.996.996%200%201%201%206.7%202.3l5%205c.19.18.3.43.3.7s-.11.52-.29.71l-5%205c-.2.19-.45.29-.71.29z%22%2F%3E%3C%2Fsvg%3E");
--icon-check: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M5.61%2011.71c.2.19.46.29.72.29.26%200%20.52-.1.72-.29L13.2%205.7c.4-.39.4-1.02%200-1.41-.4-.39-1.04-.39-1.44%200L6.33%209.6%204.24%207.56c-.4-.39-1.04-.39-1.44%200-.4.39-.4%201.02%200%201.41l2.81%202.74z%22%2F%3E%3C%2Fsvg%3E");
--icon-plus: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M14%207H9V2H7v5H2v2h5v5h2V9h5V7z%22%2F%3E%3C%2Fsvg%3E");
--icon-tel: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M6.3%206.5c-.3-.4-.1-.9.3-1.2L8%204.5c.4-.2.5-.7.3-1.1L6.6.4C6.4%200%205.9-.1%205.5.1L4%201c-1.8%201.1-3%204.1.2%209.6s6.4%206%208.2%205l1.5-.8c.4-.2.5-.7.3-1.1l-1.7-2.9c-.2-.4-.7-.5-1.1-.3l-1.5.8c-.4.2-.9.1-1.1-.3L6.3%206.5z%22%2F%3E%3C%2Fsvg%3E");
--icon-mail: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22m16%209.2-2.1-2.1L16%205.3zM2.1%207.1%200%209.2V5.3zM16%2011.2V14H0v-2.8L3.1%208%208%2012.2%2012.9%208z%22%2F%3E%3Cpath%20d%3D%22M16%202v1.7l-8%206.9-8-6.9V2z%22%2F%3E%3C%2Fsvg%3E");
--icon-new-window: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M4.25%202v9.75H14V2H4.25zm8.81%208.81H5.19V2.94h7.88v7.87z%22%2F%3E%3Cpath%20d%3D%22M2.94%2013.06V4.25H2V14h9.75v-.94H2.94z%22%2F%3E%3Cpath%20d%3D%22m7.46%209.33%202.76-2.76v1.99h.94V4.97H7.57v.94h1.99L6.79%208.67l.67.66z%22%2F%3E%3C%2Fsvg%3E");
--color-white: #fff;
--color-black: #000;
--color-black-light: #222;
--color-gray: #666;
--color-gray-light: #909090;
--color-gray-light-b: #707070;
--color-gray-light-c: #ddd;
--color-gray-pale: #f6f6f6;
--color-gray-pale-b: #eee;
--color-blue: #0086cd;
--color-green: #0b6d7d;
--color-blue-gradient: linear-gradient(45deg, #0077CA 0%, #0086cd 100%);
--color-red: #c7192a;
--font-sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
--font-serif: 'Times New Roman', 'Noto Serif JP', YuMincho, 'Yu Mincho', 'HGP明朝B', serif;
--font-en: Satisfy, cursive, sans-serif;
--transition-duration: 0.15s;
--transition-opacity: 0.65;
--container-size-xsmall: 90vw;
--container-size-small: 90vw;
--container-size-medium: 90vw;
--container-size-large: 95vw;
--font-10: 10px;
--font-11: clamp(11px, 0.8088235294vw, 11px);
--font-12: clamp(11px, 0.8823529412vw, 12px);
--font-13: clamp(12px, 0.9558823529vw, 13px);
--font-14: clamp(13px, 1.0294117647vw, 14px);
--font-15: clamp(13px, 1.1029411765vw, 15px);
--font-16: clamp(14px, 1.1764705882vw, 16px);
--font-17: clamp(14px, 1.25vw, 17px);
--font-18: clamp(15px, 1.3235294118vw, 18px);
--font-19: clamp(16px, 1.3970588235vw, 19px);
--font-20: clamp(16px, 1.4705882353vw, 20px);
--font-21: clamp(17px, 1.5441176471vw, 21px);
--font-22: clamp(18px, 1.6176470588vw, 22px);
--font-23: clamp(18px, 1.6911764706vw, 23px);
--font-24: clamp(19px, 1.7647058824vw, 24px);
--font-25: clamp(19px, 1.8382352941vw, 25px);
--font-26: clamp(20px, 1.9117647059vw, 26px);
--font-27: clamp(21px, 1.9852941176vw, 27px);
--font-28: clamp(21px, 2.0588235294vw, 28px);
--font-29: clamp(22px, 2.1323529412vw, 29px);
--font-30: clamp(23px, 2.2058823529vw, 30px);
--font-31: clamp(23px, 2.2794117647vw, 31px);
--font-32: clamp(24px, 2.3529411765vw, 32px);
--font-33: clamp(24px, 2.4264705882vw, 33px);
--font-34: clamp(25px, 2.5vw, 34px);
--font-35: clamp(26px, 2.5735294118vw, 35px);
--font-36: clamp(26px, 2.6470588235vw, 36px);
--font-37: clamp(27px, 2.7205882353vw, 37px);
--font-38: clamp(28px, 2.7941176471vw, 38px);
--font-39: clamp(28px, 2.8676470588vw, 39px);
--font-40: clamp(29px, 2.9411764706vw, 40px);
--font-41: clamp(29px, 3.0147058824vw, 41px);
--font-42: clamp(30px, 3.0882352941vw, 42px);
--font-43: clamp(31px, 3.1617647059vw, 43px);
--font-44: clamp(31px, 3.2352941176vw, 44px);
--font-45: clamp(32px, 3.3088235294vw, 45px);
--font-46: clamp(33px, 3.3823529412vw, 46px);
--font-47: clamp(33px, 3.4558823529vw, 47px);
--font-48: clamp(34px, 3.5294117647vw, 48px);
--font-49: clamp(34px, 3.6029411765vw, 49px);
--font-50: clamp(35px, 3.6764705882vw, 50px);
--font-51: clamp(36px, 3.75vw, 51px);
--font-52: clamp(36px, 3.8235294118vw, 52px);
--font-53: clamp(37px, 3.8970588235vw, 53px);
--font-54: clamp(38px, 3.9705882353vw, 54px);
--font-55: clamp(38px, 4.0441176471vw, 55px);
--font-56: clamp(39px, 4.1176470588vw, 56px);
--font-57: clamp(39px, 4.1911764706vw, 57px);
--font-58: clamp(40px, 4.2647058824vw, 58px);
--font-59: clamp(41px, 4.3382352941vw, 59px);
--font-60: clamp(41px, 4.4117647059vw, 60px);
--font-65: clamp(44px, 4.7794117647vw, 65px);
--font-100: clamp(66px, 7.3529411765vw, 100px)
}
@media(min-width: 768px) {
:root {
--container-size-xsmall: clamp(512px, 54.7794117647vw, 745px);
--container-size-small: clamp(0px, 74.2647058824vw, 1010px);
--container-size-medium: min(calc(100% - clamp(0px, 17.6470588235vw, 240px)), 1180px);
--container-size-large: min(calc(100% - clamp(0px, 17.6470588235vw, 240px)), 1360px)
}
}
*,
::before,
::after {
box-sizing: border-box
}
::before,
::after {
text-decoration: inherit;
vertical-align: inherit
}
html {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
word-break: break-word
}
body {
margin: 0
}
hr {
height: 0;
overflow: visible
}
main {
display: block
}
nav ol,
nav ul {
list-style: none;
padding: 0
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: rgba(0, 0, 0, 0)
}
abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle
}
audio,
video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
iframe {
border-style: none
}
img {
border-style: none
}
svg:not([fill]) {
fill: currentColor
}
svg:not(:root) {
overflow: hidden
}
table {
border-collapse: collapse
}
button,
input,
select {
margin: 0
}
button {
overflow: visible;
text-transform: none
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
fieldset {
border: 1px solid #a0a0a0;
padding: .35em .75em .625em
}
input {
overflow: visible
}
legend {
color: inherit;
display: table;
max-width: 100%;
white-space: normal
}
progress {
display: inline-block;
vertical-align: baseline
}
select {
text-transform: none
}
textarea {
margin: 0;
overflow: auto;
resize: vertical
}
[type=checkbox],
[type=radio] {
padding: 0
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto
}
::-webkit-input-placeholder {
color: inherit;
opacity: .54
}
::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
::-moz-focus-inner {
border-style: none;
padding: 0
}
:-moz-focusring {
outline: 1px dotted ButtonText
}
:-moz-ui-invalid {
box-shadow: none
}
details {
display: block
}
dialog {
background-color: #fff;
border: solid;
color: #000;
display: block;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content
}
dialog:not([open]) {
display: none
}
summary {
display: list-item
}
canvas {
display: inline-block
}
template {
display: none
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
touch-action: manipulation
}
[hidden] {
display: none
}
[aria-busy=true] {
cursor: progress
}
[aria-controls] {
cursor: pointer
}
[aria-disabled=true],
[disabled] {
cursor: not-allowed
}
[aria-hidden=false][hidden] {
display: initial
}
[aria-hidden=false][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute
}
html {
cursor: auto;
line-height: 1
}
body {
font-family: sans-serif
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-size: inherit;
font-weight: inherit
}
p {
margin: 0
}
blockquote {
margin: 0
}
ul,
ol {
margin: 0;
padding-left: 0;
list-style: none
}
dl,
dd {
margin: 0
}
hr {
margin: 0;
border: none;
border-top: 1px solid currentColor
}
pre {
margin: 0
}
a {
color: inherit;
text-decoration: none
}
rt {
letter-spacing: 0
}
figure {
max-width: 100%;
margin: 0
}
img {
max-width: 100%;
height: auto
}
table {
width: 100%;
table-layout: fixed
}
tbody,
thead {
vertical-align: inherit
}
th {
margin: 0;
text-align: inherit;
text-align: -webkit-match-parent
}
td {
padding: 0
}
label {
display: inline-block
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: inherit
}
button {
border-radius: 0
}
button:not(:disabled),
[role=button],
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
cursor: pointer
}
body {
background: var(--color-white);
font-family: var(--font-serif);
font-feature-settings: "palt";
font-weight: normal;
letter-spacing: .05em;
color: var(--color-black)
}
a,
button,
[type=button],
[type=reset],
[type=submit] {
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: ease
}
body:not(.-is-sp) a:hover,
body:not(.-is-sp) button:hover,
body:not(.-is-sp) [type=button]:hover,
body:not(.-is-sp) [type=reset]:hover,
body:not(.-is-sp) [type=submit]:hover {
opacity: var(--transition-opacity)
}
.c-btn {
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background: rgba(0, 0, 0, 0);
vertical-align: middle;
font: inherit;
text-decoration: none;
text-align: inherit;
line-height: 1;
white-space: nowrap;
color: inherit;
cursor: pointer
}
button.c-btn,
[type=button].c-btn,
[type=reset].c-btn,
[type=submit].c-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.c-btn.-block {
display: flex;
width: 100%
}
@media(min-width: 560px) {
.c-btn.-sm-block {
display: flex;
width: 100%
}
.c-btn.-sm-inline {
display: inline-flex;
width: auto
}
}
@media(min-width: 768px) {
.c-btn.-md-block {
display: flex;
width: 100%
}
.c-btn.-md-inline {
display: inline-flex;
width: auto
}
}
@media(min-width: 960px) {
.c-btn.-lg-block {
display: flex;
width: 100%
}
.c-btn.-lg-inline {
display: inline-flex;
width: auto
}
}
@media(min-width: 1200px) {
.c-btn.-xl-block {
display: flex;
width: 100%
}
.c-btn.-xl-inline {
display: inline-flex;
width: auto
}
}
.c-btn.-entry-contact-tel,
.c-btn.-midCareer-process-list,
.c-btn.-newGraduate-person,
.c-btn.-midCareer-person,
.c-btn.-singleJob-contact-mail,
.c-btn.-home-explore,
.c-btn.-newGraduate-explore,
.c-btn.-midCareer-explore,
.c-btn.-site-search,
.c-btn.-typeA {
justify-content: center;
gap: .5em;
min-width: clamp(248px, 24.2647058824vw, 330px);
padding: 1.5em;
background: var(--color-white);
border: 1px solid var(--color-black-light);
font-weight: bold;
font-size: var(--font-16);
letter-spacing: 0;
color: var(--color-black-light);
transition-property: opacity, background-color, border-color, color
}
.c-btn.-entry-contact-tel::after,
.c-btn.-midCareer-process-list::after,
.c-btn.-newGraduate-person::after,
.c-btn.-midCareer-person::after,
.c-btn.-singleJob-contact-mail::after,
.c-btn.-home-explore::after,
.c-btn.-newGraduate-explore::after,
.c-btn.-midCareer-explore::after,
.c-btn.-site-search::after,
.c-btn.-typeA::after {
content: "";
width: 1em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/contain;
mask: var(--icon-arrow-right) no-repeat center/contain
}
.c-btn.-entry-contact-tel:hover,
.c-btn.-midCareer-process-list:hover,
.c-btn.-newGraduate-person:hover,
.c-btn.-midCareer-person:hover,
.c-btn.-singleJob-contact-mail:hover,
.c-btn.-home-explore:hover,
.c-btn.-newGraduate-explore:hover,
.c-btn.-midCareer-explore:hover,
.c-btn.-site-search:hover,
.c-btn.-typeA:hover {
opacity: 1;
background: var(--color-black-light);
color: var(--color-white)
}
.-fill.c-btn.-entry-contact-tel,
.-fill.c-btn.-midCareer-process-list,
.-fill.c-btn.-newGraduate-person,
.-fill.c-btn.-midCareer-person,
.-fill.c-btn.-singleJob-contact-mail,
.-fill.c-btn.-home-explore,
.-fill.c-btn.-newGraduate-explore,
.-fill.c-btn.-midCareer-explore,
.-fill.c-btn.-site-search,
.c-btn.-typeA.-fill {
background: var(--color-black-light);
border: 1px solid var(--color-black-light);
color: var(--color-white)
}
.-fill.c-btn.-entry-contact-tel:hover,
.-fill.c-btn.-midCareer-process-list:hover,
.-fill.c-btn.-newGraduate-person:hover,
.-fill.c-btn.-midCareer-person:hover,
.-fill.c-btn.-singleJob-contact-mail:hover,
.-fill.c-btn.-home-explore:hover,
.-fill.c-btn.-newGraduate-explore:hover,
.-fill.c-btn.-midCareer-explore:hover,
.-fill.c-btn.-site-search:hover,
.c-btn.-typeA.-fill:hover {
background: var(--color-white);
color: var(--color-black-light)
}
.-newWindow.c-btn.-entry-contact-tel::after,
.-newWindow.c-btn.-midCareer-process-list::after,
.-newWindow.c-btn.-newGraduate-person::after,
.-newWindow.c-btn.-midCareer-person::after,
.-newWindow.c-btn.-singleJob-contact-mail::after,
.-newWindow.c-btn.-home-explore::after,
.-newWindow.c-btn.-newGraduate-explore::after,
.-newWindow.c-btn.-midCareer-explore::after,
.-newWindow.c-btn.-site-search::after,
.c-btn.-typeA.-newWindow::after {
-webkit-mask-image: var(--icon-new-window);
mask-image: var(--icon-new-window)
}
.c-btn.-singleJob-action,
.c-btn.-archiveJob-list-item,
.c-btn.-searchJob-result-list-item,
.c-btn.-single-archive-back,
.c-btn.-home-message,
.c-btn.-typeB {
justify-content: center;
gap: .375em;
padding: 1em 2em;
background: var(--color-black-light);
border: 1px solid var(--color-black-light);
font-weight: bold;
font-size: var(--font-16);
letter-spacing: 0;
color: var(--color-white);
transition-property: opacity, background-color, border-color, color
}
.c-btn.-singleJob-action::after,
.c-btn.-archiveJob-list-item::after,
.c-btn.-searchJob-result-list-item::after,
.c-btn.-single-archive-back::after,
.c-btn.-home-message::after,
.c-btn.-typeB::after {
content: "";
width: 1em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/contain;
mask: var(--icon-arrow-right) no-repeat center/contain
}
.c-btn.-singleJob-action:hover,
.c-btn.-archiveJob-list-item:hover,
.c-btn.-searchJob-result-list-item:hover,
.c-btn.-single-archive-back:hover,
.c-btn.-home-message:hover,
.c-btn.-typeB:hover {
opacity: 1;
background: var(--color-white);
color: var(--color-black-light)
}
.c-btn.-site-header-entry {
justify-content: center;
align-items: center;
padding: 1.5em 1.5em;
height: 67px;
font-weight: bold;
font-size: var(--font-13);
background: var(--color-blue);
border-top: 1px solid var(--color-white);
color: var(--color-white)
}
@media(min-width: 768px) {
.c-btn.-site-header-entry {
border: none
}
}
.c-btn.-site-drawer-entryList {
flex-direction: column;
justify-content: center;
padding: 1em 2.75em 1em 2.5em;
background: var(--color-white);
font-weight: bold;
font-size: var(--font-19);
color: var(--color-black-light);
}
.c-btn.-site-drawer-entryList::before {
content: "";
position: absolute;
top: 50%;
right: 1.125em;
width: .875em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/contain;
mask: var(--icon-arrow-right) no-repeat center/contain;
transform: translateY(-50%)
}
.c-btn.-site-drawer-entryList::after {
content: attr(data-text);
margin-top: .625em;
font-weight: normal;
font-size: var(--font-12)
}
.c-btn.-site-drawer-mynavi {
justify-content: center;
padding: .6875em 2.75em .6875em 2.5em;
background: var(--color-white);
font-weight: bold;
font-size: var(--font-19);
color: var(--color-black-light)
}
.c-btn.-site-drawer-mynavi::before {
content: "";
position: absolute;
top: 50%;
right: 1.125em;
width: .875em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/contain;
mask: var(--icon-arrow-right) no-repeat center/contain;
transform: translateY(-50%)
}
.c-btn.-site-drawer-mynavi>img {
width: clamp(103px, 12.1323529412vw, 165px)
}
.c-btn.-site-action {
flex-direction: column;
justify-content: center;
padding: 1.6875em 2.75em 1.6875em 2.5em;
background: var(--color-white);
border: 2px solid var(--color-white);
font-weight: bold;
font-size: var(--font-23);
color: var(--color-black-light);
transition-property: opacity, background-color, border-color, color
}
.c-btn.-site-action::before {
content: "";
position: absolute;
top: 50%;
right: 1.125em;
width: 1.125em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/contain;
mask: var(--icon-arrow-right) no-repeat center/contain;
transform: translateY(-50%)
}
.c-btn.-site-action::after {
content: attr(data-text);
margin-top: .625em;
font-weight: normal;
font-size: var(--font-15)
}
.c-btn.-site-action:hover {
opacity: 1;
background: var(--color-blue);
color: var(--color-white)
}
.c-btn.-site-search {
border-color: var(--color-white)
}
.c-btn.-site-search:hover {
background-color: var(--color-blue)
}
.c-btn.-home-message {
background: rgba(0, 0, 0, 0);
border-color: var(--color-white)
}
.c-btn.-home-message:hover {
background: var(--color-black-light);
border-color: var(--color-black-light);
color: var(--color-white)
}
.c-btn.-home-explore,
.c-btn.-newGraduate-explore,
.c-btn.-midCareer-explore {
padding: 1.125em 1.5em
}
@media(min-width: 1200px) {
.c-btn.-home-explore,
.c-btn.-newGraduate-explore,
.c-btn.-midCareer-explore {
padding: 1.5em
}
}
.c-btn.-archiveJob-list-item,
.c-btn.-searchJob-result-list-item,
.c-btn.-single-archive-back {
font-size: var(--font-14)
}
.c-btn.-archiveJob-list-item:hover,
.c-btn.-searchJob-result-list-item:hover,
.c-btn.-single-archive-back:hover {
opacity: 1;
background: var(--color-black-light);
color: var(--color-white)
}
.c-btn.-singleJob-contact-mail {
height: 100%;
background-color: var(--color-black-light);
color: var(--color-white)
}
.c-btn.-singleJob-contact-mail:hover {
background: var(--color-white);
color: var(--color-black-light)
}
.c-btn.-singleJob-action {
padding: 1.875em 1.5em;
border-width: 2px;
font-size: var(--font-23)
}
.c-btn.-submit {
justify-content: center;
padding: 1.875em 1.5em;
background: var(--color-black-light);
border: 1px solid var(--color-black-light);
font-weight: bold;
font-size: var(--font-14);
letter-spacing: 0;
text-align: center;
color: var(--color-white)
}
@media(min-width: 768px) {
.c-btn.-submit {
padding: 2.25em;
font-size: var(--font-16)
}
}
.c-btn.-back {
justify-content: center;
padding: 1.875em 1.5em;
background: var(--color-white);
border: 1px solid var(--color-black-light);
font-weight: bold;
font-size: var(--font-14);
letter-spacing: 0;
text-align: center;
color: var(--color-black)
}
@media(min-width: 768px) {
.c-btn.-back {
padding: 2.25em;
font-size: var(--font-16)
}
}
.c-btn.-newGraduate-person,
.c-btn.-midCareer-person {
min-width: clamp(173px, 16.9117647059vw, 230px);
padding: 1em
}
.c-btn.-newGraduate-person:hover,
.c-btn.-midCareer-person:hover {
background: var(--color-white);
color: var(--color-black)
}
.c-btn.-midCareer-process-list {
padding: 1em;
background: var(--color-blue);
border-color: var(--color-blue);
font-size: var(--font-22);
color: var(--color-white)
}
.c-btn.-midCareer-process-list:hover {
background: var(--color-white);
color: var(--color-blue)
}
.c-btn.-entry-contact-tel {
font-size: var(--font-25);
background: var(--color-gray-pale);
border-color: var(--color-gray-light-c)
}
.c-btn.-entry-contact-tel::after {
width: .75em
}
.c-btn.-entry-contact-tel:hover {
border-color: var(--color-black-light)
}
.c-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
line-height: 1;
color: inherit;
word-wrap: break-word
}
.c-card>.header,
.c-card>.footer {
flex: 0 0 auto
}
.c-card>.media {
overflow: hidden;
position: relative;
flex: 0 0 auto;
width: 100%;
margin: 0
}
.c-card>.media>img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.c-card>.body {
flex: 1 1 0%;
margin: 0
}
.c-card.-home-story {
transition-property: opacity, background-color
}
@media(min-width: 768px) {
.c-card.-home-story {
flex-direction: row;
align-items: center
}
}
.c-card.-home-story>.media {
aspect-ratio: 940/600
}
@media(min-width: 768px) {
.c-card.-home-story>.media {
flex: 0 1 auto;
width: 58.75%
}
}
@media(min-width: 1600px) {
.c-card.-home-story>.media {
aspect-ratio: auto;
height: 600px
}
}
.c-card.-home-story>.body {
z-index: 1
}
@media(min-width: 768px) {
.c-card.-home-story>.body {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: clamp(-50px, -3.6764705882vw, -31px);
padding-right: clamp(31px, 3.6764705882vw, 50px)
}
}
@media(min-width: 768px) {
.c-card.-home-story>.body>.inner {
width: -moz-fit-content;
width: fit-content
}
}
.c-card.-home-story>.body>.inner>.label {
position: absolute;
top: clamp(13px, 1.4705882353vw, 20px);
left: clamp(13px, 1.4705882353vw, 20px);
margin-bottom: clamp(22px, 2.5735294118vw, 35px);
font-family: var(--font-en);
font-size: var(--font-38);
text-shadow: 2px 2px 2px rgba(0, 0, 0, .15)
}
@media(min-width: 768px) {
.c-card.-home-story>.body>.inner>.label {
position: static;
font-size: var(--font-48)
}
}
@media(min-width: 1200px) {
.c-card.-home-story>.body>.inner>.label {
font-size: var(--font-58)
}
}
.c-card.-home-story>.body>.inner>.heading {
padding: .875em 1em;
background: var(--color-white);
font-weight: bold;
font-size: var(--font-15);
line-height: 1.75;
color: var(--color-black)
}
@media(min-width: 768px) {
.c-card.-home-story>.body>.inner>.heading {
font-size: var(--font-20);
box-shadow: 4px 4px 2px rgba(0, 0, 0, .15)
}
}
.c-card.-home-story>.body>.inner>.data {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: .125em .5em;
margin-top: .5em;
font-weight: bold;
font-size: var(--font-13);
line-height: 1.5;
text-align: right;
text-shadow: 2px 2px 2px rgba(0, 0, 0, .15)
}
@media(min-width: 768px) {
.c-card.-home-story>.body>.inner>.data {
margin-top: 1em;
font-size: var(--font-18)
}
}
@media(min-width: 768px) {
.c-card.-home-story.-reverse {
flex-direction: row-reverse
}
}
@media(min-width: 768px) {
.c-card.-home-story.-reverse>.body {
align-items: flex-end;
margin: 0 clamp(-50px, -3.6764705882vw, -31px) 0 0;
padding: 0 0 0 clamp(31px, 3.6764705882vw, 50px)
}
}
.c-card.-home-story:hover {
background: rgba(0, 0, 0, .5)
}
.c-card.-home-explore>.media,
.c-card.-newGraduate-explore>.media,
.c-card.-midCareer-explore>.media {
aspect-ratio: 680/380
}
.c-card.-home-explore>.body,
.c-card.-newGraduate-explore>.body,
.c-card.-midCareer-explore>.body {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 100%;
padding: clamp(19px, 2.2058823529vw, 30px)
}
@media(min-width: 1200px) {
.c-card.-home-explore>.body,
.c-card.-newGraduate-explore>.body,
.c-card.-midCareer-explore>.body {
padding: clamp(31px, 3.6764705882vw, 50px)
}
}
.c-card.-benefit-wlb>.header,
.c-card.-benefit-communication>.header {
position: relative;
background: var(--color-white)
}
.c-card.-benefit-wlb>.header>.num,
.c-card.-benefit-communication>.header>.num {
position: absolute;
top: -0.375em;
left: -0.375em;
font-weight: bold;
font-size: var(--font-45);
line-height: .75
}
@media(min-width: 960px) {
.c-card.-benefit-wlb>.header>.num,
.c-card.-benefit-communication>.header>.num {
left: .05em
}
}
@media(min-width: 1200px) {
.c-card.-benefit-wlb>.header>.num,
.c-card.-benefit-communication>.header>.num {
font-size: var(--font-60)
}
}
.c-card.-benefit-wlb>.header>.num.-blue,
.c-card.-benefit-communication>.header>.num.-blue {
color: var(--color-blue)
}
.c-card.-benefit-wlb>.header>.heading,
.c-card.-benefit-communication>.header>.heading {
padding: .1875em;
font-weight: bold;
font-size: var(--font-23);
line-height: 1.5;
text-align: center;
letter-spacing: 0
}
@media(min-width: 960px) {
.c-card.-benefit-wlb>.header>.heading,
.c-card.-benefit-communication>.header>.heading {
padding: .1875em .1875em .1875em 1.25em;
letter-spacing: inherit
}
}
.c-card.-benefit-wlb>.media,
.c-card.-benefit-communication>.media {
aspect-ratio: 340/335
}
.c-card.-benefit-support {
min-height: clamp(236px, 21.3235294118vw, 290px);
color: var(--color-white)
}
@media(min-width: 560px) {
.c-card.-benefit-support {
min-height: clamp(195px, 17.6470588235vw, 240px)
}
}
.c-card.-benefit-support>.media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.c-card.-benefit-support>.body {
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: clamp(19px, 2.2058823529vw, 30px)
}
.c-card.-benefit-support>.body>.title {
font-weight: bold;
font-size: var(--font-24);
line-height: 1.5;
letter-spacing: 0
}
@media(min-width: 960px) {
.c-card.-benefit-support>.body>.title {
letter-spacing: inherit
}
}
.c-card.-benefit-support>.body>.text {
margin-top: 1em;
font-size: var(--font-15);
line-height: 1.75;
text-align: justify;
word-break: break-all
}
.c-card.-benefit-skillup {
border: 2px solid var(--color-gray-light-b)
}
.c-card.-benefit-skillup>.media {
aspect-ratio: 314/300
}
.c-card.-benefit-skillup>.body {
background: var(--color-white)
}
.c-card.-benefit-skillup>.body>.title {
padding: .1875em;
font-weight: bold;
font-size: var(--font-24);
line-height: 1.5;
text-align: center;
letter-spacing: 0
}
.c-card.-benefit-data {
border: 2px solid var(--color-black-light)
}
.c-card.-benefit-data>.body {
padding: clamp(44px, 5.1470588235vw, 70px) clamp(13px, 1.4705882353vw, 20px) clamp(38px, 4.4117647059vw, 60px);
background: var(--color-white)
}
.c-card.-benefit-data>.body>.heading {
position: absolute;
top: clamp(-25px, -1.8382352941vw, -16px);
left: clamp(-10px, -.7352941176vw, -6px);
padding: .5em .625em;
background: var(--color-black);
font-weight: bold;
font-size: var(--font-20);
line-height: 1.5;
color: var(--color-white)
}
@media(min-width: 768px) {
.c-card.-benefit-data>.body>.heading {
font-size: var(--font-24)
}
}
.c-card.-benefit-data>.body>.media>img {
width: 100%
}
.c-card.-archiveStory {
transition-property: opacity, background-color
}
@media(min-width: 768px) {
.c-card.-archiveStory {
flex-direction: row;
align-items: center
}
}
.c-card.-archiveStory>.media {
aspect-ratio: 940/600
}
@media(min-width: 768px) {
.c-card.-archiveStory>.media {
flex: 0 1 auto;
width: 58.75%
}
}
.c-card.-archiveStory>.body {
z-index: 1
}
@media(min-width: 768px) {
.c-card.-archiveStory>.body {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: clamp(-50px, -3.6764705882vw, -31px)
}
}
@media(min-width: 960px) {
.c-card.-archiveStory>.body {
padding-right: clamp(31px, 3.6764705882vw, 50px)
}
}
@media(min-width: 768px) {
.c-card.-archiveStory>.body>.inner {
width: -moz-fit-content;
width: fit-content
}
}
.c-card.-archiveStory>.body>.inner>.label {
position: absolute;
top: clamp(13px, 1.4705882353vw, 20px);
left: clamp(13px, 1.4705882353vw, 20px);
margin-bottom: clamp(22px, 2.5735294118vw, 35px);
font-family: var(--font-en);
font-size: var(--font-38);
text-shadow: 2px 2px 2px rgba(0, 0, 0, .15)
}
@media(min-width: 768px) {
.c-card.-archiveStory>.body>.inner>.label {
position: static;
font-size: var(--font-48)
}
}
@media(min-width: 1200px) {
.c-card.-archiveStory>.body>.inner>.label {
font-size: var(--font-58)
}
}
.c-card.-archiveStory>.body>.inner>.heading {
padding: .875em 1em;
background: var(--color-white);
font-weight: bold;
font-size: var(--font-15);
line-height: 1.75;
color: var(--color-black)
}
@media(min-width: 768px) {
.c-card.-archiveStory>.body>.inner>.heading {
font-size: var(--font-20);
box-shadow: 4px 4px 2px rgba(0, 0, 0, .15)
}
}
.c-card.-archiveStory>.body>.inner>.data {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: .125em .5em;
margin-top: .5em;
font-weight: bold;
font-size: var(--font-13);
line-height: 1.5;
text-align: right;
text-shadow: 2px 2px 2px rgba(0, 0, 0, .15)
}
@media(min-width: 768px) {
.c-card.-archiveStory>.body>.inner>.data {
margin-top: 1em;
font-size: var(--font-18)
}
}
@media(min-width: 768px) {
.c-card.-archiveStory.-reverse {
flex-direction: row-reverse
}
}
@media(min-width: 768px) {
.c-card.-archiveStory.-reverse>.body {
align-items: flex-end;
margin: 0 clamp(-50px, -3.6764705882vw, -31px) 0 0
}
}
@media(min-width: 960px) {
.c-card.-archiveStory.-reverse>.body {
padding: 0 0 0 clamp(31px, 3.6764705882vw, 50px)
}
}
.c-card.-archiveStory:hover {
background: rgba(0, 0, 0, .5)
}
@media(min-width: 768px) {
.c-card.-singleStory-mediaCard {
flex-direction: row
}
}
.c-card.-singleStory-mediaCard>.media {
aspect-ratio: 650/540
}
@media(min-width: 768px) {
.c-card.-singleStory-mediaCard>.media {
flex: 0 1 auto;
width: calc(50% + clamp(38px, 4.4117647059vw, 60px));
aspect-ratio: auto;
margin-left: clamp(-60px, -4.4117647059vw, -38px)
}
}
.c-card.-singleStory-mediaCard>.body {
z-index: 1;
position: relative
}
@media(min-width: 768px) {
.c-card.-singleStory-mediaCard>.body {
flex: 1 1 0%;
align-self: center;
padding: clamp(16px, 1.8382352941vw, 25px) 0
}
}
@media(min-width: 768px) {
.c-card.-singleStory-mediaCard>.media+.body {
margin-left: clamp(-35px, -2.5735294118vw, -22px);
padding: clamp(31px, 3.6764705882vw, 50px) 0
}
}
.c-card.-singleStory-mediaCard>.body>.inner {
position: relative;
padding: clamp(44px, 5.1470588235vw, 70px) clamp(25px, 2.9411764706vw, 40px) clamp(31px, 3.6764705882vw, 50px);
background: var(--color-white)
}
@media(min-width: 960px) {
.c-card.-singleStory-mediaCard>.body>.inner {
padding: clamp(44px, 5.1470588235vw, 70px) clamp(53px, 6.25vw, 85px) clamp(31px, 3.6764705882vw, 50px)
}
}
.c-card.-singleStory-mediaCard>.body>.inner>.label {
opacity: .2;
position: absolute;
margin: 0;
font-weight: normal;
font: normal var(--font-60)/1 var(--font-en);
color: var(--color-blue);
transform: translate(-35%, -50%)
}
.c-card.-singleStory-mediaCard>.body>.inner>.heading {
z-index: 1;
position: relative;
margin: 0;
padding-bottom: .375em;
border-bottom: 1px solid currentColor;
font: bold var(--font-25)/1.5 var(--font-serif)
}
.c-card.-singleStory-mediaCard>.body>.inner>.subheading {
z-index: 1;
position: relative;
margin: .625em 0 0;
font: bold var(--font-20)/1.5 var(--font-serif)
}
.c-card.-singleStory-mediaCard>.body>.inner>.text {
margin: .75em 0 0;
font: normal var(--font-15)/1.875 var(--font-serif);
text-align: justify;
word-break: break-all
}
@media(min-width: 768px) {
.c-card.-singleStory-mediaCard.-reverse {
flex-direction: row-reverse
}
}
@media(min-width: 768px) {
.c-card.-singleStory-mediaCard.-reverse>.media {
margin: 0 clamp(-60px, -4.4117647059vw, -38px) 0 0
}
}
@media(min-width: 768px) {
.c-card.-singleStory-mediaCard.-reverse>.media+.body {
margin: 0 clamp(-35px, -2.5735294118vw, -22px) 0 0
}
}
.c-card.-singleStory-archive>.media {
padding-left: clamp(9px, 1.8382352941vw, 25px)
}
.c-card.-singleStory-archive>.media>img {
aspect-ratio: 1/1
}
.c-card.-singleStory-archive>.body {
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
max-width: 90%;
min-width: 65%;
padding: clamp(9px, 1.1029411765vw, 15px) clamp(16px, 1.8382352941vw, 25px);
background: rgba(0, 0, 0, .7);
color: var(--color-white)
}
@media(min-width: 960px) {
.c-card.-singleStory-archive>.body {
padding: clamp(9px, 1.1029411765vw, 15px) clamp(31px, 3.6764705882vw, 50px)
}
}
.c-card.-singleStory-archive>.body.-blue {
background: rgba(0, 134, 205, .7)
}
.c-card.-singleStory-archive>.body>.name {
font-weight: bold;
font-size: var(--font-18);
line-height: 1.25
}
@media(min-width: 960px) {
.c-card.-singleStory-archive>.body>.name {
font-size: var(--font-23)
}
}
.c-card.-singleStory-archive>.body>.data {
display: flex;
flex-wrap: wrap;
gap: .125em .75em;
margin-top: .5em;
font-weight: bold;
font-size: var(--font-12);
line-height: 1.375
}
@media(min-width: 960px) {
.c-card.-singleStory-archive>.body>.data {
font-size: var(--font-14)
}
}
.c-card.-archiveJob-list-item,
.c-card.-searchJob-result-list-item {
padding: clamp(16px, 1.8382352941vw, 25px);
background: var(--color-white);
border: 1px solid var(--color-gray-pale-b)
}
.c-card.-archiveJob-list-item>.media,
.c-card.-searchJob-result-list-item>.media {
aspect-ratio: 523/320
}
.c-card.-archiveJob-list-item>.body,
.c-card.-searchJob-result-list-item>.body {
padding-top: clamp(13px, 1.4705882353vw, 20px)
}
.c-card.-archiveJob-list-item>.body>.title,
.c-card.-searchJob-result-list-item>.body>.title {
font-weight: bold;
font-size: var(--font-19);
line-height: 1.75;
letter-spacing: 0;
text-align: justify;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
.c-card.-archiveJob-list-item>.body>.excerpt,
.c-card.-searchJob-result-list-item>.body>.excerpt {
margin-top: 1em;
font-size: var(--font-12);
line-height: 1.75;
text-align: justify;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: var(--color-gray)
}
.c-card.-archiveJob-list-item>.body>.data,
.c-card.-searchJob-result-list-item>.body>.data {
margin-top: 1.5em;
border-top: 1px solid var(--color-gray-pale-b);
font-size: var(--font-13);
line-height: 1.625
}
.c-card.-archiveJob-list-item>.body>.data>div,
.c-card.-searchJob-result-list-item>.body>.data>div {
display: flex;
border-bottom: 1px solid var(--color-gray-pale-b)
}
.c-card.-archiveJob-list-item>.body>.data>div>dt,
.c-card.-searchJob-result-list-item>.body>.data>div>dt {
flex: 0 0 auto;
width: 10em;
padding: .375em .75em;
background: var(--color-gray-pale);
text-align: center
}
.c-card.-archiveJob-list-item>.body>.data>div>dd,
.c-card.-searchJob-result-list-item>.body>.data>div>dd {
flex: 1 1 0%;
padding: .375em .75em
}
.c-card.-archiveJob-list-item>.footer,
.c-card.-searchJob-result-list-item>.footer {
margin-top: clamp(16px, 1.8382352941vw, 25px)
}
.c-card.-company-group {
padding: 0 2.5vw 5vw
}
@media(min-width: 768px) {
.c-card.-company-group {
padding: 0 0 clamp(44px, 5.1470588235vw, 70px) 0
}
}
.c-card.-company-group::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: calc(100% - clamp(44px, 5.1470588235vw, 70px));
background: var(--color-blue)
}
@media(min-width: 768px) {
.c-card.-company-group::before {
width: 85%
}
}
.c-card.-company-group>.media {
aspect-ratio: 1230/435
}
@media(min-width: 768px) {
.c-card.-company-group>.media {
aspect-ratio: auto;
width: 76.875%;
height: clamp(272px, 31.9852941176vw, 435px)
}
}
.c-card.-company-group>.body {
position: relative;
padding: clamp(38px, 4.4117647059vw, 60px) clamp(19px, 2.2058823529vw, 30px) clamp(19px, 2.2058823529vw, 30px);
background: var(--color-white)
}
@media(min-width: 768px) {
.c-card.-company-group>.body {
position: absolute;
right: 7.5%;
bottom: 0;
width: clamp(411px, 34.5588235294vw, 470px)
}
}
.c-card.-company-group>.body>.heading {
position: absolute;
bottom: calc(100% - clamp(22px, 2.5735294118vw, 35px));
left: 0;
width: 86%;
padding: .25em clamp(31px, 3.6764705882vw, 50px);
background: var(--color-black-light);
font-weight: bold;
font-size: var(--font-20);
line-height: 1.75;
color: var(--color-white);
box-shadow: 4px 4px 2px rgba(0, 0, 0, .15)
}
@media(min-width: 768px) {
.c-card.-company-group>.body>.heading {
font-size: var(--font-30)
}
}
.c-card.-company-group>.body>.content {
display: flex;
align-items: center;
gap: clamp(13px, 1.4705882353vw, 20px);
margin: 0 auto
}
@media(min-width: 768px) {
.c-card.-company-group>.body>.content {
width: -moz-fit-content;
width: fit-content
}
}
.c-card.-company-group>.body>.content>.label {
flex: 0 0 auto;
width: 6em;
font-size: var(--font-10);
color: var(--color-blue);
text-align: center;
white-space: nowrap
}
@media(min-width: 768px) {
.c-card.-company-group>.body>.content>.label {
font-size: var(--font-14)
}
}
.c-card.-company-group>.body>.content>.label>span {
display: block;
font-weight: bold;
font-size: 3.875em
}
.c-card.-company-group>.body>.content>.text {
font-size: var(--font-13);
line-height: 1.75;
letter-spacing: 0;
text-align: justify;
word-break: break-all
}
@media(min-width: 768px) {
.c-card.-company-group>.body>.content>.text {
font-size: var(--font-15)
}
}
.c-card.-company-group>.deco {
display: none;
position: absolute;
top: clamp(44px, 5.1470588235vw, 70px);
bottom: 0;
right: 3.75%
}
@media(min-width: 768px) {
.c-card.-company-group>.deco {
display: block
}
}
.c-card.-company-group>.deco>.decoText {
opacity: .4;
position: absolute;
top: 50%;
right: 0;
transform: rotate(90deg) translate(50%, -50%);
transform-origin: top right;
font: bold clamp(10px, 2.5735294118vw, 35px)/1 var(--font-en);
color: var(--color-white);
white-space: nowrap
}
.c-card.-company-group.-reverse::before {
right: auto;
left: 0
}
.c-card.-company-group.-reverse>.media {
margin-left: auto
}
@media(min-width: 768px) {
.c-card.-company-group.-reverse>.body {
left: 7.5%;
right: auto
}
}
.c-card.-company-group.-reverse>.deco {
right: auto;
left: 3.75%
}
.c-card.-company-group.-reverse>.deco>.decoText {
right: auto;
left: 0;
transform: rotate(-90deg) translate(-50%, -50%);
transform-origin: top left
}
.c-card.-company-business>.media {
aspect-ratio: 1/1
}
.c-card.-company-business>.body {
position: absolute;
bottom: clamp(16px, 1.8382352941vw, 25px);
right: 0;
min-width: 12em;
padding: .5em;
background: var(--color-white);
font-weight: bold;
font-size: var(--font-18);
line-height: 1.75;
text-align: center;
color: var(--color-black)
}
.c-card.-message-list {
gap: clamp(31px, 3.6764705882vw, 50px)
}
@media(min-width: 768px) {
.c-card.-message-list {
flex-direction: row;
gap: clamp(50px, 5.8823529412vw, 80px)
}
}
.c-card.-message-list>.media {
aspect-ratio: 748/440
}
@media(min-width: 768px) {
.c-card.-message-list>.media {
flex: 0 0 auto;
width: 55%
}
}
@media(min-width: 768px) {
.c-card.-message-list>.body {
flex: 1 1 0%;
display: flex;
flex-direction: column;
justify-content: center
}
}
.c-card.-message-list>.body>.text {
margin-top: clamp(19px, 2.2058823529vw, 30px);
font-size: var(--font-15);
line-height: 2;
text-align: justify;
word-break: break-all
}
@media(min-width: 768px) {
.c-card.-message-list.-reverse {
flex-direction: row-reverse
}
}
@media(min-width: 768px) {
.c-card.-newGraduate-intro {
flex-direction: row-reverse
}
}
.c-card.-newGraduate-intro>.media {
z-index: 1;
aspect-ratio: 1/1;
-webkit-clip-path: polygon(clamp(75px, 14.7058823529vw, 200px) 0%, 100% 0, 100% calc(100% - clamp(75px, 14.7058823529vw, 200px)), calc(100% - clamp(75px, 14.7058823529vw, 200px)) 100%, 0 100%, 0 clamp(75px, 14.7058823529vw, 200px));
clip-path: polygon(clamp(75px, 14.7058823529vw, 200px) 0%, 100% 0, 100% calc(100% - clamp(75px, 14.7058823529vw, 200px)), calc(100% - clamp(75px, 14.7058823529vw, 200px)) 100%, 0 100%, 0 clamp(75px, 14.7058823529vw, 200px))
}
@media(min-width: 768px) {
.c-card.-newGraduate-intro>.media {
width: 54%
}
}
.c-card.-newGraduate-intro>.body {
position: relative;
transform: translateY(clamp(-50px, -3.6764705882vw, -31px))
}
@media(min-width: 768px) {
.c-card.-newGraduate-intro>.body {
transform: translateX(clamp(31px, 3.6764705882vw, 50px))
}
}
@media(min-width: 768px) {
.c-card.-newGraduate-intro>.body::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: clamp(156px, 18.3823529412vw, 250px);
aspect-ratio: 1/1;
background: rgba(0, 134, 205, .4);
-webkit-clip-path: polygon(30% 0%, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
clip-path: polygon(30% 0%, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%)
}
}
.c-card.-newGraduate-intro>.body>.inner {
padding: clamp(63px, 7.3529411765vw, 100px) clamp(19px, 2.2058823529vw, 30px);
background: rgba(0, 134, 205, .2);
-webkit-clip-path: polygon(clamp(68px, 13.2352941176vw, 180px) 0%, 100% 0, 100% calc(100% - clamp(68px, 13.2352941176vw, 180px)), calc(100% - clamp(68px, 13.2352941176vw, 180px)) 100%, 0 100%, 0 clamp(68px, 13.2352941176vw, 180px));
clip-path: polygon(clamp(68px, 13.2352941176vw, 180px) 0%, 100% 0, 100% calc(100% - clamp(68px, 13.2352941176vw, 180px)), calc(100% - clamp(68px, 13.2352941176vw, 180px)) 100%, 0 100%, 0 clamp(68px, 13.2352941176vw, 180px))
}
@media(min-width: 768px) {
.c-card.-newGraduate-intro>.body>.inner {
padding: clamp(106px, 12.5vw, 170px) clamp(47px, 5.5147058824vw, 75px)
}
}
.c-card.-newGraduate-intro>.body>.inner>.text {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
font-size: var(--font-15);
line-height: 2.25
}
@media(min-width: 768px) {
.c-card.-newGraduate-process-lead,
.c-card.-midCareer-process-lead {
flex-direction: row
}
}
.c-card.-newGraduate-process-lead>.media,
.c-card.-midCareer-process-lead>.media {
z-index: 1;
aspect-ratio: 1/1;
-webkit-clip-path: polygon(clamp(75px, 14.7058823529vw, 200px) 0%, 100% 0, 100% calc(100% - clamp(75px, 14.7058823529vw, 200px)), calc(100% - clamp(75px, 14.7058823529vw, 200px)) 100%, 0 100%, 0 clamp(75px, 14.7058823529vw, 200px));
clip-path: polygon(clamp(75px, 14.7058823529vw, 200px) 0%, 100% 0, 100% calc(100% - clamp(75px, 14.7058823529vw, 200px)), calc(100% - clamp(75px, 14.7058823529vw, 200px)) 100%, 0 100%, 0 clamp(75px, 14.7058823529vw, 200px))
}
@media(min-width: 768px) {
.c-card.-newGraduate-process-lead>.media,
.c-card.-midCareer-process-lead>.media {
width: 50%
}
}
.c-card.-newGraduate-process-lead>.body,
.c-card.-midCareer-process-lead>.body {
position: relative;
padding: clamp(31px, 3.6764705882vw, 50px) 0
}
@media(min-width: 768px) {
.c-card.-newGraduate-process-lead>.body,
.c-card.-midCareer-process-lead>.body {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: clamp(63px, 7.3529411765vw, 100px);
transform: translateX(clamp(-50px, -3.6764705882vw, -31px))
}
}
@media(min-width: 768px) {
.c-card.-newGraduate-process-lead>.body::before,
.c-card.-midCareer-process-lead>.body::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: clamp(188px, 22.0588235294vw, 300px);
aspect-ratio: 1/1;
background: rgba(0, 134, 205, .2);
-webkit-clip-path: polygon(30% 0%, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
clip-path: polygon(30% 0%, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%)
}
}
.c-card.-newGraduate-process-lead>.body>.text,
.c-card.-midCareer-process-lead>.body>.text {
font-size: var(--font-15);
line-height: 2.25;
text-align: justify;
word-break: break-all
}
@media(min-width: 768px) {
.c-card.-newGraduate-process-lead>.body>.text,
.c-card.-midCareer-process-lead>.body>.text {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto
}
}
@media(min-width: 768px) {
.c-card.-newGraduate-person,
.c-card.-midCareer-person {
flex-direction: row
}
}
@media(min-width: 768px) {
.c-card.-newGraduate-person>.media,
.c-card.-midCareer-person>.media {
flex: 0 0 auto;
width: 70%
}
}
.c-card.-newGraduate-person>.body,
.c-card.-midCareer-person>.body {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(19px, 2.2058823529vw, 30px) clamp(13px, 1.4705882353vw, 20px);
background: var(--color-blue);
text-align: center;
color: var(--color-white)
}
.c-card.-newGraduate-person>.body>.action,
.c-card.-midCareer-person>.body>.action {
margin-top: clamp(13px, 1.4705882353vw, 20px)
}
.c-drawer-btn {
--c-drawer-btn-gap: 8px;
--c-drawer-btn-width: 67px;
--c-drawer-btn-height: 67px;
--c-drawer-btn-background: var(--color-white);
--c-drawer-btn-border: none;
--c-drawer-btn-border-radius: 0;
--c-drawer-btn-text-font-weight: bold;
--c-drawer-btn-text-font-size: 12px;
--c-drawer-btn-text-font-family: var(--font-serif);
--c-drawer-btn-text-tracking: inherit;
--c-drawer-btn-text-color: var(--color-black)
}
.c-drawer-btn {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--c-drawer-btn-gap);
width: var(--c-drawer-btn-width);
height: var(--c-drawer-btn-height);
background: var(--c-drawer-btn-background);
border: var(--c-drawer-btn-border);
border-radius: var(--c-drawer-btn-border-radius);
line-height: 1;
text-align: center;
vertical-align: middle;
cursor: pointer;
top: -7px;
}
.c-drawer-btn>.text {
font-weight: var(--c-drawer-btn-text-font-weight);
font-size: var(--c-drawer-btn-text-font-size);
font-family: var(--c-drawer-btn-text-font-family);
letter-spacing: var(--c-drawer-btn-text-tracking);
text-indent: var(--c-drawer-btn-text-tracking);
color: var(--c-drawer-btn-text-color)
}
.c-drawer-btn.-row {
flex-direction: row;
text-align: left
}
.c-drawer {
--c-drawer-z-index: 500;
--c-drawer-duration: .75s;
--c-drawer-easing: cubic-bezier(.43, .01, .08, 1);
--c-drawer-scrollbar-color: var(--color-black);
--c-drawer-scrollbar-weight: 3px;
--c-drawer-content-background: var(--color-blue-gradient);
--c-drawer-content-box-shadow: box-shadow(0, 0, 5px, rgba(#000, .25));
--c-drawer-back-background: rgba(0, 0, 0, .5)
}
.c-drawer {
z-index: var(--c-drawer-z-index);
opacity: 0;
visibility: hidden;
position: relative;
display: block;
transition-property: opacity, visibility;
transition-duration: calc(var(--c-drawer-duration)*.625);
transition-timing-function: var(--drawer-easing)
}
.c-drawer>.content {
z-index: 1;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: var(--c-drawer-content-background);
box-shadow: var(--c-drawer-content-box-shadow);
transition: transform calc(var(--c-drawer-duration)*.625) var(--c-drawer-easing);
overscroll-behavior-y: contain;
scrollbar-width: thin;
scrollbar-color: var(--c-drawer-scrollbar-color) rgba(0, 0, 0, 0)
}
.c-drawer>.content::-webkit-scrollbar {
width: var(--c-drawer-scrollbar-weight)
}
.c-drawer>.content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0)
}
.c-drawer>.content::-webkit-scrollbar-thumb {
background: var(--c-drawer-scrollbar-color);
border-radius: var(--c-drawer-scrollbar-weight)
}
.c-drawer>.back {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: var(--c-drawer-back-background);
cursor: default
}
.c-drawer>.content.-top {
overflow: visible;
bottom: auto;
transform: translate(0, -100%)
}
.c-drawer>.content.-right {
left: auto;
width: auto;
min-height: 100%;
transform: translate(100%, 0)
}
.c-drawer>.content.-bottom {
overflow: visible;
top: auto;
transform: translate(0, 100%)
}
.c-drawer>.content.-left {
right: auto;
width: auto;
min-height: 100%;
transform: translate(-100%, 0)
}
.c-drawer[aria-hidden=false] {
opacity: 1;
visibility: visible;
transition-duration: var(--c-drawer-duration)
}
.c-drawer[aria-hidden=false]>.content {
transform: translate(0, 0);
transition-duration: var(--c-drawer-duration)
}
.c-embed {
--c-embed-aspect-ratio: 16 / 9
}
.c-embed {
position: relative;
display: block;
width: 100%;
padding: 0
}
.c-embed::before {
content: "";
display: block;
aspect-ratio: var(--c-embed-aspect-ratio)
}
.c-embed>.item,
.c-embed>iframe,
.c-embed>embed,
.c-embed>video,
.c-embed>object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none
}
.c-embed.-wide::before {
--c-embed-aspect-ratio: 21 / 9
}
.c-embed.-narrow::before {
--c-embed-aspect-ratio: 4 / 3
}
.c-embed.-square::before {
--c-embed-aspect-ratio: 1 / 1
}
.c-hamburger {
--c-hamburger-width: 16px;
--c-hamburger-weight: 2px;
--c-hamburger-space: 4px;
--c-hamburger-color: var(--color-black);
--c-hamburger-duration: .5s;
--c-hamburger-easing: ease;
--c-hamburger-rotate: 30deg
}
.c-hamburger {
display: flex;
flex-direction: column;
gap: var(--c-hamburger-space)
}
.c-hamburger>.bar {
width: var(--c-hamburger-width);
height: var(--c-hamburger-weight);
background: var(--c-hamburger-color)
}
.c-hamburger>.bar:nth-child(1) {
animation: hamburger-bar1 var(--c-hamburger-duration) var(--c-hamburger-easing) forwards
}
.c-hamburger>.bar:nth-child(2) {
animation: hamburger-bar2 var(--c-hamburger-duration) var(--c-hamburger-easing) forwards
}
.c-hamburger>.bar:nth-child(3) {
animation: hamburger-bar3 var(--c-hamburger-duration) var(--c-hamburger-easing) forwards
}
[aria-expanded=true] .c-hamburger>.bar:nth-child(1),
.c-hamburger[aria-expanded=true]>.bar:nth-child(1) {
animation: hamburger-bar1-active var(--c-hamburger-duration) var(--c-hamburger-easing) forwards
}
[aria-expanded=true] .c-hamburger>.bar:nth-child(2),
.c-hamburger[aria-expanded=true]>.bar:nth-child(2) {
animation: hamburger-bar2-active var(--c-hamburger-duration) var(--c-hamburger-easing) forwards
}
[aria-expanded=true] .c-hamburger>.bar:nth-child(3),
.c-hamburger[aria-expanded=true]>.bar:nth-child(3) {
animation: hamburger-bar3-active var(--c-hamburger-duration) var(--c-hamburger-easing) forwards
}
@keyframes hamburger-bar1 {
0% {
transform: translateY(calc(var(--c-hamburger-weight) + var(--c-hamburger-space))) rotate(calc(var(--c-hamburger-rotate) * -1))
}
50% {
transform: translateY(calc(var(--c-hamburger-weight) + var(--c-hamburger-space))) rotate(0)
}
100% {
transform: translateY(0) rotate(0)
}
}
@keyframes hamburger-bar1-active {
0% {
transform: translateY(0) rotate(0)
}
50% {
transform: translateY(calc(var(--c-hamburger-weight, 2px) + var(--c-hamburger-space, 5px))) rotate(0)
}
100% {
transform: translateY(calc(var(--c-hamburger-weight, 2px) + var(--c-hamburger-space, 5px))) rotate(calc(var(--c-hamburger-rotate, 45deg) * -1))
}
}
@keyframes hamburger-bar2 {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes hamburger-bar2-active {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes hamburger-bar3 {
0% {
transform: translateY(calc((var(--c-hamburger-weight) + var(--c-hamburger-space, 5px)) * -1)) rotate(var(--c-hamburger-rotate))
}
50% {
transform: translateY(calc((var(--c-hamburger-weight) + var(--c-hamburger-space, 5px)) * -1)) rotate(0)
}
100% {
transform: translateY(0) rotate(0)
}
}
@keyframes hamburger-bar3-active {
0% {
transform: translateY(0) rotate(0)
}
50% {
transform: translateY(calc((var(--c-hamburger-weight) + var(--c-hamburger-space)) * -1)) rotate(0)
}
100% {
transform: translateY(calc((var(--c-hamburger-weight) + var(--c-hamburger-space)) * -1)) rotate(var(--c-hamburger-rotate))
}
}
.c-heading {
position: relative;
font: inherit;
line-height: 1
}
.c-heading.-typeB,
.c-heading.-typeA {
font-size: var(--font-20);
line-height: 1.25
}
[data-text].c-heading.-typeB::before,
.c-heading.-typeA[data-text]::before {
content: attr(data-text);
display: block;
width: 100%;
margin-bottom: .25em;
font-weight: normal;
font-size: var(--font-40);
line-height: 1.125;
letter-spacing: .075em
}
.c-heading.-typeB>span,
.c-heading.-typeA>span {
display: flex;
align-items: center;
gap: .375em
}
.c-heading.-typeB>span::before,
.c-heading.-typeA>span::before {
content: "";
flex: 0 0 auto;
display: inline-block;
width: .625em;
border-top: 1px solid currentColor
}
.-center.c-heading.-typeB::before,
.c-heading.-typeA.-center::before {
text-align: center
}
.-center.c-heading.-typeB>span,
.c-heading.-typeA.-center>span {
justify-content: center
}
.c-heading.-typeB {
width: -moz-fit-content;
width: fit-content;
min-width: clamp(313px, 36.7647058824vw, 500px);
padding: clamp(13px, 1.4705882353vw, 20px) clamp(25px, 2.9411764706vw, 40px);
background: var(--color-white);
font-size: var(--font-16);
box-shadow: 4px 4px 2px rgba(0, 0, 0, .15)
}
@media(min-width: 768px) {
.c-heading.-typeB {
min-width: clamp(406px, 47.7941176471vw, 650px);
padding: clamp(28px, 3.3088235294vw, 45px) clamp(50px, 5.8823529412vw, 80px);
font-size: var(--font-20)
}
}
.c-heading.-typeB[data-text]::before {
font-size: var(--font-30);
letter-spacing: .05em
}
@media(min-width: 768px) {
.c-heading.-typeB[data-text]::before {
font-size: var(--font-40);
letter-spacing: inherit
}
}
.c-heading.-typeB.-blue {
background: var(--color-blue);
color: var(--color-white)
}
.c-heading.-typeC {
width: -moz-fit-content;
width: fit-content;
padding: clamp(13px, 1.4705882353vw, 20px) clamp(25px, 2.9411764706vw, 40px);
background: var(--color-black-light);
font-weight: bold;
font-size: var(--font-23);
line-height: 1.25;
color: var(--color-white);
box-shadow: 4px 4px 2px rgba(0, 0, 0, .15)
}
@media(min-width: 768px) {
.c-heading.-typeC {
padding: clamp(9px, 1.1029411765vw, 15px) clamp(50px, 5.8823529412vw, 80px);
font-size: var(--font-33)
}
}
.c-heading.-singleJob-contact,
.c-heading.-typeD {
font-weight: bold;
font-size: var(--font-25);
line-height: 1.375;
text-align: center
}
[data-text].c-heading.-singleJob-contact::before,
.c-heading.-typeD[data-text]::before {
opacity: .2;
content: attr(data-text);
position: absolute;
top: 0;
left: 50%;
font: normal var(--font-50)/1 var(--font-en);
color: var(--color-blue);
white-space: nowrap;
transform: translate(-50%, -50%)
}
.c-heading.-typeE {
padding: .3125em 0 .3125em .75em;
border-left: 2px solid currentColor;
font-weight: bold;
font-size: var(--font-14);
line-height: 1.5;
color: var(--color-blue)
}
@media(min-width: 768px) {
.c-heading.-typeE {
border-width: 3px;
font-size: var(--font-20)
}
}
.c-heading.-typeF {
background: var(--color-blue);
color: var(--color-white);
font-weight: bold;
font-size: var(--font-25);
padding: .625em;
text-align: center
}
.c-heading.-typeF.-gray {
background: var(--color-gray)
}
.c-heading.-typeG {
font-weight: normal;
font-size: var(--font-40);
line-height: 1.125;
letter-spacing: .075em
}
.c-heading.-singleJob-contact {
font-size: var(--font-20)
}
.c-heading.-singleJob-contact[data-text]::before {
font-size: var(--font-40)
}
.c-icon {
--c-icon-size: 1em;
--c-icon-color: currentColor
}
.c-icon {
display: inline-block;
width: var(--c-icon-size);
height: var(--c-icon-size);
background-color: var(--c-icon-color);
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
vertical-align: baseline
}
.c-icon.-block {
display: block
}
.c-icon.-arrow-right {
-webkit-mask-image: var(--icon-arrow-right);
mask-image: var(--icon-arrow-right)
}
.c-icon.-check {
-webkit-mask-image: var(--icon-check);
mask-image: var(--icon-check)
}
.c-icon.-plus {
-webkit-mask-image: var(--icon-plus);
mask-image: var(--icon-plus)
}
.c-icon.-tel {
-webkit-mask-image: var(--icon-tel);
mask-image: var(--icon-tel)
}
.c-icon.-mail {
-webkit-mask-image: var(--icon-mail);
mask-image: var(--icon-mail)
}
.c-icon.-new-window {
-webkit-mask-image: var(--icon-new-window);
mask-image: var(--icon-new-window)
}
.c-list {
--c-list-gap: 0;
--c-list-padding-left: 1.25em;
--c-list-font-size: inherit;
--c-list-line-height: inherit
}
.c-list {
display: flex;
flex-direction: column;
gap: var(--c-list-gap);
font-size: var(--c-list-font-size);
line-height: var(--c-list-line-height);
padding-left: var(--c-list-padding-left);
text-align: justify;
word-break: break-all
}
.c-list.-disc {
list-style: disc
}
.c-list.-circle {
list-style: circle
}
.c-list.-square {
list-style: square
}
.c-list.-decimal {
list-style: decimal
}
.c-list.-custom {
padding-left: calc(var(--c-list-padding-left)*1.375)
}
.c-list.-custom>li {
position: relative
}
.c-list.-custom>li::before {
content: attr(data-marker);
width: 1em;
height: 1em;
position: absolute;
left: calc(var(--c-list-padding-left)*-1.375)
}
.c-list.-singleJob-contact-tel {
--c-list-gap: .25em;
--c-list-font-size: var(--font-12);
--c-list-line-height: 1.5;
letter-spacing: 0
}
.c-loader {
--c-loader-z-index: 1000;
--c-loader-background: var(--color-white)
}
.c-loader {
z-index: var(--c-loader-z-index);
opacity: 1;
visibility: visible;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--c-loader-background)
}
.c-row {
--c-row-gutter-x: 0;
--c-row-gutter-y: 0
}
.c-row {
display: flex;
flex-wrap: wrap;
margin: calc(var(--c-row-gutter-y)/2*-1) calc(var(--c-row-gutter-x)/2*-1);
padding: 0;
list-style: none
}
.c-row>.col {
flex: 1 1 0%;
display: flex;
flex-direction: column;
padding: calc(var(--c-row-gutter-y, 0)/2) calc(var(--c-row-gutter-x, 0)/2)
}
.c-row.-center {
justify-content: center
}
.c-row.-right {
justify-content: flex-end
}
.c-row.-middle {
align-items: center
}
.c-row.-bottom {
align-items: flex-end
}
.c-row.-auto>.col {
flex: 0 0 auto
}
.c-row.-one>.col {
flex-basis: 100%;
max-width: 100%
}
.c-row.-two>.col {
flex-basis: 50%;
max-width: 50%
}
.c-row.-three>.col {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row.-four>.col {
flex-basis: 25%;
max-width: 25%
}
.c-row.-five>.col {
flex-basis: 20%;
max-width: 20%
}
.c-row.-six>.col {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row.-seven>.col {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%
}
.c-row.-eight>.col {
flex-basis: 12.5%;
max-width: 12.5%
}
.c-row.-nine>.col {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%
}
.c-row.-ten>.col {
flex-basis: 10%;
max-width: 10%
}
.c-row.-eleven>.col {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%
}
.c-row.-twelve>.col {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%
}
@media(min-width: 560px) {
.c-row.-sm-left {
justify-content: flex-start
}
.c-row.-sm-center {
justify-content: center
}
.c-row.-sm-right {
justify-content: flex-end
}
.c-row.-sm-top {
align-items: flex-start
}
.c-row.-sm-middle {
align-items: center
}
.c-row.-sm-bottom {
align-items: flex-end
}
.c-row.-sm-auto>.col {
flex: 0 0 auto;
max-width: none
}
.c-row.-sm-one>.col {
flex-basis: 100%;
max-width: 100%
}
.c-row.-sm-two>.col {
flex-basis: 50%;
max-width: 50%
}
.c-row.-sm-three>.col {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row.-sm-four>.col {
flex-basis: 25%;
max-width: 25%
}
.c-row.-sm-five>.col {
flex-basis: 20%;
max-width: 20%
}
.c-row.-sm-six>.col {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row.-sm-seven>.col {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%
}
.c-row.-sm-eight>.col {
flex-basis: 12.5%;
max-width: 12.5%
}
.c-row.-sm-nine>.col {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%
}
.c-row.-sm-ten>.col {
flex-basis: 10%;
max-width: 10%
}
.c-row.-sm-eleven>.col {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%
}
.c-row.-sm-twelve>.col {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%
}
}
@media(min-width: 768px) {
.c-row.-md-left {
justify-content: flex-start
}
.c-row.-md-center {
justify-content: center
}
.c-row.-md-right {
justify-content: flex-end
}
.c-row.-md-top {
align-items: flex-start
}
.c-row.-md-middle {
align-items: center
}
.c-row.-md-bottom {
align-items: flex-end
}
.c-row.-md-auto>.col {
flex: 0 0 auto;
max-width: none
}
.c-row.-md-one>.col {
flex-basis: 100%;
max-width: 100%
}
.c-row.-md-two>.col {
flex-basis: 50%;
max-width: 50%
}
.c-row.-md-three>.col {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row.-md-four>.col {
flex-basis: 25%;
max-width: 25%
}
.c-row.-md-five>.col {
flex-basis: 20%;
max-width: 20%
}
.c-row.-md-six>.col {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row.-md-seven>.col {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%
}
.c-row.-md-eight>.col {
flex-basis: 12.5%;
max-width: 12.5%
}
.c-row.-md-nine>.col {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%
}
.c-row.-md-ten>.col {
flex-basis: 10%;
max-width: 10%
}
.c-row.-md-eleven>.col {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%
}
.c-row.-md-twelve>.col {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%
}
}
@media(min-width: 960px) {
.c-row.-lg-left {
justify-content: flex-start
}
.c-row.-lg-center {
justify-content: center
}
.c-row.-lg-right {
justify-content: flex-end
}
.c-row.-lg-top {
align-items: flex-start
}
.c-row.-lg-middle {
align-items: center
}
.c-row.-lg-bottom {
align-items: flex-end
}
.c-row.-lg-auto>.col {
flex: 0 0 auto;
max-width: none
}
.c-row.-lg-one>.col {
flex-basis: 100%;
max-width: 100%
}
.c-row.-lg-two>.col {
flex-basis: 50%;
max-width: 50%
}
.c-row.-lg-three>.col {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row.-lg-four>.col {
flex-basis: 25%;
max-width: 25%
}
.c-row.-lg-five>.col {
flex-basis: 20%;
max-width: 20%
}
.c-row.-lg-six>.col {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row.-lg-seven>.col {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%
}
.c-row.-lg-eight>.col {
flex-basis: 12.5%;
max-width: 12.5%
}
.c-row.-lg-nine>.col {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%
}
.c-row.-lg-ten>.col {
flex-basis: 10%;
max-width: 10%
}
.c-row.-lg-eleven>.col {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%
}
.c-row.-lg-twelve>.col {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%
}
}
@media(min-width: 1200px) {
.c-row.-xl-left {
justify-content: flex-start
}
.c-row.-xl-center {
justify-content: center
}
.c-row.-xl-right {
justify-content: flex-end
}
.c-row.-xl-top {
align-items: flex-start
}
.c-row.-xl-middle {
align-items: center
}
.c-row.-xl-bottom {
align-items: flex-end
}
.c-row.-xl-auto>.col {
flex: 0 0 auto;
max-width: none
}
.c-row.-xl-one>.col {
flex-basis: 100%;
max-width: 100%
}
.c-row.-xl-two>.col {
flex-basis: 50%;
max-width: 50%
}
.c-row.-xl-three>.col {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row.-xl-four>.col {
flex-basis: 25%;
max-width: 25%
}
.c-row.-xl-five>.col {
flex-basis: 20%;
max-width: 20%
}
.c-row.-xl-six>.col {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row.-xl-seven>.col {
flex-basis: 14.2857142857%;
max-width: 14.2857142857%
}
.c-row.-xl-eight>.col {
flex-basis: 12.5%;
max-width: 12.5%
}
.c-row.-xl-nine>.col {
flex-basis: 11.1111111111%;
max-width: 11.1111111111%
}
.c-row.-xl-ten>.col {
flex-basis: 10%;
max-width: 10%
}
.c-row.-xl-eleven>.col {
flex-basis: 9.0909090909%;
max-width: 9.0909090909%
}
.c-row.-xl-twelve>.col {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%
}
}
.c-row>.col.-auto {
flex: 0 0 auto
}
.c-row>.col.-one {
flex-basis: 8.3333333333;
max-width: 8.3333333333%
}
.c-row>.col.-two {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row>.col.-three {
flex-basis: 25%;
max-width: 25%
}
.c-row>.col.-four {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row>.col.-five {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%
}
.c-row>.col.-six {
flex-basis: 50%;
max-width: 50%
}
.c-row>.col.-seven {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%
}
.c-row>.col.-eight {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%
}
.c-row>.col.-nine {
flex-basis: 75%;
max-width: 75%
}
.c-row>.col.-ten {
flex-basis: 83.3333333333%;
max-width: 83.3333333333
}
.c-row>.col.-eleven {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%
}
.c-row>.col.-twelve {
flex-basis: 100%;
max-width: 100%
}
@media(min-width: 560px) {
.c-row>.col.-sm-auto {
flex: 0 0 auto
}
.c-row>.col.-sm-one {
flex-basis: 8.3333333333;
max-width: 8.3333333333%
}
.c-row>.col.-sm-two {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row>.col.-sm-three {
flex-basis: 25%;
max-width: 25%
}
.c-row>.col.-sm-four {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row>.col.-sm-five {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%
}
.c-row>.col.-sm-six {
flex-basis: 50%;
max-width: 50%
}
.c-row>.col.-sm-seven {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%
}
.c-row>.col.-sm-eight {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%
}
.c-row>.col.-sm-nine {
flex-basis: 75%;
max-width: 75%
}
.c-row>.col.-sm-ten {
flex-basis: 83.3333333333%;
max-width: 83.3333333333
}
.c-row>.col.-sm-eleven {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%
}
.c-row>.col.-sm-twelve {
flex-basis: 100%;
max-width: 100%
}
}
@media(min-width: 768px) {
.c-row>.col.-md-auto {
flex: 0 0 auto
}
.c-row>.col.-md-one {
flex-basis: 8.3333333333;
max-width: 8.3333333333%
}
.c-row>.col.-md-two {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row>.col.-md-three {
flex-basis: 25%;
max-width: 25%
}
.c-row>.col.-md-four {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row>.col.-md-five {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%
}
.c-row>.col.-md-six {
flex-basis: 50%;
max-width: 50%
}
.c-row>.col.-md-seven {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%
}
.c-row>.col.-md-eight {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%
}
.c-row>.col.-md-nine {
flex-basis: 75%;
max-width: 75%
}
.c-row>.col.-md-ten {
flex-basis: 83.3333333333%;
max-width: 83.3333333333
}
.c-row>.col.-md-eleven {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%
}
.c-row>.col.-md-twelve {
flex-basis: 100%;
max-width: 100%
}
}
@media(min-width: 960px) {
.c-row>.col.-lg-auto {
flex: 0 0 auto
}
.c-row>.col.-lg-one {
flex-basis: 8.3333333333;
max-width: 8.3333333333%
}
.c-row>.col.-lg-two {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row>.col.-lg-three {
flex-basis: 25%;
max-width: 25%
}
.c-row>.col.-lg-four {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row>.col.-lg-five {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%
}
.c-row>.col.-lg-six {
flex-basis: 50%;
max-width: 50%
}
.c-row>.col.-lg-seven {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%
}
.c-row>.col.-lg-eight {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%
}
.c-row>.col.-lg-nine {
flex-basis: 75%;
max-width: 75%
}
.c-row>.col.-lg-ten {
flex-basis: 83.3333333333%;
max-width: 83.3333333333
}
.c-row>.col.-lg-eleven {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%
}
.c-row>.col.-lg-twelve {
flex-basis: 100%;
max-width: 100%
}
}
@media(min-width: 1200px) {
.c-row>.col.-xl-auto {
flex: 0 0 auto
}
.c-row>.col.-xl-one {
flex-basis: 8.3333333333;
max-width: 8.3333333333%
}
.c-row>.col.-xl-two {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%
}
.c-row>.col.-xl-three {
flex-basis: 25%;
max-width: 25%
}
.c-row>.col.-xl-four {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%
}
.c-row>.col.-xl-five {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%
}
.c-row>.col.-xl-six {
flex-basis: 50%;
max-width: 50%
}
.c-row>.col.-xl-seven {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%
}
.c-row>.col.-xl-eight {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%
}
.c-row>.col.-xl-nine {
flex-basis: 75%;
max-width: 75%
}
.c-row>.col.-xl-ten {
flex-basis: 83.3333333333%;
max-width: 83.3333333333
}
.c-row>.col.-xl-eleven {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%
}
.c-row>.col.-xl-twelve {
flex-basis: 100%;
max-width: 100%
}
}
.c-row>.col.-order-1 {
order: 1
}
.c-row>.col.-order-2 {
order: 2
}
.c-row>.col.-order-3 {
order: 3
}
.c-row>.col.-order-4 {
order: 4
}
.c-row>.col.-order-5 {
order: 5
}
.c-row>.col.-order-6 {
order: 6
}
.c-row>.col.-order-7 {
order: 7
}
.c-row>.col.-order-8 {
order: 8
}
.c-row>.col.-order-9 {
order: 9
}
.c-row>.col.-order-10 {
order: 10
}
.c-row>.col.-order-11 {
order: 11
}
.c-row>.col.-order-12 {
order: 12
}
@media(min-width: 560px) {
.c-row>.col.-order-sm-1 {
order: 1
}
.c-row>.col.-order-sm-2 {
order: 2
}
.c-row>.col.-order-sm-3 {
order: 3
}
.c-row>.col.-order-sm-4 {
order: 4
}
.c-row>.col.-order-sm-5 {
order: 5
}
.c-row>.col.-order-sm-6 {
order: 6
}
.c-row>.col.-order-sm-7 {
order: 7
}
.c-row>.col.-order-sm-8 {
order: 8
}
.c-row>.col.-order-sm-9 {
order: 9
}
.c-row>.col.-order-sm-10 {
order: 10
}
.c-row>.col.-order-sm-11 {
order: 11
}
.c-row>.col.-order-sm-12 {
order: 12
}
}
@media(min-width: 768px) {
.c-row>.col.-order-md-1 {
order: 1
}
.c-row>.col.-order-md-2 {
order: 2
}
.c-row>.col.-order-md-3 {
order: 3
}
.c-row>.col.-order-md-4 {
order: 4
}
.c-row>.col.-order-md-5 {
order: 5
}
.c-row>.col.-order-md-6 {
order: 6
}
.c-row>.col.-order-md-7 {
order: 7
}
.c-row>.col.-order-md-8 {
order: 8
}
.c-row>.col.-order-md-9 {
order: 9
}
.c-row>.col.-order-md-10 {
order: 10
}
.c-row>.col.-order-md-11 {
order: 11
}
.c-row>.col.-order-md-12 {
order: 12
}
}
@media(min-width: 960px) {
.c-row>.col.-order-lg-1 {
order: 1
}
.c-row>.col.-order-lg-2 {
order: 2
}
.c-row>.col.-order-lg-3 {
order: 3
}
.c-row>.col.-order-lg-4 {
order: 4
}
.c-row>.col.-order-lg-5 {
order: 5
}
.c-row>.col.-order-lg-6 {
order: 6
}
.c-row>.col.-order-lg-7 {
order: 7
}
.c-row>.col.-order-lg-8 {
order: 8
}
.c-row>.col.-order-lg-9 {
order: 9
}
.c-row>.col.-order-lg-10 {
order: 10
}
.c-row>.col.-order-lg-11 {
order: 11
}
.c-row>.col.-order-lg-12 {
order: 12
}
}
@media(min-width: 1200px) {
.c-row>.col.-order-xl-1 {
order: 1
}
.c-row>.col.-order-xl-2 {
order: 2
}
.c-row>.col.-order-xl-3 {
order: 3
}
.c-row>.col.-order-xl-4 {
order: 4
}
.c-row>.col.-order-xl-5 {
order: 5
}
.c-row>.col.-order-xl-6 {
order: 6
}
.c-row>.col.-order-xl-7 {
order: 7
}
.c-row>.col.-order-xl-8 {
order: 8
}
.c-row>.col.-order-xl-9 {
order: 9
}
.c-row>.col.-order-xl-10 {
order: 10
}
.c-row>.col.-order-xl-11 {
order: 11
}
.c-row>.col.-order-xl-12 {
order: 12
}
}
.c-row.-site-action {
--c-row-gutter-x: clamp(19px, 2.2058823529vw, 30px);
--c-row-gutter-y: clamp(19px, 2.2058823529vw, 30px)
}
.c-row.-site-scene {
--c-row-gutter-x: clamp(16px, 1.9117647059vw, 26px);
--c-row-gutter-y: clamp(16px, 1.9117647059vw, 26px)
}
.c-row.-home-explore {
--c-row-gutter-x: 0px;
--c-row-gutter-y: 0px
}
.c-row.-benefit-wlb {
--c-row-gutter-x: clamp(22px, 2.5735294118vw, 35px);
--c-row-gutter-y: clamp(31px, 3.6764705882vw, 50px)
}
@media(min-width: 960px) {
.c-row.-benefit-wlb {
--c-row-gutter-x: 0px;
--c-row-gutter-y: 0px
}
}
.c-row.-benefit-skillup {
--c-row-gutter-x: clamp(22px, 2.5735294118vw, 35px);
--c-row-gutter-y: clamp(22px, 2.5735294118vw, 35px)
}
.c-row.-benefit-communication {
--c-row-gutter-x: clamp(22px, 2.5735294118vw, 35px);
--c-row-gutter-y: clamp(22px, 2.5735294118vw, 35px)
}
.c-row.-benefit-data {
--c-row-gutter-x: clamp(22px, 2.5735294118vw, 35px);
--c-row-gutter-y: clamp(22px, 2.5735294118vw, 35px)
}
.c-row.-benefit-gallery {
--c-row-gutter-x: clamp(8px, 0.8823529412vw, 12px);
--c-row-gutter-y: clamp(8px, 0.8823529412vw, 12px)
}
.c-row.-archiveStory,
.c-row.-singleStory-archive {
--c-row-gutter-x: 0px;
--c-row-gutter-y: clamp(9px, 1.8382352941vw, 25px);
padding-right: clamp(9px, 1.8382352941vw, 25px)
}
.c-row.-archiveJob-list,
.c-row.-searchJob-result-list {
--c-row-gutter-x: clamp(19px, 2.2058823529vw, 30px);
--c-row-gutter-y: clamp(19px, 2.2058823529vw, 30px)
}
.c-row.-singleJob-contact {
--c-row-gutter-x: clamp(19px, 2.2058823529vw, 30px);
--c-row-gutter-y: clamp(19px, 2.2058823529vw, 30px)
}
.c-row.-newGraduate-explore {
--c-row-gutter-x: 0px;
--c-row-gutter-y: 0px
}
.c-row.-contact-back {
--c-row-gutter-x: clamp(19px, 2.2058823529vw, 30px);
--c-row-gutter-y: clamp(19px, 2.2058823529vw, 30px)
}
.c-spinner {
--c-spinner-size: 25px;
--c-spinner-weight: 2px;
--c-spinner-bar-color: var(--color-black-light);
--c-spinner-track-color: var(--color-gray-pale-b)
}
.c-spinner {
opacity: 0;
display: block;
width: var(--c-spinner-size);
height: var(--c-spinner-size);
border-width: var(--c-spinner-weight);
border-style: solid;
border-color: var(--c-spinner-track-color);
border-top-color: var(--c-spinner-bar-color);
border-radius: 50%;
transition: opacity .5s 1s ease;
animation: c-spinner 1s infinite linear
}
.c-spinner.-is-ready {
opacity: 1
}
@keyframes c-spinner {
100% {
transform: rotate(360deg)
}
}
.c-contentNone {
background: var(--color-gray-pale-b);
padding: clamp(63px, 7.3529411765vw, 100px) clamp(19px, 2.2058823529vw, 30px)
}
.c-contentNone>.text {
font-size: var(--font-15);
line-height: 1.75;
text-align: center;
color: var(--color-gray)
}
.site-drawer {
display: flex;
flex-direction: column;
justify-content: center;
min-width: clamp(313px, 36.7647058824vw, 500px);
min-height: 100%;
padding: 100px clamp(31px, 3.6764705882vw, 50px) clamp(31px, 3.6764705882vw, 50px);
color: var(--color-white)
}
.site-drawer>.nav>.site-drawer-contactList {
margin-top: clamp(50px, 5.8823529412vw, 80px)
}
.site-drawer-navList,
.site-drawer-entryList {
font-size: var(--font-18)
}
.site-drawer-entryList {
margin-bottom: 2em;
}
.site-drawer-navList>li+li {
margin-top: 2em;
}
.site-drawer-navList>li>a {
position: relative;
padding-left: 1.625em
}
.site-drawer-navList>li>a::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: .875em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/contain;
mask: var(--icon-arrow-right) no-repeat center/contain;
transform: translateY(-50%)
}
.site-drawer-entryList li {
margin-left:1.5em;
margin-top: clamp(9px, 1.1029411765vw, 15px);
}
.site-wrap {
overflow: hidden;
position: relative;
min-height: 100vh;
padding-bottom: 67px
}
@media(min-width: 560px) {
.site-wrap {
padding-bottom: 0
}
}
.site-header {
z-index: 100;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
.site-header>.brand {
padding-left: clamp(31px, 3.6764705882vw, 50px)
}
.site-header>.brand>a>img {
width: clamp(228px, 19.1176470588vw, 260px)
}
.site-header>.nav {
display: flex
}
.site-header>.nav>.entry {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}
@media(min-width: 560px) {
.site-header>.nav>.entry {
position: static;
width: clamp(109px, 9.1911764706vw, 125px)
}
}
.hamburger {
z-index: 501;
position: relative
}
.site-action {
background: var(--color-blue) url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/site/action-bg.jpg) no-repeat center/cover
}
.site-action>.inner {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.8382352941vw, 25px);
max-width: var(--container-size-medium);
margin: 0 auto;
padding: clamp(31px, 3.6764705882vw, 50px) 0
}
@media(min-width: 960px) {
.site-action>.inner {
flex-direction: row;
align-items: center
}
}
@media(min-width: 960px) {
.site-action>.inner>.header {
flex: 0 1 auto;
width: 37.5%;
padding-left: clamp(16px, 1.8382352941vw, 25px)
}
}
.site-action>.inner>.header>.heading {
font-weight: bold;
font-size: var(--font-30);
line-height: 1.5;
text-align: center;
color: var(--color-white)
}
@media(min-width: 768px) {
.site-action>.inner>.header>.heading {
font-size: var(--font-40)
}
}
.site-action>.inner>.body {
flex: 1 1 0%
}
.site-search {
padding: clamp(63px, 7.3529411765vw, 100px) 0 0
}
.site-search>.inner {
max-width: var(--container-size-large);
margin: 0 auto;
padding: clamp(31px, 3.6764705882vw, 50px) clamp(16px, 1.8382352941vw, 25px);
background: var(--color-blue)
}
@media(min-width: 960px) {
.site-search>.inner {
display: flex;
align-items: center;
padding: clamp(6px, .7352941176vw, 10px)
}
}
.site-search>.inner>.content {
text-align: center
}
@media(min-width: 960px) {
.site-search>.inner>.content {
flex: 1 1 0%
}
}
.site-search>.inner>.content>.heading {
font-size: var(--font-30);
line-height: 1.5;
letter-spacing: 0;
color: var(--color-white)
}
@media(min-width: 560px) {
.site-search>.inner>.content>.heading {
font-size: var(--font-38)
}
}
.site-search>.inner>.content>.action {
margin-top: clamp(19px, 2.2058823529vw, 30px)
}
.site-search>.inner>.media {
margin-top: clamp(19px, 2.2058823529vw, 30px);
text-align: center
}
@media(min-width: 960px) {
.site-search>.inner>.media {
flex: 0 0 auto;
width: 50%;
margin-top: 0
}
}
.site-search>.inner>.media>img {
width: clamp(419px, 49.2647058824vw, 670px)
}
.site-scene {
max-width: var(--container-size-large);
margin: 0 auto;
padding: clamp(66px, 7.7205882353vw, 105px) 0 clamp(53px, 6.25vw, 85px)
}
.site-scene>.heading {
font-size: var(--font-28);
line-height: 1.625;
text-align: center
}
@media(min-width: 768px) {
.site-scene>.heading {
font-size: var(--font-40)
}
}
.site-scene>.body {
margin-top: clamp(22px, 2.5735294118vw, 35px)
}
.site-scene-item {
aspect-ratio: 436/375
}
.site-scene-item>img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.site-message {
padding: clamp(28px, 3.3088235294vw, 45px) 0 clamp(31px, 3.6764705882vw, 50px);
background: var(--color-black-light) url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/site/message-bg.jpg) no-repeat center/cover;
color: var(--color-white);
text-align: center
}
.site-message>.heading {
font-size: var(--font-13);
line-height: 1.5
}
@media(min-width: 768px) {
.site-message>.heading {
font-size: var(--font-20)
}
}
.site-message>.text {
margin: .375em 0 .5em;
font-weight: bold;
font-size: var(--font-21);
line-height: 1.75;
letter-spacing: 0
}
@media(min-width: 768px) {
.site-message>.text {
font-size: var(--font-33)
}
}
.site-message>.action>a>img {
width: clamp(124px, 12.1323529412vw, 165px)
}
.site-footer {
background: var(--color-gray-pale)
}
.site-footer>.primary {
max-width: var(--container-size-large);
margin: 0 auto;
padding: clamp(31px, 3.6764705882vw, 50px) 0
}
.site-footer>.primary>.logo {
width: clamp(163px, 19.1176470588vw, 260px);
margin: 0 auto
}
.site-footer>.primary>.nav {
display: none
}
@media(min-width: 768px) {
.site-footer>.primary>.nav {
display: flex;
justify-content: center;
gap: clamp(31px, 3.6764705882vw, 50px);
margin: clamp(25px, 2.9411764706vw, 40px) auto 0
}
}
.site-footer>.copyright {
background: var(--color-black);
padding: 1.125em;
font-size: var(--font-10);
font-family: var(--font-sans);
text-align: center;
color: var(--color-white)
}
@media(min-width: 768px) {
.site-footer>.copyright {
font-size: var(--font-13)
}
}
.site-footer-list {
font-size: var(--font-14);
font-family: var(--font-sans);
line-height: 1.25
}
.site-footer-list>li {
display: flex;
align-items: center;
gap: .25em
}
.site-footer-list>li::before {
content: "";
width: .75em;
border-top: 1px solid currentColor
}
.site-footer-list>li+li {
margin-top: 1em
}
.home-container>.intro {
z-index: 1;
position: relative
}
.home-container>.business {
background: var(--color-gray-pale-b)
}
.home-container>.business>.inner {
max-width: var(--container-size-large);
margin: 0 auto;
padding: clamp(63px, 7.3529411765vw, 100px) 0
}
@media(min-width: 768px) {
.home-container>.business>.inner {
max-width: none;
padding: 0
}
}
.home-container>.explore {
max-width: var(--container-size-large);
margin: 0 auto;
padding: clamp(63px, 7.3529411765vw, 100px) 0
}
@media(min-width: 768px) {
.home-container>.explore {
padding: clamp(28px, 3.3088235294vw, 45px) 0
}
}
.home-hero {
position: relative
}
.home-hero>.media {
overflow: hidden;
position: relative;
height: clamp(522px, 61.3970588235vw, 835px);
background: var(--color-white)
}
.home-hero>.media::before {
z-index: 1;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/home/hero-dot.png)
}
.home-hero>.media>.video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100vw;
min-height: clamp(522px, 61.3970588235vw, 835px);
transform: translate(-50%, -50%)
}
@media (max-width:767px) {
.home-hero>.media {
height: 100vw;
}
.home-hero>.media>.video {
min-width: 0;
min-height: 0;
height: 100vw;
}
}
.home-hero>.content {
z-index: 1;
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding-top: clamp(31px, 3.6764705882vw, 50px)
}
.home-hero.-is-sp>.media {
height: 100vw
}
.home-hero.-is-sp>.media>.video {
min-width: 0;
min-height: 0;
width: 100vw;
height: 100vw
}
.home-hero-content {
text-align: center
}
.home-hero-content>.heading {
font-weight: bold;
font-size: var(--font-40);
line-height: 1.375;
color: var(--color-white)
}
@media(min-width: 768px) {
.home-hero-content>.heading {
font-size: var(--font-60)
}
}
.home-hero-content>.subheading {
margin-top: clamp(28px, 3.3088235294vw, 45px);
font-family: var(--font-en);
font-size: var(--font-35);
color: var(--color-blue)
}
@media(min-width: 768px) {
.home-hero-content>.subheading {
font-size: var(--font-55)
}
}
.home-intro {
height: clamp(386px, 37.8676470588vw, 515px);
background: var(--color-black-light) url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/home/intro-bg.jpg) no-repeat center/cover
}
@media(min-width: 1200px) {
.home-intro {
background-size: clamp(1000px, 117.6470588235vw, 1600px)
}
}
.home-intro>.inner {
max-width: var(--container-size-large);
margin: 0 auto
}
.home-intro>.inner>.content {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
padding: clamp(53px, 6.25vw, 85px) clamp(31px, 3.6764705882vw, 50px) clamp(47px, 5.5147058824vw, 75px);
background: var(--color-gray-light);
color: var(--color-white);
text-align: center;
transform: translateY(clamp(-50px, -3.6764705882vw, -31px))
}
@media(min-width: 768px) {
.home-intro>.inner>.content {
padding: clamp(53px, 6.25vw, 85px) clamp(41px, 4.7794117647vw, 65px) clamp(47px, 5.5147058824vw, 75px)
}
}
.home-intro>.inner>.content>.heading {
font-size: var(--font-40);
letter-spacing: .075em
}
.home-intro>.inner>.content>.text {
margin-top: 1.375em;
font-size: var(--font-16);
line-height: 1.6875
}
.home-story {
padding: clamp(63px, 7.3529411765vw, 100px) 0;
background: var(--color-gray) url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/home/story-bg.jpg) no-repeat center/cover;
color: var(--color-white)
}
.home-story>.header {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.8382352941vw, 25px);
max-width: var(--container-size-large);
margin: 0 auto
}
@media(min-width: 768px) {
.home-story>.header {
flex-direction: row;
align-items: center
}
}
@media(min-width: 768px) {
.home-story>.header>.c-heading {
flex: 1 1 clamp(150px, 14.7058823529vw, 200px);
max-width: clamp(150px, 14.7058823529vw, 200px)
}
}
.home-story>.header>.subheading {
font-size: var(--font-15);
line-height: 1.5
}
@media(min-width: 768px) {
.home-story>.header>.subheading {
flex: 1 1 0%;
font-size: var(--font-25)
}
}
.home-story>.body {
max-width: var(--container-size-large);
margin: clamp(19px, 2.2058823529vw, 30px) auto 0
}
@media(min-width: 768px) {
.home-story>.body {
max-width: none
}
}
.home-story>.body>.list>li+li {
margin-top: clamp(25px, 2.9411764706vw, 40px)
}
.home-story>.action {
max-width: var(--container-size-large);
margin: clamp(28px, 3.3088235294vw, 45px) auto 0;
text-align: center
}
.home-business {
display: flex;
flex-direction: column
}
@media(min-width: 768px) {
.home-business {
flex-direction: row
}
}
.home-business>.media {
overflow: hidden;
position: relative;
aspect-ratio: 800/750
}
@media(min-width: 768px) {
.home-business>.media {
flex: 0 1 auto;
width: 50%;
aspect-ratio: auto
}
}
.home-business>.media>img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media(min-width: 768px) {
.home-business>.media>img {
position: absolute;
top: 0;
left: 0
}
}
.home-business>.content {
z-index: 1;
flex: 1 1 0%;
margin-top: clamp(28px, 3.3088235294vw, 45px)
}
@media(min-width: 768px) {
.home-business>.content {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 0
}
}
.home-business>.content>.inner {
text-align: center
}
@media(min-width: 768px) {
.home-business>.content>.inner {
padding: clamp(63px, 7.3529411765vw, 100px) clamp(31px, 3.6764705882vw, 50px)
}
}
@media(min-width: 960px) {
.home-business>.content>.inner {
width: -moz-fit-content;
width: fit-content;
padding: clamp(63px, 7.3529411765vw, 100px) 0
}
}
.home-business>.content>.inner>.text {
margin: 1.25em 0;
font-size: var(--font-15);
line-height: 1.75
}
.home-business>.content>.inner>.action {
margin-top: clamp(13px, 1.4705882353vw, 20px)
}
.home-business>.content>.inner>.label {
z-index: 1;
position: relative;
margin: .375em 0 -0.5em;
font-size: var(--font-58);
font-family: var(--font-en);
color: var(--color-blue);
transform: translateX(1em)
}
@media(min-width: 768px) {
.home-business>.content>.inner>.label {
transform: translateX(1.875em);
font-size: var(--font-48)
}
}
@media(min-width: 960px) {
.home-business>.content>.inner>.label {
font-size: var(--font-58)
}
}
.home-business>.content>.inner>.media>img {
width: clamp(213px, 25vw, 340px);
transform: translateX(clamp(-60px, -4.4117647059vw, -38px))
}
.home-message {
display: flex;
flex-direction: column
}
@media(min-width: 560px) {
.home-message {
flex-direction: row
}
}
.home-message>.media {
overflow: hidden;
position: relative;
aspect-ratio: 880/420
}
@media(min-width: 560px) {
.home-message>.media {
flex: 0 1 auto;
width: 50%;
aspect-ratio: auto
}
}
@media(min-width: 768px) {
.home-message>.media {
width: 55%
}
}
.home-message>.media>img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media(min-width: 560px) {
.home-message>.media>img {
position: absolute;
top: 0;
left: 0
}
}
.home-message>.content {
flex: 1 1 0%;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(63px, 7.3529411765vw, 100px) clamp(19px, 2.2058823529vw, 30px);
background: var(--color-gray-light);
text-align: center;
color: var(--color-white)
}
.home-message>.content>.text {
margin: 1.375em 0;
font-size: var(--font-15);
line-height: 1.75
}
._text-white {
color: var(--color-white) !important
}
._text-black {
color: var(--color-black) !important
}
._text-black-light {
color: var(--color-black-light) !important
}
._text-gray {
color: var(--color-gray) !important
}
._text-gray-light {
color: var(--color-gray-light) !important
}
._text-gray-light-b {
color: var(--color-gray-light-b) !important
}
._text-gray-light-c {
color: var(--color-gray-light-c) !important
}
._text-gray-pale {
color: var(--color-gray-pale) !important
}
._text-gray-pale-b {
color: var(--color-gray-pale-b) !important
}
._text-blue {
color: var(--color-blue) !important
}
._text-green {
color: var(--color-green) !important
}
._text-blue-gradient {
color: var(--color-blue-gradient) !important
}
._text-red {
color: var(--color-red) !important
}
._d-none {
display: none !important
}
._d-block {
display: block !important
}
._d-inline-block {
display: inline-block !important
}
._d-inline {
display: inline !important
}
._d-flex {
display: flex !important
}
._d-inline-flex {
display: inline-flex !important
}
@media(min-width: 560px) {
._d-sm-none {
display: none !important
}
._d-sm-block {
display: block !important
}
._d-sm-inline-block {
display: inline-block !important
}
._d-sm-inline {
display: inline !important
}
._d-sm-flex {
display: flex !important
}
._d-sm-inline-flex {
display: inline-flex !important
}
}
@media(min-width: 768px) {
._d-md-none {
display: none !important
}
._d-md-block {
display: block !important
}
._d-md-inline-block {
display: inline-block !important
}
._d-md-inline {
display: inline !important
}
._d-md-flex {
display: flex !important
}
._d-md-inline-flex {
display: inline-flex !important
}
}
@media(min-width: 960px) {
._d-lg-none {
display: none !important
}
._d-lg-block {
display: block !important
}
._d-lg-inline-block {
display: inline-block !important
}
._d-lg-inline {
display: inline !important
}
._d-lg-flex {
display: flex !important
}
._d-lg-inline-flex {
display: inline-flex !important
}
}
@media(min-width: 1200px) {
._d-xl-none {
display: none !important
}
._d-xl-block {
display: block !important
}
._d-xl-inline-block {
display: inline-block !important
}
._d-xl-inline {
display: inline !important
}
._d-xl-flex {
display: flex !important
}
._d-xl-inline-flex {
display: inline-flex !important
}
}
._text-underline {
text-decoration: underline !important
}
._text-no-underline {
text-decoration: none !important
}
._font-xsmall {
font-size: 0.75em !important
}
._font-small {
font-size: 0.875em !important
}
._font-base {
font-size: 1em !important
}
._font-large {
font-size: 1.125em !important
}
._font-xlarge {
font-size: 1.25em !important
}
._font-2xlarge {
font-size: 1.5em !important
}
.sp_no{
display: block;
}
.sp{
display: none;
}
@media (max-width:767px) {
.sp_no{
display: none;
}
.sp{
display: block;
}
}:root {
--icon-arrow-right: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M6%2014c-.26%200-.51-.1-.71-.29a.996.996%200%200%201%200-1.41L9.59%208l-4.3-4.29A.996.996%200%201%201%206.7%202.3l5%205c.19.18.3.43.3.7s-.11.52-.29.71l-5%205c-.2.19-.45.29-.71.29z%22%2F%3E%3C%2Fsvg%3E");
--icon-check: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M5.61%2011.71c.2.19.46.29.72.29.26%200%20.52-.1.72-.29L13.2%205.7c.4-.39.4-1.02%200-1.41-.4-.39-1.04-.39-1.44%200L6.33%209.6%204.24%207.56c-.4-.39-1.04-.39-1.44%200-.4.39-.4%201.02%200%201.41l2.81%202.74z%22%2F%3E%3C%2Fsvg%3E");
--icon-plus: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M14%207H9V2H7v5H2v2h5v5h2V9h5V7z%22%2F%3E%3C%2Fsvg%3E");
--icon-tel: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M6.3%206.5c-.3-.4-.1-.9.3-1.2L8%204.5c.4-.2.5-.7.3-1.1L6.6.4C6.4%200%205.9-.1%205.5.1L4%201c-1.8%201.1-3%204.1.2%209.6s6.4%206%208.2%205l1.5-.8c.4-.2.5-.7.3-1.1l-1.7-2.9c-.2-.4-.7-.5-1.1-.3l-1.5.8c-.4.2-.9.1-1.1-.3L6.3%206.5z%22%2F%3E%3C%2Fsvg%3E");
--icon-mail: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22m16%209.2-2.1-2.1L16%205.3zM2.1%207.1%200%209.2V5.3zM16%2011.2V14H0v-2.8L3.1%208%208%2012.2%2012.9%208z%22%2F%3E%3Cpath%20d%3D%22M16%202v1.7l-8%206.9-8-6.9V2z%22%2F%3E%3C%2Fsvg%3E");
--icon-new-window: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M4.25%202v9.75H14V2H4.25zm8.81%208.81H5.19V2.94h7.88v7.87z%22%2F%3E%3Cpath%20d%3D%22M2.94%2013.06V4.25H2V14h9.75v-.94H2.94z%22%2F%3E%3Cpath%20d%3D%22m7.46%209.33%202.76-2.76v1.99h.94V4.97H7.57v.94h1.99L6.79%208.67l.67.66z%22%2F%3E%3C%2Fsvg%3E");
--color-white: #fff;
--color-black: #000;
--color-black-light: #222;
--color-gray: #666;
--color-gray-light: #909090;
--color-gray-light-b: #707070;
--color-gray-light-c: #ddd;
--color-gray-pale: #f6f6f6;
--color-gray-pale-b: #eee;
--color-gray-pale-c: #F8F8F8;
--color-blue: #0086cd;
--color-blue-b: #0075C4;
--color-green: #0b6d7d;
--color-blue-gradient: linear-gradient(45deg, #0077CA 0%, #0086cd 100%);
--color-red: #c7192a;
--font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--font-serif: "Times New Roman", "Noto Serif JP", YuMincho, "Yu Mincho", "HGP明朝B", serif;
--font-en: Satisfy, cursive, sans-serif;
--transition-duration: 0.15s;
--transition-opacity: 0.65;
--container-size-xsmall: clamp(512px, 54.7794117647vw, 745px);
--container-size-small: clamp(0px, 74.2647058824vw, 1010px);
--container-size-medium: min( calc( 100% - clamp(0px, 17.6470588235vw, 240px) ), 1180px );
--container-size-large: min( calc( 100% - clamp(0px, 17.6470588235vw, 240px) ), 1360px );
--font-10: 10px;
--font-11: clamp(11px, 0.8088235294vw, 11px);
--font-12: clamp(11px, 0.8823529412vw, 12px);
--font-13: clamp(12px, 0.9558823529vw, 13px);
--font-14: clamp(13px, 1.0294117647vw, 14px);
--font-15: clamp(13px, 1.1029411765vw, 15px);
--font-16: clamp(14px, 1.1764705882vw, 16px);
--font-17: clamp(14px, 1.25vw, 17px);
--font-18: clamp(15px, 1.3235294118vw, 18px);
--font-19: clamp(16px, 1.3970588235vw, 19px);
--font-20: clamp(16px, 1.4705882353vw, 20px);
--font-21: clamp(17px, 1.5441176471vw, 21px);
--font-22: clamp(18px, 1.6176470588vw, 22px);
--font-23: clamp(18px, 1.6911764706vw, 23px);
--font-24: clamp(19px, 1.7647058824vw, 24px);
--font-25: clamp(19px, 1.8382352941vw, 25px);
--font-26: clamp(20px, 1.9117647059vw, 26px);
--font-27: clamp(21px, 1.9852941176vw, 27px);
--font-28: clamp(21px, 2.0588235294vw, 28px);
--font-29: clamp(22px, 2.1323529412vw, 29px);
--font-30: clamp(23px, 2.2058823529vw, 30px);
--font-31: clamp(23px, 2.2794117647vw, 31px);
--font-32: clamp(24px, 2.3529411765vw, 32px);
--font-33: clamp(24px, 2.4264705882vw, 33px);
--font-34: clamp(25px, 2.5vw, 34px);
--font-35: clamp(26px, 2.5735294118vw, 35px);
--font-36: clamp(26px, 2.6470588235vw, 36px);
--font-37: clamp(27px, 2.7205882353vw, 37px);
--font-38: clamp(28px, 2.7941176471vw, 38px);
--font-39: clamp(28px, 2.8676470588vw, 39px);
--font-40: clamp(29px, 2.9411764706vw, 40px);
--font-41: clamp(29px, 3.0147058824vw, 41px);
--font-42: clamp(30px, 3.0882352941vw, 42px);
--font-43: clamp(31px, 3.1617647059vw, 43px);
--font-44: clamp(31px, 3.2352941176vw, 44px);
--font-45: clamp(32px, 3.3088235294vw, 45px);
--font-46: clamp(33px, 3.3823529412vw, 46px);
--font-47: clamp(33px, 3.4558823529vw, 47px);
--font-48: clamp(34px, 3.5294117647vw, 48px);
--font-49: clamp(34px, 3.6029411765vw, 49px);
--font-50: clamp(35px, 3.6764705882vw, 50px);
--font-51: clamp(36px, 3.75vw, 51px);
--font-52: clamp(36px, 3.8235294118vw, 52px);
--font-53: clamp(37px, 3.8970588235vw, 53px);
--font-54: clamp(38px, 3.9705882353vw, 54px);
--font-55: clamp(38px, 4.0441176471vw, 55px);
--font-56: clamp(39px, 4.1176470588vw, 56px);
--font-57: clamp(39px, 4.1911764706vw, 57px);
--font-58: clamp(40px, 4.2647058824vw, 58px);
--font-59: clamp(41px, 4.3382352941vw, 59px);
--font-60: clamp(41px, 4.4117647059vw, 60px);
--font-65: clamp(44px, 4.7794117647vw, 65px);
--font-100: clamp(66px, 7.3529411765vw, 100px) ;
}
@media (max-width: 767px) {
:root {
--container-size-xsmall: 90vw;
--container-size-small: 90vw;
--container-size-medium: 90vw;
--container-size-large: 95vw;
}
}
._d-none {
display: none !important;
}
._d-block {
display: block !important;
}
._d-inline-block {
display: inline-block !important;
}
._d-inline {
display: inline !important;
}
._d-flex {
display: flex !important;
}
._d-inline-flex {
display: inline-flex !important;
}
@media (min-width: 560px) {
._d-sm-none {
display: none !important;
}
._d-sm-block {
display: block !important;
}
._d-sm-inline-block {
display: inline-block !important;
}
._d-sm-inline {
display: inline !important;
}
._d-sm-flex {
display: flex !important;
}
._d-sm-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 768px) {
._d-md-none {
display: none !important;
}
._d-md-block {
display: block !important;
}
._d-md-inline-block {
display: inline-block !important;
}
._d-md-inline {
display: inline !important;
}
._d-md-flex {
display: flex !important;
}
._d-md-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 960px) {
._d-lg-none {
display: none !important;
}
._d-lg-block {
display: block !important;
}
._d-lg-inline-block {
display: inline-block !important;
}
._d-lg-inline {
display: inline !important;
}
._d-lg-flex {
display: flex !important;
}
._d-lg-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1200px) {
._d-xl-none {
display: none !important;
}
._d-xl-block {
display: block !important;
}
._d-xl-inline-block {
display: inline-block !important;
}
._d-xl-inline {
display: inline !important;
}
._d-xl-flex {
display: flex !important;
}
._d-xl-inline-flex {
display: inline-flex !important;
}
} #page_body > .breadcrumbs{
margin-bottom: clamp(30px, 4.6511627907vw, 80px)
}
.office_kv{
background: url(//hoshinokensetsu.co.jp/wp/wp-content/themes/hoshino/img/office/office_kv.jpg);
background-position: top;
background-size: cover;
background-repeat: no-repeat;
}
.office{
background-color: var(--color-gray-pale-c);
padding: clamp(30px, 4.6511627907vw, 80px) 0 clamp(0px, 2.3255813953vw, 40px);
}
.office_marg{
padding-bottom: clamp(30px, 4.6511627907vw, 80px);
}
.office_wrap{
background-color: var(--color-white);
margin: 0 clamp(0px, 11.6279069767vw, 200px);
}
.office_flx{
display: flex;
padding: clamp(0px, 4.5930232558vw, 79px) clamp(0px, 4.6511627907vw, 80px);
}
.office_img{
width: 50%;
}
.office_info{
margin-left: clamp(0px, 2.3255813953vw, 40px);
margin-top: clamp(0px, 4.3604651163vw, 75px);
width: 50%;
}
.office_info > h3{
position: relative;
font-size: var(--font-30);
font-weight: bold;
padding-bottom: clamp(0px, 2.2674418605vw, 39px);
border-bottom: 1px solid #CECACA;
}
.office_info > h3::before{
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-blue-b);
}
.office_info--list{
font-size: var(--font-18);
margin-top: clamp(0px, 2.3255813953vw, 40px);
}
.office_info--list > div{
display: flex;
}
.office_info--list > div + div{
margin-top: clamp(9px, 1.1363636364vw, 20px);
}
.office_info--list > div > dt{
flex: 1 1 22%;
max-width: 22%;
}
.office_info--list > div > dd{
flex: 1 1 0%;
margin-left: 0;
}
.office_map{
padding: 0 clamp(0px, 4.6511627907vw, 80px) clamp(0px, 4.6511627907vw, 80px);
}
@media (max-width:767px) {
.office_wrap{
margin: 0 15px;
}
.office_flx{
flex-direction: column;
padding: 20px 10px;
}
.office_img{
width: 100%;
}
.office_img > img{
margin: 0 auto;
}
.office_info{
width: 100%;
}
} .notfound-container{
max-width: var(--container-size-medium);
margin: 0 auto;
padding: clamp(125px,14.7058823529vw,200px) 0 clamp(138px,16.1764705882vw,220px);
}
.notfound-container>.text{
text-align: center;
font-size: var(--font-15);
line-height: 2;
word-break: break-all;
}
@media (max-width:560px) {
.notfound-container>.text{
text-align: justify;
}
}
.notfound-container>.action{
margin-top: clamp(31px,3.6764705882vw,50px);
text-align: center;
}
.c-btn{
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background: rgba(0,0,0,0);
vertical-align: middle;
font: inherit;
text-decoration: none;
text-align: inherit;
line-height: 1;
white-space: nowrap;
color: inherit;
cursor: pointer;
}
.c-btn.-typeA{
justify-content: center;
gap: 0.5em;
min-width: clamp(248px,24.2647058824vw,330px);
padding: 1.5em;
background: var(--color-white);
border: 1px solid var(--color-black-light);
font-weight: bold;
font-size: var(--font-16);
letter-spacing: 0;
color: var(--color-black-light);
transition-property: opacity,background-color,border-color,color;
}
.c-btn.-typeA::after{
content: "";
width: 1em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-right) no-repeat center/contain;
mask: var(--icon-arrow-right) no-repeat center/contain;
} .sitemap{
max-width: var(--container-size-medium); margin: 0 clamp(0px, 14.5348837209vw, 250px);
padding: clamp(30px, 4.6511627907vw, 80px) 0 clamp(30px, 4.6511627907vw, 80px);
line-height: 2.2;
}
.sitemap > h2{
position: relative;
font-size: var(--font-30);
font-weight: bold;
border-bottom: 1px solid #CECACA;
}
.sitemap > h2::after{
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-blue-b);
}
@media (max-width:767px) {
.sitemap{
margin: 0 15px;
}
}
.sitemap > .sitemap_ul{
padding: 2em;
}
.sitemap ul.child{
padding-left: 2em;
} .privacy{
max-width: var(--container-size-medium); margin: 0 clamp(0px, 14.5348837209vw, 250px);
padding: clamp(30px, 4.6511627907vw, 80px) 0 clamp(30px, 4.6511627907vw, 80px);
line-height: 2.2;
}
.privacy_wrap > h2{
position: relative;
font-size: var(--font-30);
font-weight: bold;
border-bottom: 1px solid #CECACA;
margin-bottom: 0.5em;
}
.privacy_wrap > h2::after{
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-blue-b);
}
@media (max-width:767px) {
.privacy{
margin: 0 15px;
}
}
.privacy_wrap{
margin: 2em 0;
}
.privacy_wrap > p{
font-size: var(--font-16);
} .contact_inner{
max-width: var(--container-size-medium);
margin: 0 auto;
}
.contact-container {
max-width: var(--container-size-medium);
margin: 0 auto;
padding: clamp(44px, 5.8528428094vw, 70px) 0 clamp(50px, 4.6511627907vw, 80px);
}
.contact_inner > .lead {
font-size: var(--font-17);
line-height: 2;
text-align: justify;
word-break: break-all;
}
@media (min-width: 560px) {
.contact_inner > .lead {
text-align: center;
}
}
.contact_inner > .lead > .heading {
margin-bottom: 0.75em;
font-size: var(--font-21);
text-align: center;
}
.contact_inner > .lead > .heading.-error {
color: var(--color-red);
}
.contact_inner > .form {
margin-top: clamp(31px,3.6764705882vw,50px);
}
@media (min-width: 768px) {
.contact_inner > .form {
padding: clamp(47px,5.5147058824vw,75px) clamp(63px,7.3529411765vw,100px);
}
}
.contact-flow {
position: relative;
display: flex;
justify-content: space-between;
max-width: clamp(188px, 25.0836120401vw, 300px);
margin: 0 auto;
font-size: var(--font-12);
}
.contact-flow::before {
content: "";
position: absolute;
top: calc(0.4375em - 1px);
right: 2.25em;
left: 2.25em;
border-top: 2px solid var(--color-gray-light-c);
}
.contact-flow > li {
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.875em;
width: 4.5em;
text-align: center;
color: var(--color-gray-light-c);
white-space: nowrap;
}
.contact-flow > li::before {
content: "";
width: 0.875em;
height: 0.875em;
background: currentColor;
border-radius: 100%;
}
.contact-flow > li.-current {
color: var(--color-black);
}
.contact-form {
margin-top: clamp(47px, 6.27090301vw, 75px);
}
.contact-form > div + div {
margin-top: clamp(19px, 2.508361204vw, 30px);
}
.contact-form > div > dt {
font-size: var(--font-16);
line-height: 1.625;
}
.contact-form > div > dd {
flex: 1 1 0%;
margin-top: clamp(5px, 0.6688963211vw, 8px);
font-size: var(--font-15);
line-height: 1.5;
}
.contact-form > .contact_privacy {
margin-top: clamp(38px, 5.016722408vw, 60px);
margin-bottom: clamp(31px,3.6764705882vw,50px);
text-align: center;
line-height: 2;
}
.mw_wp_form_confirm .contact-form > .privacy > dd, .mw_wp_form_preview .contact-form > .privacy > dd {
display: none;
}
.contact-form > .submit > dd {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(13px, 1.6722408027vw, 20px);
}
@media (min-width: 560px) {
.contact-form > .submit > dd {
flex-direction: row-reverse;
}
}
.contact-form a {
color: var(--color-red);
text-decoration: underline;
}
.contact-form .required {
margin-left: 0.25em;
color: var(--color-red);
}
.c-form-control {
--c-form-control-border: 1px solid var(--color-gray-light);
--c-form-control-border-radius: 5px;
--c-form-control-padding: .75em 1em;
--c-form-control-background: var(--color-gray-pale);
--c-form-control-line-height: 1.625;
--c-form-control-font-size: 16px;
--c-form-control-font-color: inherit;
--c-form-control-textarea-padding: 1em;
}
@media (min-width: 768px) {
.c-form-control {
--c-form-control-padding: 1.125em;
--c-form-control-font-size: var(--font-17);
}
}
.c-form-control {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
padding: var(--c-form-control-padding, 0);
border: var(--c-form-control-border, none);
border-radius: var(--c-form-control-border-radius, 0);
background: var(--c-form-control-background, transparent);
font: inherit;
font-size: var(--c-form-control-font-size, inherit);
line-height: var(--c-form-control-line-height, inherit);
color: var(--c-form-control-font-color, inherit);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-form-control:disabled {
cursor: not-allowed;
}
textarea.c-form-control {
padding: var(--c-form-control-textarea-padding, 0);
resize: vertical;
}
select.c-form-control {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3e%3cpath fill='%23343a40' d='M15 22L0 0h30z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: calc(100% - 0.75em) 50%;
background-size: 0.5em auto;
}
select.c-form-control[multiple], select.c-form-control[size]:not([size="1"]) {
background-image: none;
}
.c-form-control.-auto {
display: inline-block;
width: auto;
}
.c-btn.-contactAction {
justify-content: center;
min-width: clamp(175px, 23.4113712375vw, 280px);
padding: 1.125em 3.25em;
font-size: var(--font-16);
text-align: center;
}
.c-btn.-contactAction.-submit {
background: var(--color-blue);
border: 3px solid var(--color-blue);
color: var(--color-white);
}
.c-btn.-contactAction.-back {
background: var(--color-white);
border: 3px solid var(--color-blue);
color: var(--color-blue);
} .rss_container{
padding-bottom: 7em;
padding-top: 0;
}
@media (max-width:767px) {
.rss_container{
padding-bottom: 2em;
}
} #nav-header-top.bg{
background-color: rgba(255, 255, 255, 0.89);
transition: all .65s;
}
.nav-header-top__link.bg_color{
color: #222;
filter: none;
}
@media (max-width:1099px) {
#nav-header-top.bg{
background-color: transparent;
}
}
.person{
width: 80%;
margin: 0 auto;
} .contact-captcha{
text-align: center;
margin-bottom: clamp(30px, 3.488372093vw, 60px);
}
.contact-captcha > img{
margin: 0 auto;
}
.contact-captcha > input{
padding: 5px 10px;
margin-top: 1em;
}
.previouspostslink{
padding: 5px 8px !important;
}