@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Outfit:wght@100..900&display=swap"); html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after {
content: "";
content: none
}
q:before,
q:after {
content: "";
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
main {
display: block
}
button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
input,
button,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
outline: none
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit;
letter-spacing: 0
}
html {
font-size: 62.5%;
font-family: "Noto Serif JP", serif;
font-weight: 500;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
color: #333;
line-height: 1.5;
font-smoothing: antialiased;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-font-smoothing: antialiased;
-moz-text-size-adjust: 100%;
-ms-font-smoothing: antialiased;
-ms-text-size-adjust: 100%;
-o-font-smoothing: antialiased;
-o-text-size-adjust: 100%;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/bg-texture.webp);
background-size: contain;
background-repeat: repeat
}
a {
text-decoration: none;
color: inherit;
cursor: pointer
}
img {
max-width: 100%;
width: 100%;
height: auto;
line-height: 1;
vertical-align: bottom
}
input {
outline: none
}
textarea {
outline: none;
resize: none
}
lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
lite-youtube::before {
content: "";
display: block;
position: absolute;
top: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
background-position: top;
background-repeat: repeat-x;
height: 60px;
padding-bottom: 50px;
width: 100%;
-webkit-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
transition: all .2s cubic-bezier(0, 0, 0.2, 1)
}
lite-youtube::after {
content: "";
display: block;
padding-bottom: 56.25%
}
lite-youtube>iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0
}
lite-youtube>.lty-playbtn {
display: block;
width: 68px;
height: 48px;
position: absolute;
cursor: pointer;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
top: 50%;
left: 50%;
z-index: 1;
background-color: transparent;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: -webkit-filter .1s cubic-bezier(0, 0, 0.2, 1);
transition: -webkit-filter .1s cubic-bezier(0, 0, 0.2, 1);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1), -webkit-filter .1s cubic-bezier(0, 0, 0.2, 1);
border: none
}
lite-youtube:hover>.lty-playbtn,
lite-youtube .lty-playbtn:focus {
-webkit-filter: none;
filter: none
}
lite-youtube.lyt-activated {
cursor: unset
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated>.lty-playbtn {
opacity: 0;
pointer-events: none
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px
}
.container {
width: 100%;
max-width: 1104px;
padding: 0 32px;
margin: 0 auto
}
@media(max-width: 768px) {
.container {
padding: 0 20px
}
}
.loading {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 1000;
pointer-events: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff
}
.loading__bar {
position: absolute;
left: 0;
top: 0;
height: 5px;
background-color: red
}
.loading__logo {
width: 120px;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s
}
.breadcrumb {
position: relative;
padding-bottom: 20px
}
@media(max-width: 768px) {
.breadcrumb {
padding-bottom: 12px
}
}
.breadcrumb::before {
content: "";
width: 480px;
height: 1px;
background-color: #fff;
position: absolute;
bottom: 0;
left: 0;
display: block
}
@media(max-width: 768px) {
.breadcrumb::before {
width: 100%
}
}
.breadcrumb span {
font-family: "MinionPro", "Noto Serif JP", sans-serif;
position: relative;
font-size: 24px;
font-weight: 500;
color: #fff;
padding-right: 48px
}
@media(max-width: 768px) {
.breadcrumb span {
font-size: 16px;
padding-right: 24px
}
}
.breadcrumb span::before {
content: "";
width: 16px;
height: 1px;
background-color: #fff;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
right: 16px;
margin: auto 0
}
@media(max-width: 768px) {
.breadcrumb span::before {
width: 10px;
right: 6px
}
}
.breadcrumb span:last-of-type {
padding-right: 0
}
.breadcrumb span:last-of-type::before {
display: none
}
.breadcrumb span.-jp {
font-family: "Noto Serif JP", serif;
font-size: 16px
}
@media(max-width: 768px) {
.breadcrumb span.-jp {
font-size: 14px
}
}
.breadcrumb a {
-webkit-transition: all .3s;
transition: all .3s
}
.breadcrumb a:hover {
opacity: .7
}
.wp-pagenavi {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 80px;
width: fit-content;
margin-inline: auto;
padding-left: 288px;
}
@media(max-width: 768px) {
.wp-pagenavi {
margin-top: 40px;
padding-left: 0;
}
}
.wp-pagenavi .pages,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
display: none
}
.wp-pagenavi .page,
.wp-pagenavi .current,
.wp-pagenavi .first,
.wp-pagenavi .last,
.wp-pagenavi .extend {
position: relative;
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 40px;
font-weight: 500;
padding: 0 6px 8px;
margin: 0 15px;
border: none;
}
.wp-pagenavi .extend {
font-size: 36px;
}
@media(max-width: 768px) {
.wp-pagenavi .page,
.wp-pagenavi .current,
.wp-pagenavi .first,
.wp-pagenavi .last,
.wp-pagenavi .extend {
font-size: 24px;
margin: 0 8px
}
.wp-pagenavi .extend {
font-size: 20px;
}
}
.wp-pagenavi .page::after,
.wp-pagenavi .current::after {
content: "";
width: 100%;
height: 3px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s
}
.wp-pagenavi span.current {
font-weight: 500
}
.wp-pagenavi span.current::after {
opacity: 1
}
.wp-pagenavi .page:hover::after {
opacity: 1
}
.hamburger-menu {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 9;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/global_bg.webp);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-transition: all .6s;
transition: all .6s;
-webkit-transform: translateX(100%);
transform: translateX(100%);
padding: 110px 0 16px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.no-webp .hamburger-menu{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/global_bg.png);
}
.hamburger-menu__list {
max-width: 270px;
width: 100%;
margin: 0 auto
}
.hamburger-menu__item:not(:first-child) {
margin-top: 38px
}
.hamburger-menu__link {
font-family: "Outfit", sans-serif;
font-size: 25px;
font-weight: 500;
letter-spacing: .016em;
color: #fff;
display: block;
position: relative;
}
.hamburger-menu__link::after{
content: "";
width: .5em;
height: .5em;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/arrow01.svg) no-repeat center/contain;
position: absolute;
right: 0;
top: calc(50% - .25em);
}
.hamburger-menu__copy {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
text-align: center;
margin-top: auto
}
.form__intro-text {
font-size: 16px;
font-weight: bold;
line-height: 2;
text-align: center
}
@media(max-width: 768px) {
.form__intro-text {
font-size: 14px
}
}
.form__main {
margin: 78px auto 0;
max-width: 520px;
width: 100%
}
@media(max-width: 768px) {
.form__main {
margin-top: 40px
}
}
.form__block+.form__block {
margin-top: 24px
}
.form__label {
display: block;
font-size: 14px;
font-weight: bold
}
.form__control {
width: 100%;
font-size: 14px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
margin-top: 14px
}
@media(max-width: 768px) {
.form__control {
font-size: 16px
}
}
.form__control input,
.form__control textarea {
height: 100%;
width: 100%;
padding: 14px 32px;
border-radius: 4px;
border: 1px solid transparent;
background-color: #fff;
-webkit-transition: all .3s;
transition: all .3s
}
.form__control input:hover,
.form__control input:focus,
.form__control textarea:hover,
.form__control textarea:focus {
border-color: red
}
@media(max-width: 768px) {
.form__control input,
.form__control textarea {
padding: 14px 20px
}
}
.form__privacy {
font-size: 16px;
font-weight: bold;
text-align: center;
margin-top: 20px;
vertical-align: middle;
line-height: 1.6;
}
.form__privacy a {
color: #004bb1
}
.form__privacy input[type="checkbox"] {
appearance: auto;
transform: scale(1.125) translateY(0.0625em);
margin-right: 0.25em;
}
.form__privacy .wpcf7-list-item {
margin-left: 0;
}
@media(min-width: 769px) {
.form__privacy br {
display: none;
}
}
.form__submit {
width: 100%;
margin-top: 20px
}
.form__submit-btn {
width: 100%;
height: 48px;
border-radius: 4px;
color: #fff;
font-size: 14px;
font-weight: 600;
background-color: #231815;
cursor: pointer;
-webkit-transition: all .3s;
transition: all .3s
}
.form__submit-btn:hover {
background-color: red
}
.form .wpcf7-not-valid-tip {
font-family: "Noto Serif JP", serif;
font-weight: 600;
margin-top: 8px
}
@media(max-width: 768px) {
.form .wpcf7-not-valid-tip {
font-size: 14px
}
}
.form .wpcf7-response-output {
font-size: 14px
}
.form .wpcf7-spinner {
display: none
}
.wpcf7 form.sent .wpcf7-response-output {
display: none
}
form.invalid .wpcf7-response-output,
.entry_content .inner form.invalid .wpcf7-response-output {
color: red;
background-color: #fdebe5;
border: 1px solid red;
margin-top: 24px
}
form.sent .wpcf7-response-output,
.entry_content .inner form.sent .wpcf7-response-output {
color: #3a87ad;
background-color: #d9edf7;
border: 1px solid #3a87ad
}
form .wpcf7-response-output,
form .wpcf7-response-output {
font-weight: 700;
border: 0;
padding: 16px;
margin: 0;
text-align: center;
line-height: 1.6;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0
}
.news-sidebar {
padding: 0 80px 0 40px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}
@media(max-width: 1000px) {
.news-sidebar {
padding: 0 40px 0 0
}
}
@media(max-width: 768px) {
.news-sidebar {
padding: 0;
margin-top: 64px
}
}
.news-sidebar__content {
position: -webkit-sticky;
position: sticky;
top: 124px
}
@media(max-width: 768px) {
.news-sidebar__content {
position: static
}
}
.news-sidebar__title {
font-size: 24px;
font-weight: bold
}
@media(max-width: 768px) {
.news-sidebar__title {
font-size: 20px
}
}
.news-sidebar__cat-list {
margin-top: 80px
}
@media(max-width: 768px) {
.news-sidebar__cat-list {
margin-top: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.news-sidebar__cat-item {
margin-top: 24px
}
@media(max-width: 768px) {
.news-sidebar__cat-item {
margin: 24px 8px 0 0
}
}
.news-sidebar__cat-link {
border: 1px solid red;
border-radius: 50px;
color: #acacac;
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 16px;
font-weight: bold;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 120px;
height: 40px;
-webkit-transition: all .3s;
transition: all .3s
}
@media(max-width: 768px) {
.news-sidebar__cat-link {
width: auto;
min-width: 88px;
height: 29px;
font-size: 14px
}
}
.news-sidebar__cat-link[href] {
cursor: pointer
}
.news-sidebar__cat-link[href]:hover {
background-color: red;
color: #fff
}
.news-sidebar__cat-link.-active {
background-color: red;
color: #fff
}
.news-card__link:hover .news-card__thumb::before {
opacity: 1
}
.news-card__link:hover .news-card__thumb img {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.news-card__thumb-wrap {
position: relative;
width: 100%;
padding-top: 62.5%;
border-radius: 8px;
overflow: hidden;
z-index: 1
}
.news-card__thumb {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.news-card__thumb::before {
content: "";
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.2);
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s
}
.news-card__thumb img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.news-card__info {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-family: "MinionPro", "Noto Serif JP", sans-serif;
margin-top: 10px
}
.news-card__time {
font-size: 14px;
font-weight: 500
}
.news-card__cat {
font-size: 12px;
color: #fff;
background-color: red;
border-radius: 30px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 80px;
padding: 4px 16px 2px
}
@media(max-width: 768px) {
.news-card__cat {
min-width: 72px
}
}
.news-card__title {
font-size: 24px;
font-weight: 600;
margin-top: 16px
}
@media(max-width: 1000px) {
.news-card__title {
font-size: 18px
}
}
@media(max-width: 768px) {
.news-card__title {
font-size: 14px
}
}
.news-card.-related .news-card__link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
@media(max-width: 768px) {
.news-card.-related .news-card__link {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.news-card.-related .news-card__thumb-wrap {
width: 336px;
padding-top: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}
@media(max-width: 768px) {
.news-card.-related .news-card__thumb-wrap {
width: 100%
}
}
.news-card.-related .news-card__thumb {
position: static;
width: 100%;
padding-top: 65.5%
}
.news-card.-related .news-card__thumb img {
position: absolute;
left: 0;
top: 0
}
.news-card.-related .news-card__content {
padding-left: 56px
}
@media(max-width: 768px) {
.news-card.-related .news-card__content {
padding-left: 0
}
}
.news-card.-related .news-card__time {
font-size: 16px;
font-weight: bold
}
@media(max-width: 768px) {
.news-card.-related .news-card__time {
font-size: 14px
}
}
.news-card.-related .news-card__title {
margin-top: 32px
}
@media(max-width: 768px) {
.news-card.-related .news-card__title {
font-size: 14px;
margin-top: 16px
}
}
.contact-banner {
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/contact-banner-bg.webp);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
color: #fff
}
@media(max-width: 768px) {
.contact-banner {
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/contact-banner-bg-sp.webp)
}
}
@media(max-width: 768px) {
.contact-banner__container {
padding-left: 40px;
padding-right: 40px
}
}
.contact-banner__link {
position: relative;
display: block;
height: 100%;
width: 100%;
padding: 172px 0
}
@media(max-width: 768px) {
.contact-banner__link {
padding: 64px 0 52px
}
}
.contact-banner__link::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all .6s;
transition: all .6s
}
.contact-banner__link:hover::before {
opacity: 1
}
.contact-banner__link:hover .contact-banner__btn::before {
-webkit-transform: scale(0.9);
transform: scale(0.9)
}
.contact-banner__container {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
max-width: 1184px
}
@media(max-width: 768px) {
.contact-banner__container {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.contact-banner__text-col {
padding-left: 80px
}
@media(max-width: 1000px) {
.contact-banner__text-col {
padding-left: 0;
padding-right: 24px
}
}
@media(max-width: 768px) {
.contact-banner__text-col {
padding-right: 0
}
}
.contact-banner__title {
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 80px;
font-weight: 500;
line-height: 1
}
@media(max-width: 768px) {
.contact-banner__title {
font-size: 40px;
text-align: center
}
}
.contact-banner__sub-title {
font-size: 24px;
font-weight: 600;
margin-top: 24px
}
@media(max-width: 768px) {
.contact-banner__sub-title {
font-size: 16px;
text-align: center
}
}
.contact-banner__text {
font-size: 16px;
font-weight: 600;
margin-top: 16px;
line-height: 1.875
}
@media(max-width: 768px) {
.contact-banner__text {
font-size: 14px;
line-height: 2.2;
text-align: center
}
}
.contact-banner__btn {
position: relative;
width: 320px;
height: 320px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}
@media(max-width: 1000px) {
.contact-banner__btn {
width: 240px;
height: 240px
}
}
@media(max-width: 768px) {
.contact-banner__btn {
width: 82px;
height: 82px;
margin: 24px auto 0
}
}
.contact-banner__btn::before,
.contact-banner__btn::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto
}
.contact-banner__btn::before {
width: 100%;
height: 100%;
border: 1px solid #fff;
border-radius: 50%;
-webkit-transition: all .6s;
transition: all .6s
}
.contact-banner__btn::after {
width: 32px;
height: 22px;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/icon-arrow-right-white.svg);
background-size: contain;
background-repeat: no-repeat
}
@media(max-width: 768px) {
.contact-banner__btn::after {
width: 9px;
height: 6px
}
}
.header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: #1a1a1a;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 10;
-webkit-transition: all .6s;
transition: all .6s
}
.header__logo {
position: relative;
width: 108px;
height: 75px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition: all .3s;
transition: all .3s;
margin-left: 4.5%;
}
.header__logo img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
-webkit-transition: all .3s;
transition: all .3s
}
.header__logo img.-black {
opacity: 1
}
.header__logo img.-white {
opacity: 0
}
@media(max-width: 768px) {
.header{
padding: 8px 3.5% 6px;
}
.header__logo {
width: 46px;
height: 32px;
margin-left: 0;
}
}
.header__logo[href]:hover {
opacity: .7
}
@media(max-width: 768px) {
.header__nav {
display: none
}
}
.header__nav{
-webkit-box-flex:1;
flex-grow:1;
}
.header__nav-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
justify-content: flex-end;
}
.header__nav-item.hd_nav_contact{
margin-left: 3.5em;
background-color: #e00000;
}
.header__nav-link {
position: relative;
font-family: "Outfit", sans-serif;
font-size: 16px;
font-weight: 500;
color: #fff;
display: inline-block;
padding: 2em 1.5em;
}
.header__nav-item.hd_nav_contact .header__nav-link{
padding: 2em 4.5em;
}
.header__nav-link span {
position: relative;
-webkit-transition: all .3s;
transition: all .3s
}
.header__nav-link:hover {
color: red
}
.header__hamburger-btn {
display: none;
position: relative;
width: 32px;
height: 32px
}
@media(max-width: 768px) {
.header__hamburger-btn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
}
.header__hamburger-btn span,
.header__hamburger-btn::before,
.header__hamburger-btn::after {
height: 2px;
width: 100%;
background-color: #fff;
border-radius: 10px;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transition: all .3s;
transition: all .3s
}
.header__hamburger-btn::before,
.header__hamburger-btn::after {
content: ""
}
.header__hamburger-btn::before {
-webkit-transform: translateY(-6px);
transform: translateY(-6px)
}
.header__hamburger-btn::after {
-webkit-transform: translateY(6px);
transform: translateY(6px)
}
.footer {
font-weight: 500;
background-color: #000;
padding: 110px 0;
}
@media(max-width: 768px) {
.footer {
padding: 66px 0 8px
}
}
.footer__container {
max-width: 1184px
}
.footer__top {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
@media(max-width: 768px) {
.footer__top {
display: block;
}
}
.footer__group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media(max-width: 768px) {
}
.footer__logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 170px;
-webkit-transition: all .3s;
transition: all .3s
}
@media(max-width: 768px) {
.footer__logo {
width: 136px;
margin: auto;
}
}
.footer__logo[href]:hover {
opacity: .7
}
.footer__nav {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
padding-top: 16px
}
@media(max-width: 768px) {
.footer__nav {
padding-top: 0
}
}
.footer__nav-list {
font-family: "Noto Sans JP", sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.footer__nav-list02{
-webkit-box-pack: end;
justify-content: flex-end;
margin-top: 30px;
}
@media(max-width: 768px) {
.footer__nav-list {
padding-top: 50px;
display: block;
}
.footer__nav-list02{
padding-top: 0;
margin-top: 40px;
}
}
.footer__nav-item {
margin-left: 40px
}
@media(max-width: 768px) {
.footer__nav-item {
margin: 20px 10px;
text-align: center;
}
}
.footer__nav-link {
position: relative;
display: block;
color: #fff;
font-size: 16px
}
.footer__nav-list02 .footer__nav-link{
font-size: 14px;
text-decoration: underline;
}
.footer__nav-list02 .footer__nav-link:hover{
text-decoration: none;
}
@media(max-width: 768px) {
.footer__nav-link {
font-size: 14px
}
}
.footer__nav-link::before {
content: "";
width: 16px;
height: 16px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all .3s;
transition: all .3s
}
.footer__nav-link:hover::before {
-webkit-transform: scale(1);
transform: scale(1)
}
.footer__nav-link span {
position: relative
}
.footer__sns {
margin-top: 24px
}
@media(max-width: 768px) {
.footer__sns {
margin-top: 32px
}
}
.footer__sns-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
@media(max-width: 768px) {
.footer__sns-list {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
}
.footer__sns-item {
width: 40px;
margin-right: 20px
}
.footer__sns-item:last-child {
margin-right: 0
}
@media(max-width: 768px) {
.footer__sns-item:last-child {
margin-right: 8px
}
}
@media(max-width: 768px) {
.footer__sns-item {
width: 32px;
margin: 0 8px
}
}
.footer__sns-link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition: all .3s;
transition: all .3s
}
.footer__sns-link:hover {
opacity: .7
}
.footer__copy {
font-family: "Outfit", sans-serif;
font-size: 12px;
color: #808080;
text-align: right;
margin-top: auto;
}
@media(max-width: 768px) {
.footer__copy {
text-align: center;
font-size: 13px;
margin-top: 50px
}
}
.front-page .section-title {
position: relative;
padding-top: 60px;
padding-left: 80px
}
@media(max-width: 768px) {
.front-page .section-title {
padding-top: 36px;
padding-left: 20px
}
}
.front-page .section-title__dot {
position: absolute;
left: 8px;
top: 52px;
width: 72px;
height: 72px
}
@media(max-width: 768px) {
.front-page .section-title__dot {
width: 30px;
height: 30px;
left: -10px;
top: 38px
}
}
.front-page .section-title__dot span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: red;
-webkit-animation: pulse-dot 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
animation: pulse-dot 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
-webkit-transform-origin: center center;
transform-origin: center center
}
@media(max-width: 768px) {
.front-page .section-title__dot span {
width: 10px;
height: 10px
}
}
.front-page .section-title__dot::before,
.front-page .section-title__dot::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
background-color: red
}
.front-page .section-title__dot::before {
-webkit-transition: all .5s;
transition: all .5s;
-webkit-animation: pulse-ring 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
animation: pulse-ring 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
-webkit-transform-origin: center center;
transform-origin: center center;
width: 44px;
height: 44px;
opacity: .1
}
@media(max-width: 768px) {
.front-page .section-title__dot::before {
width: 18px;
height: 18px
}
}
.front-page .section-title__dot::after {
-webkit-transition: all .5s;
transition: all .5s;
-webkit-animation: pulse-ring 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite .5s;
animation: pulse-ring 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite .5s;
-webkit-transform-origin: center center;
transform-origin: center center;
width: 72px;
height: 72px;
opacity: .05
}
@media(max-width: 768px) {
.front-page .section-title__dot::after {
width: 30px;
height: 30px
}
}
.front-page .section-title__bg {
position: absolute;
left: 80px;
top: 0;
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 140px;
font-weight: 500;
color: #fff;
line-height: 1
}
@media(max-width: 768px) {
.front-page .section-title__bg {
left: 20px;
font-size: 88px
}
}
.front-page .section-title__en {
position: relative;
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 56px;
font-weight: 500;
line-height: 1;
color: #000;
display: block
}
@media(max-width: 768px) {
.front-page .section-title__en {
font-size: 40px
}
}
.front-page .section-title__jp {
font-size: 16px;
font-weight: 600;
display: block;
margin-top: 8px
}
@media(max-width: 768px) {
.front-page .section-title__jp {
font-size: 12px;
margin-top: 0
}
}
@-webkit-keyframes pulse-dot {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8)
}
50% {
-webkit-transform: scale(1);
transform: scale(1)
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8)
}
}
@keyframes pulse-dot {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8)
}
50% {
-webkit-transform: scale(1);
transform: scale(1)
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8)
}
}
@-webkit-keyframes pulse-ring {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: .3
}
100% {
opacity: 0
}
}
@keyframes pulse-ring {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: .3
}
100% {
opacity: 0
}
}
@media(max-width: 768px) {
.front-page .mv__scroll::after {
height: 64px
}
}
@-webkit-keyframes scroll-bar {
0% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0
}
35% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0
}
35.1% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%
}
70%,
100% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%
}
}
@keyframes scroll-bar {
0% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0
}
35% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0
}
35.1% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%
}
70%,
100% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%
}
}
@-webkit-keyframes up-down {
0% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px)
}
50% {
-webkit-transform: translateY(12px);
transform: translateY(12px)
}
100% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px)
}
}
@keyframes up-down {
0% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px)
}
50% {
-webkit-transform: translateY(12px);
transform: translateY(12px)
}
100% {
-webkit-transform: translateY(-12px);
transform: translateY(-12px)
}
}
.page-sub .mv {
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/bg-mv.webp);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 234px 0 200px
}
@media(max-width: 768px) {
.page-sub .mv {
padding: 160px 0 120px
}
}
.page-sub .mv__title {
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 80px;
color: #fff;
line-height: 1
}
@media(max-width: 768px) {
.page-sub .mv__title {
font-size: 48px
}
}
.page-sub .mv__breadcrumb {
margin-top: 40px
}
.page-contact__main {
padding: 0 0 160px
}
@media(max-width: 768px) {
.page-contact__main {
padding-bottom: 80px
}
}
.page-contact .contact-form__content {
background-color: #f5f0f0;
padding: 72px 32px 160px;
border-radius: 8px;
margin-top: -112px
}
@media(max-width: 768px) {
.page-contact .contact-form__content {
padding: 48px 20px;
margin-top: -56px
}
}
.page-thanks .thanks {
position: relative;
min-height: 100vh;
padding: 200px 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden
}
@media(max-width: 768px) {
.page-thanks .thanks {
padding: 100px 0
}
}
.page-thanks .thanks__bg-text {
position: absolute;
bottom: -6vw;
left: -6vw;
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 20vw;
white-space: nowrap;
color: #fff;
line-height: 1
}
@media(max-width: 768px) {
.page-thanks .thanks__bg-text {
font-size: 18vw;
left: -3vw;
bottom: -5vw
}
}
.page-thanks .thanks__content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.page-thanks .thanks__title {
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 89px;
text-align: center
}
@media(max-width: 768px) {
.page-thanks .thanks__title {
font-size: 13.8vw
}
}
.page-thanks .thanks__text {
font-size: 14px;
font-weight: 500;
text-align: center;
line-height: 2;
margin-top: 24px
}
@media(max-width: 768px) {
.page-thanks .thanks__text {
line-height: 2.5
}
}
.page-thanks .thanks__text a {
display: inline-block;
font-size: 24px;
font-weight: 500;
-webkit-transition: all .3s;
transition: all .3s;
margin-top: .75em
}
@media(max-width: 768px) {
.page-thanks .thanks__text a {
font-size: 20px;
margin-bottom: .75em;
line-height: 2
}
}
.page-thanks .thanks__text a:hover {
color: red
}
.page-thanks .thanks__btn { width: 320px;
height: 48px;
padding-bottom: 2px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
font-size: 16px;
background-color: #000;
border-radius: 50px; -webkit-transition: all .3s;
transition: all .3s
} .page-thanks .thanks__btn:hover {
background-color: red
}
.page-thanks .thanks__btns {
display: flex;
flex-direction: column;
margin: 24px auto 0;
gap: 24px;
}
.page-not-found .not-found {
position: relative;
min-height: 100vh;
padding: 200px 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden
}
@media(max-width: 768px) {
.page-not-found .not-found {
padding: 100px 0
}
}
.page-not-found .not-found__bg-text {
position: absolute;
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 12vw;
white-space: nowrap;
color: #fff;
line-height: 1;
bottom: -3.3vw;
left: -1vw
}
@media(max-width: 768px) {
.page-not-found .not-found__bg-text {
font-size: 12vw;
left: 0vw;
bottom: -3vw
}
}
.page-not-found .not-found__content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.page-not-found .not-found__title {
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-size: 89px;
text-align: center
}
@media(max-width: 768px) {
.page-not-found .not-found__title {
font-size: 13.8vw
}
}
.page-not-found .not-found__text {
font-size: 14px;
font-weight: 500;
text-align: center;
line-height: 2;
margin-top: 24px
}
@media(max-width: 768px) {
.page-not-found .not-found__text {
line-height: 2.5
}
}
.page-not-found .not-found__text a {
display: inline-block;
font-size: 24px;
font-weight: 500;
-webkit-transition: all .3s;
transition: all .3s;
margin-top: .75em
}
@media(max-width: 768px) {
.page-not-found .not-found__text a {
font-size: 20px;
margin-bottom: .75em;
line-height: 2
}
}
.page-not-found .not-found__text a:hover {
color: red
}
.page-not-found .not-found__btn {
width: 200px;
height: 40px;
padding-bottom: 2px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
font-size: 16px;
background-color: #000;
border-radius: 50px;
margin: 16px auto 0;
-webkit-transition: all .3s;
transition: all .3s
}
@media(max-width: 768px) {
.page-not-found .not-found__btn {
margin-top: 24px
}
}
.page-not-found .not-found__btn:hover {
background-color: red
}
.page-privacy__body-container {
max-width: 900px
}
.page-privacy .privacy {
padding: 120px 0 156px
}
@media(max-width: 768px) {
.page-privacy .privacy {
padding: 80px 0
}
}
.page-privacy .privacy__head-title {
position: relative;
font-size: 28px;
font-weight: bold;
padding-left: 8px;
border-left: 8px solid red;
color: #00001f
}
@media(max-width: 768px) {
.page-privacy .privacy__head-title {
font-size: 22px
}
}
.page-privacy .privacy__head-text {
font-size: 16px;
line-height: 2;
margin-bottom: 24px
}
.page-privacy .privacy__content h3 {
position: relative;
color: #00001f;
font-size: 24px;
font-weight: 600;
padding-left: 64px;
margin-top: 56px;
margin-bottom: 24px
}
@media(max-width: 768px) {
.page-privacy .privacy__content h3 {
font-size: 18px;
padding-left: 48px;
margin-top: 40px
}
}
.page-privacy .privacy__content h3::before {
content: "";
width: 48px;
height: 1px;
background-color: #707070;
display: block;
position: absolute;
left: 0;
top: 18px
}
@media(max-width: 768px) {
.page-privacy .privacy__content h3::before {
width: 32px;
top: 15px
}
}
.page-privacy .privacy__content p {
font-size: 14px;
font-weight: 500;
line-height: 2;
padding-bottom: 24px
}
.page-privacy .privacy__content p:last-child {
padding-bottom: 0
}
.page-privacy .privacy__content p a {
color: red;
text-decoration: underline;
-webkit-transition: all .3s;
transition: all .3s
}
.page-privacy .privacy__content p a:hover {
opacity: .7
}
.page-privacy .privacy__content ul li {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 14px;
font-weight: 500;
line-height: 2;
padding-bottom: 16px
}
.page-privacy .privacy__content ul li::before {
content: "・"
}
.page-privacy .privacy__content dl {
font-size: 14px;
font-weight: 500;
line-height: 2
}
.page-privacy .privacy__content dl div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.page-privacy .privacy__content dl div dt {
padding-right: 16px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}
@media(max-width: 768px) {
.page-privacy .privacy__content dl div dt {
padding-right: 8px
}
}
.page-privacy .privacy__content dl div a {
color: red;
text-decoration: underline;
-webkit-transition: all .3s;
transition: all .3s
}
.page-privacy .privacy__content dl div a:hover {
opacity: .7
}
.page-privacy .privacy__bottom {
text-align: right;
margin-top: 32px
}
.page-privacy .privacy__details {
margin-top: 80px
}
.archive-news {
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/bg-texture-dark.webp);
background-size: contain;
background-repeat: repeat-y
}
.archive-news__body {
padding: 120px 0 156px
}
@media(max-width: 768px) {
.archive-news__body {
padding: 80px 0
}
}
.archive-news__body-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-width: 1344px
}
@media(max-width: 768px) {
.archive-news__body-container {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
}
.archive-news__main {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
.archive-news__list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: 32px
}
@media(max-width: 768px) {
.archive-news__list {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: 0
}
}
.archive-news__item {
width: calc(50% - 32px);
margin-right: 32px;
margin-top: 64px
}
@media(max-width: 768px) {
.archive-news__item {
width: 100%;
margin-right: 0;
margin-top: 40px
}
}
.archive-news__item:first-child {
margin-top: 0
}
.archive-news__item:nth-child(2) {
margin-top: 0
}
@media(max-width: 768px) {
.archive-news__item:nth-child(2) {
margin-top: 40px
}
}
.archive-news__pagination {
margin-left: -288px
}
@media(max-width: 1000px) {
.archive-news__pagination {
margin-left: -208px
}
}
@media(max-width: 768px) {
.archive-news__pagination {
margin-left: 0
}
}
.single .mv {
padding: 216px 0 254px
}
@media(max-width: 768px) {
.single .mv {
padding: 160px 0 120px
}
}
.single .mv__title {
font-size: 32px;
font-weight: 600;
margin-top: 40px;
line-height: 1.5
}
@media(max-width: 768px) {
.single .mv__title {
font-size: 24px
}
}
.single .mv__breadcrumb {
margin-top: 0
}
.single .single-content {
padding: 0 0 200px;
margin-top: -220px
}
@media(max-width: 768px) {
.single .single-content {
padding-bottom: 80px;
margin-top: -80px
}
}
.single .single-content__container {
max-width: 1104px
}
.single .single-content__thumb {
width: 100%;
border-radius: 8px;
overflow: hidden
}
.single .single-content__head-info {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid #333;
padding-bottom: 8px;
margin-top: 24px
}
.single .single-content__time {
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-weight: bold;
font-size: 16px
}
@media(max-width: 768px) {
.single .single-content__time {
font-size: 14px
}
}
.single .single-content__cat {
background-color: red;
border-radius: 30px;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 7px 28px 9px
}
@media(max-width: 768px) {
.single .single-content__cat {
font-size: 14px;
padding: 3px 14px
}
}
.single .single-content__body {
padding: 120px 0
}
@media(max-width: 768px) {
.single .single-content__body {
padding: 56px 0 80px 0
}
}
.single .single-content__body h2 {
position: relative;
font-size: 28px;
font-weight: bold;
padding-left: 8px;
border-left: 8px solid red;
color: #00001f
}
@media(max-width: 768px) {
.single .single-content__body h2 {
font-size: 22px
}
}
.single .single-content__body h3 {
position: relative;
color: #00001f;
font-size: 24px;
font-weight: 600;
padding-left: 64px
}
@media(max-width: 768px) {
.single .single-content__body h3 {
font-size: 18px;
padding-left: 48px
}
}
.single .single-content__body h3::before {
content: "";
width: 48px;
height: 1px;
background-color: #707070;
display: block;
position: absolute;
left: 0;
top: 18px
}
@media(max-width: 768px) {
.single .single-content__body h3::before {
width: 32px;
top: 15px
}
}
.single .single-content__body p {
font-size: 14px;
font-weight: 500;
line-height: 2
}
.single .single-content__body strong {
font-weight: bold
}
.single .single-content__body figure {
width: 100%
}
.single .single-content__body img {
border-radius: 8px
}
.single .single-content__body blockquote {
position: relative;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
background-color: #f5f0f0;
border-radius: 8px;
padding: 72px 60px
}
@media(max-width: 768px) {
.single .single-content__body blockquote {
padding: 32px 24px
}
}
.single .single-content__body blockquote::before {
content: "“";
font-family: "Noto Sans JP", sans-serif;
font-size: 200px;
font-weight: 500;
color: #acacac;
position: absolute;
left: 0;
top: -60px;
line-height: 1
}
@media(max-width: 768px) {
.single .single-content__body blockquote::before {
font-size: 120px;
top: -40px
}
}
.single .single-content__body>*:first-child {
margin-top: 0
}
.single .single-content__body h2 {
margin-top: 120px
}
@media(max-width: 768px) {
.single .single-content__body h2 {
margin-top: 64px
}
}
.single .single-content__body h3 {
margin-top: 56px
}
@media(max-width: 768px) {
.single .single-content__body h3 {
margin-top: 40px
}
}
.single .single-content__body p {
margin-top: 24px
}
@media(max-width: 768px) {
.single .single-content__body p {
margin-top: 16px
}
}
.single .single-content__body figure {
margin: 80px 0
}
@media(max-width: 768px) {
.single .single-content__body figure {
margin: 56px 0
}
}
.single .single-content__body blockquote {
margin: 110px 0 64px
}
@media(max-width: 768px) {
.single .single-content__body blockquote {
margin: 80px 0 48px
}
}
.single .single-content__body blockquote>*:first-child {
margin-top: 0
}
.single .single-content__sns-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.single .single-content__sns-item {
margin: 0 40px
}
@media(max-width: 768px) {
.single .single-content__sns-item {
margin: 0 20px
}
}
.single .single-content__sns-link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.single .single-content__sns-link:hover .single-content__sns-icon.-tw img {
-webkit-box-shadow: 0 3px 12px rgba(91, 156, 237, 0.8);
box-shadow: 0 3px 12px rgba(91, 156, 237, 0.8)
}
.single .single-content__sns-link:hover .single-content__sns-icon.-fb img {
-webkit-box-shadow: 0 3px 12px rgba(71, 118, 238, 0.8);
box-shadow: 0 3px 12px rgba(71, 118, 238, 0.8)
}
.single .single-content__sns-link:hover .single-content__sns-icon.-line img {
-webkit-box-shadow: 0 3px 12px rgba(87, 189, 55, 0.8);
box-shadow: 0 3px 12px rgba(87, 189, 55, 0.8)
}
.single .single-content__sns-link:hover .single-content__sns-text.-tw {
color: #5b9ced
}
.single .single-content__sns-link:hover .single-content__sns-text.-fb {
color: #4776ee
}
.single .single-content__sns-link:hover .single-content__sns-text.-line {
color: #57bd37
}
.single .single-content__sns-icon {
display: block;
width: 72px;
height: 72px;
border-radius: 50%
}
@media(max-width: 768px) {
.single .single-content__sns-icon {
width: 56px;
height: 56px
}
}
.single .single-content__sns-icon img {
border-radius: 50%;
-webkit-transition: all .3s;
transition: all .3s
}
.single .single-content__sns-text {
font-family: "Noto Sans JP", sans-serif;
font-size: 11px;
font-weight: bold;
margin-top: 12px;
-webkit-transition: all .3s;
transition: all .3s
}
@media(max-width: 768px) {
.single .single-content__sns-text {
text-align: center
}
}
.single .single-content__sns-text.-tw span {
color: #5b9ced
}
.single .single-content__sns-text.-fb span {
color: #4776ee
}
.single .single-content__sns-text.-line span {
color: #57bd37
}
.single .single-content__related {
margin-top: 120px
}
.single .single-content__related-title {
font-family: "Noto Sans JP", sans-serif;
position: relative;
font-size: 28px;
font-weight: bold;
padding-left: 8px;
border-left: 9px solid red
}
@media(max-width: 768px) {
.single .single-content__related-title {
font-size: 20px;
border-left: 8px solid red
}
}
.single .single-content__related-item {
margin-top: 80px
}
@media(max-width: 768px) {
.single .single-content__related-item {
margin-top: 40px
}
}
.sp {
display: none
}
@media(max-width: 768px) {
.sp {
display: block
}
}
@media(max-width: 768px) {
.pc {
display: none
}
}
.is-loading {
pointer-events: none
}
.is-loading .loading__logo {
opacity: 1
}
.is-loading-done {
pointer-events: auto
}
.is-page-thanks .header,
.is-page-not-found .header {
background-color: transparent
}
.is-page-thanks .header__nav-link,
.is-page-not-found .header__nav-link {
color: #231815
}
.is-page-thanks .header__nav-link:hover,
.is-page-not-found .header__nav-link:hover {
color: red
}
.is-page-thanks .header__hamburger-btn span,
.is-page-thanks .header__hamburger-btn::before,
.is-page-thanks .header__hamburger-btn::after,
.is-page-not-found .header__hamburger-btn span,
.is-page-not-found .header__hamburger-btn::before,
.is-page-not-found .header__hamburger-btn::after {
background-color: #333
}
.is-hamburger-menu-open {
overflow: hidden
}
.is-hamburger-menu-open .hamburger-menu {
-webkit-transform: translateX(0);
transform: translateX(0)
}
.is-hamburger-menu-open .header__hamburger-btn::before {
-webkit-transform: translateY(0) rotate(25deg);
transform: translateY(0) rotate(25deg)
}
.is-hamburger-menu-open .header__hamburger-btn::after {
-webkit-transform: translateY(0) rotate(-25deg);
transform: translateY(0) rotate(-25deg)
}
.is-modal-open {
overflow: hidden
}
.inview {
-webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.inview.inview-is-visible {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}  .outfit{
font-family: "Outfit", sans-serif;
}
.capitalize{
text-transform: capitalize;
}
span.dib{
display: inline-block;
}
.inner{
margin: auto;
}
.inner.primary{
max-width: 1200px;
width: 92%;
}
.title_primary{
color: #fff;
line-height: 1.2;
}
.title_primary.black{
color: #1a1a1a;
}
.title_primary .main{
display: block;
font-family: "Outfit", sans-serif;
font-size: 78px;
text-transform: capitalize;
}
.title_primary .sub{
font-size: 18px;
}
.btn_primary{
display: block;
font-size: 18px;
color: #fff;
text-align: center;
width: 90%;
max-width: 290px;
padding: 1.1em 0;
background-color: #1a1a1a;
position: relative;
}
.btn_primary::before{
content: "";
display: block;
width: 0;
height: 100%;
background-color: #e00000;
position: absolute;
left: 0;
top: 0;
z-index: 1;
transition: .4s;
}
.btn_primary:hover::before{
width: 100%;
}
.btn_primary::after{
content: "";
display: block;
width: .6em;
height: .6em;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/arrow01.svg) no-repeat center/contain;
position: absolute;
right: 1.33em;
z-index: 2;
top: calc(50% - .3em);
}
.btn_primary.blank::after{
width: .5em;
height: .5em;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/arrow02.svg);
}
.btn_primary span{
position: relative;
z-index: 2;
}
.front-page{
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.title_primary .main{
font-size: 41px;
}
.title_primary .sub{
font-size: 12px;
}
.btn_primary{
font-size: 14px;
width: 90%;
max-width: 221px;
margin: auto;
background-color: #1a1a1a;
position: relative;
}
} @media screen and (max-width: 768px) {
} #about{
color: #fff;
padding: 160px 0 200px;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/about_bg.webp) no-repeat center/cover;
margin-top: -2px;
position: relative;
z-index: 1;
}
.no-webp #about{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/about_bg.png);
}
#about .title_wrapper{
display: -webkit-box;
display: flex;
margin-bottom: 13%;
}
#about .title_primary{
flex-shrink: 0;
margin: 0 9.5%;
}
#about .guidance_wrapper{
padding-top: 6.5em;
}
#about .guidance{
font-size: 19px;
line-height: 2.21;
margin-top: 1.5em;
}
#about .link_list{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
}
#about .link_list li{
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
width: 100%;
padding: 3.3% 3.3% 3.3% 4.2%;
margin-bottom: 20px;
background-color: rgba(0, 0, 0, .1);
}
#about .link_list li.half{
width: 49%;
}
#about .link_list li .img{
display: block;
width: 26%;
}
#about .link_list li a.img{
transition: .4s;
}
#about .link_list li a.img:hover{
opacity: .7;
}
#about .link_list li .text_wrapper{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
width: 67.4%;
padding-top: 10px;
}
#about .link_list li h3{
font-size: 32px;
font-weight: 700;
padding-left: 1.34em;
margin-bottom: 1em;
position: relative;
}
#about .link_list li h3::before{
content: "";
display: block;
width: .9em;
height: .45em;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/deco01.svg) no-repeat center/contain;
position: absolute;
left: 0;
top: .6em;
}
#about .link_list li p{
font-size: 16px;
line-height: 1.75;
margin-bottom: 8px;
}
#about .link_list li .btn_primary{
margin: auto 0 0 auto;
}
@media screen and (max-width: 768px) {
#about{
padding: 55px 0 50px;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/about_bg_sp.webp);
}
.no-webp #about{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/about_bg_sp.png);
}
#about .title_wrapper{
display: block;
margin-bottom: 30px;
}
#about .title_primary{
margin: auto auto 34px;
}
#about .guidance_wrapper{
padding-top: 0;
}
#about .guidance{
font-size: 14px;
line-height: 1.75;
margin-top: 0;
}
#about .link_list{
display: block;
}
#about .link_list li{
display: block;
padding: 7.4%;
margin-bottom: 20px;
background-color: rgba(0, 0, 0, .1);
}
#about .link_list li.half{
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
width: 100%;
padding: 5.5%;
}
#about .link_list li .img{
width: 100%;
}
#about .link_list li.half .img{
width: 30%;
}
#about .link_list li .text_wrapper{
display: block;
width: 100%;
padding-top: 18px;
}
#about .link_list li.half .text_wrapper{
width: 65%;
padding-top: 0;
}
#about .link_list li h3{
font-size: 21px;
font-weight: 700;
padding-left: 1.45em;
margin-bottom: .5em;
position: relative;
}
#about .link_list li.half h3{
margin-bottom: .33em;
}
#about .link_list li h3::before{
content: "";
display: block;
left: .15em;
}
#about .link_list li p{
font-size: 13px;
margin-bottom: 8px;
}
#about .link_list li .btn_primary{
margin: 20px auto auto;
}
} #news{
padding: 130px 0 110px;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/news_bg.webp) no-repeat center/cover;
}
.no-webp #news{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/news_bg.png);
}
#news .title_primary{
margin-bottom: 64px;
}
#news .news_list{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
}
#news .news_list li{
width: 31.2%;
margin-right: 3.2%;
margin-bottom: 30px;
}
#news .news_list li:nth-of-type(3n){
margin-right: 0;
}
#news .news_list li a{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
height: 100%;
position: relative;
}
#news .news_list li a::after{
content: "";
display: block;
width: 18px;
height: 18px;
-webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
clip-path: polygon(0 100%, 100% 0, 100% 100%);
background-color: #1a1a1a;
transition: .4s;
position: absolute;
right: 0;
bottom: 0;
}
#news .news_list li a:hover::after{
background-color: #e00000;
}
#news .news_list li .img{
flex-shrink: 0;
position: relative;
overflow: hidden;
}
#news .news_list li .img::before{
content: "";
display: block;
padding-top: 65.2%;
}
#news .news_list li .img img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: .4s;
}
#news .news_list li a:hover .img img{
transform: scale(1.1);
}
#news .news_list .text_wrapper{
padding: 22px 20px;
height: 100%;
background-color: #fff;
transition: .4s;
}
#news .news_list a:hover .text_wrapper{
background-color: #efefef;
}
#news .date_cat{
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
margin-bottom: 10px;
}
#news .date_cat .cat{
font-family: "Outfit", sans-serif;
font-size: 16px;
color: #fff;
text-transform: capitalize;
padding: .25em 1em;
background-color: #1a1a1a;
}
#news .date_cat .date{
font-family: "Outfit", sans-serif;
font-size: 14px;
color: #8d8d8d;
}
#news .news_list h3{
font-size: 16px;
line-height: 1.75;
font-feature-settings: "palt";
letter-spacing: .07em;
transition: .4s;
}
#news .news_list a:hover h3{
color: #e00000;
}
#news .btn_primary{
margin: 30px auto auto;
}
@media screen and (max-width: 768px) {
#news{
padding: 45px 0 50px;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/news_bg_sp.webp);
}
.no-webp #news{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/news_bg_sp.png);
}
#news .title_primary{
margin-bottom: 24px;
}
#news .news_list{
display: block;
}
#news .news_list li{
width: 100%;
margin-right: 0;
margin-bottom: 45px;
}
#news .news_list li:nth-last-of-type(-n+3){
display: none;
}
#news .news_list .text_wrapper{
padding: 18px 22px 24px;
height: 100%;
background-color: #fff;
transition: .4s;
}
#news .date_cat .cat{
font-size: 13px;
padding: .15em 1.5em;
}
#news .date_cat .date{
font-size: 14px;
}
#news .news_list h3{
font-size: 13px;
line-height: 1.75;
font-feature-settings: "palt";
letter-spacing: .07em;
transition: .4s;
}
} #contact_banner{
font-family: "Noto Sans JP", sans-serif;
color: #fff;
padding: 130px 0 140px;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/contact_bg.webp) no-repeat bottom/cover;
}
.no-webp #contact_banner{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/contact_bg.jpg);
}
#contact_banner .inner{
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
align-items: flex-end;
}
#contact_banner .text_wrapper{
padding-right: 20px;
}
#contact_banner .title_primary{
line-height: 1.25;
margin-bottom: 50px;
}
#contact_banner .title_primary .main{
font-size: 82px;
}
#contact_banner h3{
font-size: 24px;
line-height: 1.75;
margin-bottom: .5em;
}
#contact_banner .text01{
font-size: 16px;
line-height: 1.75;
letter-spacing: .02em;
}
#contact_banner .btn_primary{
flex-shrink: 0;
font-size: 16px;
max-width: 346px;
padding: 2.25em 0;
}
#contact_banner .btn_primary::after{
width: .85em;
height: .85em;
right: 2.75em;
top: calc(50% - .425em);
}
@media screen and (max-width: 768px) {
#contact_banner{
padding: 55px 0 65px;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/contact_bg_sp.webp);
}
.no-webp #contact_banner{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/contact_bg_sp.jpg);
}
#contact_banner .inner{
display: block;
}
#contact_banner .text_wrapper{
padding-right: 0;
}
#contact_banner .title_primary{
line-height: 1.25;
margin-bottom: 40px;
}
#contact_banner .title_primary .main{
font-size: 41px;
}
#contact_banner h3{
font-size: 16px;
margin-bottom: 1em;
}
#contact_banner .text01{
font-size: 13px;
letter-spacing: 0;
}
#contact_banner .btn_primary{
font-size: 12px;
width: 100%;
max-width: 400px;
padding: 1.5em 0;
margin: 45px auto auto;
}
#contact_banner .btn_primary::after{
width: .6em;
height: .6em;
right: 1.33em;
top: calc(50% - .3em);
}
} #about .link_list li .btn_primary.mt {
margin-top: 40px;
}
@media screen and (max-width: 767px) {
#about .link_list li .btn_primary.mt {
margin-top: calc(40 / 750 * 100vw);
}
}
#about .link_list li.half a.img {
width: 100%;
}
.fixed-banner {
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
gap: calc(21 / 140 * 100vw);
width: 100%;
height: calc(112 / 1440 * 100vw);
background: linear-gradient(90deg, rgba(104,7,0,1) 0%, rgba(199,0,0,1) 22%, rgba(222,29,23,1) 49%, rgba(104,7,0,1) 100%);
z-index: 10;
opacity: 0;
visibility: hidden;
transition: all .4s;
}
.fixed-banner.show {
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 767px) {
.fixed-banner {
flex-direction: column;
gap: calc(14 / 750 * 100vw);
height: calc(218 / 750 * 100vw);
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner {
gap: 21px;
height: 112px;
}
}
.fixed-banner .banner-lead-container {
width: calc(308 / 1440 * 100vw);
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-lead-container {
display: flex;
justify-content: center;
align-items: center;
gap: calc(8 / 750 * 100vw);
width: 100%;
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-lead-container {
width: 308px;
}
}
.fixed-banner .banner-lead-container .banner-lead1 {
margin: 0 0 calc(4 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-lead-container .banner-lead1 {
display: flex;
margin: 0;
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-lead-container .banner-lead1 {
margin-bottom: 4px;
}
}
.fixed-banner .banner-lead-container .banner-lead1 .serif {
font-family: "Noto Serif JP", serif;
font-size: calc(36 / 1440 * 100vw);
font-weight: 700;
color: #F5DBA6;
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-lead-container .banner-lead1 .serif {
font-size: calc(48 / 750 * 100vw);
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-lead-container .banner-lead1 .serif {
font-size: 36px;
}
}
.fixed-banner .banner-lead-container .banner-lead1 .bordered {
display: inline-flex;
justify-content: center;
align-items: center;
width: calc(92 / 1440 * 100vw);
height: calc(44 / 1440 * 100vw);
margin: 0 calc(9 / 1440 * 100vw) 0 0;
border: 1px solid #F5DBA6;
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-lead-container .banner-lead1 .bordered {
width: calc(124 / 750 * 100vw);
height: calc(60 / 750 * 100vw);
margin-right: calc(8 / 750 * 100vw);
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-lead-container .banner-lead1 .bordered {
width: 92px;
height: 44px;
margin-right: 9px;
}
}
.fixed-banner .banner-lead-container .banner-lead1 .suffix {
font-size: calc(28 / 1440 * 100vw);
font-weight: 700;
letter-spacing: .2em;
color: #ffffff;
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-lead-container .banner-lead1 .suffix {
display: inline-block;
padding: calc(4 / 750 * 100vw) 0 0;
font-size: calc(32 / 750 * 100vw);
letter-spacing: .06em;
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-lead-container .banner-lead1 .suffix {
font-size: 28px;
}
}
.fixed-banner .banner-lead-container .banner-lead2 {
padding: 0 0 calc(5 / 1440 * 100vw);
font-size: calc(32 / 1440 * 100vw);
font-weight: 700;
letter-spacing: .2em;
line-height: 1;
color: #ffffff;
border-bottom: 1px solid #ffffff;
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-lead-container .banner-lead2 {
padding-bottom: calc(6 / 750 * 100vw);
font-size: calc(38 / 750 * 100vw);
letter-spacing: .14em;
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-lead-container .banner-lead2 {
padding-bottom: 5px;
font-size: 32px;
}
}
.fixed-banner .banner-btn-container {
display: flex;
gap: calc(16 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-btn-container {
gap: calc(18 / 750 * 100vw);
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-btn-container {
gap: 16px;
}
}
.fixed-banner .banner-btn-container .banner-btn {
width: calc(450 / 1440 * 100vw);
height: calc(72 / 1440 * 100vw);
background-color: #fff;
border-radius: calc(4 / 1440 * 100vw);
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-btn-container .banner-btn {
width: calc(350 / 750 * 100vw);
height: calc(88 / 750 * 100vw);
border-radius: calc(4 / 750 * 100vw);
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-btn-container .banner-btn {
width: 450px;
height: 72px;
border-radius: 4px;
}
}
.fixed-banner .banner-btn-container .banner-btn a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: calc(20 / 1440 * 100vw);
font-weight: 700;
letter-spacing: .06em;
color: #1A1A1A;
}
.fixed-banner .banner-btn-container .banner-btn a:after {
content: '';
display: inline-block;
width: calc(14 / 1440 * 100vw);
height: calc(12 / 1440 * 100vw);
margin: 0 0 0 calc(16 / 1440 * 100vw);
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/ico_arrow.svg);
background-repeat: no-repeat;
-webkit-background-size: contain;
background-size: contain;
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-btn-container .banner-btn a {
position: relative;
flex-direction: column;
align-items: flex-start;
gap: calc(8 / 750 * 100vw);
padding: 0 0 0 calc(32 / 750 * 100vw);
font-size: calc(26 / 750 * 100vw);
letter-spacing: .02em;
line-height: 1;
}
.fixed-banner .banner-btn-container .banner-btn a:after {
position: absolute;
top: 50%;
right: calc(24 / 750 * 100vw);
width: calc(14 / 750 * 100vw);
height: calc(12 / 750 * 100vw);
margin: 0;
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-btn-container .banner-btn a {
font-size: 20px;
}
.fixed-banner .banner-btn-container .banner-btn a:after {
width: 14px;
height: 12px;
margin-left: 16px;
}
}
.fixed-banner .banner-btn-container .banner-btn a span {
display: inline-block;
margin: 0 calc(6 / 1440 * 100vw) 0 0;
font-size: calc(26 / 1440 * 100vw);
font-weight: 700;
letter-spacing: .06em;
color: #B3811E;;
}
@media screen and (max-width: 767px) {
.fixed-banner .banner-btn-container .banner-btn a span {
margin: 0;
font-size: calc(34 / 750 * 100vw);
letter-spacing: .02em;
}
}
@media screen and (min-width: 1440px), print {
.fixed-banner .banner-btn-container .banner-btn a span {
margin-right: 6px;
font-size: 26px;
}
}