@charset "UTF-8";
 @media screen and (max-width: 767px) {
:root {
font-size: calc(100vw / 390);
}
} @media only screen and (max-width: 1024px) {
body .view_pc {
display: block !important;
}
}
@media only screen and (max-width: 767px) {
body .view_pc {
display: none !important;
}
} #contents {
font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica",
"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Arial", "Meiryo", "Yu Gothic",
sans-serif;
color: #222;
}
.gothic {
font-family: "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN",
"Hiragino Sans", "Arial", "Meiryo", "Yu Gothic", sans-serif;
}
#header {
height: 101px;
}
#header .top_header,
#header .navigator {
background: none;
border: 0;
color: #fff;
font-weight: bold;
}
#header .top_header {
position: absolute;
top: 0;
width: 100%;
height: 32px;
}
#header .navigator {
position: absolute;
top: 32px;
}
#header .navigator:not(.active) .main_menu ul.view_pc-tab li a {
color: #fff;
}
#header .navigator .main_menu ul.view_pc-tab li a:before {
content: none;
}
#header .navigator:not(.active) .logo a {
background: url(//geniee.co.jp/wp/wp-content/themes/geniee/images/header/logo_white.svg) center center / 100% auto
no-repeat;
display: inline-block;
}
#header .navigator:not(.active) .logo a img {
opacity: 0;
}
#header .navigator:not(.active) .main_menu ul.view_pc-tab li:last-of-type a {
background: url(//geniee.co.jp/wp/wp-content/themes/geniee/images/header/search_white@2x.png) calc(1.5em + 10px)
0.5em / 16px 18px no-repeat;
display: inline-block;
}
#header
.navigator:not(.active)
.main_menu
ul.view_pc-tab
li:last-of-type
a
img {
opacity: 0;
}
#header
.navigator:not(.active)
.main_menu
ul.view_pc-tab
.mega_menu
li:last-of-type
a {
background: none;
}
body a:link,
body a:visited,
body a:active {
text-decoration: none;
}
html.lower #contents .con_title {
text-align: left;
}
body a.light_blue_btn {
color: #fff;
background: #2476d8;
border: 1px solid #fff;
margin: 0 0 13px;
}
body a.light_blue_btn:hover {
color: #2476d8;
background: #fff;
}
body a.trans_btn {
color: #fff;
background: transparent;
border: 1px solid #fff;
margin: 0 0 13px;
}
body a.trans_btn:hover {
color: #fff;
background: #2476d8;
}
@media (max-width: 767px) {
#header {
height: 56px;
}
#header .navigator .logo {
padding: 17px 0;
}
[id^="js-menu"] {
width: 30px;
height: 30px;
}
#header .box_lang {
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
#header .box_lang li a#js-search {
background: #fff;
padding: 5px;
margin-right: 10px;
}
#header .box_lang li a {
padding: 4.5px 9px;
font-size: 14px;
}
#header .navigator {
top: 0;
background: rgba(255, 255, 255, 0.3);
}
#footer {
font-size: 12px;
}
}  .con_recommend .con_main {
width: 1100px;
max-width: 94.5%; margin: 0 auto;
}
.bg_pattern1 {
background: linear-gradient(
135deg,
rgb(244, 251, 255) 0%,
rgb(187, 201, 224) 100%
);
}
.bg_pattern2 {
background: linear-gradient(
135deg,
rgb(0, 87, 147) 0%,
rgb(15, 64, 134) 32%,
rgb(0, 31, 94) 100%
);
}
@media (max-width: 767px) {
} .box-shadow {
box-shadow: 10px 10px 12.5px 1px #0020604d;
}
.gap-2 {
gap: 1.5rem;
}
.inquiry-lightblue-btn {
background: #2476d8;
border: 1px solid #fff;
border-radius: 5px;
font-size: 20px;
font-weight: 600;
color: #fff;
transition: background 0.3s, color 0.3s 0.05s;
}
.inquiry-lightblue-btn:hover {
background: #fff;
border: 1px solid #2476d8;
color: #2476d8 !important;
}
.inquiry-lightblue-btn #email-icon path {
fill: #ffffff;
transition: fill 0.3s 0.05s;
}
.inquiry-lightblue-btn:hover #email-icon path {
fill: #2476d8;
}
.inquiry-blue-btn {
background: #003164;
border: 1px solid #fff;
border-radius: 5px;
font-size: 20px;
font-weight: 600;
color: #fff;
transition: background 0.3s, color 0.3s 0.05s;
}
.inquiry-blue-btn:hover {
background: #fff;
border: 1px solid #003164;
color: #003164 !important;
}
#homepage #header {
opacity: 1;
position: relative;
z-index: 2;
}
img[src*="svg"] {
max-width: 100%;
height: auto;
}
.blue_btn {
background: #003164;
color: #fff;
border: 1px solid #003164;
margin: 0 0 13px;
}
.blue_btn svg {
fill: #fff;
transition: all 0.2s;
}
.blue_btn:hover {
background: #fff;
color: #003164;
}
.blue_btn:hover svg { fill: #fff;
}
.link {
margin: 0 30px 0 0;
font-weight: bold;
}
.link a {
color: #1356a0;
align-items: center;
display: flex;
}
.link img {
margin-right: 7px;
} .title_with_logo {
margin-bottom: 6.4%; text-align: center;
line-height: 1;
}
.title_with_logo img {
width: 50.36%; vertical-align: text-bottom;
}
.title_with_logo span {
margin-left: 0.2em;
font-size: min(70px, 7vw);
font-weight: 800;
color: #002060;
}
.title_with_logo-white span {
color: #fff;
}
@media (max-width: 767px) {
.gap-2 {
gap: 2.8vw;
}
.inquiry-lightblue-btn {
border-radius: 1.2vw; font-size: 4.7vw; }
.inquiry-blue-btn {
border-radius: 1.2vw; font-size: 4.7vw; } .title_with_logo {
margin-bottom: 10.6%; }
.title_with_logo img {
width: 80%; }
.title_with_logo span {
display: block;
margin-left: 0;
padding-top: 0.5em;
font-size: 7.3vw; }
}   html.lower #geniee_recommend #contents .con_title {
position: relative;
height: 580px;
margin-bottom: 0;
background: radial-gradient(
104.48% 300.79% at 0.71% 1.71%,
#005793 0%,
#0f4086 32%,
#001f5e 100%
);
}
.con_title .inner {
position: relative;
width: 100%;
max-width: 1100px;
height: 480px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
} html.lower #contents .con_title h2 {
transform: none;
position: static;
left: auto;
top: auto;
} html.lower #contents .con_title h2 .jp {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Arial", "Meiryo",
"Yu Gothic", sans-serif;
font-size: min(50px, 5vw);
font-weight: 600;
line-height: 1.4;
text-align: left;
letter-spacing: normal;
}
.con_title .txt_lead {
margin: 2.7% 0; text-align: left;
font-size: min(18px, 1.8vw);
} .con_title .btn_area {
display: flex;
column-gap: 1.4%; }
.con_title .btn {
font-size: 16px;
border-radius: 6px;
display: block;
cursor: pointer;
transition: all 0.3s;
width: 255px;
height: 50px;
line-height: 50px;
border: 1px solid #fff;
text-decoration: none;
text-align: center;
}
@media (max-width: 767px) {
html.lower #geniee_recommend #contents .con_title {
height: 212vw; }
#geniee_recommend .con_title .inner {
display: block;
position: relative; width: 100%;
height: calc(100% - 56px);
}
html.lower #contents .con_title h2 {
padding-top: 12.5vw; }
html.lower #contents .con_title h2 .jp {
font-size: 9.4vw; line-height: 1.55;
}
.con_title .txt_lead {
margin: 7vw 0; font-size: 3.3vw; }
.con_title .btn_area {
position: absolute;
width: 100%;
bottom: 2.4vw;
left: 0;
flex-direction: column;
align-items: center;
gap: 2.4vw; }
.con_title .btn_area li {
width: 60%; }
.con_title .btn {
width: 100%;
height: 11.76vw; line-height: 11.76vw; border-radius: 6px;
font-size: 4.2vw; }
} .con_title_image_wrap {
position: absolute;
width: 100%;
max-width: 1100px;
height: 427px;
right: 0;
bottom: 70px;
left: 0;
margin: 0 auto;
}
.con_title_image {
width: 507px;
height: 100%;
margin: 0 -0.97% 0 auto; }
.con_title_image img {
object-fit: contain;
}
@media (max-width: 767px) {
.con_title_image_wrap {
max-width: initial;
height: 88.7vw; bottom: 40.9vw; margin: 0 auto;
}
.con_title_image {
width: 100%;
height: 100%;
margin: 0;
}
} .recommend_about {
padding: 8.3% 0; }
.recommend_about .about_text {
padding: 50px 20px;
border-radius: min(70px, 4.86vw); background: #fff;
box-shadow: 10px 10px 12.5px 1px #0020604d;
text-align: center;
}
.recommend_about .about_text p {
font-size: min(32px, 3.2vw);
font-weight: 800;
color: #002060;
letter-spacing: 0.15em;
line-height: 1.73;
}
.recommend_about .about_img {
margin: 7.3% 0 6.4%; }
.recommend_about .about_under_text {
text-align: center;
}
.recommend_about .about_under_text p {
font-size: min(26px, 2.6vw);
font-weight: 800;
color: #002060;
letter-spacing: 0.15em;
line-height: 1.8;
}
@media (max-width: 767px) {
.recommend_about {
padding: 13% 0 15.5%; }
.recommend_about .about_text {
padding: 6.6% 7.7%; border-radius: min(60px, 14.1vw); }
.recommend_about .about_text p {
font-size: 4.7vw; line-height: 2;
}
.recommend_about .about_img {
margin: 16.5% 0; }
.recommend_about .about_under_text p {
font-size: 5.4vw; }
} .recommend_strengths {
padding: 8.3% 0; }
.strengths_header {
margin-bottom: 8.2%; }
.strengths_header p {
width: 90%; margin: 0 auto;
font-size: min(26px, 2.6vw);
font-weight: 800;
color: #fff;
line-height: 1.83;
}
.recommend_strengths .btn-area {
justify-content: space-between;
width: 94.5%; margin: 11% auto 0; }
.recommend_strengths .btn-area li {
flex: 0 0 48%; }
.recommend_strengths .btn-area li a {
width: 100%;
height: 70px;
}
@media (max-width: 767px) {
.recommend_strengths {
padding: 13% 0 14.3%; }
.strengths_header {
margin-bottom: 11%; }
.strengths_header p {
width: 89%; font-size: 4.7vw; text-align: center;
}
.recommend_strengths .btn-area {
flex-direction: column;
align-items: center;
margin-top: 14%; }
.recommend_strengths .btn-area li {
flex-basis: 95%;
width: 95%;
}
.recommend_strengths .btn-area li:first-child {
margin-bottom: 11%; }
.recommend_strengths .btn-area li a {
height: 11.3vw; }
} .strengths_lists {
}
.strengths_list {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 4.9%; box-shadow: 10px 10px 12.5px 1px #0020604d;
border-radius: min(40px, 2.8vw); background: #002060;
}
.strength_img {
flex: 0 0 33.6%; text-align: center;
}
.strength_img.img1 img {
width: 59.5%; }
.strength_img.img2 img {
width: 62%; }
.strength_img.img3 img {
width: 69.7%; }
.strength_img.img4 img {
width: 50%; }
.strength_img.img5 img {
width: 60%; }
.strength_text {
padding: 7.2% 0; }
.strength_text_header {
margin-bottom: 0.5em;
color: #ffff00;
font-size: min(31px, 3.1vw);
font-weight: 800;
line-height: 1.3;
}
.strength_text_body {
color: #fff;
font-size: min(22px, 2.2vw);
line-height: 1.6;
}
.strength_text_body .small {
font-size: min(15px, 1.5vw);
}
@media (max-width: 767px) {
.strengths_lists {
}
.strengths_list {
flex-direction: column;
width: 95%; margin: 0 auto 17.5%; padding: 12.5% 0 17.5%; border-radius: min(60px, 14.1vw); }
.strength_text_header {
color: #ffff00;
font-weight: 800;
font-size: 5.17vw; line-height: 1.4;
}
.strength_img {
width: 64.25%; margin-bottom: 12.5%; }
.strength_img img {
width: 100% !important;
}
.strength_text {
padding: 0;
text-align: center;
}
.strength_text_body {
font-size: 4.7vw; }
.strength_text_body .small {
font-size: 3.76vw; }
} .recommend_client {
padding: 10% 0; text-align: center;
}
.client_header {
margin-bottom: 10%; font-size: min(70px, 7vw);
font-weight: 800;
color: #002060;
}
@media (max-width: 767px) {
.recommend_client {
padding: 13% 0 14.3%; }
.client_header {
margin-bottom: 10.3%; font-size: 7.3vw; }
} .client_industry {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: min(58px, 4vw) min(40px, 2.78vw); }
.client_industry li {
padding: 13.4% 0; background: #2a579a;
border-radius: min(16px, 1.1vw); }
.client_industry li img {
width: 68.5%; }
.client_industry li p {
height: 3em;
line-height: 3em;
color: #fff;
font-size: min(21px, 2.1vw);
}
.client_industry li p {
height: 2.4em;
margin-top: 0.8em;
color: #fff;
font-size: min(21px, 2.1vw);
}
.client_industry li p.multiline {
line-height: 1.2em;
}
.client_industry li p:not(.multiline) {
line-height: 2.4em;
}
@media (max-width: 767px) {
.client_industry {
grid-template-columns: repeat(3, 1fr);
gap: 6.8vw 4.7vw; }
.client_industry li {
border-radius: min(8px, 1.88vw); }
.client_industry li img {
width: 65.6%; }
.client_industry li p {
font-size: 2.8vw; }
} .recommend_process {
padding: 10% 0; text-align: center;
}
.recommend_process .process_header {
margin-bottom: 3.3%; font-size: min(70px, 7vw);
font-weight: 800;
color: #fff;
}
.recommend_process img {
width: 100%;
}
@media (max-width: 767px) {
.recommend_process {
padding: 13% 0 14.3%; }
.recommend_process .process_header {
font-size: 7.3vw; }
} .recommend_process .subheading_wrapper {
margin-top: -1.8%; }
.recommend_process .subheading {
margin-right: 2.2%; gap: 3.5%; }
.recommend_process .subheading_text {
flex: 1 1 16%;
color: #fff;
text-align: center;
font-size: min(17px, 1.5vw);
}
@media (max-width: 767px) {
.recommend_process .subheading_wrapper {
display: none;
}
} .recommend_contact_form_area {
padding: 10% 0; }
.recommend_contact_form_header {
color: #002060;
text-align: center;
margin-bottom: 5.5%; }
.recommend_contact_form_header h3 {
margin-bottom: 3.3%; font-size: min(70px, 7vw);
font-weight: 800;
}
.recommend_contact_form_header p {
font-size: min(26px, 2.6vw);
}
.recommend_contact_form {
width: 90%;
max-width: 1100px;
height: 980px;
}
@media (max-width: 767px) {
.recommend_contact_form_area {
padding: 13% 0 15.5%; }
.recommend_contact_form_header {
margin-bottom: 11.8%; }
.recommend_contact_form_header h3 {
margin-bottom: 0.7em;
font-size: 7.3vw; }
.recommend_contact_form_header p {
font-size: 4.7vw; }
}