@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
html {
overflow-y: scroll;
overflow-x: hidden;
font-size: 10px; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
img {
vertical-align: middle;
max-width: 100%;
}
address, caption, cite, code, dfn, var {
font-style: normal;
font-weight: normal;
}
li {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: "";
}
abbr, acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input, textarea, select, button {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
} input, textarea, select {
font-size: 100%;
} legend {
color: #000;
}
del, ins {
text-decoration: none;
}
main {
display: block;
}
section {
position: relative;
}    @media screen and (min-width: 835px) {
.mbpc-1 {
margin-bottom: 1px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-1 {
margin-bottom: 1px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-2 {
margin-bottom: 2px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-2 {
margin-bottom: 2px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-3 {
margin-bottom: 3px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-3 {
margin-bottom: 3px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-4 {
margin-bottom: 4px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-4 {
margin-bottom: 4px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-5 {
margin-bottom: 5px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-5 {
margin-bottom: 5px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-6 {
margin-bottom: 6px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-6 {
margin-bottom: 6px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-7 {
margin-bottom: 7px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-7 {
margin-bottom: 7px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-8 {
margin-bottom: 8px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-8 {
margin-bottom: 8px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-9 {
margin-bottom: 9px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-9 {
margin-bottom: 9px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-10 {
margin-bottom: 10px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-10 {
margin-bottom: 10px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-11 {
margin-bottom: 11px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-11 {
margin-bottom: 11px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-12 {
margin-bottom: 12px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-12 {
margin-bottom: 12px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-13 {
margin-bottom: 13px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-13 {
margin-bottom: 13px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-14 {
margin-bottom: 14px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-14 {
margin-bottom: 14px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-15 {
margin-bottom: 15px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-15 {
margin-bottom: 15px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-16 {
margin-bottom: 16px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-16 {
margin-bottom: 16px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-17 {
margin-bottom: 17px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-17 {
margin-bottom: 17px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-18 {
margin-bottom: 18px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-18 {
margin-bottom: 18px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-19 {
margin-bottom: 19px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-19 {
margin-bottom: 19px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-20 {
margin-bottom: 20px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-20 {
margin-bottom: 20px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-21 {
margin-bottom: 21px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-21 {
margin-bottom: 21px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-22 {
margin-bottom: 22px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-22 {
margin-bottom: 22px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-23 {
margin-bottom: 23px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-23 {
margin-bottom: 23px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-24 {
margin-bottom: 24px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-24 {
margin-bottom: 24px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-25 {
margin-bottom: 25px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-25 {
margin-bottom: 25px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-26 {
margin-bottom: 26px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-26 {
margin-bottom: 26px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-27 {
margin-bottom: 27px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-27 {
margin-bottom: 27px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-28 {
margin-bottom: 28px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-28 {
margin-bottom: 28px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-29 {
margin-bottom: 29px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-29 {
margin-bottom: 29px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-30 {
margin-bottom: 30px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-30 {
margin-bottom: 30px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-31 {
margin-bottom: 31px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-31 {
margin-bottom: 31px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-32 {
margin-bottom: 32px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-32 {
margin-bottom: 32px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-33 {
margin-bottom: 33px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-33 {
margin-bottom: 33px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-34 {
margin-bottom: 34px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-34 {
margin-bottom: 34px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-35 {
margin-bottom: 35px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-35 {
margin-bottom: 35px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-36 {
margin-bottom: 36px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-36 {
margin-bottom: 36px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-37 {
margin-bottom: 37px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-37 {
margin-bottom: 37px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-38 {
margin-bottom: 38px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-38 {
margin-bottom: 38px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-39 {
margin-bottom: 39px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-39 {
margin-bottom: 39px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-40 {
margin-bottom: 40px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-40 {
margin-bottom: 40px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-41 {
margin-bottom: 41px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-41 {
margin-bottom: 41px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-42 {
margin-bottom: 42px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-42 {
margin-bottom: 42px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-43 {
margin-bottom: 43px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-43 {
margin-bottom: 43px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-44 {
margin-bottom: 44px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-44 {
margin-bottom: 44px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-45 {
margin-bottom: 45px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-45 {
margin-bottom: 45px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-46 {
margin-bottom: 46px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-46 {
margin-bottom: 46px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-47 {
margin-bottom: 47px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-47 {
margin-bottom: 47px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-48 {
margin-bottom: 48px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-48 {
margin-bottom: 48px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-49 {
margin-bottom: 49px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-49 {
margin-bottom: 49px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-50 {
margin-bottom: 50px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-50 {
margin-bottom: 50px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-51 {
margin-bottom: 51px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-51 {
margin-bottom: 51px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-52 {
margin-bottom: 52px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-52 {
margin-bottom: 52px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-53 {
margin-bottom: 53px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-53 {
margin-bottom: 53px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-54 {
margin-bottom: 54px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-54 {
margin-bottom: 54px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-55 {
margin-bottom: 55px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-55 {
margin-bottom: 55px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-56 {
margin-bottom: 56px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-56 {
margin-bottom: 56px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-57 {
margin-bottom: 57px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-57 {
margin-bottom: 57px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-58 {
margin-bottom: 58px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-58 {
margin-bottom: 58px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-59 {
margin-bottom: 59px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-59 {
margin-bottom: 59px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-60 {
margin-bottom: 60px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-60 {
margin-bottom: 60px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-61 {
margin-bottom: 61px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-61 {
margin-bottom: 61px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-62 {
margin-bottom: 62px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-62 {
margin-bottom: 62px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-63 {
margin-bottom: 63px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-63 {
margin-bottom: 63px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-64 {
margin-bottom: 64px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-64 {
margin-bottom: 64px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-65 {
margin-bottom: 65px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-65 {
margin-bottom: 65px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-66 {
margin-bottom: 66px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-66 {
margin-bottom: 66px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-67 {
margin-bottom: 67px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-67 {
margin-bottom: 67px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-68 {
margin-bottom: 68px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-68 {
margin-bottom: 68px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-69 {
margin-bottom: 69px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-69 {
margin-bottom: 69px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-70 {
margin-bottom: 70px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-70 {
margin-bottom: 70px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-71 {
margin-bottom: 71px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-71 {
margin-bottom: 71px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-72 {
margin-bottom: 72px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-72 {
margin-bottom: 72px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-73 {
margin-bottom: 73px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-73 {
margin-bottom: 73px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-74 {
margin-bottom: 74px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-74 {
margin-bottom: 74px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-75 {
margin-bottom: 75px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-75 {
margin-bottom: 75px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-76 {
margin-bottom: 76px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-76 {
margin-bottom: 76px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-77 {
margin-bottom: 77px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-77 {
margin-bottom: 77px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-78 {
margin-bottom: 78px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-78 {
margin-bottom: 78px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-79 {
margin-bottom: 79px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-79 {
margin-bottom: 79px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-80 {
margin-bottom: 80px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-80 {
margin-bottom: 80px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-81 {
margin-bottom: 81px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-81 {
margin-bottom: 81px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-82 {
margin-bottom: 82px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-82 {
margin-bottom: 82px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-83 {
margin-bottom: 83px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-83 {
margin-bottom: 83px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-84 {
margin-bottom: 84px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-84 {
margin-bottom: 84px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-85 {
margin-bottom: 85px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-85 {
margin-bottom: 85px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-86 {
margin-bottom: 86px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-86 {
margin-bottom: 86px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-87 {
margin-bottom: 87px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-87 {
margin-bottom: 87px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-88 {
margin-bottom: 88px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-88 {
margin-bottom: 88px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-89 {
margin-bottom: 89px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-89 {
margin-bottom: 89px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-90 {
margin-bottom: 90px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-90 {
margin-bottom: 90px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-91 {
margin-bottom: 91px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-91 {
margin-bottom: 91px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-92 {
margin-bottom: 92px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-92 {
margin-bottom: 92px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-93 {
margin-bottom: 93px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-93 {
margin-bottom: 93px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-94 {
margin-bottom: 94px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-94 {
margin-bottom: 94px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-95 {
margin-bottom: 95px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-95 {
margin-bottom: 95px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-96 {
margin-bottom: 96px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-96 {
margin-bottom: 96px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-97 {
margin-bottom: 97px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-97 {
margin-bottom: 97px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-98 {
margin-bottom: 98px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-98 {
margin-bottom: 98px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-99 {
margin-bottom: 99px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-99 {
margin-bottom: 99px !important;
}
}
@media screen and (min-width: 835px) {
.mbpc-100 {
margin-bottom: 100px !important;
}
}
@media screen and (max-width: 834px) {
.mbsp-100 {
margin-bottom: 100px !important;
}
}
.mb0 {
margin-bottom: 0 !important;
}
body {
color: #333333;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-size: 100%;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
overflow-x: hidden;
}
a {
text-decoration: none;
-webkit-backface-visibility: hidden;
transition: all 0.3s ease;
}
a:hover {
opacity: 0.7;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
a {
display: inline-block;
}
}
@media screen and (min-width: 835px) {
a[href^=tel] {
pointer-events: none;
}
}
.clearfix {
zoom: 1;
}
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
content: "";
display: table;
}
@media screen and (max-width: 834px) {
.pc {
display: none !important;
}
}
@media screen and (max-width: 1024px) {
.pc-ipd {
display: none !important;
}
}
@media screen and (max-width: 990px) {
.pc-lg {
display: none !important;
}
}
@media screen and (max-width: 640px) {
.pc-sm {
display: none !important;
}
}
@media screen and (max-width: 410px) {
.pc-xs {
display: none !important;
}
}
@media screen and (min-width: 835px) {
.sp {
display: none !important;
}
}
@media screen and (min-width: 1025px) {
.sp-ipd {
display: none !important;
}
}
@media screen and (min-width: 991px) {
.sp-lg {
display: none !important;
}
}
@media screen and (min-width: 641px) {
.sp-sm {
display: none !important;
}
}
.u-fn-hover {
display: inline-block;
}
@media screen and (min-width: 835px) {
.u-fn-hover {
transition: all 0.2s;
}
.u-fn-hover:hover {
opacity: 0.7;
}
}
.u-pull--left {
margin-left: calc((100vw - 100%) / 2 * -1);
}
.u-pull--right {
margin-right: calc((100vw - 100%) / 2 * -1);
} .c-fc--white {
color: white !important;
}
.c-fc--black {
color: black !important;
}
.c-fc--navy {
color: #62809F !important;
}
.c-fw--lt {
font-weight: 300 !important;
}
.c-fw--rg {
font-weight: 400 !important;
}
.c-fw--md {
font-weight: 500 !important;
}
.c-fw--sbd {
font-weight: 600 !important;
}
.c-fw--bd {
font-weight: 700 !important;
}
.c-fw--bk {
font-weight: 900 !important;
}
.c-tx--v {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
@media screen and (min-width: 835px) {
.c-tx--v-pc {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
}
.c-al--c {
text-align: center !important;
}
.c-al--r {
text-align: right !important;
}
.c-al--l {
text-align: left;
}
.c-val--md {
vertical-align: middle;
}
.c-val--top {
vertical-align: top;
}
.c-scroll-box {
padding-bottom: 20px;
overflow-x: scroll;
overflow-y: hidden;
}
.c-scroll-box-y {
padding-bottom: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
@media screen and (max-width: 834px) {
.c-scroll-box-pc {
padding-bottom: 20px;
overflow-x: scroll;
overflow-y: hidden;
}
}
.c-pull--left {
margin-left: calc((100vw - 100%) / 2 * -1);
}
.c-pull--right {
margin-right: calc((100vw - 100%) / 2 * -1);
} .c-txt__basic {
font-size: 1.6rem;
line-height: 2;
}
.c-txt__01 {
font-size: 1.8rem;
line-height: 1.6666666667;
color: #454545;
font-weight: 500;
}
@media screen and (max-width: 834px) {
.c-txt__01 {
font-size: 1.4rem;
line-height: 1.7142857143;
}
}
.c-ttl__01 {
font-size: 3.2rem;
line-height: 1.2;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.c-ttl__01 {
font-size: 2.4rem;
line-height: 1.4166666667;
}
}
.c-ttl__02 {
font-size: 2.2rem;
line-height: 2.4545454545;
color: #62809F;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.c-ttl__02 {
font-size: 2.2rem;
line-height: 1.5454545455;
}
}
.c-btn__01 {
font-weight: 500;
font-family: "Jost", sans-serif;
color: #62809F;
letter-spacing: 1.7px;
text-align: center;
display: inline-block;
font-size: 2.2rem;
}
@media screen and (max-width: 1245px) {
.c-btn__01 {
font-size: 1.8rem;
}
}
@media screen and (max-width: 834px) {
.c-btn__01 {
font-size: 2rem;
}
}
.c-btn__01:hover span {
transition: all 0.3s;
transform: translateX(10px);
}
.c-btn__01:hover span:after {
right: -15px;
transition: all 0.3s;
}
.c-btn__01 span {
transition: all 0.3s;
display: inline-block;
padding-right: 102px;
position: relative;
}
@media screen and (max-width: 1245px) {
.c-btn__01 span {
padding-right: 80px;
}
}
@media screen and (max-width: 834px) {
.c-btn__01 span {
padding-right: 72px;
}
}
.c-btn__01 span:after {
content: "";
transition: all 0.3s;
width: 60px;
height: 8px;
background: url(/wp-content/themes/GOOFY/img/index/icon-link-02.png) center no-repeat;
background-size: contain;
position: absolute;
right: -3px;
top: 54%;
transform: translateY(-50%);
}
.c-btn__white {
color: #fff;
}
.c-btn__white span:after {
background: url(/wp-content/themes/GOOFY/img/index/icon-link.png) center no-repeat;
background-size: contain;
}
.c-btn__02 {
width: 416px;
height: 87px;
border: 1px solid #62809F;
border-radius: 20px;
display: inline-flex;
align-items: center;
color: #62809F;
padding-left: 29px;
position: relative;
}
@media screen and (max-width: 834px) {
.c-btn__02 {
max-width: 324px;
width: 100%;
height: 76px;
}
}
.c-btn__02:hover {
background: #62809f;
color: white;
border-color: currentColor;
}
.c-btn__02:hover svg path {
stroke: white !important;
}
.c-btn__02:hover .c-btn__02-img {
right: 15px;
}
@media screen and (max-width: 834px) {
.c-btn__02 svg {
width: 56px;
}
}
.c-btn__02 svg path {
transition: all 0.3s ease;
}
.c-btn__02-ttl {
font-size: 1.8rem;
line-height: 2.5555555556;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.c-btn__02-ttl {
font-size: 1.8rem;
line-height: 2.5555555556;
}
}
.c-btn__02-img {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
transition: all 0.3s ease;
}
.scrollin {
opacity: 0;
transform: translate(0, 70px);
}
.scrollin.active {
opacity: 1;
transform: translate(0, 0);
transition: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.inner {
display: block;
max-width: 1056px;
padding: 0 15px;
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 834px) {
.inner {
padding: 0 29px;
}
}
@media screen and (max-width: 410px) {
.inner {
padding: 0 12px;
}
}
.form-control {
display: block;
width: 100%;
height: 45px;
background: white;
border: 1px solid #ccc;
font-weight: 500;
padding: 5px 10px;
font-size: 1.5rem;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.pure-input {
position: relative;
color: #333333;
font-size: 1.6rem;
}
@media screen and (max-width: 834px) {
.pure-input {
font-size: 1.4rem;
}
}
.pure-input input {
border: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
.pure-input input[type=checkbox] + span {
position: relative;
padding: 5px 5px 5px 24px;
letter-spacing: 1.1px;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
@media screen and (max-width: 834px) {
.pure-input input[type=checkbox] + span {
padding: 5px 0 5px 28px;
}
}
@media screen and (max-width: 410px) {
.pure-input input[type=checkbox] + span {
letter-spacing: 0;
}
}
.pure-input input[type=checkbox] + span:before {
box-sizing: content-box;
content: "";
color: #4F8196;
position: absolute;
top: 44%;
left: 0;
width: 20px;
height: 20px;
margin-top: -9px;
border: 1px solid #C7C7C7;
text-align: center;
transition: all 0.4s ease;
}
.pure-input input[type=checkbox] + span:after {
box-sizing: content-box;
content: "";
background-color: #62809F;
position: absolute;
top: 47%;
left: 4px;
width: 12px;
height: 12px;
margin-top: -5px;
margin-left: 1px;
transform: scale(0);
transform-origin: 50%;
transition: transform 200ms ease-out;
}
.pure-input input[type=checkbox] + label, .pure-input input[type=checkbox] + span {
position: relative;
padding: 5px 5px 5px 23px;
letter-spacing: 0;
font-size: 1.2rem;
}
@media screen and (max-width: 834px) {
.pure-input input[type=checkbox] + label, .pure-input input[type=checkbox] + span {
font-size: 1.4rem;
}
}
.pure-input input[type=checkbox] + label:after, .pure-input input[type=checkbox] + span:after {
background-color: transparent;
top: 50%;
left: 6.5px;
width: 6px;
height: 3px;
margin-top: -4px;
border-style: solid;
border-color: #fff;
border-width: 0 0 2px 2px;
-o-border-image: none;
border-image: none;
transform: rotate(-45deg) scale(0);
}
@media screen and (max-width: 834px) {
.pure-input input[type=checkbox] + label:after, .pure-input input[type=checkbox] + span:after {
left: 0;
}
}
.pure-input input[type=checkbox] + label:before, .pure-input input[type=checkbox] + span:before {
width: 11px;
height: 11px;
left: 5px;
top: 57%;
}
@media screen and (max-width: 834px) {
.pure-input input[type=checkbox] + label:before, .pure-input input[type=checkbox] + span:before {
width: 13px;
height: 13px;
left: -3px;
}
}
.pure-input input[type=checkbox]:checked + label:after, .pure-input input[type=checkbox]:checked + span:after {
content: "";
transform: rotate(-45deg) scale(1);
transition: transform 200ms ease-out;
}
.pure-input input[type=checkbox]:checked + label:before, .pure-input input[type=checkbox]:checked + span:before {
-webkit-animation: borderscale 200ms ease-in;
animation: borderscale 200ms ease-in;
background: #4F8196;
}
.pure-input input[type=radio] + label {
position: relative;
padding: 5px 5px 5px 24px;
letter-spacing: 1.1px;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
@media screen and (max-width: 834px) {
.pure-input input[type=radio] + label {
padding: 5px 0 5px 28px;
}
}
@media screen and (max-width: 410px) {
.pure-input input[type=radio] + label {
letter-spacing: 0;
}
}
.pure-input input[type=radio] + label:before {
box-sizing: content-box;
content: "";
color: #4F8196;
position: absolute;
top: 44%;
left: 0;
width: 20px;
height: 20px;
margin-top: -9px;
border-radius: 50%;
border: 1px solid #C7C7C7;
text-align: center;
transition: all 0.4s ease;
}
.pure-input input[type=radio] + label:after {
box-sizing: content-box;
content: "";
background-color: #62809F;
position: absolute;
top: 47%;
left: 4px;
width: 12px;
height: 12px;
margin-top: -5px;
margin-left: 1px;
border-radius: 50%;
transform: scale(0);
transform-origin: 50%;
transition: transform 200ms ease-out;
}
.pure-input input[type=radio]:checked + label:before {
-webkit-animation: borderscale 300ms ease-in;
animation: borderscale 300ms ease-in;
background-color: white;
}
.pure-input input[type=radio]:checked + label:after {
transform: scale(1);
}
.pure-check {
display: block;
width: 100%;
text-align: center;
margin-bottom: 16px;
}
@media screen and (max-width: 834px) {
.pure-check {
margin-bottom: 14px;
}
}
.none {
display: none;
}
#header .hd-flex {
position: fixed;
top: 0;
left: 0;
max-width: 250px;
width: 100%;
padding: 36px 1px 36px 43px;
z-index: 99;
}
@media screen and (max-width: 1245px) {
#header .hd-flex {
padding: 36px 15px;
max-width: 200px;
}
}
@media screen and (max-width: 834px) {
#header .hd-flex {
max-width: 100%;
transition: all 0.3s;
padding: 19px 29px 16px;
}
#header .hd-flex.on {
transition: all 0.3s;
background: #62809F !important;
}
#header .hd-flex.on .logo .on {
display: none;
}
#header .hd-flex.on .logo .off {
display: block;
}
#header .hd-flex.bg {
background: #62809f;
}
}
@media screen and (min-width: 835px) {
#header .hd-flex__page .mega-menu li a {
color: #62809F !important;
}
}
#header .hd-flex__page .hd-mail-sp .off {
display: none;
}
@media screen and (max-width: 834px) {
#header .hd-flex__page {
background: #62809F;
}
#header .hd-flex__page .logo .off {
display: block !important;
}
#header .hd-flex__page .logo .on {
display: none;
}
#header .hd-flex__page .hd-mail-sp .on {
display: none;
}
#header .hd-flex__page .hd-mail-sp .off {
display: block !important;
}
#header .hd-flex__page .mobile-icon span {
background: #fff;
}
#header .hd-flex__page .mobile-icon span:after, #header .hd-flex__page .mobile-icon span:before {
background: #fff;
}
#header .hd-flex__page.bg {
background: rgba(255, 255, 255, 0.8);
}
#header .hd-flex__page.bg .logo .off {
display: none !important;
}
#header .hd-flex__page.bg .logo .on {
display: block !important;
}
#header .hd-flex__page.bg .hd-mail-sp .on {
display: block !important;
}
#header .hd-flex__page.bg .hd-mail-sp .off {
display: none !important;
}
#header .hd-flex__page.bg .mobile-icon span {
background: #62809F !important;
}
#header .hd-flex__page.bg .mobile-icon span:after, #header .hd-flex__page.bg .mobile-icon span:before {
background: #62809F !important;
}
}
#header .hd-flex .logo {
margin-bottom: 51px;
}
@media screen and (max-width: 834px) {
#header .hd-flex .logo {
margin-bottom: 0;
width: 136px;
}
#header .hd-flex .logo img {
width: 100%;
}
}
#header .hd-flex .logo .off {
display: none;
}
@media screen and (min-width: 835px) {
#header .hd-flex .logo-index {
transition: all 0.3s;
transform: scale(2.2) translate(52px, 10px);
}
#header .hd-flex .logo-index.on {
transition: all 0.5s;
transform: scale(1) translate(0, 0);
}
}
@media screen and (max-width: 834px) {
#header .hd-flex .nav-menu {
position: fixed;
top: 70px;
left: 0;
background: #62809f;
overflow-y: auto;
width: 100%;
height: calc(100% - 70px);
padding: 58px 47px 30px;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
z-index: -1;
}
#header .hd-flex .nav-menu.on {
z-index: 99;
opacity: 1;
pointer-events: auto;
transition: all 0.3s;
}
#header .hd-flex .nav-menu.on .show-menu > .item > a {
padding-top: 0;
}
#header .hd-flex .nav-menu.on .show-menu > .item > a:after {
height: 0;
opacity: 0;
transition: all 0.6s;
}
}
@media screen and (max-width: 410px) {
#header .hd-flex .nav-menu {
padding: 50px 20px;
}
}
#header .hd-flex .nav-menu .show-menu {
margin-bottom: 0;
}
@media screen and (min-width: 835px) {
#header .hd-flex .nav-menu .show-menu {
min-height: 284px;
}
}
@media screen and (max-width: 834px) {
#header .hd-flex .nav-menu .show-menu {
margin-bottom: 55px;
}
}
#header .hd-flex .nav-menu .show-menu .active > a:before {
width: 100%;
}
#header .hd-flex .nav-menu .show-menu > .item {
margin-bottom: 16px;
letter-spacing: -0.75px;
}
#header .hd-flex .nav-menu .show-menu > .item:nth-child(2) {
margin-bottom: 0;
}
#header .hd-flex .nav-menu .show-menu > .item:nth-child(2) a {
margin-bottom: 18px;
}
@media screen and (max-width: 834px) {
#header .hd-flex .nav-menu .show-menu > .item {
margin-bottom: 27px;
}
}
#header .hd-flex .nav-menu .show-menu > .item > a {
color: #62809F;
font-weight: bold;
font-size: 1.4rem;
display: inline-block;
position: relative;
}
#header .hd-flex .nav-menu .show-menu > .item > a:before {
content: "";
display: inline-block;
position: absolute;
width: 0;
height: 1px;
background: currentColor;
bottom: 0;
left: 0;
transition: all 0.3s ease;
}
@media screen and (max-width: 834px) {
#header .hd-flex .nav-menu .show-menu > .item > a {
color: #fff;
font-size: 2.2rem;
position: relative;
padding-top: 10px;
display: inline-block;
}
#header .hd-flex .nav-menu .show-menu > .item > a:before {
content: "";
display: inline-block;
position: absolute;
width: 0;
height: 1px;
background: currentColor;
bottom: 0;
left: 0;
transition: all 0.3s ease;
}
#header .hd-flex .nav-menu .show-menu > .item > a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 30px;
transition: all 0.6s;
background-color: #62809f;
transform-origin: left;
z-index: 1000;
width: 100%;
display: block;
}
}
#header .hd-flex .nav-menu .show-menu > .item .mega-menu {
height: 0;
overflow: hidden;
transition: all 0.5s;
min-width: 300px;
}
@media screen and (max-width: 834px) {
#header .hd-flex .nav-menu .show-menu > .item .mega-menu {
height: auto;
min-width: 100px;
}
}
#header .hd-flex .nav-menu .show-menu > .item .mega-menu li {
margin-bottom: 10px;
}
@media screen and (max-width: 834px) {
#header .hd-flex .nav-menu .show-menu > .item .mega-menu li {
margin-bottom: 17px;
}
}
#header .hd-flex .nav-menu .show-menu > .item .mega-menu li.active > a:before {
width: 100%;
}
#header .hd-flex .nav-menu .show-menu > .item .mega-menu li a {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
color: #fff;
font-weight: 500;
transition: all 0s;
font-size: 1.3rem;
letter-spacing: 0;
position: relative;
display: block;
}
#header .hd-flex .nav-menu .show-menu > .item .mega-menu li a:before {
content: "";
display: inline-block;
position: absolute;
width: 0;
height: 1px;
background: currentColor;
bottom: 0;
left: 0;
transition: all 0.3s ease;
}
@media screen and (max-width: 834px) {
#header .hd-flex .nav-menu .show-menu > .item .mega-menu li a {
letter-spacing: 0.05px;
font-size: 1.6rem;
}
}
#header .hd-flex .nav-menu .show-menu > .item:hover .mega-menu {
height: 109px;
}
#header .hd-flex .nav-menu .show-menu > .item.active > a {
display: inline-block;
}
#header .hd-flex .nav-menu .show-menu > .item.active > a:before {
width: 100%;
}
#header .hd-nav {
display: flex;
margin: 0 -13px;
}
@media screen and (max-width: 1245px) {
#header .hd-nav {
margin: 0 -6px;
}
}
@media screen and (max-width: 834px) {
#header .hd-nav {
margin: 0 -14px;
}
}
#header .hd-nav li {
padding: 0 13px;
}
@media screen and (max-width: 1245px) {
#header .hd-nav li {
padding: 0 6px;
}
}
@media screen and (max-width: 834px) {
#header .hd-nav li {
padding: 0 18px;
}
}
#header .hd-nav li a {
display: block;
text-align: center;
}
#header .hd-nav li a:hover .icon {
transition: all 0.5s;
transform: scale(1.05);
}
#header .hd-nav li a span {
display: block;
margin-top: 8px;
color: #62809F;
font-weight: bold;
font-size: 1.4rem;
}
@media screen and (max-width: 834px) {
#header .hd-nav li a span {
margin-top: 9px;
color: #fff;
font-size: 1.3rem;
}
}
#header .hd-nav li .icon {
width: 70px;
height: 70px;
position: relative;
border-radius: 100%;
box-shadow: none;
transition: all 0.5s;
margin: 0 auto;
}
#header .hd-nav.white-01 li a:hover .circle::after {
border-top: 2px solid #fff;
border-left-width: 2px;
border-right-width: 2px;
transform: rotate(315deg);
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
#header .hd-nav.white-01 li a:hover .circle::before {
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
#header .hd-nav.black li a:hover .icon {
transition: all 0.5s;
transform: scale(1.05);
}
#header .hd-nav.black li a:hover .circle::after {
border-top: 2px solid #62809f;
border-left-width: 2px;
border-right-width: 2px;
transform: rotate(315deg);
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
#header .hd-nav.black li a:hover .circle::before {
border-top-color: #62809f;
border-right-color: #62809f;
border-bottom-color: #62809f;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
#header .hd-index {
background: none;
}
#header .hd-index .nav-menu .show-menu > .item > a {
display: block;
color: #fff;
}
#header .hd-index .nav-menu .hd-nav li a span {
color: #fff;
}
#header .hd-mail-sp {
position: fixed;
z-index: 99;
top: 15px;
right: 77px;
}
#header .hd-mail-sp a {
display: inline-block;
}
#header .mobile-icon {
width: 25px;
height: 30px;
position: fixed;
right: 29px;
top: 19px;
cursor: pointer;
z-index: 99;
display: none;
}
@media screen and (max-width: 834px) {
#header .mobile-icon {
display: block;
}
}
#header .mobile-icon--w span {
background: #fff !important;
}
#header .mobile-icon--w span:before, #header .mobile-icon--w span:after {
background: #fff !important;
}
#header .mobile-icon span {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 100%;
height: 1px;
background: #62809F;
border-radius: 3px;
}
#header .mobile-icon span:before, #header .mobile-icon span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #62809F;
content: "";
transition: transform 0.3s;
border-radius: 3px;
}
#header .mobile-icon span:before {
transform: translateY(-250%);
top: -5px;
}
#header .mobile-icon span:after {
transform: translateY(250%);
bottom: -6px;
}
#header .mobile-icon.mobile-close {
right: 36px;
top: 18px;
}
#header .mobile-icon.mobile-close span {
background-color: transparent !important;
}
#header .mobile-icon.mobile-close span:before, #header .mobile-icon.mobile-close span:after {
width: 38px;
background: #fff;
}
#header .mobile-icon.mobile-close span:before {
transform: translateY(0) rotate(28deg);
top: 2px;
}
#header .mobile-icon.mobile-close span:after {
transform: translateY(0) rotate(-28deg);
bottom: -2px;
}
.is-locked {
overflow: hidden;
touch-action: none;
}
.is-locked body {
-webkit-overflow-scrolling: auto;
}
@media screen and (min-width: 1246px) {
.mbxl-114 {
margin-bottom: 114px !important;
}
}
.circle {
position: relative;
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
box-sizing: inherit;
content: "";
position: absolute;
width: calc(100% + 2px);
height: calc(100% + 2px);
}
.circle::before, .circle::after {
top: -1px;
left: -1px;
}
.circle::before {
border: 2px solid transparent;
transform: rotate(45deg);
}
.circle:hover::before {
border-top-color: #62809F;
border-right-color: #62809F;
border-bottom-color: #62809F;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.circle::after {
border: 0 solid transparent;
}
.circle:hover::after {
border-top: 2px solid #62809F;
border-left-width: 2px;
border-right-width: 2px;
transform: rotate(315deg);
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
.circle::before, .circle::after {
border-radius: 100%;
}
.white-01 .circle:hover:before {
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
}
.white-01 .circle:hover:after {
border-top: 2px solid #fff;
}
.black {
color: #62809F !important;
}
.black a, .black span {
color: #62809F !important;
}
.black .circle:hover:before {
border-top-color: #62809F;
border-right-color: #62809F;
border-bottom-color: #62809F;
}
.black .circle:hover:after {
border-top: 2px solid #62809F;
}
.white-01 .b, .white-07 .b {
display: none;
}
.white-01.black .w, .white-07.black .w {
display: none !important;
}
.white-01.black .b, .white-07.black .b {
display: block !important;
}
#footer {
background: #62809F;
padding: 59px 0;
}
@media screen and (max-width: 834px) {
#footer {
padding: 55px 0 36px;
}
}
.ft-flex {
padding-left: 11.7vw;
display: flex;
}
@media screen and (max-width: 1245px) {
.ft-flex {
padding-left: 0;
}
}
.ft-logo {
width: 233.5px;
margin-top: 15px;
}
@media screen and (max-width: 834px) {
.ft-logo {
margin-top: -15px;
width: 145px;
}
}
@media screen and (max-width: 374px) {
.ft-logo {
margin-top: 0;
width: 120px;
}
}
.ft-logo a {
display: block;
}
.ft-logo a:hover {
opacity: 1;
}
.ft-logo img {
width: 100%;
}
.ft-ct {
padding-left: 66px;
}
@media screen and (max-width: 990px) {
.ft-ct {
padding-left: 20px;
}
}
@media screen and (max-width: 834px) {
.ft-ct {
padding-left: 28px;
width: calc(100% - 145px);
}
}
@media screen and (max-width: 374px) {
.ft-ct {
padding-left: 15px;
width: calc(100% - 120px);
}
}
.ft-ct p {
color: #fff;
font-weight: 500;
line-height: 1.375;
font-size: 1.6rem;
}
@media screen and (max-width: 834px) {
.ft-ct p {
line-height: 1.69;
font-size: 1.3rem;
}
}
@media screen and (max-width: 410px) {
.ft-ct p {
font-size: 1.2rem;
}
}
@media screen and (max-width: 374px) {
.ft-ct p {
font-size: 1.1rem;
}
}
.ft-ttl {
color: #fff;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: -1px;
font-size: 2.2rem;
}
@media screen and (max-width: 834px) {
.ft-ttl {
letter-spacing: 0;
margin-bottom: 4px;
line-height: 1.69;
font-size: 1.6rem;
}
}
.ft-right {
text-align: right;
margin-top: -45px;
padding-right: 0;
}
@media screen and (max-width: 834px) {
.ft-right {
margin-top: 33px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
}
.ft-privacy {
margin-bottom: 9px;
letter-spacing: 0.5px;
}
@media screen and (max-width: 834px) {
.ft-privacy {
margin-bottom: 0;
letter-spacing: 1.85px;
text-align: left;
}
}
.ft-privacy a {
font-family: "Jost", sans-serif;
color: #fff;
font-weight: 300;
display: inline-block;
font-size: 1.4rem;
}
.ft-privacy a:hover {
opacity: 1;
}
@media screen and (max-width: 834px) {
.ft-privacy a {
font-size: 1.1rem;
}
}
.copy-right {
letter-spacing: 0.2px;
font-family: "Jost", sans-serif;
color: #fff;
font-weight: 300;
font-size: 1.2rem;
}
@media screen and (max-width: 834px) {
.copy-right {
text-align: center;
letter-spacing: 1.5px;
font-size: 1.2rem;
order: -1;
}
}
.mv-index {
position: relative;
}
.mv-img img {
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover";
}
.mv-ttl {
position: absolute;
bottom: -23px;
left: 56%;
max-width: 900px;
padding: 0 10px;
z-index: 1;
transform: translateX(-50%);
}
@media screen and (max-width: 1245px) {
.mv-ttl {
bottom: 0;
left: 54%;
max-width: 666px;
}
}
@media screen and (max-width: 990px) {
.mv-ttl {
bottom: 0;
left: 60%;
max-width: 500px;
}
}
@media screen and (max-width: 834px) {
.mv-ttl {
bottom: -8px;
left: 0;
padding: 0 11px;
max-width: 501px;
transform: translateY(0);
width: 100%;
}
}
@media screen and (max-width: 410px) {
.mv-ttl {
padding: 0 12px;
}
}
.sec-goofy {
padding: 76px 0;
}
@media screen and (max-width: 834px) {
.sec-goofy {
padding: 51px 0 20px;
}
}
.sec-goofy .inner {
max-width: 900px;
}
.goofy-flex {
display: flex;
align-items: flex-end;
}
@media screen and (max-width: 834px) {
.goofy-flex {
display: flex;
flex-wrap: wrap;
}
}
.goofy-desc {
color: #62809F;
font-weight: bold;
line-height: 2.222;
width: 57.5%;
padding-right: 5px;
font-feature-settings: "palt" 1;
font-size: 1.8rem;
}
@media screen and (max-width: 1245px) {
.goofy-desc {
width: 45%;
font-size: 1.6rem;
}
}
@media screen and (max-width: 990px) {
.goofy-desc {
width: 50%;
font-size: 1.4rem;
}
}
@media screen and (max-width: 834px) {
.goofy-desc {
padding-right: 0;
width: 100%;
margin-bottom: 46px;
line-height: 2.07;
font-size: 1.5rem;
}
}
@media screen and (max-width: 410px) {
.goofy-desc {
font-size: 1.2rem;
}
}
.goofy-box {
background: url(/wp-content/themes/GOOFY/img/index/img-01.jpg) center no-repeat;
background-size: cover;
padding: 32px 26px 34px;
width: 142.5%;
margin-right: -100%;
margin-bottom: -40px;
}
.goofy-box .c-btn__01 {
margin-left: 151px;
}
@media screen and (max-width: 1245px) {
.goofy-box .c-btn__01 {
margin-left: 100px;
}
}
@media screen and (max-width: 834px) {
.goofy-box .c-btn__01 {
margin-left: auto;
justify-content: flex-end;
display: flex;
margin-right: 4px;
}
}
@media screen and (max-width: 1245px) {
.goofy-box {
margin-bottom: 0;
margin-right: 0;
width: 55%;
padding: 20px;
}
}
@media screen and (max-width: 990px) {
.goofy-box {
width: 50%;
padding: 15px;
}
}
@media screen and (max-width: 834px) {
.goofy-box {
width: 94%;
margin-left: auto;
margin-right: -29px;
padding: 26px 21px 21px;
}
}
@media screen and (max-width: 410px) {
.goofy-box {
padding: 15px;
margin-right: -12px;
}
}
.goofy-ttl {
margin-bottom: 55px;
letter-spacing: -0.2px;
font-weight: bold;
color: #fff;
line-height: 1.571;
font-size: 2.8rem;
}
@media screen and (max-width: 1245px) {
.goofy-ttl {
letter-spacing: 0;
margin-bottom: 25px;
font-size: 2.2rem;
}
}
@media screen and (max-width: 990px) {
.goofy-ttl {
font-size: 2rem;
}
}
@media screen and (max-width: 834px) {
.goofy-ttl {
letter-spacing: 0.5px;
margin-bottom: 22px;
font-size: 2.2rem;
}
}
@media screen and (max-width: 410px) {
.goofy-ttl {
font-size: 1.8rem;
}
}
.sec-hands .inner {
max-width: 900px;
}
.sec-hands .hands-brand {
width: auto;
margin-right: calc((1080px - 100vw) / 1.5);
overflow: hidden;
}
@media screen and (max-width: 834px) {
.sec-hands .hands-brand {
margin-right: 0;
}
}
.sec-hands .hands-bg .inner {
max-width: 1056px;
}
.hands-bg {
padding: 123px 0 63px;
background: url(/wp-content/themes/GOOFY/img/index/img-02.jpg) bottom left no-repeat;
background-size: 100%;
}
@media screen and (max-width: 834px) {
.hands-bg {
padding: 74px 0 20px;
background: url(/wp-content/themes/GOOFY/img/index/img-02.jpg) 133% -65% no-repeat;
background-size: 118%;
}
.hands-bg .inner {
padding: 0 12px;
}
}
@media screen and (max-width: 640px) {
.hands-bg {
background: url(/wp-content/themes/GOOFY/img/index/img-02.jpg) 78% 29% no-repeat;
background-size: 118%;
}
}
@media screen and (max-width: 834px) {
.hands-bg .c-btn__01 {
margin: 0 auto;
display: block;
transform: translateX(13px);
}
}
.hands-flex {
display: flex;
align-items: flex-end;
}
.hands-heading {
margin-left: 20px;
padding-left: 15px;
letter-spacing: 2.5px;
width: 50%;
line-height: 1;
font-weight: 300;
color: #EBEFF3;
font-family: "Jost", sans-serif;
font-size: 13.6rem;
}
@media screen and (max-width: 1245px) {
.hands-heading {
width: 40%;
padding-left: 0;
margin-left: 0;
letter-spacing: 0;
font-size: 8rem;
}
}
@media screen and (max-width: 990px) {
.hands-heading {
font-size: 6rem;
}
}
@media screen and (max-width: 834px) {
.hands-heading {
width: 52%;
padding-bottom: 48px;
}
}
@media screen and (max-width: 640px) {
.hands-heading {
transform: translateX(-8px);
letter-spacing: 1px;
}
}
@media screen and (max-width: 410px) {
.hands-heading {
transform: translateX(0);
letter-spacing: 0;
font-size: 5rem;
}
}
@media screen and (max-width: 374px) {
.hands-heading {
font-size: 4rem;
}
}
.hands-ct {
width: 50%;
}
@media screen and (max-width: 1245px) {
.hands-ct {
width: 60%;
}
}
@media screen and (max-width: 834px) {
.hands-ct {
width: 48%;
}
}
.hands-ct p {
font-weight: 500;
margin-bottom: 33px;
letter-spacing: 0.8px;
line-height: 2.0625;
font-size: 1.6rem;
}
@media screen and (max-width: 1245px) {
.hands-ct p {
line-height: 1.8;
letter-spacing: 0;
margin-bottom: 25px;
font-size: 1.5rem;
}
}
@media screen and (max-width: 834px) {
.hands-ct p {
line-height: 2;
margin-bottom: 21px;
padding-right: 10px;
font-size: 1.4rem;
}
}
@media screen and (max-width: 374px) {
.hands-ct p {
line-height: 1.8;
padding-right: 0;
font-size: 1.3rem;
}
}
.hands-ct .c-btn__01 {
padding-left: 8px;
}
.hands-ttl {
line-height: 1.5333;
font-weight: bold;
color: #62809F;
letter-spacing: -1.75px;
margin-bottom: 13px;
font-size: 3rem;
}
@media screen and (max-width: 1245px) {
.hands-ttl {
letter-spacing: 0;
font-size: 2.4rem;
}
}
@media screen and (max-width: 834px) {
.hands-ttl {
line-height: 1.54;
margin-bottom: 8px;
font-size: 2.2rem;
}
}
@media screen and (max-width: 410px) {
.hands-ttl {
font-size: 1.8rem;
}
}
@media screen and (max-width: 374px) {
.hands-ttl {
font-size: 1.6rem;
}
}
.hands-list {
margin: 0 -2px 52px;
display: flex;
}
@media screen and (max-width: 834px) {
.hands-list {
margin: 0 -7px 44px;
display: flex;
justify-content: center;
}
}
@media screen and (max-width: 410px) {
.hands-list {
margin: 0 -2px 44px;
}
}
.hands-list li {
padding: 0 9px;
}
@media screen and (max-width: 1245px) {
.hands-list li {
padding: 0 5px;
}
}
@media screen and (max-width: 834px) {
.hands-list li {
padding: 0 6px;
}
}
.hands-list li span {
border: 1px solid #62809F;
border-radius: 50%;
width: 128px;
height: 128px;
text-align: center;
padding: 10px;
font-weight: bold;
color: #62809F;
line-height: 1.6667;
font-size: 1.8rem;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 1245px) {
.hands-list li span {
width: 100px;
height: 100px;
font-size: 1.5rem;
}
}
@media screen and (max-width: 834px) {
.hands-list li span {
width: 110px;
height: 110px;
line-height: 1.642;
font-size: 1.4rem;
}
}
@media screen and (max-width: 410px) {
.hands-list li span {
width: 90px;
height: 90px;
font-size: 1.2rem;
}
}
.hands-brand {
padding: 61px 0 125px;
pointer-events: none;
}
@media screen and (max-width: 834px) {
.hands-brand {
padding: 22px 0 98px;
margin: 0 -29px;
width: calc(100% + 58px) !important;
}
}
.hands-brand .inner {
max-width: 900px;
}
@media screen and (max-width: 834px) {
.hands-brand .inner {
padding: 0;
}
}
.hands-brand .slick-list {
margin: 0 -200px;
}
.brand-list {
margin: 0 -17px 17px;
display: flex;
}
@media screen and (max-width: 834px) {
.brand-list {
margin: 0 -29px -8px;
}
}
.brand-list li {
padding: 0 17px;
}
.brand-list li a {
display: block;
pointer-events: none;
}
.brand-list li a img {
width: 176px;
}
@media screen and (max-width: 834px) {
.brand-list li a img {
width: 136px;
}
}
.sec-process {
padding: 108px 0 201px;
background: url(/wp-content/themes/GOOFY/img/index/bg-01.png) #e0e6ec left bottom -200px no-repeat;
background-size: 100%;
}
@media screen and (max-width: 1245px) {
.sec-process {
background: url(/wp-content/themes/GOOFY/img/index/bg-01.png) #e0e6ec left bottom -170px no-repeat;
background-size: 100%;
}
}
@media screen and (max-width: 834px) {
.sec-process {
padding: 60px 0 111px;
background: url(/wp-content/themes/GOOFY/img/index/bg-01.png) #e0e6ec left 96% bottom -130px no-repeat;
background-size: 715px auto;
}
}
.sec-process .inner {
max-width: 900px;
}
.process-heading {
color: #62809F;
font-weight: bold;
margin-bottom: 70px;
font-size: 3rem;
}
@media screen and (max-width: 834px) {
.process-heading {
margin-bottom: 36px;
letter-spacing: 1px;
font-size: 2.2rem;
}
}
.process-heading span {
margin-top: 10px;
letter-spacing: -1.5px;
display: block;
font-size: 2.3rem;
}
@media screen and (max-width: 834px) {
.process-heading span {
margin-top: 1px;
letter-spacing: -0.5px;
font-size: 1.5rem;
}
}
.process-list {
margin: 0 -14px 36px;
display: flex;
}
@media screen and (max-width: 834px) {
.process-list {
margin: 0 -10px 21px;
}
}
.process-list li {
width: 33.33%;
padding: 0 14px;
outline: none !important;
}
@media screen and (max-width: 834px) {
.process-list li {
width: 100%;
padding: 0 9.5px;
}
}
.process-list li a {
display: block;
}
.process-list li a:hover .process-ttl {
color: #62809F;
transition: all 0.3s;
}
.process-list li a p {
color: #000;
line-height: 2.285;
font-weight: 500;
letter-spacing: 0.5px;
font-size: 1.4rem;
}
@media screen and (max-width: 834px) {
.process-list li a p {
line-height: 1.5;
}
}
.process-list .slick-prev, .process-list .slick-next {
z-index: 50;
background: url(/wp-content/themes/GOOFY/img/index/icon-next.png) center no-repeat;
background-size: contain;
position: absolute;
left: auto;
right: 12px;
top: -52px;
bottom: auto;
cursor: pointer;
width: 68px;
height: 68px;
border-radius: 100%;
box-shadow: none;
transition: all 0.5s;
}
.process-list .slick-prev:before, .process-list .slick-next:before {
content: "";
}
.process-list .slick-prev:hover, .process-list .slick-next:hover {
border-width: 3px;
transition: all 0.5s;
transform: scale(1.05) translateY(-50%);
}
@media screen and (max-width: 834px) {
.process-list .slick-prev, .process-list .slick-next {
display: none !important;
}
}
.process-list .slick-prev {
background: url(/wp-content/themes/GOOFY/img/index/icon-prev.png) center no-repeat;
background-size: contain;
right: 106px;
}
@media screen and (max-width: 640px) {
.process-list .slick-list {
padding-left: 0 !important;
margin-right: -17px !important;
}
}
.process-img {
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 834px) {
.process-img {
margin-bottom: 15px;
}
}
.process-img:before {
content: "";
display: block;
padding-bottom: 116.0990712074%;
}
@media screen and (max-width: 834px) {
.process-img:before {
padding-bottom: 72.5806451613%;
}
}
.process-img__thumb {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.process-img__thumb img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover";
}
.process-cate {
display: inline-block;
color: #fff;
background: #62809F;
padding: 3px 10px;
font-weight: bold;
margin-bottom: 11px;
min-width: 106px;
text-align: center;
font-size: 1.4rem;
}
@media screen and (max-width: 834px) {
.process-cate {
padding: 2px 6px;
margin-bottom: 8px;
min-width: 101px;
font-size: 1.3rem;
}
}
.process-ttl {
margin-bottom: 3px;
line-height: 1.733;
color: #000;
font-weight: bold;
transition: all 0.3s;
font-size: 1.5rem;
}
@media screen and (max-width: 834px) {
.process-ttl {
line-height: 1.625;
letter-spacing: 0.75px;
margin-bottom: 9px;
font-size: 1.6rem;
}
}
.process-case {
letter-spacing: 6.5px;
margin-left: -10px;
margin-bottom: 17px;
font-weight: 300;
font-family: "Jost", sans-serif;
line-height: 1;
color: #EBEFF3;
font-size: 13.6rem;
}
@media screen and (max-width: 1245px) {
.process-case {
font-size: 10rem;
}
}
@media screen and (max-width: 834px) {
.process-case {
letter-spacing: 3px;
margin-left: -1px;
margin-bottom: 24px;
font-size: 6rem;
color: #EBEFF3;
}
}
@media screen and (max-width: 410px) {
.process-case {
font-size: 5rem;
}
}
.sec-blog {
padding: 118px 0 122px;
}
@media screen and (max-width: 834px) {
.sec-blog {
padding: 77px 0 57px;
}
}
@media screen and (max-width: 834px) {
.sec-blog .c-btn__01 {
margin: 0 auto;
display: inherit;
}
}
.sec-blog .inner {
max-width: 900px;
}
@media screen and (max-width: 834px) {
.sec-blog .inner {
position: relative;
}
}
.blog-heading {
color: #62809F;
font-weight: 500;
font-family: "Jost", sans-serif;
margin-bottom: 35px;
font-size: 3.4rem;
}
@media screen and (max-width: 834px) {
.blog-heading {
position: absolute;
top: -16px;
left: 27px;
letter-spacing: 1px;
font-size: 3rem;
}
}
.blog-flex {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 834px) {
.blog-flex {
margin-bottom: 27px;
}
}
.blog-left {
width: 237px;
padding-right: 20px;
}
@media screen and (max-width: 990px) {
.blog-left {
width: 220px;
}
}
@media screen and (max-width: 834px) {
.blog-left {
padding-right: 0;
width: calc(100% + 22px);
margin-right: -22px;
}
}
.blog-cate {
margin-bottom: 148px;
}
@media screen and (max-width: 834px) {
.blog-cate {
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
padding-left: 112px;
}
}
@media screen and (max-width: 410px) {
.blog-cate {
padding-left: 100px;
}
}
.blog-cate li {
margin-bottom: 15.5px;
}
@media screen and (max-width: 834px) {
.blog-cate li {
margin-bottom: 18.5px;
margin-right: 21px;
}
}
@media screen and (max-width: 410px) {
.blog-cate li {
margin-bottom: 11.5px;
margin-right: 13px;
}
}
.blog-cate li.active a {
border-bottom: 1px solid #62809F;
}
.blog-cate li a {
border-bottom: 1px solid transparent;
display: inline-block;
color: #62809F;
line-height: 1.2;
font-weight: 500;
transition: all 0.3s;
font-size: 1.6rem;
}
@media screen and (max-width: 990px) {
.blog-cate li a {
font-size: 1.5rem;
}
}
@media screen and (max-width: 834px) {
.blog-cate li a {
font-size: 1.3rem;
}
}
.blog-cate li a:hover {
transition: all 0.3s;
}
.blog-post {
margin-top: -35px;
width: calc(100% - 237px);
}
@media screen and (max-width: 834px) {
.blog-post {
width: 100%;
margin-top: 0;
}
}
.blog-post li {
margin-bottom: 20px;
}
@media screen and (max-width: 990px) {
.blog-post li {
margin-bottom: 0;
}
}
.blog-post li a {
display: block;
padding: 31px 40px 22px 11px;
position: relative;
transition: all 0.3s;
border-bottom: 1px solid #B6B6B6;
}
@media screen and (max-width: 834px) {
.blog-post li a {
padding: 15px 48px 10px 0;
}
}
.blog-post li a:hover {
transition: all 0.3s;
border-bottom: 1px solid #333;
}
.blog-post li a:hover:after {
right: 0;
transition: all 0.5s;
}
.blog-post li a:after {
content: "";
width: 26px;
height: 21px;
background: url(/wp-content/themes/GOOFY/img/index/icon-link-04.png) center no-repeat;
background-size: contain;
position: absolute;
right: 8px;
top: 65px;
transition: all 0.5s;
}
@media screen and (max-width: 990px) {
.blog-post li a:after {
width: 18px;
height: 16px;
top: 36px;
}
}
@media screen and (max-width: 834px) {
.blog-post li a:after {
width: 14px;
height: 13px;
top: 50px;
right: -3px;
}
}
.blog-post li a p {
color: #000;
letter-spacing: 0.75px;
font-weight: 500;
font-size: 1.6rem;
}
@media screen and (max-width: 990px) {
.blog-post li a p {
letter-spacing: 0;
font-size: 1.5rem;
}
}
@media screen and (max-width: 834px) {
.blog-post li a p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
letter-spacing: -0.35px;
}
}
.blog-tag {
margin-bottom: 10px;
}
.blog-tag .date {
display: inline-block;
color: #62809F;
font-weight: bold;
margin-right: 10px;
letter-spacing: 0.8px;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-size: 1.6rem;
}
@media screen and (max-width: 990px) {
.blog-tag .date {
font-size: 1.5rem;
}
}
@media screen and (max-width: 834px) {
.blog-tag .date {
margin-right: 11px;
letter-spacing: 0.5px;
}
}
.blog-tag .tag {
border: 1px solid #62809f;
padding: 1px 16px;
letter-spacing: 0.75px;
line-height: 1.2;
min-width: 121px;
text-align: center;
color: #62809F;
font-weight: bold;
font-size: 1.6rem;
}
@media screen and (max-width: 990px) {
.blog-tag .tag {
font-size: 1.5rem;
}
}
@media screen and (max-width: 834px) {
.blog-tag .tag {
padding: 3px 8px;
letter-spacing: -0.5px;
transform: translateY(-2px);
min-width: 82px;
font-size: 1.3rem;
}
}
.sec-recruit {
padding: 118px 0 105px;
background: url(/wp-content/themes/GOOFY/img/index/bg-02.jpg) top center no-repeat;
background-size: cover;
}
@media screen and (max-width: 834px) {
.sec-recruit {
padding: 30px 0;
background: url(/wp-content/themes/GOOFY/img/index/bg-02-sp.jpg) bottom center no-repeat;
background-size: cover;
}
}
.sec-recruit p {
color: rgba(255, 255, 255, 0.75);
line-height: 2.0625;
margin-bottom: 54px;
letter-spacing: 0.9px;
font-size: 1.6rem;
}
@media screen and (max-width: 834px) {
.sec-recruit p {
line-height: 2;
margin-bottom: 20px;
font-size: 1.4rem;
}
}
.sec-recruit .c-btn__01 {
position: absolute;
right: 12px;
bottom: 18px;
}
@media screen and (max-width: 1245px) {
.sec-recruit .c-btn__01 {
right: 50px;
bottom: 0;
}
}
@media screen and (max-width: 834px) {
.sec-recruit .c-btn__01 {
position: static;
display: inherit;
margin: 0 0 0 36px;
}
}
.sec-recruit .inner {
padding-left: 21vw;
position: relative;
max-width: 900px;
}
@media screen and (max-width: 1245px) {
.sec-recruit .inner {
padding-left: 29px;
}
}
@media screen and (max-width: 834px) {
.sec-recruit .inner {
max-width: 56%;
width: 100%;
margin-left: auto;
margin-right: 0;
padding: 0 12px;
}
}
@media screen and (max-width: 410px) {
.sec-recruit .inner {
max-width: 63%;
min-width: 236px;
}
}
.recruit-heading {
color: #fff;
font-weight: bold;
line-height: 1.2;
margin-bottom: 19px;
font-size: 3rem;
}
@media screen and (max-width: 834px) {
.recruit-heading {
letter-spacing: 1px;
margin-bottom: 10px;
font-size: 2.2rem;
}
}
.recruit-ttl {
line-height: 1;
font-weight: 300;
font-family: "Jost", sans-serif;
color: rgba(235, 239, 243, 0.35);
margin-left: -10px;
letter-spacing: 6px;
font-size: 13.6rem;
}
@media screen and (min-width: 1400px) {
.recruit-ttl {
font-size: 8.8rem;
}
}
@media screen and (max-width: 1245px) {
.recruit-ttl {
font-size: 10rem;
}
}
@media screen and (max-width: 834px) {
.recruit-ttl {
padding-left: 5px;
letter-spacing: 2.5px;
margin-bottom: 10px;
font-size: 6rem;
}
}
.recruit-btn:hover .c-btn__01 span {
transition: all 0.3s;
transform: translateX(10px);
}
.recruit-btn:hover .c-btn__01 span:after {
right: -15px;
transition: all 0.3s;
}
.sec-contact {
background: #E0E6EC;
padding: 80px 0 98px;
}
@media screen and (max-width: 834px) {
.sec-contact {
padding: 34px 0 64px;
}
}
.sec-contact .inner {
max-width: 900px;
}
.contact-us {
display: block;
position: relative;
}
.contact-us:hover:after {
right: -15px;
transition: all 0.3s;
}
.contact-us:after {
content: "";
width: 220px;
height: 9px;
background: url(/wp-content/themes/GOOFY/img/index/icon-link-03.png) center no-repeat;
background-size: contain;
position: absolute;
right: -3px;
bottom: 10px;
transition: all 0.3s;
}
@media screen and (max-width: 1245px) {
.contact-us:after {
width: 190px;
}
}
@media screen and (max-width: 834px) {
.contact-us:after {
width: 125px;
bottom: -27px;
right: -1px;
}
}
.contact-us__ttl {
font-family: "Jost", sans-serif;
font-weight: 500;
color: #62809F;
line-height: 1.2;
margin-bottom: 27px;
font-size: 3.6rem;
}
@media screen and (max-width: 1245px) {
.contact-us__ttl {
font-size: 3rem;
}
}
@media screen and (max-width: 834px) {
.contact-us__ttl {
letter-spacing: 1px;
margin-bottom: 9px;
font-size: 2.6rem;
}
}
.contact-us p {
color: #62809F;
font-weight: bold;
font-size: 2.2rem;
}
@media screen and (max-width: 1245px) {
.contact-us p {
font-size: 1.8rem;
}
}
@media screen and (max-width: 834px) {
.contact-us p {
letter-spacing: 0.75px;
font-size: 1.4rem;
}
}
@media screen and (max-width: 410px) {
.contact-us p {
letter-spacing: 0;
font-size: 1.3rem;
}
}
.loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 99;
}
.sec-content {
padding: 126px 0 246px;
}
@media screen and (max-width: 1245px) {
.sec-content {
padding: 100px 0 150px;
}
}
@media screen and (max-width: 834px) {
.sec-content {
padding: 136px 0 118px;
}
}
.content {
padding-left: 152px;
}
@media screen and (max-width: 1245px) {
.content {
padding-left: 200px;
}
}
@media screen and (max-width: 834px) {
.content {
padding-left: 0;
}
}
.contact-content {
padding-left: 152px;
}
@media screen and (max-width: 1245px) {
.contact-content {
padding-left: 200px;
}
}
@media screen and (max-width: 834px) {
.contact-content {
padding-left: 0;
}
}
.contact-heading {
color: #62809F;
margin-bottom: 65px;
font-weight: bold;
font-size: 3.6rem;
}
@media screen and (max-width: 1245px) {
.contact-heading {
margin-bottom: 35px;
}
}
@media screen and (max-width: 834px) {
.contact-heading {
margin-bottom: 42px;
font-size: 2rem;
}
}
.contact-desc {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
color: #62809F;
font-weight: bold;
margin-bottom: 58px;
letter-spacing: 0.25px;
font-size: 1.6rem;
}
@media screen and (max-width: 1245px) {
.contact-desc {
margin-bottom: 35px;
font-size: 1.4rem;
}
}
@media screen and (max-width: 834px) {
.contact-desc {
margin-bottom: 28px;
letter-spacing: 0.8px;
line-height: 1.625;
font-size: 1.6rem;
}
}
.contact-step {
max-width: 678px;
width: 100%;
margin: 0 auto 47px;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 834px) {
.contact-step {
max-width: 356px;
margin: 0 auto 42px;
}
}
.contact-step li {
position: relative;
}
.contact-step li:before {
content: "";
width: 90px;
height: 1px;
background: #62809F;
top: 50%;
right: -125px;
position: absolute;
transform: translateY(-50%);
}
@media screen and (max-width: 990px) {
.contact-step li:before {
right: -89px;
width: 70px;
}
}
@media screen and (max-width: 834px) {
.contact-step li:before {
width: 42px;
right: -72%;
}
}
@media screen and (max-width: 374px) {
.contact-step li:before {
width: 25px;
right: -40%;
}
}
.contact-step li:last-child:before {
display: none;
}
.contact-step li.active span {
color: #fff;
background: #62809F;
}
.contact-step li span {
line-height: 1.34;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
width: 125px;
height: 125px;
border: 1px solid #62809F;
border-radius: 50%;
color: #62809F;
font-weight: bold;
font-size: 2.6rem;
}
@media screen and (max-width: 834px) {
.contact-step li span {
width: 75px;
height: 75px;
line-height: 1.266;
font-size: 1.5rem;
}
}
.contact-note {
text-align: center;
margin-bottom: 60px;
letter-spacing: 0.25px;
font-weight: 500;
color: #62809F;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-size: 1.6rem;
}
@media screen and (max-width: 834px) {
.contact-note {
margin-bottom: 12px;
letter-spacing: 0;
font-size: 1.4rem;
}
}
@media screen and (max-width: 410px) {
.contact-note {
letter-spacing: 0;
}
}
.form-ct {
background: #EFF2F5;
padding: 56px 118px 94px 108px;
}
@media screen and (max-width: 1245px) {
.form-ct {
padding: 50px 20px;
}
}
@media screen and (max-width: 834px) {
.form-ct {
padding: 31px 21px 54px;
}
}
@media screen and (max-width: 410px) {
.form-ct {
padding: 31px 12px 54px;
}
}
.form-ct dl {
display: flex;
margin-bottom: 27px;
}
@media screen and (max-width: 834px) {
.form-ct dl {
margin-bottom: 28px;
display: flex;
flex-wrap: wrap;
}
}
.form-ct dl dt {
letter-spacing: 0.9px;
width: 215px;
display: flex;
align-items: center;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
color: #000;
font-weight: 500;
font-size: 1.6rem;
}
.form-ct dl dt span {
margin-right: 10px;
display: inline-block;
width: 45.5px;
}
.form-ct dl dt span img {
width: 45.5px;
}
@media screen and (min-width: 835px) {
.form-ct dl dt.pl-dt {
padding-left: 56px;
letter-spacing: -1px;
margin-top: 5px;
}
}
@media screen and (max-width: 834px) {
.form-ct dl dt {
width: 100%;
margin-bottom: 12px;
}
}
.form-ct dl dd {
width: calc(100% - 215px);
}
@media screen and (max-width: 834px) {
.form-ct dl dd {
width: 100%;
}
}
.form-ct dl.flex-start {
align-items: flex-start;
}
.form-ct dl.flex-start dt {
padding-top: 9px;
}
.form-note {
text-align: center;
color: #000;
margin-bottom: 38px;
margin-top: 49px;
font-size: 1.2rem;
}
.form-note a {
display: inline-block;
text-decoration: underline;
color: #000;
}
@media screen and (max-width: 834px) {
.form-note {
margin-bottom: 16px;
margin-top: 46px;
letter-spacing: 0.75px;
padding: 0 4px;
text-align: left;
line-height: 1.785;
font-size: 1.4rem;
}
}
@media screen and (max-width: 410px) {
.form-note {
font-size: 1.2rem;
}
}
.form-btn {
background: #62809F;
height: 57.5px;
padding: 10px;
font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
color: #fff;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
cursor: pointer;
transition: all 0.3s;
font-size: 1.6rem;
}
@media screen and (max-width: 834px) {
.form-btn {
height: 46.5px;
max-width: 260px;
margin: 0 auto;
}
}
.form-btn:hover {
transition: all 0.3s;
opacity: 0.7;
}
.input, .textarea {
padding: 7px 15px 5px;
letter-spacing: 0.8px;
border: 0;
max-width: 430px;
width: 100%;
background: #fff;
height: 40px;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 1.4rem;
}
.input::-moz-placeholder, .textarea::-moz-placeholder {
color: #C7C7C7;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-weight: 500;
font-size: 1.4rem;
}
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder {
color: #C7C7C7;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-weight: 500;
font-size: 1.4rem;
}
.input::placeholder, .textarea::placeholder {
color: #C7C7C7;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-weight: 500;
font-size: 1.4rem;
}
@media screen and (max-width: 834px) {
.input, .textarea {
height: 48px;
}
}
.textarea {
height: 220px;
resize: none;
padding: 15px 15px 8px;
}
@media screen and (max-width: 834px) {
.textarea {
height: 250px;
}
}
.pure-list {
display: flex;
}
@media screen and (max-width: 834px) {
.pure-list {
flex-wrap: wrap;
}
}
.pure-list li {
margin-right: 19px;
}
.pure-list li:last-child {
margin-right: 0;
}
@media screen and (max-width: 990px) {
.pure-list li {
margin-right: 12px;
}
}
@media screen and (max-width: 834px) {
.pure-list li {
margin-right: 18px;
}
}
@media screen and (max-width: 374px) {
.pure-list li {
margin-right: 10px;
margin-bottom: 10px;
}
}
.mw_wp_form_confirm {
padding-top: 27px;
}
@media screen and (max-width: 834px) {
.mw_wp_form_confirm {
padding-top: 3px;
}
}
.mw_wp_form_confirm dl {
border-bottom: 1px solid #ccc;
margin-bottom: 0 !important;
padding: 27px 13px 21px;
}
@media screen and (max-width: 834px) {
.mw_wp_form_confirm dl {
padding: 30px 0 8px;
}
}
.mw_wp_form_confirm dl.flex-start {
border-bottom: 0;
}
.mw_wp_form_confirm dl dt {
letter-spacing: 1px;
font-size: 1.4rem;
width: 187px;
}
@media screen and (max-width: 834px) {
.mw_wp_form_confirm dl dt {
letter-spacing: 0.25px;
margin-bottom: 2px;
width: 100%;
font-size: 1.3rem;
}
}
.mw_wp_form_confirm dl dd {
width: calc(100% - 187px);
font-weight: bold;
color: #000;
letter-spacing: 1px;
line-height: 2.25;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-size: 1.6rem;
}
@media screen and (max-width: 834px) {
.mw_wp_form_confirm dl dd {
line-height: 1.75;
width: 100%;
}
}
.mw_wp_form_confirm .form-btn {
margin-top: 45px;
}
@media screen and (max-width: 834px) {
.mw_wp_form_confirm .form-btn {
margin-top: 34px;
}
}
.contact-thanks {
text-align: center;
color: #62809F;
line-height: 2.1875;
font-weight: 500;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-size: 1.6rem;
}
@media screen and (max-width: 990px) {
.contact-thanks {
line-height: 1.671;
font-size: 1.4rem;
}
}
@media screen and (max-width: 374px) {
.contact-thanks {
letter-spacing: -0.5px;
font-size: 1.2rem;
}
}
.page-case-study_detail {
background: #F7F7F7;
}
.page-case-study_detail .inner {
max-width: 905px;
}
.sec-case-study-detail {
padding: 100px 0 201px;
}
@media screen and (max-width: 834px) {
.sec-case-study-detail {
padding: 66px 0 126px;
}
}
#header .case-study_detail {
background: none;
}
.mv-case-study-detail {
background: #E0E5EC;
}
.mv-case-study-detail .mv-item {
padding: 141px 0 85px;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item {
padding: 98px 0 70px;
}
}
.mv-case-study-detail .mv-item__top {
padding-bottom: 37px;
margin-bottom: 37px;
border-bottom: 1px solid #CCCCCC;
color: #62809F;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__top {
padding-bottom: 30px;
margin-bottom: 30px;
}
}
.mv-case-study-detail .mv-item__top-content {
font-size: 1.8rem;
line-height: 1.7777777778;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__top-content {
font-size: 1.4rem;
line-height: 1.8571428571;
}
}
.mv-case-study-detail .mv-item__ttl {
font-size: 2.2rem;
line-height: 1.1818181818;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__ttl {
font-size: 1.6rem;
line-height: 1.875;
}
}
.mv-case-study-detail .mv-item__btn-mv {
font-size: 1.6rem;
line-height: 1.1875;
background: #62809F;
padding: 5px 20px;
display: inline-block;
color: #FFFFFF;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__btn-mv {
font-size: 1.3rem;
line-height: 1.1076923077;
padding: 4px 11px;
}
}
.mv-case-study-detail .mv-item__sttl {
font-size: 3.6rem;
line-height: 1.3888888889;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__sttl {
font-size: 2rem;
line-height: 1.6;
margin-bottom: 5px;
}
}
.mv-case-study-detail .mv-item__cty {
font-size: 2.4rem;
line-height: 2.25;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__cty {
font-size: 1.6rem;
line-height: 1.875;
}
}
.mv-case-study-detail .mv-item__interview {
font-size: 1.6rem;
line-height: 0.975;
}
.mv-case-study-detail .mv-item__interview-type2 {
padding-left: 87px;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__interview-type2 {
padding-left: 0;
}
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__interview {
font-size: 1.3rem;
line-height: 1.6923076923;
}
}
.mv-case-study-detail .mv-item__bottom {
color: #454545;
}
.mv-case-study-detail .mv-item__bottom__interview {
font-size: 2rem;
line-height: 1.3;
margin-bottom: 5px;
}
.mv-case-study-detail .mv-item__bottom__interview img {
margin-top: -5px;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__bottom__interview {
font-size: 1.6rem;
line-height: 1.3125;
}
}
.mv-case-study-detail .mv-item__bottom__interview a {
color: inherit;
}
.mv-case-study-detail .mv-item__bottom-txt {
font-size: 1.6rem;
line-height: 1.75;
letter-spacing: 0.6px;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__bottom-txt {
font-size: 1.3rem;
line-height: 1.6923076923;
}
}
.mv-case-study-detail .mv-item__bottom-btxt {
font-size: 1.2rem;
line-height: 1.2;
letter-spacing: 0.5px;
}
@media screen and (max-width: 834px) {
.mv-case-study-detail .mv-item__bottom-btxt {
font-size: 1.2rem;
line-height: 1.75;
}
}
.list-task {
max-width: 613px;
margin: auto;
padding-bottom: 180px;
}
@media screen and (max-width: 834px) {
.list-task {
padding-bottom: 82px;
}
}
.list-task__item {
background: #E0E5EC;
font-weight: bold;
color: #454545;
padding: 34px;
border-radius: 15px;
position: relative;
}
@media screen and (max-width: 834px) {
.list-task__item {
padding: 26px 22px;
border-radius: 18px;
}
}
.list-task__item:not(:last-child) {
margin-bottom: 94px;
}
.list-task__item:not(:last-child):after {
content: "";
display: inline-block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 12.5px 0 12.5px;
border-color: #666666 transparent transparent transparent;
bottom: -57px;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 834px) {
.list-task__item:not(:last-child) {
margin-bottom: 60px;
}
.list-task__item:not(:last-child):after {
bottom: -37px;
}
}
.list-task__item-type02 {
background: #62809F;
color: #FFFFFF;
}
.list-task__ttl {
font-size: 2.2rem;
line-height: 1.0909090909;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: inherit;
}
@media screen and (max-width: 834px) {
.list-task__ttl {
font-size: 2rem;
line-height: 1.05;
margin-bottom: 17px;
}
}
.list-task__content {
font-size: 1.6rem;
line-height: 2.25;
}
.list-task__content p {
position: relative;
padding-left: 24px;
}
@media screen and (max-width: 834px) {
.list-task__content p {
padding-left: 27px;
}
}
.list-task__content p span {
position: absolute;
left: 0;
}
@media screen and (max-width: 834px) {
.list-task__content {
font-size: 1.4rem;
line-height: 1.8571428571;
letter-spacing: 0.7px;
}
}
.study-detail-item {
display: flex;
flex-wrap: wrap;
padding-bottom: 143px;
}
@media screen and (max-width: 834px) {
.study-detail-item {
padding-bottom: 26px;
}
}
.study-detail-item__img {
padding-top: 10px;
}
@media screen and (min-width: 835px) {
.study-detail-item__img {
width: 273px;
}
}
.study-detail-item__img-txt {
font-size: 1.4rem;
line-height: 1.7857142857;
padding-top: 7px;
font-weight: 500;
color: #000000;
}
@media screen and (max-width: 834px) {
.study-detail-item__img-txt {
font-size: 1.3rem;
line-height: 1.6923076923;
padding-top: 13px;
}
}
.study-detail-item__img img {
width: 100%;
}
@media screen and (max-width: 834px) {
.study-detail-item__img-img {
width: 100vw;
margin-left: -29px;
}
}
@media screen and (min-width: 835px) {
.study-detail-item__info {
width: calc(100% - 273px);
padding: 0px 60px 0 46px;
}
}
@media screen and (max-width: 834px) {
.study-detail-item__info {
padding: 36px 0 46px;
}
}
.study-detail-item__ttl {
font-size: 3.2rem;
line-height: 1.5625;
margin-bottom: 23px;
color: #62809F;
}
@media screen and (max-width: 834px) {
.study-detail-item__ttl {
font-size: 2.2rem;
line-height: 1.5454545455;
margin-bottom: 12px;
}
}
.study-detail-item__content {
font-size: 1.6rem;
line-height: 2.0625;
letter-spacing: 0.7px;
color: #000000;
font-weight: 500;
}
@media screen and (max-width: 834px) {
.study-detail-item__content {
font-size: 1.4rem;
line-height: 2;
}
}
.case-study-detail-list {
padding-bottom: 143px;
}
@media screen and (max-width: 834px) {
.case-study-detail-list {
margin: 0 -29px;
padding-bottom: 77px;
}
}
.case-study-detail-list__item:not(:last-child) {
margin-bottom: 141px;
}
@media screen and (max-width: 834px) {
.case-study-detail-list__item:not(:last-child) {
margin-bottom: 72px;
}
}
.case-study-detail-list__item-type02 .case-study-detail-list__img {
text-align: right;
}
.case-study-detail-list__item-type02 .case-study-detail-list__ttl {
display: inline-block;
}
.case-study-detail-list__item-type02 .case-study-detail-list__ttl:after {
width: calc(100% + 44px);
}
@media screen and (min-width: 835px) {
.case-study-detail-list__item-type02 .case-study-detail-list__info {
padding: 0 68px 0 107px;
}
}
@media screen and (max-width: 834px) {
.case-study-detail-list__item-type02 .case-study-detail-list__info {
margin-top: -28px;
}
}
.case-study-detail-list__img img {
max-width: 755px;
}
@media screen and (max-width: 834px) {
.case-study-detail-list__img img {
width: calc(100% - 29px);
height: 287px;
-o-object-fit: cover;
object-fit: cover;
}
}
.case-study-detail-list__info {
padding: 0 60px 0 115px;
margin-top: -63px;
}
@media screen and (max-width: 834px) {
.case-study-detail-list__info {
margin-top: -16px;
padding: 0 29px;
}
}
.case-study-detail-list__ttl {
font-weight: bold;
font-size: 3.2rem;
line-height: 1.5625;
position: relative;
padding-bottom: 20px;
letter-spacing: 1.1px;
color: #62809f;
}
@media screen and (max-width: 834px) {
.case-study-detail-list__ttl {
font-size: 2.2rem;
line-height: 1.5454545455;
padding-bottom: 10px;
}
}
.case-study-detail-list__ttl span {
position: relative;
z-index: 7;
}
.case-study-detail-list__ttl:after {
content: "";
display: inline-block;
position: absolute;
width: 70%;
height: calc(100% + 17px);
background: #F7F7F7;
z-index: 1;
top: -12px;
left: -20px;
}
@media screen and (max-width: 834px) {
.case-study-detail-list__ttl:after {
width: calc(100% - 110px);
top: -17px;
left: -26px;
}
}
.case-study-detail-list__content {
font-size: 1.6rem;
line-height: 2.0625;
letter-spacing: 0.7px;
color: #000000;
font-weight: 500;
}
@media screen and (max-width: 834px) {
.case-study-detail-list__content {
font-size: 1.4rem;
line-height: 2;
}
}
.back-btn {
font-size: 1.6rem;
line-height: 2.1875;
padding: 6px 37px;
color: #62809f;
border: 1px solid;
border-radius: 30px;
display: inline-block;
margin-top: 7px;
font-weight: 500;
}
.back-btn:hover {
background: #62809f;
color: white;
}
@media screen and (max-width: 834px) {
.back-btn {
font-size: 1.3rem;
line-height: 1.8461538462;
padding: 7px 31px;
}
}
@media screen and (min-width: 835px) {
.pagination-back {
padding: 0 65px 0 108px;
}
}
.pagination-back__inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
border-top: 1px solid #CCCCCC;
padding-top: 26px;
}
@media screen and (max-width: 834px) {
.pagination-back__inner {
padding-top: 31px;
}
}
@media screen and (max-width: 834px) {
.pagination-back__right {
padding: 5px 0 0;
}
}
.pagination-back__right a {
display: inline-block;
}
.pagination-back__right a .circle {
overflow: hidden;
}
.pagination-back__right a .circle:after, .pagination-back__right a .circle:before {
z-index: 9;
}
.pagination-back__right a .circle span:before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(98, 128, 159, 0.53);
box-sizing: border-box;
z-index: 1;
border-radius: 50%;
}
.pagination-back__right a .circle img {
transition: all 0.3s;
}
.pagination-back__right a:hover img {
transform: scale(1.3);
}
.pagination-back__right a:first-child {
margin-right: 14px;
}
@media screen and (max-width: 834px) {
.pagination-back__right a {
width: 40px;
height: 40px;
}
.pagination-back__right a:first-child {
margin-right: 11px;
}
}
#header .hd-flex.thought {
background: none;
}
.sec-mission {
background: url(/wp-content/themes/GOOFY/img/thought/bg-mission.png) no-repeat left bottom;
padding: 147px 0 217px;
}
@media screen and (max-width: 834px) {
.sec-mission {
padding: 51px 0 57px;
background: url(/wp-content/themes/GOOFY/img/thought/bg-mission-sp.png) no-repeat -81px bottom;
}
}
.sec-profile {
padding: 123px 0 90px;
position: relative;
}
@media screen and (max-width: 834px) {
.sec-profile {
padding: 30px 0 60px;
}
.sec-profile .bx-slide {
margin: 0 -29px 0 70px; }
}
.sec-profile:before {
content: "";
display: inline-block;
position: absolute;
width: calc(100% + (1026px - 100vw) / 2);
height: 100%;
background: #E0E6EC;
top: 0;
left: 0;
z-index: -1;
}
.sec-profile .slide-company {
margin-left: auto;
margin-right: calc((1054px - 100vw) / 2); width: 67%;
} @media screen and (max-width: 1300px) {
.sec-profile .slide-company {
max-width: 450px;
width: 50%;
}
}
@media screen and (max-width: 1024px) {
.sec-profile .slide-company {
margin-right: -29px;
}
}
@media screen and (max-width: 834px) {
.sec-profile .slide-company {
width: 100%;
margin-right: 0;
}
}
.sec-access {
padding: 120px 0 390px;
background: url(/wp-content/themes/GOOFY/img/thought/bg-access.png) no-repeat right bottom;
}
@media screen and (max-width: 834px) {
.sec-access {
padding: 32px 0 135px;
background: url(/wp-content/themes/GOOFY/img/thought/bg-access-sp.png) no-repeat right bottom;
}
}
.sec-access__ttl {
font-family: "Jost", sans-serif;
font-weight: 400;
font-size: 3.4rem;
line-height: 1.2;
color: #4A6A89;
max-width: 646px;
margin: 0 auto 33px;
}
@media screen and (max-width: 834px) {
.sec-access__ttl {
font-size: 2.6rem;
line-height: 1.5692307692;
margin-bottom: 13px;
}
}
.access-maps img, .access-maps iframe {
width: 100%;
}
.mv-item {
position: relative;
overflow: hidden;
}
.mv-item__img img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 100vh;
}
.mv-item__marquee {
position: absolute;
bottom: -27px;
left: 0;
width: 100%;
z-index: 1;
}
@media screen and (max-width: 834px) {
.mv-item__marquee {
bottom: -11px;
}
}
.mv-item__marquee-img {
display: inline-block;
}
.mv-item .content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #FFFFFF;
z-index: 9;
}
@media screen and (max-width: 834px) {
.mv-item {
background-size: contain;
}
}
.mv-item__info {
padding-top: 122px;
padding-left: 76px;
}
@media screen and (max-width: 834px) {
.mv-item__info {
padding-left: 0;
}
}
.mv-item__ttl {
font-size: 3.6rem;
line-height: 1.6666666667;
margin-bottom: 5px;
}
@media screen and (max-width: 834px) {
.mv-item__ttl {
font-size: 2.8rem;
line-height: 2.1428571429;
}
}
.mv-item__content {
font-weight: bold;
font-size: 1.8rem;
line-height: 2.5555555556;
}
@media screen and (max-width: 834px) {
.mv-item__content {
font-size: 1.5rem;
line-height: 2.2;
}
}
.mv-item .simply-scroll, .mv-item .simply-scroll-clip, .mv-item .simply-scroll .simply-scroll-list li {
width: 100%;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.mv-item .simply-scroll .simply-scroll-list {
display: flex;
}
.mv-item .simply-scroll .simply-scroll-list li {
margin-right: 250px;
}
@media screen and (max-width: 640px) {
.mv-item .simply-scroll .simply-scroll-list li {
margin-right: 75px;
}
}
.mv-item .simply-scroll .simply-scroll-list li img {
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
@media screen and (max-width: 640px) {
.mv-item .simply-scroll .simply-scroll-list li img {
max-width: 413px;
}
}
.mission-item {
max-width: 707px;
margin-left: auto;
}
@media screen and (max-width: 834px) {
.mission-item {
max-width: 212px;
}
}
.mission-item__ttl {
font-size: 5.2rem;
line-height: 1.6346153846;
color: #9B9B9B;
font-family: "Jost", sans-serif;
font-weight: 400;
margin-bottom: 57px;
}
@media screen and (max-width: 834px) {
.mission-item__ttl {
font-size: 2.2rem;
line-height: 1.8545454545;
margin-bottom: 30px;
}
}
.mission-item__sttl {
font-size: 4.6rem;
line-height: 1.1956521739;
margin-bottom: 27px;
color: #62809F;
font-weight: 500;
font-family: "Roboto", sans-serif;
}
.mission-item__sttl .index {
font-size: 5.5rem;
font-weight: 400;
font-family: "Roboto Condensed", sans-serif;
}
@media screen and (max-width: 834px) {
.mission-item__sttl .index {
font-size: 2.8rem;
}
}
@media screen and (max-width: 834px) {
.mission-item__sttl {
font-size: 2.4rem;
line-height: 1.5;
margin-bottom: 14px;
}
}
.mission-item__content {
font-size: 2.4rem;
line-height: 2.1666666667;
color: #62809F;
font-weight: 500;
font-family: "Noto Sans JP", sans-serif;
}
.mission-item__content .font-en {
font-size: 2.9rem;
font-weight: 400;
font-family: "Roboto Condensed", sans-serif;
}
@media screen and (max-width: 834px) {
.mission-item__content .font-en {
font-size: 1.7rem;
}
}
@media screen and (max-width: 834px) {
.mission-item__content {
font-size: 1.4rem;
line-height: 2;
}
}
.slide-company img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover";
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.slide-company .slick-dots {
position: relative;
text-align: left;
bottom: auto;
}
@media screen and (min-width: 835px) {
.slide-company .slick-dots {
margin-top: 13px;
}
}
.slide-company .slick-dots li {
margin-left: 0;
}
.slide-company .slick-dots li button {
padding: 10px;
margin-right: 10px;
}
.slide-company .slick-dots li button:before {
width: 30px;
height: 1px;
}
.slide-company .slick-dots li.slick-active button:before {
background: #4a6a89;
border: none;
}
.company-item {
max-width: 646px;
margin: -65px auto 0;
}
@media screen and (max-width: 834px) {
.company-item {
margin-top: 14px;
}
}
.company-item__ttl {
color: #4A6A89;
font-size: 3.4rem;
line-height: 1.2;
padding-left: 8px;
margin-bottom: 46px;
font-weight: 500;
}
@media screen and (max-width: 834px) {
.company-item__ttl {
font-size: 2.6rem;
line-height: 1.5692307692;
padding-left: 0;
margin-bottom: 7px;
}
}
.company-info__item {
font-size: 1.4rem;
line-height: 1.5714285714;
color: #070304;
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #A1A0A0;
font-weight: 500;
padding: 27px 0 22px;
}
@media screen and (max-width: 834px) {
.company-info__item {
padding: 27px 0 20px;
}
}
.company-info__ttl {
width: 155px;
padding: 0 5px 0 15px;
}
@media screen and (max-width: 834px) {
.company-info__ttl {
width: 108px;
padding: 0 5px 0 10px;
}
}
.company-info__content {
width: calc(100% - 155px);
padding: 0 5px 0 0;
}
.company-info__content p:not(:last-child) {
margin-bottom: 23px;
}
@media screen and (max-width: 834px) {
.company-info__content p:not(:last-child) {
margin-bottom: 7px;
}
}
.company-info__content.span > p {
position: relative;
padding-left: 15px;
}
.company-info__content.span span {
position: absolute;
left: 0;
top: 0;
}
@media screen and (max-width: 834px) {
.company-info__content {
width: calc(100% - 108px);
padding: 0 5px 0 0;
}
}
.access-info {
max-width: 646px;
margin: 0 auto;
font-size: 1.4rem;
line-height: 1.2;
font-weight: 500;
color: #070304;
}
.access-info__ttl {
font-size: 1.6rem;
}
.access-info p:not(:last-child) {
margin-bottom: 20px;
}
@media screen and (max-width: 834px) {
.access-info p:not(:last-child) {
margin-bottom: 11px;
}
}
@media screen and (max-width: 834px) {
.access-info {
font-size: 1.4rem;
line-height: 1.5714285714;
}
}
.page-front-bpo .sec-view .inner {
max-width: 765px;
}
@media screen and (min-width: 835px) {
.page-front-bpo .sec-view {
padding: 116px 0 182px;
}
}
@media screen and (max-width: 834px) {
.page-front-bpo .sec-view {
padding-top: 0;
}
}
.sec-front-bpro {
padding: 122px 0 30px;
}
@media screen and (max-width: 834px) {
.sec-front-bpro {
padding: 56px 0 48px;
}
}
.sec-front-bpro .c-ttl__01 {
color: #62809F;
}
.sec-front-bpro .inner {
max-width: 905px;
}
.list-project {
margin: auto;
padding-top: 65px;
}
@media screen and (min-width: 835px) {
.list-project {
max-width: 85%;
}
}
@media screen and (max-width: 834px) {
.list-project {
padding-top: 30px;
}
}
.list-project__item {
display: flex;
}
@media screen and (max-width: 834px) {
.list-project__item {
flex-wrap: wrap;
}
}
.list-project__index {
font-size: 10rem;
line-height: 1.2;
color: #4B6E8F;
width: 129px;
text-align: center;
position: relative;
font-weight: 400;
font-family: "Jost", sans-serif;
}
.list-project__index > span {
display: block;
}
.list-project__index:after {
content: "";
display: inline-block;
position: absolute;
width: 96px;
height: 96px;
background: url(/wp-content/themes/GOOFY/img/front-bpo/bg-border.png) no-repeat;
left: 50%;
transform: translateX(-50%);
top: 78px;
background-size: contain;
}
@media screen and (max-width: 834px) {
.list-project__index:after {
width: 65px;
height: 65px;
top: 52px;
}
}
@media screen and (max-width: 834px) {
.list-project__index {
font-size: 6.5rem;
line-height: 1.2;
width: 69px;
}
}
.list-project__info {
display: flex;
flex-wrap: wrap;
width: calc(100% - 129px);
padding-right: 16px;
}
@media screen and (max-width: 834px) {
.list-project__info {
padding-right: 0;
width: calc(100% - 69px);
}
}
.list-project__ttl {
color: #4B6E8F;
font-size: 2.2rem;
line-height: 1.8181818182;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.list-project__ttl {
font-size: 2.2rem;
line-height: 1.5454545455;
margin-bottom: 6px;
}
}
.list-project__content {
font-size: 1.5rem;
line-height: 2;
color: #000000;
font-weight: 500;
}
@media screen and (max-width: 834px) {
.list-project__content {
font-size: 1.4rem;
line-height: 2;
}
}
.list-project__img {
width: 308px;
margin-left: auto;
margin-top: -48px;
}
.list-project__img img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover";
}
@media screen and (max-width: 834px) {
.list-project__img {
margin-top: -43px;
padding-left: 21px;
max-height: 249px;
}
}
.list-project__info-child {
padding-left: 22px;
padding-top: 18px;
}
@media screen and (max-width: 834px) {
.list-project__info-child {
padding-top: 10px;
}
}
.sec-plan {
padding: 116px 0 50px;
}
@media screen and (max-width: 834px) {
.sec-plan {
padding: 60px 0 30px;
}
}
.sec-plan .inner {
max-width: 907px;
}
.plan-box {
background: #62809F;
border-radius: 15px;
padding: 42px 81px 55px 85px;
margin-bottom: 37px;
}
@media screen and (max-width: 1245px) {
.plan-box {
padding: 30px 20px;
}
}
@media screen and (max-width: 834px) {
.plan-box {
border-radius: 20px;
padding: 25px 34px;
margin-bottom: 71px;
margin-right: -5px;
}
}
@media screen and (max-width: 410px) {
.plan-box {
padding: 25px 15px;
margin-right: 0;
}
}
.plan-heading {
color: #fff;
font-weight: 300;
line-height: 1;
margin-bottom: 23px;
letter-spacing: 3.5px;
padding: 0 3px 3px;
font-family: "Jost", sans-serif;
border-bottom: 1px solid #fff;
font-size: 8.7rem;
}
@media screen and (max-width: 1245px) {
.plan-heading {
margin-bottom: 15px;
letter-spacing: 2px;
font-size: 7rem;
}
}
@media screen and (max-width: 834px) {
.plan-heading {
display: flex;
letter-spacing: 5px;
margin-bottom: 17px;
padding-bottom: 26px;
font-size: 6.4rem;
}
}
@media screen and (max-width: 410px) {
.plan-heading {
letter-spacing: 0;
font-size: 5.1rem;
}
}
.plan-heading span {
font-weight: 400;
color: #62809F;
margin-right: 25px;
text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989992px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756802px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279415px 0px;
font-size: 10.3rem;
line-height: 1;
display: inline-block;
}
@media screen and (max-width: 1245px) {
.plan-heading span {
font-size: 8rem;
}
}
@media screen and (max-width: 834px) {
.plan-heading span {
font-size: 6.3rem;
}
}
@media screen and (max-width: 410px) {
.plan-heading span {
margin-right: 15px;
font-size: 5rem;
}
}
.plan-ttl {
color: #fff;
font-weight: 700;
margin-bottom: 15px;
padding: 0 5px;
letter-spacing: -0.6px;
font-size: 3.2rem;
}
@media screen and (max-width: 1245px) {
.plan-ttl {
letter-spacing: 0;
font-size: 2.8rem;
}
}
@media screen and (max-width: 834px) {
.plan-ttl {
margin-bottom: 5px;
padding: 0;
line-height: 1.416;
font-size: 2.4rem;
}
}
.plan-flex {
display: flex;
}
@media screen and (max-width: 834px) {
.plan-flex {
display: flex;
flex-wrap: wrap-reverse;
}
}
.plan-txt {
line-height: 1.47;
font-weight: 500;
color: #fff;
letter-spacing: 0.5px;
width: calc(100% - 350px);
font-size: 1.7rem;
}
@media screen and (max-width: 1245px) {
.plan-txt {
letter-spacing: 0;
width: calc(100% - 250px);
font-size: 1.6rem;
}
}
@media screen and (max-width: 834px) {
.plan-txt {
letter-spacing: 0.25px;
line-height: 1.75;
width: 100%;
}
}
@media screen and (max-width: 410px) {
.plan-txt {
letter-spacing: 0;
font-size: 1.4rem;
}
}
.plan-yen {
width: 350px;
color: #fff;
font-weight: 700;
line-height: 1;
padding-left: 10px;
padding-top: 33px;
letter-spacing: 1px;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "メイリオ", "MS Pゴシック", Arial, Helvetica, Verdana, sans-serif;
font-size: 10.7rem;
}
@media screen and (max-width: 1245px) {
.plan-yen {
letter-spacing: 0;
width: 250px;
font-size: 8rem;
}
}
@media screen and (max-width: 834px) {
.plan-yen {
width: 100%;
padding-top: 0;
padding-left: 0;
margin-bottom: 17px;
font-size: 6.6rem;
}
}
.plan-yen span {
font-size: 5.5rem;
}
@media screen and (max-width: 1245px) {
.plan-yen span {
font-size: 4rem;
}
}
@media screen and (max-width: 834px) {
.plan-yen span {
font-size: 3.4rem;
}
}
.plan-list {
display: flex;
margin: 0 -20px 47px;
}
@media screen and (max-width: 834px) {
.plan-list {
margin: 0 0 25px;
display: flex;
flex-wrap: wrap;
}
}
.plan-item {
width: 50%;
padding: 0 20px;
}
@media screen and (max-width: 834px) {
.plan-item {
padding: 0;
width: 100%;
margin-bottom: 70px;
}
.plan-item:last-child {
margin-bottom: 0;
}
}
.plan-item__heading {
letter-spacing: 2.5px;
color: #62809f;
font-weight: 300;
line-height: 1;
margin-bottom: 35px;
padding: 0 4px 20px;
font-family: "Jost", sans-serif;
border-bottom: 1px solid #B0B0B0;
font-size: 3.5rem;
}
@media screen and (max-width: 1245px) {
.plan-item__heading {
margin-bottom: 15px;
padding: 0 0 10px;
letter-spacing: 0;
font-size: 2.8rem;
}
}
@media screen and (max-width: 834px) {
.plan-item__heading {
margin-bottom: 30px;
padding: 0 0 16px 5px;
letter-spacing: 2px;
font-size: 3.1rem;
}
}
@media screen and (max-width: 410px) {
.plan-item__heading {
letter-spacing: 0;
font-size: 2.8rem;
}
}
.plan-item__heading span {
font-weight: 400;
color: #F7F7F7;
margin-right: 14px;
text-shadow: rgb(98, 128, 159) 1px 0px 0px, rgb(98, 128, 159) 0.540302px 0.841471px 0px, rgb(98, 128, 159) -0.416147px 0.909297px 0px, rgb(98, 128, 159) -0.989992px 0.14112px 0px, rgb(98, 128, 159) -0.653644px -0.756802px 0px, rgb(98, 128, 159) 0.283662px -0.958924px 0px, rgb(98, 128, 159) 0.96017px -0.279415px 0px;
font-size: 3.9rem;
}
@media screen and (max-width: 1245px) {
.plan-item__heading span {
margin-right: 10px;
font-size: 3rem;
}
}
@media screen and (max-width: 834px) {
.plan-item__heading span {
margin-right: 14px;
font-size: 3.9rem;
}
}
@media screen and (max-width: 410px) {
.plan-item__heading span {
margin-right: 8px;
}
}
.plan-item__ttl {
color: #4b6e8f;
line-height: 1.545;
margin-bottom: 10px;
padding: 0 4px;
letter-spacing: 0.5px;
font-weight: 700;
font-size: 2.2rem;
}
@media screen and (max-width: 1245px) {
.plan-item__ttl {
letter-spacing: 0;
font-size: 1.8rem;
}
}
@media screen and (max-width: 834px) {
.plan-item__ttl {
margin-bottom: 8px;
padding: 0;
font-size: 2.2rem;
}
}
@media screen and (max-width: 410px) {
.plan-item__ttl {
font-size: 1.8rem;
}
}
.plan-item__yen {
color: #62809F;
line-height: 1;
font-weight: bold;
margin-bottom: 15px;
font-size: 7.5rem;
}
@media screen and (max-width: 1245px) {
.plan-item__yen {
font-size: 6.1rem;
}
}
@media screen and (max-width: 834px) {
.plan-item__yen {
margin-bottom: 16px;
}
}
@media screen and (max-width: 410px) {
.plan-item__yen {
font-size: 4rem;
}
}
.plan-item__yen span {
padding-left: 7px;
margin-top: -6px;
display: inline-block;
font-size: 3.9rem;
}
@media screen and (max-width: 1245px) {
.plan-item__yen span {
font-size: 3.2rem;
}
}
@media screen and (max-width: 410px) {
.plan-item__yen span {
font-size: 3rem;
}
}
.plan-ct {
border-radius: 15px;
background: #F7F7F7;
padding: 39px 43px 35px;
}
@media screen and (max-width: 1245px) {
.plan-ct {
padding: 20px 15px;
}
}
@media screen and (max-width: 834px) {
.plan-ct {
padding: 24px 34px 30px;
margin-right: -5px;
}
}
@media screen and (max-width: 410px) {
.plan-ct {
padding: 24px 15px 30px;
margin-right: 0;
}
}
.plan-ct p {
font-feature-settings: "palt" 1;
line-height: 1.584;
color: #617FA1;
font-weight: 500;
font-size: 1.3rem;
}
@media screen and (max-width: 1245px) {
.plan-ct p {
font-size: 1.2rem;
}
}
@media screen and (max-width: 834px) {
.plan-ct p {
font-size: 1.3rem;
}
}
@media screen and (max-width: 410px) {
.plan-ct p {
font-size: 1.2rem;
}
}
.plan-dl dl {
display: flex;
font-weight: 500;
line-height: 1.91;
font-size: 1.2rem;
}
@media screen and (max-width: 834px) {
.plan-dl dl {
display: flex;
flex-wrap: wrap;
}
}
@media screen and (max-width: 410px) {
.plan-dl dl {
font-size: 1.1rem;
}
}
.plan-dl dl dt {
width: 60px;
}
@media screen and (max-width: 834px) {
.plan-dl dl dt {
width: 100%;
}
}
.plan-dl dl dd {
width: calc(100% - 60px);
}
@media screen and (max-width: 834px) {
.plan-dl dl dd {
width: 100%;
}
}
.sec-view {
padding: 116px 0 175px;
}
@media screen and (max-width: 834px) {
.sec-view {
padding: 63px 0 53px;
}
}
.sec-view .inner {
max-width: 794px;
}
.view-heading {
position: relative;
text-align: center;
margin-bottom: 43px;
color: #4B6E8F;
font-family: "Jost", sans-serif;
font-size: 3.2rem;
}
@media screen and (max-width: 1245px) {
.view-heading {
font-size: 2.8rem;
}
}
.view-heading:before {
content: "";
background: #4B6E8F;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 0;
z-index: 1;
}
.view-heading span {
background: #fff;
padding: 0 56px;
letter-spacing: 3.5px;
position: relative;
z-index: 2;
}
@media screen and (max-width: 1245px) {
.view-heading span {
padding: 0 20px;
}
}
.view-list {
margin: 0 -19px;
display: flex;
justify-content: center;
}
@media screen and (max-width: 1245px) {
.view-list {
margin: 0 -10px;
}
}
@media screen and (max-width: 834px) {
.view-list {
margin: 0 -15px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}
@media screen and (max-width: 410px) {
.view-list {
margin: 0 -5px;
}
}
.view-item {
padding: 0 19px;
}
@media screen and (max-width: 1245px) {
.view-item {
padding: 0 10px;
}
}
@media screen and (max-width: 834px) {
.view-item {
padding: 0 15px;
width: 50%;
margin-bottom: 20px;
text-align: center;
}
}
@media screen and (max-width: 410px) {
.view-item {
padding: 0 5px;
margin-bottom: 10px;
}
}
.view-item.active {
pointer-events: none;
}
.view-item.active .view-ct {
background: #E1E7ED;
}
.view-item.active .view-ttl {
color: #9B9B9B;
}
.view-item.active .view-more {
color: #9B9B9B;
}
.view-item.active .view-more span:after {
border-color: #9B9B9B;
}
.view-ct, .view-thumb {
width: 213px;
height: 213px;
border-radius: 50%;
background: #4B6E8F;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
align-content: center;
}
@media screen and (max-width: 1245px) {
.view-ct, .view-thumb {
width: 180px;
height: 180px;
}
}
@media screen and (max-width: 834px) {
.view-ct, .view-thumb {
width: 166px;
height: 166px;
margin: 0 auto;
}
}
@media screen and (max-width: 410px) {
.view-ct, .view-thumb {
width: 150px;
height: 150px;
padding: 20px 10px;
}
}
.view-ct:hover {
transform: scale(1.05);
}
.view-thumb {
background: none;
padding: 0;
}
.view-img {
width: 100%;
margin-bottom: 13px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 1245px) {
.view-img {
margin-bottom: 8px;
}
}
@media screen and (max-width: 834px) {
.view-img {
margin-bottom: 6px;
}
}
@media screen and (max-width: 834px) and (max-width: 410px) {
.view-img img {
max-height: 42px;
}
}
.view-ttl {
color: #fff;
font-weight: bold;
margin-bottom: 15px;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
align-content: center;
font-size: 1.6rem;
}
.view-ttl span {
width: 100%;
}
@media screen and (max-width: 1245px) {
.view-ttl {
margin-bottom: 8px;
font-size: 1.4rem;
}
}
@media screen and (max-width: 834px) {
.view-ttl {
margin-bottom: 4px;
font-size: 1.2rem;
}
.view-ttl span {
font-size: 1.3rem;
}
}
.view-more {
width: 100%;
color: #fff;
display: block;
text-align: center;
font-size: 1.4rem;
font-family: "Jost", sans-serif;
}
@media screen and (max-width: 834px) {
.view-more {
font-size: 1.3rem;
}
}
.view-more span {
display: inline-block;
position: relative;
padding-right: 10px;
}
.view-more span:after {
content: "";
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
right: -4px;
top: 7px;
position: absolute;
transform: rotate(45deg);
}
@media screen and (max-width: 834px) {
.page-hands-on .mv-item__ttl {
line-height: 1.214;
}
}
.sec-handson {
padding: 115px 0 41px;
}
@media screen and (max-width: 834px) {
.sec-handson {
padding: 55px 0 41px;
}
}
.sec-handson .inner {
max-width: 1009px;
}
.handson-heading {
color: #62809F;
font-weight: bold;
margin-bottom: 77px;
padding-left: 76px;
font-size: 3.2rem;
}
@media screen and (max-width: 834px) {
.handson-heading {
padding-left: 0;
margin-bottom: 39px;
letter-spacing: 1.2px;
line-height: 1.416;
font-size: 2.4rem;
}
}
@media screen and (max-width: 834px) {
.handson-list {
background: #E1E7ED;
margin: 0 -29px;
padding: 68px 29px 77px;
}
}
.handson-item {
background: #e1e7ed;
border-radius: 0 100px 100px 0;
margin-bottom: 144px;
position: relative;
}
@media screen and (max-width: 834px) {
.handson-item {
padding: 0;
margin-bottom: 87px;
border-radius: 0 !important;
}
}
.handson-item:before {
content: "";
width: 1000px;
height: 100%;
background: #e1e7ed;
left: -1000px;
position: absolute;
}
@media screen and (max-width: 834px) {
.handson-item:before {
display: none;
}
}
.handson-item:last-child {
margin-bottom: 0;
}
.handson-item:nth-child(2) {
border-radius: 100px 0 0 100px;
margin-left: 53px;
}
@media screen and (max-width: 1245px) {
.handson-item:nth-child(2) {
margin-left: 0;
}
}
@media screen and (max-width: 834px) {
.handson-item:nth-child(2) {
margin-bottom: 105px;
}
}
.handson-item:nth-child(2):before {
right: -1000px;
left: auto;
}
@media screen and (max-width: 834px) {
.handson-item:nth-child(3) .handson-img {
padding: 0 35px 34px 30px;
}
}
@media screen and (min-width: 835px) {
.handson-item:nth-child(3) .handson-flex {
padding: 17px 45px 0 0;
margin-bottom: 28px;
}
.handson-item:nth-child(3) .handson-number {
margin-right: 12px;
}
.handson-item:nth-child(3) .handson-ct {
width: 260px;
}
.handson-item:nth-child(3) .handson-img {
width: calc(100% - 179px);
margin-left: 0;
padding-left: 138px;
margin-top: -28px;
padding-right: 79px;
}
}
@media screen and (min-width: 835px) and (max-width: 1245px) {
.handson-item:nth-child(3) .handson-img {
padding: 0;
margin-top: 0;
}
}
.handson-flex {
display: flex;
align-items: flex-start;
padding: 10px 72px 66px 0;
}
@media screen and (max-width: 1245px) {
.handson-flex {
padding: 20px 30px 30px;
align-items: center;
}
}
@media screen and (max-width: 834px) {
.handson-flex {
padding: 0;
display: flex;
flex-wrap: wrap-reverse;
}
}
.handson-img {
width: calc(100% - 200px);
margin-left: 11px;
padding-right: 58px;
padding-top: 58px;
}
@media screen and (max-width: 1245px) {
.handson-img {
padding-right: 20px;
padding-top: 0;
}
}
@media screen and (max-width: 834px) {
.handson-img {
padding: 0 16px 0 3px;
width: 100%;
}
}
.handson-ct {
width: 200px;
padding-top: 51px;
transform: translateX(-9px);
}
@media screen and (max-width: 1245px) {
.handson-ct {
padding-top: 0;
transform: translateX(0);
}
}
@media screen and (max-width: 834px) {
.handson-ct {
width: 100%;
position: relative;
padding-left: 92px;
margin-bottom: 29px;
}
}
.handson-ct p {
color: #000;
font-weight: 500;
line-height: 2;
letter-spacing: 0.75px;
font-size: 1.5rem;
}
@media screen and (max-width: 834px) {
.handson-ct p {
letter-spacing: 0.1px;
font-size: 1.4rem;
}
}
.handson-number {
display: block;
line-height: 1;
position: relative;
color: #4b6e8f;
margin-bottom: 33px;
padding-bottom: 18px;
text-align: center;
margin-right: 28px;
font-family: "Jost", sans-serif;
font-size: 10rem;
}
@media screen and (max-width: 834px) {
.handson-number {
position: absolute;
left: 19px;
top: 0;
margin-bottom: 0;
padding-bottom: 13px;
margin-right: 0;
font-size: 6.5rem;
}
}
.handson-number.fade-up span {
top: 50px;
}
.handson-number.fade-up span:before {
content: "";
width: 100%;
height: 100%;
background: #e1e7ed;
bottom: 0;
left: 0;
transition: all 0.5s;
position: absolute;
}
.handson-number:before {
content: "";
width: 96.5px;
height: 49px;
background: url(/wp-content/themes/GOOFY/img/hands-on/border.svg) center no-repeat;
background-size: contain;
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
transform: translateX(-50%);
}
@media screen and (max-width: 834px) {
.handson-number:before {
width: 65.5px;
height: 34px;
}
}
.handson-number.active span {
top: 0;
transition: all 0.75s;
}
.handson-number.active span:before {
height: 0;
transition: all 0.75s;
}
.handson-number span {
position: relative;
display: inline-block;
transition: all 0.5s;
}
.handson-ttl {
color: #4B6E8F;
font-weight: bold;
line-height: 1.818;
margin-bottom: 20px;
letter-spacing: 1px;
font-size: 2.2rem;
}
@media screen and (max-width: 1245px) {
.handson-ttl {
letter-spacing: 0;
margin-bottom: 10px;
font-size: 1.8rem;
}
}
@media screen and (max-width: 834px) {
.handson-ttl {
letter-spacing: 1px;
margin-bottom: 18px;
line-height: 1.545;
font-size: 2.2rem;
}
}
.handson-flex02 {
padding: 38px 85px 0;
}
@media screen and (max-width: 1245px) {
.handson-flex02 {
padding: 38px 20px 0;
}
}
@media screen and (max-width: 834px) {
.handson-flex02 {
display: flex;
flex-wrap: wrap;
padding: 0 0 0 92px;
margin-bottom: -20px;
}
}
.handson-flex02 .handson-number {
width: 97px;
}
@media screen and (max-width: 834px) {
.handson-flex02 .handson-number {
width: auto;
}
}
.handson-flex02 .handson-ct {
width: calc(100% - 97px);
padding-left: 40px;
padding-top: 14px;
}
@media screen and (max-width: 1245px) {
.handson-flex02 .handson-ct {
padding-left: 0;
padding-top: 0;
}
}
@media screen and (max-width: 834px) {
.handson-flex02 .handson-ct {
width: 100%;
}
}
.handson-flex02 .handson-ttl {
margin-bottom: 11px;
}
.handson-thumb {
padding: 0 0 71px 134px;
margin-right: -11px;
margin-top: -24px;
}
@media screen and (max-width: 1245px) {
.handson-thumb {
margin-top: 0;
margin-right: 0;
padding: 0 20px 30px 50px;
}
}
@media screen and (max-width: 834px) {
.handson-thumb {
padding: 0 14px;
}
}
.handson-mw {
max-width: 729px;
width: 100%;
margin: 0 auto;
padding-bottom: 58px;
}
@media screen and (max-width: 834px) {
.handson-mw {
padding-bottom: 0;
}
}
.handson-desc {
color: #000;
font-weight: bold;
margin-bottom: 7px;
font-size: 1.5rem;
}
@media screen and (max-width: 834px) {
.handson-desc {
margin-bottom: 9px;
letter-spacing: 0.75px;
font-size: 1.4rem;
}
}
.handson-txt {
color: #000;
line-height: 1.846;
font-size: 1.3rem;
}
@media screen and (max-width: 834px) {
.handson-txt {
line-height: 1.833;
font-size: 1.2rem;
}
}
.mv-case-study {
background: #E0E6EC url(/wp-content/themes/GOOFY/img/case-study/bg-mv.png) no-repeat 97.6% 103%;
min-height: 358px;
padding-top: 121px;
color: #62809F;
}
@media screen and (max-width: 834px) {
.mv-case-study {
background: #E0E6EC url(/wp-content/themes/GOOFY/img/case-study/bg-mv-sp.png) no-repeat 104.6% 100%;
min-height: 309px;
padding-top: 93px;
background-size: 232px;
}
}
.mv-case-study__ttl {
font-size: 3.6rem;
line-height: 1.6666666667;
}
@media screen and (max-width: 834px) {
.mv-case-study__ttl {
font-size: 2rem;
line-height: 1.6;
}
}
.mv-case-study .inner {
width: 904px;
}
.sec-case-study {
padding: 118px 0 177px;
}
@media screen and (max-width: 834px) {
.sec-case-study {
padding: 56px 0 74px;
}
}
.sec-case-study .inner {
max-width: 904px;
}
.news-list {
display: flex;
flex-wrap: wrap;
margin: 0 -12px;
}
.news-list__item {
width: 33.3333333333%;
padding: 0 14px;
margin-bottom: 94px;
}
@media screen and (max-width: 834px) {
.news-list__item {
margin-bottom: 51px;
}
}
@media screen and (max-width: 640px) {
.news-list__item {
width: 100%;
}
}
.news-list__item-child {
width: 100%;
height: 100%;
display: block;
}
.news-list article a {
display: block;
}
.news-list img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover";
width: 100%;
height: 300px;
}
.news-list__img {
margin-bottom: 22px;
}
@media screen and (max-width: 834px) {
.news-list__img {
margin-bottom: 18px;
}
}
.news-list__tag {
font-size: 1.4rem;
font-weight: bold;
background: #62809F;
display: inline-block;
color: #FFFFFF;
min-width: 106px;
margin-bottom: 15px;
padding: 3px 15px;
text-align: center;
}
@media screen and (max-width: 834px) {
.news-list__tag {
font-size: 1.3rem;
min-width: 100px;
line-height: 22px;
margin-bottom: 12px;
}
}
.news-list__ttl {
font-weight: bold;
font-size: 1.5rem;
line-height: 1.7333333333;
min-height: 50px;
color: #000000;
}
@media screen and (max-width: 834px) {
.news-list__ttl {
font-size: 1.6rem;
line-height: 1.625;
margin-bottom: 10px;
letter-spacing: 0.7px;
}
}
.news-list__content {
font-size: 1.4rem;
line-height: 2.2857142857;
color: #000000;
font-weight: 500;
}
@media screen and (max-width: 834px) {
.news-list__content {
font-size: 1.4rem;
line-height: 1.1142857143;
}
}
.bx-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -12px;
}
.navigation .page {
font-size: 2rem;
line-height: 0.96;
font-weight: bold;
color: #C7C7C7;
position: relative;
}
.navigation .page.active {
color: #62809F;
}
.navigation .page.active:after {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background: #62809F;
}
.navigation .page:not(:last-child) {
margin-right: 40px;
}
@media screen and (max-width: 834px) {
.navigation .page:not(:last-child) {
margin-right: 25px;
}
}
.page-service .sec-view {
padding: 157px 0 168px;
}
@media screen and (max-width: 834px) {
.page-service .sec-view {
padding: 47px 0 53px;
}
}
@media screen and (max-width: 834px) {
.page-service .mv-item__info {
padding-top: 131px;
}
.page-service .mv-item__ttl {
font-size: 2.8rem;
line-height: 1.2142857143;
margin-bottom: 18px;
}
}
.sec-service {
padding-top: 113px;
}
@media screen and (max-width: 834px) {
.sec-service {
padding: 60px 0 81px;
}
}
.sec-service__ttl {
color: #62809F;
font-size: 2.5rem;
line-height: 1.536;
font-weight: bold;
margin-bottom: 28px;
}
@media screen and (max-width: 834px) {
.sec-service__ttl {
font-size: 2.4rem;
line-height: 1.4166666667;
margin-bottom: 40px;
}
}
.sec-service .inner {
max-width: 900px;
}
.sec-service-detail {
padding-top: 120px;
}
.sec-service-detail-type2 {
padding-top: 132px;
}
@media screen and (max-width: 834px) {
.sec-service-detail-type2 {
padding-top: 0;
}
}
@media screen and (max-width: 834px) {
.sec-service-detail-bottom {
padding-bottom: 120px;
}
}
.sec-service-detail .inner {
max-width: 1012px;
}
@media screen and (max-width: 834px) {
.sec-service-detail {
background: #E0E6EC;
padding-top: 40px;
}
}
.list-service a {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
padding-right: 25px;
}
.list-service a:hover:after {
top: 60%;
}
.list-service a:after {
content: "";
display: inline-block;
position: absolute;
width: 8px;
height: 21px;
background: url(/wp-content/themes/GOOFY/img/service/icon-arrow-down.svg) no-repeat;
background-size: contain;
right: 10px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s;
}
@media screen and (min-width: 835px) {
.list-service {
padding-right: 56px;
}
}
.list-service__item {
display: flex;
align-items: center;
border-bottom: 1px solid #b6b6b6;
padding-bottom: 28px;
margin-bottom: 28px;
position: relative;
transition: all 0.3s;
}
.list-service__item:hover {
border-color: #333;
}
@media screen and (max-width: 834px) {
.list-service__item {
padding-bottom: 12px;
margin-bottom: 12px;
}
.list-service__item-type2 .list-service__ttl {
padding-top: 5px;
}
}
.list-service__index {
font-size: 4.5rem;
line-height: 1.2;
color: #62809F;
width: 43px;
text-align: center;
font-family: "Jost", sans-serif;
font-weight: 400;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.list-service__index:after {
content: "";
display: inline-block;
position: absolute;
width: 43px;
height: 21px;
background: url(/wp-content/themes/GOOFY/img/service/icon-border1.png) no-repeat;
bottom: -3px;
left: 1px;
background-size: contain;
}
@media screen and (max-width: 834px) {
.list-service__index {
display: none;
}
}
.list-service__ttl {
font-weight: 500;
font-size: 2.2rem;
line-height: 1.7454545455;
color: #454545;
width: calc(100% - 45px);
padding-top: 10px;
padding-left: 80px;
}
@media screen and (max-width: 834px) {
.list-service__ttl {
width: 100%;
padding-left: 0;
font-size: 1.7rem;
line-height: 2.2588235294;
padding-top: 0;
}
}
.service-item {
background: #E0E6EC;
border-radius: 0 95px 95px 0;
padding: 47px 110px 100px 56px;
position: relative;
}
.service-item .ttl-image4 {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 834px) {
.service-item .ttl-image4.service-item__txt-ttl {
font-size: 1.6rem;
}
}
.service-item .ttl-image4 > p {
color: #62809F;
width: 50%;
}
.service-item:before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
right: 100%;
top: 0;
background: #E0E6EC;
}
.service-item-type2 {
border-radius: 95px 0 0 95px;
padding: 71px 0 100px 159px;
}
.service-item-type2:before {
right: -100%;
}
.service-item-type3 {
padding: 72px 110px 143px 56px;
}
@media screen and (max-width: 834px) {
.service-item {
padding: 28px 0 10px;
}
}
.service-item__child {
display: flex;
align-items: center;
flex-wrap: wrap;
padding-bottom: 30px;
margin-bottom: 33px;
}
@media screen and (max-width: 834px) {
.service-item__child {
padding-bottom: 15px;
margin-bottom: 15px;
}
}
.service-item__index {
font-size: 10rem;
line-height: 1.2;
color: #4B6E8F;
width: 100px;
text-align: center;
position: relative;
padding-bottom: 10px;
font-family: "Jost", sans-serif;
font-weight: 400;
}
.service-item__index > span {
display: block;
}
@media screen and (max-width: 834px) {
.service-item__index {
font-size: 6.5rem;
line-height: 1.2;
width: 65px;
padding-bottom: 8px;
}
}
.service-item__ttl {
color: #4B6E8F;
font-size: 3.2rem;
line-height: 1.25;
padding: 31px 0 0 51px;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.service-item__ttl {
font-size: 2.6rem;
line-height: 1.3076923077;
width: calc(100% - 65px);
padding: 5px 0 0 25px;
}
}
.service-item__txt-ttl {
font-size: 2.2rem;
line-height: 1.8181818182;
font-weight: bold;
color: #4B6E8F;
}
@media screen and (max-width: 834px) {
.service-item__txt-ttl {
font-size: 2rem;
line-height: 1.5;
margin-bottom: 15px;
}
}
.service-item__txt-ttl-type2 {
font-size: 1.6rem;
font-weight: bold;
color: #4B6E8F;
}
@media screen and (max-width: 834px) {
.service-item__txt-ttl-type2 {
font-size: 1.5rem;
}
}
.service-item__img-type2 {
margin-top: -139px;
}
@media screen and (max-width: 834px) {
.service-item__img-type2 {
margin-top: 0;
}
}
.service-item__img:not(:last-child) {
margin-bottom: 75px;
}
@media screen and (max-width: 834px) {
.service-item__img:not(:last-child) {
margin-bottom: 49px;
}
}
@media screen and (max-width: 834px) {
.service-item__img-scroll {
overflow-x: auto;
margin-right: -29px;
position: relative;
}
.service-item__img-scroll img {
max-width: 816px;
width: 816px;
}
}
.service-item__content {
font-size: 1.5rem;
line-height: 1.8;
}
.service-item__content-txt {
margin-bottom: 22px;
}
.service-item__content-txt-type2 {
color: #000000;
font-weight: 500;
}
.service-item__content-txt-mb {
margin-bottom: 20px;
}
@media screen and (max-width: 834px) {
.service-item__content-txt {
margin-bottom: 25px;
min-height: 44px;
}
}
@media screen and (max-width: 834px) {
.service-item__content {
font-size: 1.5rem;
line-height: 1.8;
}
}
.sec-privacypolicy {
padding-bottom: 200px;
}
@media screen and (max-width: 834px) {
.sec-privacypolicy {
padding-bottom: 100px;
}
}
@media screen and (max-width: 834px) {
.sec-privacypolicy .mv-item__info {
padding-top: 80px;
}
}
.page-recruit .inner__child {
max-width: 916px;
margin: auto;
padding-left: 20px;
padding-top: 65px;
}
@media screen and (max-width: 834px) {
.page-recruit .inner__child {
padding-top: 60px;
}
}
.page-recruit .inner__child-type2 {
padding-top: 54px;
}
@media screen and (max-width: 834px) {
.page-recruit .inner__child-type2 {
padding-top: 32px;
}
}
.page-recruit .inner__child-type3 {
padding-top: 33px;
}
.page-recruit .inner__child-bottom {
padding-top: 54px;
}
@media screen and (max-width: 834px) {
.page-recruit .inner__child-bottom {
padding-top: 64px;
}
}
@media screen and (max-width: 1024px) {
.page-recruit .inner__child {
padding-left: 0;
}
}
.sec-recruitment {
padding-top: 117px;
}
@media screen and (max-width: 834px) {
.sec-recruitment {
padding-top: 55px;
}
}
.c-tag {
background: #62809F;
color: #FFFFFF;
font-size: 1.4rem;
line-height: 1.1;
min-width: 70px;
font-weight: bold;
text-align: center;
padding: 7px 0 4px;
display: inline-block;
margin: 11px 0 12px;
}
.mv-recruit {
color: #FFFFFF;
}
.mv-recruit__ttl {
font-size: 4.6rem;
line-height: 1.2;
font-weight: bold;
margin-bottom: 27px;
}
@media screen and (max-width: 834px) {
.mv-recruit__ttl {
font-size: 3.2rem;
line-height: 1.875;
margin-bottom: 11px;
}
}
.mv-recruit__content {
font-weight: bold;
font-size: 2.4rem;
line-height: 2.5833333333;
}
@media screen and (max-width: 834px) {
.mv-recruit__content {
font-size: 2rem;
line-height: 2.1;
}
}
.mv-recruit .mv-item__info {
padding: 119px 0 0 140px;
}
@media screen and (max-width: 834px) {
.mv-recruit .mv-item__info {
padding: 110px 0 0;
}
}
.list-scroll {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 106px;
}
@media screen and (max-width: 834px) {
.list-scroll {
margin-bottom: 50px;
}
}
@media screen and (max-width: 374px) {
.list-scroll {
flex-wrap: wrap;
}
}
@media screen and (max-width: 834px) {
.list-scroll > li {
margin-bottom: 15px;
}
}
.list-scroll > li:not(:last-child) {
margin-right: 25px;
}
@media screen and (max-width: 374px) {
.list-scroll > li:not(:last-child) {
margin-right: 0;
}
}
.list-scroll__item {
display: block;
color: #62809F;
padding: 15px 30px;
border: 1px solid currentColor;
border-radius: 20px;
min-width: 284px;
position: relative;
cursor: pointer;
}
@media screen and (max-width: 834px) {
.list-scroll__item {
min-width: 167px;
padding: 15px 20px;
}
}
.list-scroll__item:hover {
color: white;
background: #62809F;
}
.list-scroll__item:hover .list-scroll__img {
border-color: white;
}
.list-scroll__item:hover svg {
transform: translateY(5px);
}
.list-scroll__item:hover svg path {
stroke: white !important;
}
.list-scroll svg, .list-scroll svg path {
transition: all 0.3s;
}
.list-scroll__ttl {
font-size: 1.8rem;
line-height: 2.5555555556;
font-weight: bold;
}
.list-scroll__img {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
right: 22px;
border: 1px solid #62809F;
border-radius: 50%;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 834px) {
.list-scroll__img {
right: 16px;
}
}
.list-scroll__img img {
transition: all 0.3s;
}
.recruitment-info {
color: #62809F;
position: relative;
padding-top: 261px;
}
@media screen and (max-width: 834px) {
.recruitment-info {
padding-top: 81px;
}
}
.recruitment-info:before {
content: "";
display: inline-block;
position: absolute;
width: 100vw;
height: 339px;
background: url(/wp-content/themes/GOOFY/img/recruit/bg-1.png) no-repeat;
background-size: cover;
top: 0;
right: calc(29% + 7px);
z-index: 1;
}
@media screen and (max-width: 1024px) {
.recruitment-info:before {
background: url(/wp-content/themes/GOOFY/img/recruit/bg-1sp.png) no-repeat;
background-size: cover;
right: 0;
}
}
@media screen and (max-width: 834px) {
.recruitment-info:before {
height: 105px;
}
}
.recruitment-info-type2 {
max-width: 916px;
margin: auto;
}
.recruitment-info-type2:before {
content: "";
display: inline-block;
position: absolute;
width: 100vw;
height: 339px;
background: url(/wp-content/themes/GOOFY/img/recruit/bg-2.png) no-repeat;
background-size: cover;
top: 0;
left: 20px;
z-index: 1;
}
@media screen and (max-width: 834px) {
.recruitment-info-type2:before {
background: url(/wp-content/themes/GOOFY/img/recruit/bg-2sp.png) no-repeat;
height: 104px;
left: 0;
}
}
.recruitment-info-type2 .recruitment-info__item {
display: inline-block;
padding-right: 17px;
padding-top: 11px;
}
.recruitment-info-type2 .recruitment-info__content {
margin-top: -8px;
}
.recruitment-info__item {
position: relative;
z-index: 9;
max-width: 916px;
margin: auto;
background: white;
padding-left: 20px;
}
@media screen and (max-width: 1024px) {
.recruitment-info__item {
padding-left: 0;
}
}
@media screen and (max-width: 834px) {
.recruitment-info__item {
background: transparent;
}
}
.recruitment-info__ttl {
font-size: 3.6rem;
line-height: 2.4;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.recruitment-info__ttl {
font-size: 2.6rem;
line-height: 1.3076923077;
padding: 6px 24px 0 29px;
margin: 0 0 14px -29px;
background: white;
display: inline-block;
}
}
.recruitment-info__content {
font-size: 1.8rem;
line-height: 1.7777777778;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.recruitment-info__content {
font-size: 1.4rem;
line-height: 2;
}
}
.Work-list {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 834px) {
.Work-list {
justify-content: space-between;
padding-top: 17px;
}
}
.Work-list__item {
width: 212px;
height: 126px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #62809F;
border-radius: 20px;
margin-bottom: 20px;
}
.Work-list__item:not(:last-child) {
margin-right: 10px;
}
@media screen and (max-width: 834px) {
.Work-list__item:not(:last-child) {
margin-right: 0;
}
}
@media screen and (max-width: 834px) {
.Work-list__item {
width: 168px;
height: 112px;
}
}
.Work-list__ttl {
text-align: center;
color: #62809F;
font-size: 1.6rem;
line-height: 1.6875;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.Work-list__ttl {
font-size: 1.4rem;
line-height: 1.5;
}
}
.company-info-type2 {
padding: 56px 0 56px 69px;
background: #EFF2F5;
border-radius: 20px 0 0 20px;
position: relative;
}
@media screen and (max-width: 1024px) {
.company-info-type2 {
padding: 23px 0;
margin-top: 12px;
}
}
.company-info-type2:before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
left: 100%;
top: 0;
background: #EFF2F5;
}
@media screen and (max-width: 834px) {
.company-info-type2:before {
width: 100vw;
left: -29px;
z-index: -1;
}
}
@media screen and (max-width: 410px) {
.company-info-type2:before {
left: -12px;
}
}
.company-info-type2 .company-info__item {
font-size: 1.5rem;
line-height: 1.8666666667;
padding: 28px 0 20px;
color: #666666;
border-color: #D8D8D8;
}
.company-info-type2 .company-info__item:last-child {
border-bottom: 0;
}
@media screen and (max-width: 834px) {
.company-info-type2 .company-info__item {
padding: 24px 0 24px;
font-size: 1.4rem;
}
}
.company-info-type2 .company-info__ttl {
padding: 0 0 0 20px;
}
@media screen and (max-width: 834px) {
.company-info-type2 .company-info__ttl {
padding: 0 0 0 8px;
}
.company-info-type2 .company-info__ttl > span {
line-height: 1.57;
}
}
.company-info-type2 .company-info__content {
padding: 0 0 0 61px;
}
@media screen and (max-width: 834px) {
.company-info-type2 .company-info__content {
padding-left: 0;
width: calc(100% - 108px);
}
}
.company-info-type3 {
padding: 54px 20px 12px 0;
border-radius: 0 20px 20px 0;
}
@media screen and (max-width: 834px) {
.company-info-type3 {
padding: 54px 0 12px;
}
}
.company-info-type3:before {
left: -100%;
}
@media screen and (max-width: 834px) {
.company-info-type3:before {
left: -29px;
}
}
@media screen and (max-width: 410px) {
.company-info-type3:before {
left: -12px;
}
}
.type-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 5px;
margin: 0 -22px;
}
@media screen and (max-width: 834px) {
.type-list {
margin: 0 15px;
}
}
@media screen and (min-width: 1246px) {
.type-list-type2 {
margin-top: -42px;
padding-right: 18px;
}
}
.type-list__inner {
color: #62809F;
padding: 0 22px;
margin-bottom: 10px;
}
.type-list__inner:not(:first-child) {
color: #FFFFFF;
}
@media screen and (max-width: 834px) {
.type-list__inner {
padding: 0 15px;
}
}
.type-list__item {
width: 141px;
height: 141px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #EFF2F5;
text-align: center;
position: relative;
}
.type-list__item:after {
content: "";
display: inline-block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 0 7px 7px;
border-color: transparent transparent transparent #9b9b9b;
right: -26px;
top: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 834px) {
.type-list__item:after {
right: -19px;
}
}
@media screen and (max-width: 834px) {
.type-list__item {
width: 100px;
height: 100px;
}
}
.type-list__item-2 {
background: #9DAEC6;
}
.type-list__item-3 {
background: #899FB9;
}
.type-list__item-4 {
background: #768FAC;
color: #FFFFFF;
}
.type-list__item-5 {
background: #62809F;
}
.type-list__item-5:after {
display: none;
}
.type-list__ttl {
font-size: 1.6rem;
line-height: 1.6875;
font-weight: bold;
}
@media screen and (max-width: 834px) {
.type-list__ttl {
font-size: 1.2rem;
line-height: 1.4166666667;
}
}
@media (min-width: 374px) and (max-width: 640px) {
.type-list-sm {
margin: 0;
justify-content: space-between;
}
.type-list-sm .type-list__inner {
padding: 0;
}
.type-list-sm .type-list__item-3:after {
display: none;
}
}
.wrapper-btn {
padding: 85px 0 184px;
}
@media screen and (max-width: 834px) {
.wrapper-btn {
padding: 69px 0 111px;
}
}
@media screen and (max-width: 834px) {
.wrapper-btn-type2 {
padding: 78px 0 104px;
}
}
#header.logoonly .hd-flex {
position: relative;
}
#header.logoonly .hd-flex .logo {
margin: auto;
}
.ycbm-form {
padding: 30px 20px;
line-height: 1.8;
font-size: 1.6rem;
max-width: 850px;
margin: auto;
}
.ycbm-form .yellow-underline {
-webkit-text-decoration: underline solid rgba(255, 255, 0, 0.5) 6px;
text-decoration: underline solid rgba(255, 255, 0, 0.5) 6px;
}
.ycbm-form h1 {
font-size: 2rem;
text-align: center;
margin: 0px auto 60px;
display: block;
font-weight: bold;
}
@media screen and (max-width: 767px) {
.ycbm-form h1 {
margin: 0px auto 30px;
font-size: 2rem;
}
}
.ycbm-form .message-wrap {
margin: 60px auto 30px;
display: flex;
align-items: center;
gap: 0 30px;
justify-content: center;
}
@media screen and (max-width: 767px) {
.ycbm-form .message-wrap {
flex-direction: column;
gap: 30px 0;
}
}
.ycbm-form .message-img {
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1/1;
width: 200px;
text-align: center;
}
.ycbm-form .message-fukidashi {
position: relative;
display: flex;
align-items: center;
margin: 1.5em 0;
padding: 30px 20px;
min-width: 120px;
max-width: 100%;
color: #555;
background: #e0edff;
border-radius: 15px;
}
@media screen and (max-width: 767px) {
.ycbm-form .message-fukidashi {
margin: 0em 0;
}
}
.ycbm-form .message-fukidashi:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border: 15px solid transparent;
border-right: 15px solid #e0edff;
transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
.ycbm-form .message-fukidashi:before {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 15px solid transparent;
border-bottom: 15px solid #e0edff;
}
}
.ycbm-form .message-fukidashi .message {
margin: 0;
padding: 0;
font-weight: bold;
}
.ycbm-form .iframe-wrap {
margin: 60px auto 60px;
}  .recaptcha__block{margin: 15px auto;width:304px;} .swiper__section__pc {
display: block;
}
.swiper__section__sp {
display: none;
}
.swiper__section .swiper-wrapper {
transition-timing-function: linear;
}
.swiper__section .swiper-wrapper .swiper-slide {
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
width:auto;
max-width:1600px; }
@media screen and (max-width: 834px){
.swiper__section__pc {
display: none;
}
.swiper__section__sp {
display: block;
}
.swiper__section .swiper-wrapper .swiper-slide {
max-width:1000px; }
} @media screen and (max-width: 835px) {
.news-list__item .news-list__item-child {
display: flex;
flex-direction: column!important;
}
.news-list__img img {
max-width: 350px !important;
width:100%!important;
height: 400px!important;
}
.news-list__item {
width: 50%;
}
.news-list__img {
margin-bottom: 30px;
}
}
@media screen and (max-width: 768px) {
.news-list__item {
max-width: 350px;
width: 100%;
margin: 0 auto;
margin-bottom: 20px;
}
}