@charset "UTF-8";
 .p-company, .p-staff, .p-recruit {
min-width: 1280px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
.p-company, .p-staff, .p-recruit {
min-width: unset;
display: block;
}
}
.p-company_wrapper, .p-staff_wrapper, .p-recruit_wrapper {
width: 100%;
min-width: 1280px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F7F8FC;
}
@media screen and (max-width: 768px) {
.p-company_wrapper, .p-staff_wrapper, .p-recruit_wrapper {
min-width: unset;
display: block;
}
}
.p-blockImage {
width: 960px;
position: relative;
-ms-flex-item-align: baseline;
align-self: baseline;
}
@media screen and (max-width: 768px) {
.p-blockImage {
width: 100%;
}
}
.p-blockImage:before, .p-blockImage:after {
position: absolute;
content: "";
}
@media screen and (max-width: 768px) {
.p-blockImage:before, .p-blockImage:after {
display: none;
}
}
.p-blockImage.company:before, .p-blockImage.company:after {
width: 50px;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.p-blockImage.company:before {
height: 74px;
background-color: #3B53A7;
left: 50px;
bottom: 0;
}
.p-blockImage.company:after {
height: 124px;
background-color: #F5C860;
left: 150px;
bottom: 0;
}
.p-blockImage.staff:before, .p-blockImage.staff:after {
-webkit-transform: rotate(45deg) translateY(80%);
transform: rotate(45deg) translateY(80%);
}
.p-blockImage.staff:before {
width: 226px;
height: 226px;
background-color: #3B53A7;
right: -40px;
bottom: 0;
}
.p-blockImage.staff:after {
width: 105px;
height: 105px;
background-color: #9DC02E;
right: 270px;
bottom: -100px;
}
.p-blockImage.recruit:before, .p-blockImage.recruit:after {
width: 0;
height: 0;
border-style: solid;
-webkit-transform: translateY(190px);
transform: translateY(190px);
bottom: 0;
}
.p-blockImage.recruit:before {
border-width: 130px;
border-color: transparent #3B53A7 #3B53A7 transparent;
left: 87px;
}
.p-blockImage.recruit:after {
border-width: 71px;
border-color: transparent #B53939 #B53939 transparent;
left: 293px;
}
.p-blockImage img {
position: relative;
width: 100%;
z-index: 1;
}
.p-blockTitle {
color: #BEBCCC;
margin-top: 10px;
font-weight: normal;
font-size: 16px;
}
@media screen and (max-width: 768px) {
.p-blockTitle {
font-size: 5vw;
}
}
@media screen and (max-width: 768px) {
.p-blockTitle {
margin-top: 0;
padding-top: 4.6875vw;
padding-left: 4.6875vw;
background-color: #fff;
font-size: 11px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-blockTitle {
font-size: 3.4375vw;
}
}
.p-blockTitle span {
display: inline-block;
}
.p-blockTitle img {
width: 418px;
margin-top: -15px;
}
@media screen and (max-width: 768px) {
.p-blockTitle img {
width: 80vw;
margin-top: 0;
}
}
.p-blockTitle img.company {
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.p-blockTitle img.company {
margin-top: 2.34375vw;
}
}
.p-blockTitle img.service {
width: 326px;
}
@media screen and (max-width: 768px) {
.p-blockTitle img.service {
width: 65vw;
}
}
.p-blockTitle img.staff {
width: 202px;
}
@media screen and (max-width: 768px) {
.p-blockTitle img.staff {
width: 40vw;
}
}
.p-blockTitle img.recruit {
width: 300px;
}
@media screen and (max-width: 768px) {
.p-blockTitle img.recruit {
width: 60vw;
}
}
.p-block {
width: 960px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
z-index: 0;
letter-spacing: 0.15rem;
}
@media screen and (max-width: 768px) {
.p-block {
width: 100%;
display: block;
}
}
.p-block:before, .p-block:after {
position: absolute;
content: "";
}
@media screen and (max-width: 768px) {
.p-block:before, .p-block:after {
display: none;
}
}
.p-block.company:before, .p-block.recruit:before {
width: 1020px;
height: 574px;
background-color: #fff;
z-index: -1;
top: 90px;
left: -60px;
}
.p-block.company:after, .p-block.recruit:after {
width: 1020px;
height: 574px;
background-color: #3B53A7;
z-index: -2;
top: 120px;
left: -60px;
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.p-block.recruit:before {
top: 60px;
}
.p-block.recruit:after {
top: 90px;
}
.p-block.staff:before {
width: 960px;
height: 540px;
background-color: #fff;
z-index: -1;
top: 70px;
left: 0;
}
.p-block.staff:after {
width: 960px;
height: 540px;
background-color: #3B53A7;
z-index: -2;
top: 130px;
left: 0;
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}
.p-block_inner {
width: 590px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
.p-block_inner {
width: 100%;
background-color: #fff;
padding-bottom: 9.375vw;
}
}
.p-block_caption {
margin-top: 120px;
font-weight: bold;
font-size: 28px;
}
@media screen and (max-width: 768px) {
.p-block_caption {
font-size: 8.75vw;
}
}
@media screen and (max-width: 768px) {
.p-block_caption {
margin-top: 2.34375vw;
padding: 4.6875vw;
font-size: 20px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-block_caption {
font-size: 6.25vw;
}
}
.p-block_caption.staff {
font-size: 25px;
}
@media screen and (max-width: 768px) {
.p-block_caption.staff {
font-size: 7.8125vw;
}
}
@media screen and (max-width: 768px) {
.p-block_caption.staff {
font-size: 20px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-block_caption.staff {
font-size: 6.25vw;
}
}
.p-block_text {
margin-top: 20px;
}
@media screen and (max-width: 768px) {
.p-block_text {
padding: 0 4.6875vw 9.375vw;
margin-top: 0;
font-size: 14px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-block_text {
font-size: 4.375vw;
}
}
.p-block_btn {
margin: 35px auto 0;
}
@media screen and (max-width: 768px) {
.p-block_btn {
margin-top: 0;
}
}
.p-mv {
margin-bottom: -35vw;
position: relative;
}
@media screen and (max-width: 768px) {
.p-mv {
margin-bottom: -50vw;
}
}
.p-mv_caption {
position: absolute;
z-index: 999;
left: 3vw;
width: 44vw;
-webkit-transition: all 0.5s;
transition: all 0.5s;
font-size: 5vw;
font-size: 1.3;
font-weight: bold;
letter-spacing: 0.15rem;
}
@media screen and (max-width: 768px) {
.p-mv_caption {
left: 23vw;
width: 54vw;
font-size: 30px;
line-height: 1.3;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-mv_caption {
font-size: 9.375vw;
}
}
.p-mv_caption.hide {
-webkit-transition: all 2s;
transition: all 2s;
opacity: 0;
-webkit-transform: translateY(1vh);
transform: translateY(1vh);
}
.p-mv_caption:first-of-type {
top: 40vw;
background: -webkit-gradient(linear, left top, left bottom, from(#8B3B54), to(#67496F));
background: linear-gradient(to bottom, #8B3B54, #67496F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media screen and (max-width: 768px) {
.p-mv_caption:first-of-type {
top: 98vw;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.p-mv_caption:first-of-type {
background: none;
color: #8B3B54;
}
}
.p-mv_caption:last-of-type {
top: 47vw;
background: -webkit-gradient(linear, left top, left bottom, from(#52517E), to(#2D5F99));
background: linear-gradient(to bottom, #52517E, #2D5F99);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: right;
}
@media screen and (max-width: 768px) {
.p-mv_caption:last-of-type {
top: 123vw;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.p-mv_caption:last-of-type {
background: none;
color: #2D5F99;
}
}
.p-mv_visual {
display: -ms-grid;
display: grid;
-ms-grid-columns: 20vw 31.5vw 20vw 20vw 10vw;
grid-template-columns: 20vw 31.5vw 20vw 20vw 10vw;
-ms-grid-rows: 20vw 20vw 20vw 31.5vw;
grid-template-rows: 20vw 20vw 20vw 31.5vw;
grid-gap: 25px;
margin-left: auto;
margin-right: auto;
-webkit-transform: rotate(45deg) translateX(-17vw) translateY(-12vw);
transform: rotate(45deg) translateX(-17vw) translateY(-12vw);
}
@media screen and (max-width: 768px) {
.p-mv_visual {
grid-gap: 10px;
-webkit-transform: unset;
transform: unset;
-webkit-transform: rotate(45deg) translateX(-124vw) translateY(-7vw);
transform: rotate(45deg) translateX(-124vw) translateY(-7vw);
-ms-grid-columns: 40vw 63vw 40vw 40vw 20vw;
grid-template-columns: 40vw 63vw 40vw 40vw 20vw;
-ms-grid-rows: 40vw 40vw 40vw 63vw;
grid-template-rows: 40vw 40vw 40vw 63vw;
}
}
.p-mv .mvImg {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.p-mv .mvImg.hide {
-webkit-transition: all 0.5s;
transition: all 0.5s;
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.p-mv .zoomAnime {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.p-mv .zoomAnime_1 {
-webkit-animation-duration: 3.5s;
animation-duration: 3.5s;
}
.p-mv .zoomAnime_2 {
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
}
.p-mv .zoomAnime_3 {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
.p-mv .zoomAnime_4 {
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.p-mv .zoomAnime_5 {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounce {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.p-mv img {
-o-object-fit: cover;
object-fit: cover;
}
.p-mv img.img_1 {
width: 10vw;
height: 10vw;
-ms-grid-row: 1;
grid-row: 1;
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row-align: end;
align-self: end;
-ms-grid-column-align: end;
justify-self: end;
}
@media screen and (max-width: 768px) {
.p-mv img.img_1 {
width: 20vw;
height: 20vw;
}
}
.p-mv img.img_2 {
width: 20vw;
height: 20vw;
-ms-grid-row: 1;
grid-row: 1;
-ms-grid-column: 4;
grid-column: 4;
}
@media screen and (max-width: 768px) {
.p-mv img.img_2 {
width: 40vw;
height: 40vw;
}
}
.p-mv img.img_3 {
width: 20vw;
height: 20vw;
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-column: 3;
grid-column: 3;
}
@media screen and (max-width: 768px) {
.p-mv img.img_3 {
width: 40vw;
height: 40vw;
}
}
.p-mv img.img_4 {
width: 20vw;
height: 20vw;
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-column: 4;
grid-column: 4;
}
@media screen and (max-width: 768px) {
.p-mv img.img_4 {
width: 40vw;
height: 40vw;
}
}
.p-mv img.img_5 {
width: 10vw;
height: 10vw;
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row-align: end;
align-self: end;
}
@media screen and (max-width: 768px) {
.p-mv img.img_5 {
width: 20vw;
height: 20vw;
}
}
.p-mv img.img_6 {
width: 10vw;
height: 10vw;
-ms-grid-row: 3;
grid-row: 3;
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row-align: end;
align-self: end;
}
@media screen and (max-width: 768px) {
.p-mv img.img_6 {
width: 20vw;
height: 20vw;
}
}
.p-mv img.img_7 {
width: 20vw;
height: 20vw;
-ms-grid-row: 3;
grid-row: 3;
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-column-align: end;
justify-self: end;
}
@media screen and (max-width: 768px) {
.p-mv img.img_7 {
width: 40vw;
height: 40vw;
}
}
.p-mv img.img_8 {
width: 20vw;
height: 20vw;
-ms-grid-row: 3;
grid-row: 3;
-ms-grid-column: 3;
grid-column: 3;
}
@media screen and (max-width: 768px) {
.p-mv img.img_8 {
width: 40vw;
height: 40vw;
}
}
.p-mv img.img_9 {
width: 20vw;
height: 20vw;
-ms-grid-row: 4;
grid-row: 4;
-ms-grid-column: 1;
grid-column: 1;
}
@media screen and (max-width: 768px) {
.p-mv img.img_9 {
width: 40vw;
height: 40vw;
}
}
.p-mv img.img_10 {
width: 10vw;
height: 10vw;
-ms-grid-row: 4;
grid-row: 4;
-ms-grid-column: 2;
grid-column: 2;
}
@media screen and (max-width: 768px) {
.p-mv img.img_10 {
width: 20vw;
height: 20vw;
}
}
.p-mv img.img_11 {
width: 20vw;
height: 20vw;
-ms-grid-row: 4;
grid-row: 4;
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row-align: end;
align-self: end;
}
@media screen and (max-width: 768px) {
.p-mv img.img_11 {
width: 40vw;
height: 40vw;
}
}
@media screen and (max-width: 768px) {
.p-mv img.img_12 {
-ms-grid-row: 4;
grid-row: 4;
-ms-grid-column: 4;
grid-column: 4;
width: 20vw;
height: 20vw;
}
}
.p-mv .subGrid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 10vw 10vw;
grid-template-columns: 10vw 10vw;
-ms-grid-rows: 10vw 10vw;
grid-template-rows: 10vw 10vw;
-ms-grid-row: 3;
grid-row: 3;
-ms-grid-column: 1;
grid-column: 1;
width: 20vw;
height: 20vw;
}
@media screen and (max-width: 768px) {
.p-mv .subGrid {
width: 40vw;
height: 40vw;
-ms-grid-columns: 20vw 20vw;
grid-template-columns: 20vw 20vw;
-ms-grid-rows: 20vw 20vw;
grid-template-rows: 20vw 20vw;
}
}
.p-mv .subGrid .img_s1 {
width: 10vw;
height: 10vw;
-ms-grid-row: 1;
grid-row: 1;
-ms-grid-column: 1;
grid-column: 1;
}
@media screen and (max-width: 768px) {
.p-mv .subGrid .img_s1 {
width: 20vw;
height: 20vw;
}
}
.p-mv .subGrid .img_s2 {
width: 10vw;
height: 10vw;
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-column-align: end;
justify-self: end;
}
@media screen and (max-width: 768px) {
.p-mv .subGrid .img_s2 {
width: 20vw;
height: 20vw;
}
}
.p-info {
margin-top: 85px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
font-weight: bold;
letter-spacing: 0.15rem;
margin-left: auto;
margin-right: auto;
min-width: 1280px;
}
@media screen and (max-width: 768px) {
.p-info {
min-width: unset;
}
}
@media screen and (max-width: 768px) {
.p-info {
display: block;
text-align: center;
margin-top: 14.0625vw;
}
}
.p-info_title {
position: relative;
padding: 35px 0;
font-size: 28px;
text-align: center;
margin-right: 185px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-info_title {
font-size: 8.75vw;
}
}
@media screen and (max-width: 768px) {
.p-info_title {
margin-right: 0;
padding: 3vw 0;
line-height: 1.3;
}
}
.p-info_title span {
display: inline-block;
margin-top: 10px;
font-size: 18px;
}
@media screen and (max-width: 768px) {
.p-info_title span {
font-size: 5.625vw;
}
}
.p-info_title:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 72px;
border-style: solid;
border-color: transparent #DA9C9C #DA9C9C transparent;
right: 0;
bottom: 0;
z-index: -1;
}
@media screen and (max-width: 768px) {
.p-info_title:before {
border-width: 15vw;
right: 23vw;
}
}
@media screen and (max-width: 768px) {
.p-info_lists {
padding: 9.375vw 4.6875vw;
text-align: left;
}
}
.p-info_list {
font-size: 18px;
color: #6F7579;
}
@media screen and (max-width: 768px) {
.p-info_list {
font-size: 5.625vw;
}
}
@media screen and (max-width: 768px) {
.p-info_list {
font-size: 16px;
padding-bottom: 4.6875vw;
border-bottom: 1px solid #6F7579;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-info_list {
font-size: 5vw;
}
}
.p-info_list a span {
margin-right: 88px;
}
@media screen and (max-width: 768px) {
.p-info_list a span {
margin-right: 0;
}
}
.p-info_list:not(:last-child) {
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
.p-info_list:not(:last-child) {
margin-bottom: 2.34375vw;
}
}
.p-info_link {
color: #6F7579;
font-size: 15px;
display: block;
width: 150px;
margin: 53px 0 0 auto;
position: relative;
}
@media screen and (max-width: 768px) {
.p-info_link {
font-size: 4.6875vw;
}
}
@media screen and (max-width: 768px) {
.p-info_link {
margin-top: 14.0625vw;
}
}
.p-info_link:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #B53939;
border-left-color: #B53939;
right: 0;
bottom: 4px;
}
@media screen and (max-width: 768px) {
.p-info_link:after {
border-width: 1.5625vw;
}
}
.p-vision {
margin-top: 153px;
position: relative;
}
@media screen and (max-width: 768px) {
.p-vision {
margin-top: 14.0625vw;
}
}
.p-vision:after {
position: absolute;
content: "";
width: 100%;
height: 828px;
background-color: #F5C860;
left: 0;
top: 470px;
z-index: -1;
}
@media screen and (max-width: 768px) {
.p-vision:after {
display: none;
}
}
.p-vision_title {
font-size: 32px;
font-weight: bold;
text-align: center;
letter-spacing: 0.15rem;
}
@media screen and (max-width: 768px) {
.p-vision_title {
font-size: 10vw;
}
}
@media screen and (max-width: 768px) {
.p-vision_title {
font-size: 23px;
line-height: 1.3;
padding: 0 4.6875vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-vision_title {
font-size: 7.1875vw;
}
}
.p-vision_title em {
position: relative;
font-style: normal;
display: inline-block;
padding-left: 93px;
position: relative;
}
.p-vision_title em:before, .p-vision_title em:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
}
@media screen and (max-width: 768px) {
.p-vision_title em:before, .p-vision_title em:after {
top: 0;
}
}
.p-vision_title em:before {
border-width: 16px 28px;
border-color: transparent rgba(181, 57, 57, 0.5) rgba(181, 57, 57, 0.5) transparent;
left: 0;
}
@media screen and (max-width: 768px) {
.p-vision_title em:before {
border-width: 3.75vw 6.5625vw;
}
}
.p-vision_title em:after {
border-width: 16px;
border-color: transparent #B53939 #B53939 transparent;
left: 25px;
}
@media screen and (max-width: 768px) {
.p-vision_title em:after {
border-width: 3.75vw;
left: 5.9375vw;
}
}
@media screen and (max-width: 768px) {
.p-vision_title em {
padding-left: calc(56px + 4.6875vw);
}
}
.p-vision_title span {
display: inline-block;
margin-top: 8px;
color: #B53939;
}
@media screen and (max-width: 768px) {
.p-vision_title span {
margin-top: 2.5vw;
}
}
.p-vision_detail {
letter-spacing: 0.15rem;
color: #fff;
background-color: #B53939;
width: 500px;
height: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 70px;
}
@media screen and (max-width: 768px) {
.p-vision_detail {
width: 100vw;
height: unset;
padding: 9.375vw 4.6875vw;
}
}
.p-vision_detail.vision {
background-color: #3B53A7;
}
@media screen and (max-width: 768px) {
.p-vision_detail.vision {
width: 100%;
}
}
.p-vision_detail h3 {
font-size: 28px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-vision_detail h3 {
font-size: 8.75vw;
}
}
@media screen and (max-width: 768px) {
.p-vision_detail h3 {
font-size: 24px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-vision_detail h3 {
font-size: 7.5vw;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.p-vision_detail h3 {
width: 100%;
}
}
.p-vision_detail p {
margin-top: 20px;
font-size: 16px;
}
@media screen and (max-width: 768px) {
.p-vision_detail p {
font-size: 5vw;
}
}
@media screen and (max-width: 768px) {
.p-vision_detail p {
margin-top: 9.375vw;
font-size: 14px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-vision_detail p {
font-size: 4.375vw;
}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.p-vision_detail p {
width: 100%;
}
}
.p-vision_service {
padding-top: 50px;
}
@media screen and (max-width: 768px) {
.p-vision_service {
padding-top: 9.375vw;
}
}
.p-vision_service_inner {
margin-left: auto;
margin-right: auto;
min-width: 1280px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
.p-vision_service_inner {
min-width: unset;
}
}
@media screen and (max-width: 768px) {
.p-vision_service_inner {
display: block;
}
}
.p-vision_service_image {
width: 500px;
height: 500px;
text-align: center;
padding-top: 86px;
margin-right: 80px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
@media screen and (max-width: 768px) {
.p-vision_service_image {
width: 100vw;
height: 100vw;
padding-top: 0;
margin-right: 0;
}
}
.p-vision_service_image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-vision_service_btn {
margin-top: 44px;
color: #B53939;
background-color: #fff;
}
@media screen and (max-width: 768px) {
.p-vision_service_btn {
margin-top: 9.375vw;
}
}
.p-vision_service_btn:after {
border-width: 6px;
border-style: solid;
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #B53939;
border-left-color: #B53939;
}
@media screen and (max-width: 768px) {
.p-vision_service_btn:after {
border-width: 1.5625vw;
}
}
.p-vision_service_btn.service {
color: #3B53A7;
}
.p-vision_service_btn.service:after {
border-width: 6px;
border-style: solid;
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #3B53A7;
border-left-color: #3B53A7;
}
@media screen and (max-width: 768px) {
.p-vision_service_btn.service:after {
border-width: 1.5625vw;
}
}
.p-vision_visions {
margin-top: 120px;
background: url(//care-design.jp/cms/wp-content/themes/caredesign/img/top/bg_vision.png) no-repeat;
background-size: auto 100%;
background-position: right center;
padding: 195px 0;
}
@media screen and (max-width: 768px) {
.p-vision_visions {
margin-top: 0;
padding: 9.375vw 4.6875vw;
}
}
.p-vision_visions_inner {
margin-left: auto;
margin-right: auto;
min-width: 1280px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.p-vision_visions_inner {
min-width: unset;
}
}
@media screen and (max-width: 768px) {
.p-vision_visions_inner {
display: block;
}
}
.p-vision_visions_points {
width: 450px;
height: 450px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: justify;
align-content: space-between;
margin-left: 80px;
}
@media screen and (max-width: 768px) {
.p-vision_visions_points {
width: 100%;
height: unset;
margin-left: 0;
margin-top: 4.6875vw;
}
}
.p-vision_visions_points li {
width: 200px;
height: 200px;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding-bottom: 40px;
letter-spacing: 0.15rem;
font-size: 18px;
font-weight: bold;
text-align: center;
position: relative;
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li {
font-size: 5.625vw;
}
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li {
width: calc((100vw - 4.6875vw * 3) / 2);
height: calc((100vw - 4.6875vw * 3) / 2);
padding-bottom: 6vw;
font-size: 15px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-vision_visions_points li {
font-size: 4.6875vw;
}
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li:first-of-type {
margin-bottom: 4.6875vw;
}
}
.p-vision_visions_points li:before {
position: absolute;
content: "";
top: 50px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li:before {
top: 9vw;
}
}
.p-vision_visions_points li.heart:before {
width: 50px;
height: 50px;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
background-color: #F5C860;
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li.heart:before {
width: 12vw;
height: 12vw;
}
}
.p-vision_visions_points li.love {
padding-bottom: 28px;
line-height: 1.4;
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li.love {
padding-bottom: 5vw;
line-height: 1.3;
}
}
.p-vision_visions_points li.love:before {
width: 50px;
height: 50px;
border-radius: 1000px;
background-color: #B53939;
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li.love:before {
width: 12vw;
height: 12vw;
}
}
.p-vision_visions_points li.contribute:before {
width: 0;
height: 0;
border-width: 25px;
border-color: transparent #9DC02E #9DC02E transparent;
border-style: solid;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li.contribute:before {
border-width: 6vw;
}
}
.p-vision_visions_points li.design:before {
width: 25px;
height: 50px;
background-color: #3B53A7;
}
@media screen and (max-width: 768px) {
.p-vision_visions_points li.design:before {
width: 6vw;
height: 12vw;
}
}
.p-event {
margin-top: 84px;
background: url(//care-design.jp/cms/wp-content/themes/caredesign/img/top/shape_event.svg) no-repeat;
background-size: 80vw auto;
background-position: left top 90px;
}
@media screen and (max-width: 768px) {
.p-event {
margin-top: 14.0625vw;
background: none;
}
}
.p-event_inner {
margin-left: auto;
margin-right: auto;
min-width: 1280px;
width: 828px;
min-width: initial;
}
@media screen and (max-width: 768px) {
.p-event_inner {
min-width: unset;
}
}
@media screen and (max-width: 768px) {
.p-event_inner {
width: 100%;
}
}
.p-event_title {
color: #9DC02E;
letter-spacing: 0.15rem;
font-size: 16px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-event_title {
font-size: 5vw;
}
}
@media screen and (max-width: 768px) {
.p-event_title {
font-size: 10px;
margin-left: 4.6875vw;
border-bottom: 1px solid #9DC02E;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-event_title {
font-size: 3.125vw;
}
}
.p-event_title span {
font-size: 90px;
line-height: 1.2;
margin-right: 27px;
}
@media screen and (max-width: 768px) {
.p-event_title span {
font-size: 28.125vw;
}
}
@media screen and (max-width: 768px) {
.p-event_title span {
font-size: 55px;
margin-right: 2.34375vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-event_title span {
font-size: 17.1875vw;
}
}
.p-event_caption {
color: #fff;
font-size: 28px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-event_caption {
font-size: 8.75vw;
}
}
@media screen and (max-width: 768px) {
.p-event_caption {
color: #9DC02E;
font-size: 14px;
margin-left: 4.6875vw;
margin-top: 3.125vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-event_caption {
font-size: 4.375vw;
}
}
.p-event_lists {
margin-top: 62px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.p-event_lists {
display: block;
margin-top: 0;
padding: 4.6875vw;
}
}
.p-event_list {
width: 384px;
margin-bottom: 60px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-event_list {
width: 100%;
margin-bottom: 4.6875vw;
}
}
.p-event_list a {
display: block;
}
.p-event_list_thumb {
position: relative;
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
.p-event_list_thumb {
-webkit-box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
}
}
.p-event_list_thumb img {
width: 100%;
height: 216px;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.p-event_list_thumb img {
height: 55vw;
}
}
.p-event_list_thumb figcaption {
position: absolute;
right: 18px;
bottom: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
display: block;
color: #fff;
background-color: #3B53A7;
font-size: 14px;
padding: 4px 22px;
border-radius: 1000px;
}
@media screen and (max-width: 768px) {
.p-event_list_thumb figcaption {
font-size: 4.375vw;
}
}
@media screen and (max-width: 768px) {
.p-event_list_thumb figcaption {
font-size: 12px;
right: 4.6875vw;
padding: 1.25vw 4.6875vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-event_list_thumb figcaption {
font-size: 3.75vw;
}
}
.p-event_list_info {
background-color: #fff;
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
padding: 20px 24px;
letter-spacing: 0.15rem;
}
@media screen and (max-width: 768px) {
.p-event_list_info {
-webkit-box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
}
}
@media screen and (max-width: 768px) {
.p-event_list_info {
padding: 4.6875vw;
}
}
.p-event_list_title {
font-size: 17px;
line-height: 1.5;
margin-bottom: 15px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-event_list_title {
font-size: 5.3125vw;
}
}
@media screen and (max-width: 768px) {
.p-event_list_title {
font-size: 15px;
margin-bottom: 2.34375vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-event_list_title {
font-size: 4.6875vw;
}
}
.p-event_list_date {
font-size: 14px;
}
@media screen and (max-width: 768px) {
.p-event_list_date {
font-size: 4.375vw;
}
}
@media screen and (max-width: 768px) {
.p-event_list_date {
font-size: 11px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-event_list_date {
font-size: 3.4375vw;
}
}
.p-event_list_tags {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.p-event_list_tags li {
display: inline-block;
font-size: 10px;
color: #6F7579;
background-color: #F0F3F5;
border-radius: 1000px;
padding: 3px 13px;
margin-right: 8px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-event_list_tags li {
font-size: 3.125vw;
}
}
@media screen and (max-width: 768px) {
.p-event_list_tags li {
padding: 0.9375vw 3.125vw;
margin-right: 2.5vw;
}
}
.p-event_list:nth-of-type(2) {
margin-top: 96px;
}
@media screen and (max-width: 768px) {
.p-event_list:nth-of-type(2) {
margin-top: 0;
}
}
.p-event_list:nth-of-type(3) {
margin-top: -96px;
}
@media screen and (max-width: 768px) {
.p-event_list:nth-of-type(3) {
margin-top: 0;
}
}
.p-event_list img {
width: 100%;
}
.p-event_btn {
margin-left: auto;
margin-right: auto;
}
.p-company {
padding-bottom: 276px;
}
@media screen and (max-width: 768px) {
.p-company {
padding-bottom: 0;
}
}
.p-company_wrapper {
margin-top: 120px;
}
@media screen and (max-width: 768px) {
.p-company_wrapper {
margin-top: 14.0625vw;
}
}
.p-service {
background: url(//care-design.jp/cms/wp-content/themes/caredesign/img/top/bg_service.png) no-repeat;
background-size: auto calc(100% - 70px);
background-position: left bottom;
background-color: #F7F8FC;
padding-bottom: 66px;
}
@media screen and (max-width: 768px) {
.p-service {
background-size: auto 100%;
background-position: left top 28.125vw;
padding-bottom: 4.6875vw;
}
}
.p-service_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
.p-service_title {
display: block;
}
.p-service_title .p-blockTitle {
padding-top: 14.0625vw;
background-color: transparent;
}
}
.p-service_lists {
width: 1080px;
margin: 110px auto 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.p-service_lists {
width: 100%;
padding: 9.375vw 4.6875vw 0;
margin-top: 0;
}
}
.p-service_list {
width: 320px;
height: 300px;
background-color: #fff;
border-radius: 5px;
margin-bottom: 60px;
text-align: center;
padding-top: 50px;
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-service_list {
-webkit-box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
}
}
@media screen and (max-width: 768px) {
.p-service_list {
width: calc((100vw - 4.6875vw * 3) / 2);
height: calc((100vw - 4.6875vw * 3) / 2);
margin-bottom: 4.6875vw;
padding-top: 0;
}
.p-service_list a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
width: 100%;
height: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.p-service_list h3 {
font-size: 20px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-service_list h3 {
font-size: 6.25vw;
}
}
@media screen and (max-width: 768px) {
.p-service_list h3 {
font-size: 12px;
margin-top: 4.6875vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-service_list h3 {
font-size: 3.75vw;
}
}
@media screen and (max-width: 768px) {
.p-service_list h3.oneLine {
margin-top: 7.03125vw;
}
}
.p-service_list figure {
height: 154px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.p-service_list figure {
height: 10vw;
}
.p-service_list figure img {
height: 100%;
}
}
.p-service_list p {
color: #376084;
font-size: 15px;
}
@media screen and (max-width: 768px) {
.p-service_list p {
font-size: 4.6875vw;
}
}
@media screen and (max-width: 768px) {
.p-service_list p {
font-size: 11px;
margin-bottom: 4.6875vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-service_list p {
font-size: 3.4375vw;
}
}
.p-staff {
padding-top: 100px;
padding-bottom: 276px;
}
@media screen and (max-width: 768px) {
.p-staff {
padding-top: 0;
padding-bottom: 0;
}
}
.p-staff_title {
margin-left: 154px;
}
@media screen and (max-width: 768px) {
.p-staff_title {
margin-left: 0;
margin-top: 14.0625vw;
}
}
.p-recruit {
padding-top: 80px;
margin: 0 auto;
padding-bottom: 276px;
}
@media screen and (max-width: 768px) {
.p-recruit {
padding-top: 0;
padding-bottom: 0;
}
}
.p-recruit_title {
margin-left: 154px;
}
@media screen and (max-width: 768px) {
.p-recruit_title {
margin-left: 0;
margin-top: 14.0625vw;
}
}
.p-news {
color: #fff;
background-color: #F5C860;
background-image: url(//care-design.jp/cms/wp-content/themes/caredesign/img/top/shape_news_1.svg), url(//care-design.jp/cms/wp-content/themes/caredesign/img/top/shape_news_2.svg);
background-repeat: no-repeat;
background-size: 435px auto, 456px auto;
background-position: top left, right bottom;
padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
.p-news {
background-image: none;
padding-bottom: 9.375vw;
}
}
.p-news_inner {
margin-left: auto;
margin-right: auto;
min-width: 1280px;
max-width: 1280px;
padding: 0 80px;
}
@media screen and (max-width: 768px) {
.p-news_inner {
min-width: unset;
}
}
@media screen and (max-width: 768px) {
.p-news_inner {
min-width: unset;
max-width: unset;
width: 100%;
padding: 0 4.6875vw;
}
}
.p-news_title {
font-size: 16px;
line-height: 1.3;
color: #fff;
}
@media screen and (max-width: 768px) {
.p-news_title {
font-size: 5vw;
}
}
@media screen and (max-width: 768px) {
.p-news_title {
font-size: 11px;
border-bottom: 1px solid #fff;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-news_title {
font-size: 3.4375vw;
}
}
.p-news_title span {
font-size: 90px;
}
@media screen and (max-width: 768px) {
.p-news_title span {
font-size: 28.125vw;
}
}
@media screen and (max-width: 768px) {
.p-news_title span {
font-size: 55px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-news_title span {
font-size: 17.1875vw;
}
}
.p-news_caption {
font-size: 28px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-news_caption {
font-size: 8.75vw;
}
}
@media screen and (max-width: 768px) {
.p-news_caption {
margin-top: 2.34375vw;
font-size: 14px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-news_caption {
font-size: 4.375vw;
}
}
.p-news_slides {
margin-top: 30px;
}
@media screen and (max-width: 768px) {
.p-news_slides {
margin-top: 4.6875vw;
}
}
.p-news_slides .slick-dots {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: transparent;
margin-top: 30px;
}
@media screen and (max-width: 768px) {
.p-news_slides .slick-dots {
margin-top: 4.6875vw;
}
}
.p-news_slides .slick-dots li {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 1000px;
}
@media screen and (max-width: 768px) {
.p-news_slides .slick-dots li {
width: 4vw;
height: 4vw;
}
}
.p-news_slides .slick-dots li.slick-active {
background-color: #6F7579;
}
.p-news_slides .slick-dots li:not(:last-of-type) {
margin-right: 20px;
}
@media screen and (max-width: 768px) {
.p-news_slides .slick-dots li:not(:last-of-type) {
margin-right: 4.6875vw;
}
}
.p-news_slides .slick-list {
overflow: initial;
}
.p-news_slide {
position: relative;
width: 100%;
height: 540px;
}
@media screen and (max-width: 768px) {
.p-news_slide {
height: 50vw;
}
}
.p-news_slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.p-news_slide_info {
position: absolute;
bottom: 100px;
left: -80px;
letter-spacing: 0.15rem;
}
@media screen and (max-width: 768px) {
.p-news_slide_info {
bottom: 2.34375vw;
left: -4.6875vw;
}
}
.p-news_slide_info * {
color: #333;
background-color: #fff;
font-weight: bold;
}
.p-news_slide_info h3 {
font-size: 38px;
padding: 15px 22px;
}
@media screen and (max-width: 768px) {
.p-news_slide_info h3 {
font-size: 11.875vw;
}
}
@media screen and (max-width: 768px) {
.p-news_slide_info h3 {
font-size: 13px;
padding: 1.5625vw 4.6875vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-news_slide_info h3 {
font-size: 4.0625vw;
}
}
.p-news_slide_info ul {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-top: 20px;
font-size: 14px;
padding: 15px 40px;
}
@media screen and (max-width: 768px) {
.p-news_slide_info ul {
font-size: 4.375vw;
}
}
@media screen and (max-width: 768px) {
.p-news_slide_info ul {
font-size: 10px;
padding: 1.5625vw 4.6875vw;
margin-top: 2.34375vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-news_slide_info ul {
font-size: 3.125vw;
}
}
.p-news_slide_info ul li:not(:last-of-type) {
margin-right: 48px;
}
@media screen and (max-width: 768px) {
.p-news_slide_info ul li:not(:last-of-type) {
margin-right: 2.34375vw;
}
}
.p-netshop {
margin-left: auto;
margin-right: auto;
min-width: 1280px;
min-width: 1080px;
width: 1080px;
margin-top: 150px;
}
@media screen and (max-width: 768px) {
.p-netshop {
min-width: unset;
}
}
@media screen and (max-width: 768px) {
.p-netshop {
min-width: unset;
width: 100%;
margin-top: 14.0625vw;
}
}
.p-netshop_title {
text-align: center;
width: 372px;
margin-left: auto;
margin-right: auto;
position: relative;
}
@media screen and (max-width: 768px) {
.p-netshop_title {
width: 70vw;
text-align: left;
padding-left: 4.6875vw;
margin-left: 0;
}
.p-netshop_title img {
width: 100%;
}
}
.p-netshop_title span {
position: absolute;
font-size: 16px;
font-weight: bold;
color: #B3B6CA;
bottom: 0;
right: -125px;
}
@media screen and (max-width: 768px) {
.p-netshop_title span {
font-size: 5vw;
}
}
@media screen and (max-width: 768px) {
.p-netshop_title span {
right: -25vw;
font-size: 10px;
bottom: 3vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-netshop_title span {
font-size: 3.125vw;
}
}
.p-netshop_detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: -30px;
border: 30px solid #F0F3F5;
padding: 40px 60px 40px 68px;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.p-netshop_detail {
border-width: 7.03125vw 4.6875vw;
margin-top: -9.375vw;
padding: 4.6875vw 4.6875vw 14.0625vw;
display: block;
}
}
.p-netshop_detail figure {
width: 322px;
margin-right: 100px;
}
@media screen and (max-width: 768px) {
.p-netshop_detail figure {
width: 100%;
padding: 9.375vw;
}
}
.p-netshop_detail figure img {
width: 100%;
}
.p-netshop_detail_text {
text-align: center;
letter-spacing: 0.15rem;
position: relative;
}
.p-netshop_detail_text h3 {
font-size: 49px;
line-height: 1.36;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-netshop_detail_text h3 {
font-size: 15.3125vw;
}
}
@media screen and (max-width: 768px) {
.p-netshop_detail_text h3 {
font-size: 25px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-netshop_detail_text h3 {
font-size: 7.8125vw;
}
}
.p-netshop_detail_text p {
margin-top: 10px;
font-size: 20px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-netshop_detail_text p {
font-size: 6.25vw;
}
}
@media screen and (max-width: 768px) {
.p-netshop_detail_text p {
font-size: 15px;
text-align: left;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-netshop_detail_text p {
font-size: 4.6875vw;
}
}
.p-netshop_detail_text a {
position: absolute;
font-size: 18px;
font-weight: bold;
right: 0;
bottom: -60px;
}
@media screen and (max-width: 768px) {
.p-netshop_detail_text a {
font-size: 5.625vw;
}
}
@media screen and (max-width: 768px) {
.p-netshop_detail_text a {
bottom: -9.375vw;
font-size: 14px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-netshop_detail_text a {
font-size: 4.375vw;
}
}
.p-blog {
margin-top: 100px;
background: url(//care-design.jp/cms/wp-content/themes/caredesign/img/top/shape_blog.svg) no-repeat;
background-size: auto 100%;
background-position: right top;
padding-top: 60px;
padding-bottom: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.p-blog {
background-image: none;
margin-top: 14.0625vw;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 14.0625vw;
}
}
.p-blog_inner {
width: 1200px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
@media screen and (max-width: 768px) {
.p-blog_inner {
width: 100%;
display: block;
padding: 4.6875vw;
}
}
.p-blog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
font-size: 16px;
font-weight: bold;
color: #fff;
}
@media screen and (max-width: 768px) {
.p-blog_title {
font-size: 5vw;
}
}
@media screen and (max-width: 768px) {
.p-blog_title {
font-size: 10px;
color: #8798C9;
border-bottom: 1px solid #8798C9;
padding-bottom: 4.6875vw;
margin-bottom: 4.6875vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-blog_title {
font-size: 3.125vw;
}
}
.p-blog_title span {
font-size: 90px;
line-height: 1.36;
margin-right: 10px;
}
@media screen and (max-width: 768px) {
.p-blog_title span {
font-size: 28.125vw;
}
}
@media screen and (max-width: 768px) {
.p-blog_title span {
font-size: 55px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-blog_title span {
font-size: 17.1875vw;
}
}
.p-blog_caption {
color: #fff;
font-size: 28px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-blog_caption {
font-size: 8.75vw;
}
}
@media screen and (max-width: 768px) {
.p-blog_caption {
font-size: 14px;
color: #8798C9;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-blog_caption {
font-size: 4.375vw;
}
}
.p-blog_lists {
width: 1200px;
margin-top: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media screen and (max-width: 768px) {
.p-blog_lists {
width: 100%;
margin-top: 4.6875vw;
}
}
.p-blog_list {
width: 350px;
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
background-color: #fff;
margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.p-blog_list {
-webkit-box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
}
}
@media screen and (min-width: 769px) {
.p-blog_list:not(:nth-child(3n)) {
margin-right: 75px;
}
}
@media screen and (max-width: 768px) {
.p-blog_list {
width: 100%;
margin-bottom: 4.6875vw;
}
}
.p-blog_list a {
display: block;
}
.p-blog_list_thumb {
position: relative;
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
.p-blog_list_thumb {
-webkit-box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
}
}
.p-blog_list_thumb img {
width: 100%;
height: 216px;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.p-blog_list_thumb img {
height: 55vw;
}
}
.p-blog_list_thumb figcaption {
position: absolute;
right: 18px;
bottom: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
display: block;
color: #fff;
background-color: #3B53A7;
font-size: 14px;
padding: 4px 22px;
border-radius: 1000px;
}
@media screen and (max-width: 768px) {
.p-blog_list_thumb figcaption {
font-size: 4.375vw;
}
}
@media screen and (max-width: 768px) {
.p-blog_list_thumb figcaption {
font-size: 12px;
right: 4.6875vw;
padding: 1.25vw 4.6875vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-blog_list_thumb figcaption {
font-size: 3.75vw;
}
}
.p-blog_list_info {
background-color: #fff;
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
padding: 20px 24px;
letter-spacing: 0.15rem;
}
@media screen and (max-width: 768px) {
.p-blog_list_info {
-webkit-box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
box-shadow: 0 0.9375vw 9.375vw rgba(0, 0, 0, 0.1);
}
}
@media screen and (max-width: 768px) {
.p-blog_list_info {
padding: 4.6875vw;
}
}
.p-blog_list_title {
font-size: 17px;
line-height: 1.5;
margin-bottom: 15px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-blog_list_title {
font-size: 5.3125vw;
}
}
@media screen and (max-width: 768px) {
.p-blog_list_title {
font-size: 15px;
margin-bottom: 2.34375vw;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-blog_list_title {
font-size: 4.6875vw;
}
}
.p-blog_list_date {
font-size: 14px;
}
@media screen and (max-width: 768px) {
.p-blog_list_date {
font-size: 4.375vw;
}
}
@media screen and (max-width: 768px) {
.p-blog_list_date {
font-size: 11px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.p-blog_list_date {
font-size: 3.4375vw;
}
}
.p-blog_list_tags {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.p-blog_list_tags li {
display: inline-block;
font-size: 10px;
color: #6F7579;
background-color: #F0F3F5;
border-radius: 1000px;
padding: 3px 13px;
margin-right: 8px;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-blog_list_tags li {
font-size: 3.125vw;
}
}
@media screen and (max-width: 768px) {
.p-blog_list_tags li {
padding: 0.9375vw 3.125vw;
margin-right: 2.5vw;
}
}
.p-blog_list img {
width: 100%;
}
.p-blog_list_cat {
font-weight: bold;
}
.p-blog_btn {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
@media screen and (max-width: 768px) {
.p-blog_btn {
-ms-flex-item-align: unset;
-ms-grid-row-align: unset;
align-self: unset;
margin-left: auto;
margin-right: auto;
margin-top: 4.6875vw;
}
}