@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/***
The new CSS reset - version 1.11.2 (last updated 15.11.2023)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Fix mobile Safari increase font-size on landscape mode */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Reapply the pointer cursor for anchor tags */
a,
button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol,
ul,
menu,
summary {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input,
textarea {
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
-moz-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
box-sizing: border-box;
}
/* reset default text opacity of input placeholder */
::-moz-placeholder {
color: unset;
}
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
line-break: after-white-space;
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
box-sizing: border-box;
}
/* Remove details summary webkit styles */
::-webkit-details-marker {
display: none;
}
@font-face {
font-family: FontAwesome;
src: url(../font/fontawesome-webfont.woff2) format("woff2");
font-weight: 400;
font-style: normal;
}
html {
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: 14px;
line-height: 2.3571428571;
}
html[data-os=windows] body {
font-weight: 500;
}
html[data-os=mac-os] body {
font-weight: 400;
}
html[data-os=ios] body {
font-weight: 300;
}
body {
position: relative;
-webkit-text-size-adjust: none;
word-wrap: break-word;
background-color: #fff;
color: #1a1a1a;
font-family: "Open Sans", sans-serif;
font-feature-settings: "palt" 1;
letter-spacing: 0.125em;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
body ::-moz-selection {
background-color: rgba(244, 120, 54, 0.15);
}
body ::selection {
background-color: rgba(244, 120, 54, 0.15);
}
br.pc {
display: block;
}
br.sp {
display: none;
}
@media screen and (max-width: 767px) {
br.pc {
display: none;
}
br.sp {
display: block;
}
}
#header {
background-color: white !important;
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%) !important;
}
.l-header {
z-index: 10;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.l-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 1280px;
height: 70px;
margin: 0 auto;
padding: 0 36px;
background-color: #fff;
}
@media screen and (max-width: 767px) {
.l-header__inner {
width: 100%;
min-width: 100%;
height: 100%;
display: block;
padding: 20px 12px 13px;
}
}
.l-header__inner .logo {
display: flex;
position: relative;
align-self: center;
width: 150px;
height: 40px;
margin: 10px 0 0;
}
@media screen and (max-width: 767px) {
.l-header__inner .logo {
margin: 0;
}
}
.l-header__inner .logo__image {
display: flex;
width: 100%;
height: 100%;
}
.l-header__inner .navi ul {
display: flex;
gap: 32px;
}
.l-header__inner .navi ul li {
display: flex;
align-items: center;
justify-content: center;
}
.l-header__inner .navi ul li a {
position: relative;
display: block;
font-weight: bold;
font-size: 16px;
line-height: 1;
letter-spacing: 0;
transition: all 0.3s;
}
.l-header__inner .navi ul li a::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 2px;
background: #fa4616;
transition: all 0.3s;
transform: scale(0, 1);
transform-origin: left top;
}
.l-header__inner .navi ul li a:hover {
color: #fa4616;
}
.l-header__inner .navi ul li a:hover::after {
transform: scale(1, 1);
}
.l-header__inner .navi ul li:last-child {
background: #3d3e3e;
width: 160px;
height: 48px;
position: relative;
margin: -22px -22px 0 0;
}
@media only screen and (max-width: 768px) {
.l-header__inner .navi ul li:last-child {
width: 90%;
height: 13.3333333333vw;
margin: 5.3333333333vw auto 0;
}
}
.l-header__inner .navi ul li:last-child::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 48px 14px 0px 0px;
border-color: #fff transparent transparent transparent;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
@media only screen and (max-width: 768px) {
.l-header__inner .navi ul li:last-child::before {
border-width: 13.3333333333vw 4vw 0px 0px;
}
}
.l-header__inner .navi ul li:last-child::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 48px 14px;
border-color: transparent transparent #fff transparent;
z-index: 1;
position: absolute;
right: 0;
top: 0;
}
@media only screen and (max-width: 768px) {
.l-header__inner .navi ul li:last-child::after {
border-width: 0px 0px 13.3333333333vw 4vw;
}
}
.l-header__inner .navi ul li:last-child a {
color: #fff;
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.l-header__inner .navi ul li:last-child a span {
font-weight: 600;
font-size: 15px;
text-align: center;
color: #fff;
position: relative;
padding: 0 0 0 30px;
z-index: 2;
}
@media only screen and (max-width: 768px) {
.l-header__inner .navi ul li:last-child a span {
font-size: 4.2666666667vw;
padding: 0 0 0 8.5333333333vw;
}
}
.l-header__inner .navi ul li:last-child a span::before {
content: "";
background: url('data:image/svg+xml;utf8,') center/contain no-repeat;
width: 18px;
height: 16px;
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
.l-header__inner .navi ul li:last-child a span::before {
width: 6.6666666667vw;
height: 5.3333333333vw;
}
}
.l-header__inner .navi ul li:last-child a::after {
display: none;
}
.l-header__inner .navi ul li:last-child a:hover {
background: #fa4616;
}
@media (min-width: 767px) {
.l-header__inner .navi ul li:last-child {
transition: 0.3s all ease;
}
.l-header__inner .navi ul li:last-child:hover {
opacity: 0.8;
}
}
@media screen and (max-width: 767px) {
.l-header__inner .navi {
display: none;
}
}
.l-header__inner .l-hmb {
display: none;
position: absolute;
top: 0;
right: 0;
align-items: center;
justify-content: center;
width: 52px;
height: 64px;
}
@media screen and (max-width: 767px) {
.l-header__inner .l-hmb {
display: flex;
}
}
.l-header__inner .l-hmb span {
position: relative;
width: calc(100% - 28px);
height: 2px;
background-color: #1a1a1a;
transition: 0.3s ease;
}
.l-header__inner .l-hmb span,
.l-header__inner .l-hmb span:after,
.l-header__inner .l-hmb span:before {
height: 2px;
background-color: #1a1a1a;
transition: 0.3s ease;
}
.l-header__inner .l-hmb span:after,
.l-header__inner .l-hmb span:before {
display: inline-block;
position: absolute;
width: 100%;
content: "";
will-change: transform;
}
.l-header__inner .l-hmb span:before {
top: -8px;
left: 0;
}
.l-header__inner .l-hmb span:after {
bottom: -8px;
left: 0;
}
.l-header__inner .l-hmb.is-active span {
background: none;
}
.l-header__inner .l-hmb.is-active span:before {
top: 50%;
transform: rotate(135deg);
}
.l-header__inner .l-hmb.is-active span:after {
top: 50%;
transform: rotate(-135deg);
}
.l-header__inner .l-hmb-bg {
visibility: hidden;
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: 0.3s ease;
will-change: opacity;
}
.l-header__inner .l-hmb-bg.is-active {
visibility: visible;
opacity: 1;
}
.l-header__inner .spmenu {
display: none;
margin-top: 64px;
}
@media screen and (max-width: 767px) {
.l-header__inner .spmenu {
display: block;
}
}
.l-header__inner .spmenu ul {
display: flex;
flex-direction: column;
}
.l-header__inner .spmenu ul li {
position: relative;
border-top: 1px solid #eee;
}
.l-header__inner .spmenu ul li:first-child {
border-top: 1px solid #d6d6d6;
}
.l-header__inner .spmenu ul li::after {
position: absolute;
top: 50%;
right: 16px;
content: "";
width: 10px;
height: 10px;
transform: translateY(-50%) rotate(-45deg);
border-bottom: 2px solid #f47836;
border-left: 2px solid #f47836;
}
.l-header__inner .spmenu ul li a {
display: block;
padding: 20px 16px 18px;
background: #fff;
color: #1a1a1a;
font-size: 14px;
font-weight: 500;
line-height: 120%;
letter-spacing: 0;
}
.l-header__inner .spmenu ul li:last-child {
padding: 32px 16px;
background: #fff;
position: relative;
}
.l-header__inner .spmenu ul li:last-child a {
text-align: center;
background: #3d3e3e;
color: #fff;
font-weight: 700;
position: relative;
height: 50px;
padding: 17px 16px;
}
.l-header__inner .spmenu ul li:last-child a span {
text-align: center;
color: #fff;
position: relative;
padding: 0 0 0 32px;
z-index: 2;
}
.l-header__inner .spmenu ul li:last-child a span::before {
content: "";
background: url('data:image/svg+xml;utf8,') center/contain no-repeat;
width: 20px;
height: 16px;
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
}
.l-header__inner .spmenu ul li:last-child a::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 48px 14px 0px 0px;
border-color: #fff transparent transparent transparent;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
@media only screen and (max-width: 768px) {
.l-header__inner .spmenu ul li:last-child a::before {
border-width: 50px 15px 0px 0px;
}
}
.l-header__inner .spmenu ul li:last-child a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 48px 14px;
border-color: transparent transparent #fff transparent;
z-index: 1;
position: absolute;
right: 0;
top: 0;
}
@media only screen and (max-width: 768px) {
.l-header__inner .spmenu ul li:last-child a::after {
border-width: 0px 0px 50px 15px;
}
}
.l-header__inner .spmenu ul li:last-child::after {
display: none;
}
.contents {
min-width: 1280px;
}
@media screen and (max-width: 767px) {
.contents {
width: 100%;
min-width: 100%;
}
}
.hero {
position: relative;
width: 100%;
height: 600px;
background: #fff;
margin-top: 70px;
}
@media screen and (max-width: 767px) {
.hero {
margin-top: 64px;
height: calc(100vh - 64px);
}
}
.hero .swiper {
width: 100%;
height: 100%;
}
.hero .swiper .swiper-slide {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.hero .swiper .swiper-slide-1 {
background-image: url(../img/slide1.jpg);
}
.hero .swiper .swiper-slide-2 {
background-image: url(../img/slide2.jpg);
}
.hero .swiper .swiper-slide-3 {
background-image: url(../img/slide3.jpg);
}
.hero .swiper .swiper-slide-4 {
background-image: url(../img/slide4.jpg);
}
.hero .swiper .swiper-slide-5 {
height: 600px;
background: #fff;
}
.hero .swiper .swiper-slide-5__wrap {
display: flex;
height: 600px;
}
.hero .swiper .swiper-slide-5__img {
height: 100%;
aspect-ratio: 1/0.651;
}
.hero .swiper .swiper-slide-5__img img {
width: 100%;
height: 100%;
}
.hero .swiper .swiper-slide-5__text {
flex: 1 0;
display: flex;
justify-content: center;
align-items: center;
}
.hero .swiper .swiper-slide-5__text img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.hero .swiper .swiper-slide {
background-position: center bottom;
}
.hero .swiper .swiper-slide-1 {
background-image: url(../img/slide1_sp.jpg);
}
.hero .swiper .swiper-slide-2 {
background-image: url(../img/slide2_sp.jpg);
}
.hero .swiper .swiper-slide-3 {
background-image: url(../img/slide3_sp.jpg);
}
.hero .swiper .swiper-slide-4 {
background-image: url(../img/slide4_sp.jpg);
}
.hero .swiper .swiper-slide-5 {
height: inherit;
}
.hero .swiper .swiper-slide-5__wrap {
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.hero .swiper .swiper-slide-5__img {
width: 100%;
aspect-ratio: inherit;
}
.hero .swiper .swiper-slide-5__img img {
-o-object-fit: contain;
object-fit: contain;
}
.hero .swiper .swiper-slide-5__text {
display: none;
}
}
.hero .swiper .swiper-pagination {
width: 100%;
padding: 0 36px;
box-sizing: border-box;
left: 0;
right: 0;
margin: auto;
text-align: left;
}
@media screen and (max-width: 767px) {
.hero .swiper .swiper-pagination {
padding: 0 16px;
}
}
.hero .swiper .swiper-pagination-bullet {
background: #a2a2a2;
opacity: 1;
}
.hero .swiper .swiper-pagination-bullet-active {
background: #f47836;
}
.hero__inner {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 0 36px;
margin: auto;
z-index: 10;
}
@media screen and (max-width: 767px) {
.hero__inner {
width: 100%;
padding: 0 16px;
transform: translate(0, 0);
left: 0;
top: 10vw;
}
}
.hero__inner-copy {
display: inline-block;
color: #1a1a1a;
background: #fff;
padding: 14px 24px 12px;
font-size: 18px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
.hero__inner-copy {
font-size: 4.2vw;
padding: 0;
display: flex;
flex-direction: column;
gap: 1vw;
background: none;
}
.hero__inner-copy span {
background: #fff;
width: -moz-fit-content;
width: fit-content;
display: block;
padding: 14px 10px 12px;
}
}
.hero__inner-title {
margin: 32px 0 0;
color: #fff;
font-size: 64px;
font-weight: 700;
line-height: 130%;
letter-spacing: 0;
}
@media screen and (max-width: 767px) {
.hero__inner-title {
margin: 6vw 0 0;
font-size: 9vw;
letter-spacing: -0.03em;
}
}
.hero__inner-text {
margin: 24px 0 0;
color: #fff;
font-size: 28px;
font-weight: 700;
line-height: 1;
}
@media screen and (max-width: 767px) {
.hero__inner-text {
margin: 3vw 0 0;
font-size: 4.5vw;
letter-spacing: 0.01em;
}
}
.hero__inner.is-hide {
display: none;
}
.hero__inner.is-black .hero__inner-copy {
color: #fff;
background: #f47836;
}
@media screen and (max-width: 767px) {
.hero__inner.is-black .hero__inner-copy {
background: none;
}
.hero__inner.is-black .hero__inner-copy span {
background: #f47836;
}
}
.hero__inner.is-black .hero__inner-title {
color: #333;
}
.hero__inner.is-black .hero__inner-text {
color: #333;
}
.hero__wrap {
display: flex;
justify-content: flex-end;
gap: 10px;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 0 36px;
margin: auto;
z-index: 9;
}
@media screen and (max-width: 767px) {
.hero__wrap {
display: none;
}
}
.hero__wrap-cell {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 184px;
height: 184px;
padding: 0 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #f47836;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
box-sizing: border-box;
}
.hero__wrap.is-hide {
display: none;
}
.hero__wrap.is-black .hero__wrap-cell {
border: 1px solid #f47836;
}
.pointsp {
display: none;
margin: 48px 16px 64px;
}
@media screen and (max-width: 767px) {
.pointsp {
display: block;
}
}
.pointsp img {
width: 100%;
max-width: 400px;
margin: auto;
display: block;
}
.inner {
width: 1100px;
margin: auto;
}
@media screen and (max-width: 767px) {
.inner {
width: calc(100% - 32px);
}
}
.intro {
background: #f2f2f2;
padding: 80px 0 100px;
}
@media screen and (max-width: 767px) {
.intro {
padding: 48px 0;
}
}
.intro__title {
color: #f47836;
text-align: center;
font-size: 40px;
font-weight: 700;
line-height: 1.3em;
}
@media screen and (max-width: 767px) {
.intro__title {
font-size: 25px;
line-height: 1.5em;
text-align: left;
}
}
.intro__wrap {
display: flex;
justify-content: space-between;
gap: 20px;
margin: 48px 0 0;
}
@media screen and (max-width: 767px) {
.intro__wrap {
flex-direction: column;
gap: 16px;
margin: 32px 0 0;
}
}
.intro__wrap a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
width: 100%;
border-radius: 4px;
box-shadow: 0px 1px 2px 0px rgba(38, 38, 38, 0.2);
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: 130%;
letter-spacing: 0.05em;
padding: 24px;
}
@media screen and (max-width: 767px) {
.intro__wrap a {
font-size: 16px;
padding: 18px 48px 18px 18px;
text-align: left;
}
}
.intro__wrap a::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 12px;
height: 12px;
transform: rotate(-45deg) translateY(-50%);
border-bottom: 3px solid #f47836;
border-left: 3px solid #f47836;
}
@media (min-width: 768px) {
.intro__wrap a {
transition: 0.3s all ease;
}
.intro__wrap a:hover {
color: #f47836;
box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
}
}
.fixedbtn {
position: fixed;
top: 240px;
right: -64px;
z-index: 9;
transition: 0.3s all ease;
}
.fixedbtn::before {
content: "";
display: block;
position: absolute;
width: 10px;
height: 100%;
background: #f47836;
top: 0;
right: 0;
}
.fixedbtn a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #f47836;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 140%;
writing-mode: vertical-rl;
width: 64px;
height: auto;
padding: 24px 0;
transition: 0.3s all ease;
}
@media screen and (min-width: 767px) {
.fixedbtn a:hover {
transform: translateX(-10px);
}
}
.fixedbtn.is-show {
right: 0;
}
@media screen and (max-width: 767px) {
.fixedbtn {
top: inherit;
bottom: -100px;
right: 0;
left: calc(50% - 45px);
width: calc(50% - 45px);
background: #fff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.fixedbtn::before {
display: none;
}
.fixedbtn a {
width: 100%;
height: 48px;
font-feature-settings: inherit;
writing-mode: inherit;
margin: auto;
font-size: 13px;
line-height: 130%;
letter-spacing: 0.05em;
}
.fixedbtn.is-show {
right: 0;
bottom: 0;
}
}
.fixedbtn.fixedbtn4 {
top: 485px;
}
.fixedbtn.fixedbtn4::before {
display: none;
}
.fixedbtn.fixedbtn4 a {
background: #000;
}
.fixedbtn.fixedbtn4 a::before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #35c0dc;
z-index: 1;
transition: 0.3s all ease;
}
@media screen and (max-width: 767px) {
.fixedbtn.fixedbtn4 {
top: inherit;
left: 0;
}
.fixedbtn.fixedbtn4 a {
height: 48px;
}
}
@media screen and (min-width: 767px) {
.fixedbtn.fixedbtn4:hover a {
width: 280px;
transform: translateX(0);
}
.fixedbtn.fixedbtn4:hover a::before {
left: -10px;
width: 10px;
}
.fixedbtn.fixedbtn4:hover .fixedbtn4__title {
opacity: 0;
}
.fixedbtn.fixedbtn4:hover .fixedbtn4__img {
opacity: 1;
visibility: visible;
}
}
.fixedbtn.fixedbtn4 .fixedbtn4__title {
position: relative;
z-index: 2;
transition: 0.3s opacity ease;
}
.fixedbtn.fixedbtn4 .fixedbtn4__img {
position: absolute;
display: block;
top: 0;
left: 0;
width: 280px;
height: 214px;
z-index: 0;
opacity: 0;
visibility: hidden;
transition: 0.3s opacity ease 0.3;
}
.block h2 {
color: #fff;
text-align: center;
font-size: 40px;
font-weight: 700;
line-height: 140%;
padding: 40px 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 767px) {
.block h2 {
font-size: 28px;
line-height: 140%;
text-align: left;
padding: 24px 16px;
}
}
.block h2.is-block01 {
background-image: url(../img/title_1.png);
}
.block h2.is-block02 {
background-image: url(../img/title_2.png);
}
.block h2.is-block03 {
background-image: url(../img/title_3.png);
}
@media screen and (max-width: 767px) {
.block h2.is-block01 {
background-image: url(../img/title_1_sp.png);
}
.block h2.is-block02 {
background-image: url(../img/title_2_sp.png);
}
.block h2.is-block03 {
background-image: url(../img/title_3_sp.png);
}
}
.block h3 {
color: #f47836;
text-align: center;
font-size: 40px;
font-weight: 700;
line-height: 1.3;
}
@media screen and (max-width: 767px) {
.block h3 {
font-size: 24px;
}
}
.block__dsc {
width: 800px;
margin: 48px auto;
font-size: 16px;
font-weight: 500;
line-height: 200%;
letter-spacing: 0.01em;
}
@media screen and (max-width: 767px) {
.block__dsc {
width: calc(100% - 32px);
margin: 32px auto;
font-size: 16px;
}
}
.block__subject {
background: #f9f9f9;
padding: 48px 0 8px;
}
.block__subject-inner {
margin: 32px 0 0;
background: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0px 1px 2px 0px rgba(38, 38, 38, 0.2);
}
.block__subject-img {
width: 100%;
height: 180px;
background: #ddd;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.block__subject-img-1 {
background-image: url(../img/subject1.png);
}
@media screen and (max-width: 767px) {
.block__subject-img-1 {
background-image: url(../img/subject1_sp.png);
}
}
.block__subject-img-2 {
background-image: url(../img/subject2.png);
}
@media screen and (max-width: 767px) {
.block__subject-img-2 {
background-image: url(../img/subject2_sp.png);
}
}
.block__subject-img-3 {
background-image: url(../img/subject3.png);
}
@media screen and (max-width: 767px) {
.block__subject-img-3 {
background-image: url(../img/subject3_sp.png);
}
}
.block__subject-wrap {
display: flex;
justify-content: space-between;
gap: 48px;
padding: 24px 24px 32px;
}
@media screen and (max-width: 767px) {
.block__subject-wrap {
flex-direction: column;
gap: 48px;
}
}
.block__subject-cell {
width: 100%;
position: relative;
}
.block__subject-cell::after {
content: "";
width: 1px;
height: 80%;
position: absolute;
right: -24px;
top: 50%;
transform: translateY(-50%);
background: #edeeed;
}
@media screen and (max-width: 767px) {
.block__subject-cell::after {
width: 100%;
height: 1px;
top: inherit;
bottom: -24px;
right: 0;
left: 0;
}
}
.block__subject-cell:last-child::after {
display: none;
}
.block__subject-cell__tag {
display: block;
width: -moz-fit-content;
width: fit-content;
border-radius: 4px;
padding: 8px 12px;
background: #f47836;
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 100%;
margin: auto;
letter-spacing: 0.05em;
}
.block__subject-cell__title {
color: #f47836;
font-size: 18px;
font-weight: 700;
line-height: 150%;
margin: 16px 0 0;
letter-spacing: 0.05em;
}
.block__subject-cell__text {
font-size: 14px;
font-weight: 500;
line-height: 160%;
margin: 8px 0 0;
letter-spacing: 0.05em;
}
.block__solution {
background: #f9f9f9;
padding: 80px 0 100px;
}
@media screen and (max-width: 767px) {
.block__solution {
padding: 80px 0 64px;
}
}
.block__solution-case {
margin: 48px 0 80px;
}
.block__solution-case:last-child {
margin: 48px 0 0;
}
.block__solution-case__title {
display: flex;
align-items: center;
gap: 20px;
}
@media screen and (max-width: 767px) {
.block__solution-case__title {
flex-direction: column;
}
}
.block__solution-case__title-num {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 0 0 120px;
width: 120px;
height: 120px;
border-radius: 50%;
background: #f47836;
color: #fff;
color: #fff;
text-align: center;
font-family: Helvetica;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
}
.block__solution-case__title-num span {
font-size: 50px;
}
.block__solution-case__title-text {
font-size: 30px;
font-weight: 700;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.block__solution-case__title-text {
font-size: 20px;
letter-spacing: 0.01em;
}
}
.block__solution-case__wrap {
margin: 32px 0 0;
display: flex;
gap: 48px;
}
@media screen and (max-width: 767px) {
.block__solution-case__wrap {
flex-direction: column;
gap: 32px;
}
}
.block__solution-case__movie {
width: 50%;
}
@media screen and (max-width: 767px) {
.block__solution-case__movie {
width: 100%;
}
}
.block__solution-case__movie-inner {
display: block;
}
.block__solution-case__movie-inner iframe {
border: none;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
.block__solution-case__movie-inner img {
display: block;
width: 100%;
}
.block__solution-case__movie-text {
margin: 16px 0 0;
font-size: 14px;
font-weight: 500;
line-height: 160%;
}
.block__solution-case__img {
width: 50%;
}
@media screen and (max-width: 767px) {
.block__solution-case__img {
width: 100%;
}
}
.block__result {
padding: 80px 0;
background: #f2f2f2;
}
@media screen and (max-width: 767px) {
.block__result {
padding: 64px 0;
}
}
.block__result ul {
margin: 32px auto 0;
width: -moz-fit-content;
width: fit-content;
display: flex;
flex-direction: column;
gap: 16px;
}
@media screen and (max-width: 767px) {
.block__result ul {
gap: 16px;
}
}
.block__result ul li {
display: flex;
font-size: 22px;
font-weight: 700;
line-height: 150%;
letter-spacing: 0;
}
@media screen and (max-width: 767px) {
.block__result ul li {
font-size: 16px;
line-height: 160%;
}
}
.block__result ul li span {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 34px;
height: 34px;
background: #f47836;
color: #fff;
color: #fff;
font-family: Helvetica;
font-size: 20px;
font-weight: 700;
line-height: 100%;
margin: 0 16px 0 0;
text-align: center;
flex-shrink: 0;
}
.block__cv {
padding: 0 0 100px;
background: #f2f2f2;
}
.block__cv .inner {
background: #fff;
padding: 48px 0 64px;
border-top: 5px solid #f47836;
box-shadow: 0px 1px 2px 0px rgba(38, 38, 38, 0.2);
}
.block__cv-wrap {
display: flex;
justify-content: center;
gap: 20px;
margin: 48px 0 0;
}
@media screen and (max-width: 767px) {
.block__cv-wrap {
flex-direction: column;
gap: 8px;
margin: 48px 16px 0;
}
}
.block__cv-cell {
width: 200px;
padding: 12px;
border-radius: 4px;
border: 2px solid #f47836;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.block__cv-cell:hover {
transition: 0.3s all ease;
opacity: 0.7;
}
}
@media screen and (max-width: 767px) {
.block__cv-cell {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
}
.block__cv-cell__img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
border-radius: 2px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
@media screen and (max-width: 767px) {
.block__cv-cell__img {
aspect-ratio: 1/1;
}
}
.block__cv-cell__info {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.block__cv-cell__title {
margin: 12px 0 0;
color: #f47836;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 140%;
flex-grow: 1;
}
@media screen and (max-width: 767px) {
.block__cv-cell__title {
font-size: 13px;
line-height: 130%;
letter-spacing: 0.05em;
}
}
.block__cv-cell__btn {
margin: 12px 0 0;
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 34px;
border-radius: 4px;
background: #f47836;
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 1em;
}
.block__cv-btn {
margin: 38px auto 0;
display: flex;
align-items: center;
justify-content: center;
width: 370px;
height: 55px;
border-radius: 4px;
border: 2px solid #f47836;
background: #fff;
color: #f47836;
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
@media (min-width: 768px) {
.block__cv-btn:hover {
transition: 0.3s all ease;
opacity: 0.7;
}
}
@media screen and (max-width: 767px) {
.block__cv-btn {
width: calc(100% - 32px);
}
}
.float_fbox {
display: none;
position: fixed;
bottom: 0;
height: auto;
background: #fff;
padding: 16px 24px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
line-height: 1.6;
width: 640px;
z-index: 1111;
left: 50%;
transform: translateX(-50%);
}
.float_fbox .inner {
width: auto;
max-width: 1200px;
margin: auto !important;
}
.float_fbox .inner .btn {
position: absolute;
top: -16px;
right: -16px;
width: 32px;
height: 32px;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
border-radius: 50%;
}
.float_fbox .inner .btn::before, .float_fbox .inner .btn::after {
content: "";
position: absolute;
background: #333;
width: 16px;
height: 1px;
top: 50%;
left: 50%;
}
.float_fbox .inner .btn::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.float_fbox .inner .btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.float_fbox .inner .btn a {
position: absolute;
z-index: 10;
display: block;
width: 100%;
height: 100%;
}
.float_fbox a,
.float_fbox span {
text-decoration: underline;
}
@media screen and (max-width: 767px) {
.float_fbox {
width: auto;
height: auto;
left: auto;
transform: none;
font-size: 12px;
}
.float_fbox .inner {
display: block;
}
.float_fbox .inner .btn {
right: 4px;
}
}
.l-footer__pagetop {
display: block;
display: flex;
visibility: hidden;
z-index: 8;
position: fixed;
right: 16px;
bottom: 90px !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 4px;
background-color: rgba(137, 141, 141, 0.7);
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}
.l-footer__pagetop.is-show {
visibility: visible;
opacity: 1;
}
.l-footer__pagetop.is-bottom {
position: absolute;
bottom: 150px !important;
}
.l-footer__pagetop:before {
display: inline-block;
width: 16px;
height: 16px;
margin-top: 12px;
transform: rotate(225deg);
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
vertical-align: middle;
content: "";
}
@media screen and (max-width: 767px) {
.l-footer__pagetop {
bottom: 90px !important;
}
}
/* 共通：プライバシーポリシー */
.modal__bk {
opacity: 0;
visibility: hidden;
transition: 0.5s all ease;
}
.modal__bk.is-show {
opacity: 1;
visibility: visible;
}
.modal__bk {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(43, 46, 56, 0.9);
z-index: 9998;
top: 0;
left: 0;
}
.modal__inner {
opacity: 0;
visibility: hidden;
transition: 0.5s all ease;
}
.modal__inner.is-show {
opacity: 1;
visibility: visible;
}
.modal__inner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
border: 5px solid #eb5c01;
background: #e1e1d9;
padding: 50px 64px;
box-sizing: border-box;
line-height: 1.64;
width: 90%;
max-width: 800px;
height: auto;
max-height: 90%;
overflow-y: auto;
}
@media (max-width: 768px) {
.modal__inner {
padding: 10px 15px;
}
}
.modal__inner .asterisk {
color: #eb5c01;
}
.modal__inner section {
margin-bottom: 30px;
}
.modal__inner section:last-of-type {
margin-bottom: 0;
}
.modal__inner section h3 {
color: #eb5c01;
margin-bottom: 1.5em;
font-weight: bold;
}
.modal__inner section p,
.modal__inner section li {
margin-bottom: 1em;
}
.modal__inner section li::before {
content: "■";
margin-right: 0.4em;
color: #eb5c01;
}
.modal__inner section dl dt {
font-weight: bold;
margin-bottom: 0.5em;
}
.modal__inner section dl dd {
margin-bottom: 0.5em;
}
.modal__inner section a {
color: #3b77b5;
text-decoration: underline;
}
.modal__inner section a:hover {
text-decoration: none;
}
.modal__inner button {
text-align: center;
display: block;
background: #000;
color: #fff;
width: 177px;
height: 43px;
line-height: 43px;
margin: 30px auto 0;
letter-spacing: 0.25em;
font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.footer {
min-width: 1280px;
background: #323333;
color: #fff;
padding: 40px 9em 30px;
box-sizing: border-box;
}
@media (max-width: 767px) {
.footer {
min-width: inherit;
padding: 40px 8px 30px;
}
}
.footer__inner {
margin: 0 auto;
width: 100%;
}
.footer__wrap {
display: flex;
justify-content: space-between;
}
@media (max-width: 767px) {
.footer__wrap {
flex-direction: column;
justify-content: center;
gap: 32px;
}
}
.footer__copy {
display: flex;
font-size: 10px;
}
@media (max-width: 767px) {
.footer__copy {
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 8.5px;
}
}
.footer__copy p {
font-family: Arial, sans-serif;
font-size: 1.4em;
letter-spacing: 0;
font-weight: 700;
}
@media (max-width: 767px) {
.footer__copy p {
text-align: center;
}
}
.footer__copy a {
text-decoration: underline;
}
.footer__logo {
width: 150px;
margin-right: 30px;
}
.footer__social {
height: 42px;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.footer__social a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
align-items: center;
text-align: center;
border-radius: 50%;
border: 1px solid #fff;
transition: all 0.25s ease;
}
.footer__social a:hover {
text-decoration: none;
border-color: #fb4a29;
background: #fb4a29;
}
.footer__social a i {
font: normal normal normal 14px/1 FontAwesome;
font-size: 20px;
text-rendering: auto;
}
.footer__social a i.fa-youtube:before {
content: "\f167";
}
.footer__social a i.fa-instagram:before {
content: "\f16d";
}
.footer__social a i.fa-facebook-f:before, .footer__social a i.fa-facebook:before {
content: "\f09a";
}
.footer__social a i.fa-linkedin:before {
content: "\f0e1";
}/*# sourceMappingURL=style.css.map */