/* reset.css */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
font-family: 'Noto Sans JP', sans-serif;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 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;
}
/* 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;
appearance: revert;
}
/* reset default text opacity of input placeholder */
::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;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* common */
html {scroll-behavior: smooth;}
:root {
--swiper-theme-color: #f8951d;
}
h2 {font-size: 1.8rem; font-weight: 500;}
h3 {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.05rem;
}
p {line-height: 1.8;}
a {transition: 0.3s ease-in-out;}
.primaryBtn {
background: #F8951D;
color: #FFF;
border: solid 1px #F8951D;
padding: 10px 36px 13px 28px;
border-radius: 9999px;
position: relative;
}
.secondaryBtn {
border: solid 1px #707070;
background: #FFF;
color: #000;
padding: 10px 36px 13px 28px;
border-radius: 9999px;
position: relative;
}
.primaryBtn:after, .secondaryBtn:after {
content: "\E5e1";
font-family: 'Material Icons';
font-weight: 900;
margin-right: 0;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
transition: 0.2s ease-in-out;
}
.primaryBtn:hover {
background: #FFF;
color: #F8951D;
}
.secondaryBtn:hover {
background: #000;
color: #FFF;
}
.primaryBtn:hover:after, .secondaryBtn:hover:after {
right: 12px;
}
.secondaryBtn span {
background: #FFF;
color: #000;
font-size: 1rem;
padding: 2px 9px;
margin-right: 12px;
transition: 0.3s ease-in-out;
}
.pcView {display:inline-block;}
.spView {display:none;}
/* header */
#header {
transition: 0.3s ease-in-out;
position: absolute;
top: 0;
width: 100%;
}
.header__inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 40px;
height: 100px;
transition: 0.3s ease-in-out;
}
.header__logoinner {
display: flex;
justify-content: flex-start;
gap: 15px;
align-items: center;
margin-top: -15px;
}
img.header__logoinner--logo {
max-width: 200px;
width: 100%;
}
.header__logoinner--stadageLogoInner {
transform: translateY(7px);
}
.header__logoinner--stadageLogo {
display: flex;
justify-content: flex-start;
gap: 8px;
align-items: flex-end;
transform: translateY(-5px);
}
.header__logoinner--stadageLogoBy {
font-size: 0.9rem;
}
p.header__logoinner--stadageLogoCopy {
font-size: 10px;
transform: scale(0.6);
transform-origin: left top;
}
.header__inner--btn {
display: flex;
justify-content: flex-end;
gap: 25px;
align-items: center;
flex-wrap: nowrap;
}
/* header resize */
header#header.resize {
position: fixed;
z-index: 9999;
background: rgb(255,255,255, 0.9);
width: 100%;
height: 60px;
filter: drop-shadow(0px 1px 2px #ddd);
}
header#header.resize .header__logoinner--stadageLogo {
display: none;
}
header#header.resize .header__inner {
height: 60px;
}
header#header.resize .header__logoinner {
margin-top: 0;
}
header#header.resize img.header__logoinner--logo {
width: 160px;
}
header#header.resize .header__inner--btn {
gap: 10px;
}
header#header.resize .header__inner .header__inner--btn a {
padding-top: 6px;
padding-bottom: 8px;
}
/* HERO */
section#hero {
position: relative;
height: 722px;
width: 100%;
overflow-x: clip;
margin-top: 100px;
}
section#hero:before {
content: "";
width: 100%;
height: 100%;
background: url(../img/port.svg) no-repeat;
position: absolute;
right: 0;
z-index: 1;
bottom: 0px;
transform: scale(1.1) translateY(20px);
background-size: contain;
background-position-x: right;
}
section#hero:after {
content: "";
width: calc(100% - 80px);
height: 100%;
position: absolute;
background: #E2F6FF;
right: 0;
top: 0;
border-radius: 130px 0 0 0;
pointer-events: none;
}
.hero__inner {
display: flex;
width: 100%;
max-width: 1050px;
margin: 0 auto;
justify-content: flex-start;
position: relative;
z-index: 1;
}
.hero__inner--left {
padding-top: 80px;
display: flex;
flex-direction: column;
}
.hero__inner--left h1 {
margin-bottom: 20px;
}
img.hero__inner--logo {
width: 680px;
}
.hero__inner--left p {
line-height: 2;
display: block;
margin-bottom: 35px;
font-size: 1.1rem;
}
.hero__inner--leftLink .secondaryBtn {
background: #000;
color: #FFF;
padding: 16px 64px 20px 40px;
font-size: 1.3rem;
display: flex;
width: fit-content;
font-weight: 500;
letter-spacing: 0.04rem;
text-align: center;
}
.hero__inner--leftLink .secondaryBtn span {
background: #FFF;
color: #000;
font-size: 1rem;
padding: 2px 9px;
margin-right: 12px;
}
.hero__inner--leftLink .secondaryBtn:hover {
background: #FFF;
color: #000;
}
.hero__inner--leftLink .secondaryBtn:hover span {
background: #000;
color: #FFF;
}
/* HERO ABSOLUTE */
.hero__innerabsolute {
position: absolute;
right: 40px;
bottom: 90px;
z-index: 1;
}
.hero__innerabsolute--top {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img.hero__innerabsolute--king {
margin-bottom: -20px;
z-index: 1;
}
.hero__innerabsolute--vertical {
display: flex;
justify-content: center;
gap: 25px;
}
.hero__innerCircle {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 212px;
background: #FFF;
height: 212px;
border-radius: 9999px;
overflow: hidden;
border: solid 3px #f8951d;
position: relative;
}
.hero__innerCircle--top p {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #f8951d;
color: #FFF;
width: 212px;
height: 100px;
font-size: 1.4rem;
font-weight: 500;
text-align: center;
line-height: 1.5;
}
span.hero__innerCircle--topCopy {
font-size: 1rem;
font-weight: 300;
margin-bottom: -3px;
}
span.hero__innerCircle--topHosoku {
font-size: 10px;
font-weight: 400;
margin-top: 2px;
}
.hero__innerCircle--bottom {
padding: 12px 0;
display: flex;
text-align: center;
}
/* HERO Under */
section#herounder {
position: relative;
}
section#herounder:before {
content: "";
width: calc(100% - 80px);
height: 100%;
position: absolute;
background: #f8951d;
right: 0;
top: 0;
pointer-events: none;
z-index: 2;
}
.herounder__inner {
width: 100%;
max-width: 1200px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
position: relative;
z-index: 2;
}
.herounber__innerleft {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 40px;
}
.herounber__innerleft img {
transform: translateY(-25px);
width: 100%;
max-width: 280px;
filter: drop-shadow(0px 2px 3px #999);
}
.herounber__innerleft--text {
color: #FFF;
margin-top: -5px;
}
.herounber__innerleft--text h2 {
margin-bottom: 10px;
}
.herounber__innerleft--text p {
letter-spacing: 0.03rem;
}
.herounber__innerleft--btn {
display: block;
margin-top: -10px;
}
.herounber__innerleft--btn a.primaryBtn {
border-color: #FFF;
font-size: 1.1rem;
padding-left: 40px;
padding-right: 50px;
}
.herounber__innerleft--btn a.primaryBtn:hover {
background: #fff;
color: #f8951d;
opacity: 1;
}
/* modal */
.modal {
display: none;
position: fixed;
z-index: 8887;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
transition: all 1s ease-in-out;
}
.modal-container .img {
background: #f1f1f1;
margin-bottom: 15px;
}
.modal-container p {
margin: 10px 0 20px;
font-size: 0.9rem;
display: flex;
justify-content: center;
}
.modal-container p:last-child {
margin-bottom: 0;
}
.modal-container img {
width: 100%;
}
.modal-content {
background: #FFF;
overflow-y: auto;
padding: 20px 25px;
width: 90%;
max-width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 560px;
animation: show 0.6s linear 0s;
filter: drop-shadow(0px 2px 6px #777);
border-radius: 3px;
}
.modal-top {
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
}
.modal-top:hover {
opacity: 0.7;
}
.modal-close {
color: #F8951D;
text-decoration: none;
font-size: 2rem;
line-height: 1;
padding: 0 8px;
}
.modal-close:hover, .modal-close:focus {
text-decoration: none;
cursor: pointer;
}
.modal-title {
color: #FFF;
}
@keyframes show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
::-webkit-scrollbar{
width: 12px;
}
::-webkit-scrollbar-track{
background: #fff;
border-radius: 0px;
box-shadow: inset 0 0 1px #999;
}
::-webkit-scrollbar-thumb{
background:#bbb;
border-radius: 9999px;
box-shadow: none;
}
/* ALLIANCE */
.alliance__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 25px 0;
border-bottom: solid 1px #eee;
}
.alliance__inner--Left h2 {
color: #f8951d;
margin-bottom: 12px;
letter-spacing: 0.08rem;
}
.alliance__inner--Left p {
letter-spacing: 0.03rem;
}
.alliance__inner--Right {
width: 65%;
}
.alliance__inner--Right ul {
display: flex;
justify-content: flex-start;
gap: 0 10px;
flex-wrap: wrap;
}
.alliance__inner--Right ul li img {
width: 145px;
}
/* trouble */
section#trouble {
margin: 100px 0 60px;
}
h2.trouble__head--heading {
text-align: center;
font-size: 2.1rem;
font-weight: 400;
letter-spacing: 0.15rem;
margin-bottom: 55px;
}
h2.trouble__head--heading span {
font-weight: 600;
font-size: 3rem;
position: relative;
margin: 0 10px;
}
h2.trouble__head--heading span:before {
content: "";
width: 50px;
height: 30px;
background: url(../img/vectorline.svg) no-repeat;
position: absolute;
top: -6px;
left: -16px;
background-size: contain;
}
.trouble__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.trouble__inner ul {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.trouble__inner ul li {
background: #414141;
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
color: #FFF;
font-size: 1.1rem;
line-height: 1.8;
}
/* Resolution */
section#resolution {
position: relative;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(241,251,255,1) 60%, rgba(226,246,255,1) 87%, rgba(226,246,255,1) 100%);
}
section#resolution:before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -35px;
border: 35px solid transparent;
border-top: 35px solid #FFF;
}
.resolution__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 100px 0 55px;
}
.resolution__heading {
width: 690px;
margin: 0 auto 100px;
border: solid 1px #f8951d;
position: relative;
padding: 35px 0px 70px;
}
p.resolution__heading--title {
position: absolute;
top: -22px;
left: 29px;
font-weight: 500;
font-size: 1.5rem;
color: #f8951d;
letter-spacing: 0.08rem;
background: #f7fdff;
padding: 0 25px;
}
.resolution__heading h2 {
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
}
.resolution__heading h2 span {
font-size: 1.5rem;
transform: translateY(8px);
}
p.resolution__heading--bottom {
text-align: center;
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: #f7fdff;
padding: 0 30px;
line-height: 2;
}
ul.resolution__step {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 55px;
}
ul.resolution__step li {
background: #fff;
text-align: center;
padding: 30px 0;
width: 24%;
position: relative;
filter: drop-shadow(0px 1px 2px #ddd);
}
ul.resolution__step li:first-child {
z-index: 4;
}
ul.resolution__step li:nth-child(2) {
z-index: 3;
}
ul.resolution__step li:nth-child(3) {
z-index: 2;
}
ul.resolution__step li:before {
content: "";
position: absolute;
top: 13%;
left: 100%;
margin-top: -18px;
border: 18px solid transparent;
border-left: 18px solid #ffffff;
}
ul.resolution__step li:last-child:before {
content: none;
}
ul.resolution__step li p {
font-size: 1.3rem;
color: #f8951d;
position: relative;
display: inline-block;
padding: 0px 15px;
border-bottom: dotted 3px;
margin-bottom: 15px;
}
.resolution__step--img {
position: relative;
margin-bottom: 15px;
}
.resolution__step--img:after {
content: "";
width: 210px;
height: 210px;
position: absolute;
background: #E8F9FF;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 9999px;
}
.resolution__step--img img {
position: relative;
z-index: 1;
}
p.resolution__bottom--Text {
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.05rem;
line-height: 2;
}
/* DL1 */
section#download1 {
background: #f8951d;
}
.download1__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 60px;
position: relative;
padding: 45px 0 50px;
}
.download1__innerLeft {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding-left: 90px;
}
.download1__innerLeft h2, .download1__innerLeft p {
color: #FFF;
}
.download1__innerLeft p {
margin-bottom: 9px;
}
.download1__innerLeft a.secondaryBtn {
border: none;
}
.download1__innerRight {
position: absolute;
right: 10px;
bottom: -25px;
pointer-events: none;
}
/* IThojo */
section#ithojo {
position: relative;
background: #f9f9f9;
}
.ithojo__absLeft {
position: absolute;
left: 0;
top: 0;
}
.ithojo__abRight {
position: absolute;
right: 0;
top: 0;
}
.ithojo__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.ithojo__innerLeft--headbox {
display: flex;
align-items: flex-end;
justify-content: center;
width: fit-content;
gap: 15px;
padding: 7px 30px 15px;
border: solid 1px #000;
margin-bottom: 18px;
}
img.ithojo__innerLeft--headboxBatsu {
transform: translateY(-4px);
}
.ithojo__innerLeft h2 {
margin-bottom: 18px;
font-size: 1.9rem;
}
p.ithojo__innerLeft--bodycopy {
display: block;
margin-bottom: 25px;
}
.ithojo__innerLeft a.primaryBtn {
font-size: 1.2rem;
width: 460px;
display: block;
text-align: center;
background: #FFF;
color: #F8951D;
margin-bottom: 20px;
}
.ithojo__innerLeft a.primaryBtn:hover {
background: #F8951D;
color: #FFF;
opacity: 1;
}
p.ithojo__innerLeft--hosoku {
font-size: 0.8rem;
color: #707070;
font-weight: 300;
}
/* ithojo */
section#itihojokingaku {
background: #FFE2BE;
padding: 80px 0 50px;
}
.itihojokingaku__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 15%);
border-radius: 3px;
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
padding: 50px 0;
margin-bottom: 50px;
}
.itihojokingaku__inner--sideblock {
text-align: center;
position: relative;
z-index: 1;
}
.itihojokingaku__inner--sideblock:before {
content: "";
width: 320px;
height: 320px;
position: absolute;
top: 50%;
background: #F9F9F9;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 9999px;
z-index: -1;
}
.itihojokingaku__inner--sideblock p {
font-size: 1.2rem;
letter-spacing: 0.08rem;
font-weight: 500;
}
.itihojokingaku__inner--middleblock {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p.itihojokingaku__inner--middleTop {
color: #707070;
border-bottom: dotted 2px;
padding: 0 10px 5px;
margin-bottom: 25px;
letter-spacing: 1px;
}
p.itihojokingaku__inner--middleMiddle {
display: flex;
align-items: baseline;
transform: translateX(16px);
}
p.itihojokingaku__inner--middleMiddle span, p.itihojokingaku__inner--middleBottom {
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.13rem;
color: #f8951d;
}
p.itihojokingaku__inner--middleMiddle img {
margin: 0 8px;
transform: translateY(4px);
}
p.itihojokingaku__inner--middleBottom {
margin-top: -10px;
}
p.itihojokingaku__bottom--text {
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.1rem;
}
/* ithojoBtn */
section#itihojoBtn {
background: #F8951D;
padding: 50px 0;
}
.itihojoBtn__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #FFF;
gap: 18px;
text-align: center;
}
.itihojoBtn__inner .primaryBtn {
border-color: #fff;
width: 600px;
font-size: 1.4rem;
padding-bottom: 15px;
margin-top: 5px;
}
.itihojoBtn__inner .primaryBtn:hover {
background: #FFF;
color: #F8951D;
opacity: 1;
}
/* CASE */
section#case {
padding: 100px 0;
}
.case__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.case__innerHeading {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
h2.case__inner--text {
font-size: 2rem;
position: relative;
letter-spacing: 0.04rem;
border-bottom: solid 3px #f8951d;
padding: 0 90px 20px;
margin-bottom: 70px;
}
span.headingSub {
position: absolute;
top: -35px;
left: 50%;
font-family: Helvetica;
font-weight: 600;
font-size: 4rem;
color: #F0901C;
opacity: 0.15;
}
ul.case__innerList {
display: flex;
justify-content: space-between;
gap: 100px;
flex-wrap: wrap;
}
ul.case__innerList li {
background: #fff;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 15%);
border-radius: 3px;
padding: 30px 45px 40px;
width: calc(100% / 2 - 50px);
}
.case__innerList--corp {
text-align: center;
margin-bottom: 15px;
}
.case__innerList--corp p {
font-size: 0.9rem;
letter-spacing: 0.06rem;
}
.case__innerList--corp p span {
font-size: 0.75rem;
margin-left: 5px;
}
ul.case__innerList li h3 {
color: #f8951d;
line-height: 1.6;
font-size: 1.6rem;
margin-bottom: 15px;
}
.case__innerList--desctext {
font-weight: 300;
}
.case__innerList--desctext b {
font-weight: 600;
}
/* case swiper */
section#case {
padding: 100px 0;
overflow: hidden;
}
.case__inner.swiper-container {
display: block;
position: relative;
}
ul.case__innerList.swiper-wrapper {
display: flex;
justify-content: flex-start;
width: max-content;
gap: 0;
}
ul.case__innerList li.swiper-slide {
height: auto;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 12%), 0 1px 15px 0 rgb(0 0 0 / 12%);
}
li.swiper-slide .case__innerList--corp img {
max-height: 80px;
}
.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
transform: scale(2.5);
bottom: -45px;
}
.swiper-button-next:after {
right: -80px;
position: absolute;
top: 60px;
}
.swiper-button-prev:after {
left: -80px;
position: absolute;
top: 60px;
}
/* DL2 */
.download2 .download1__innerLeft {
gap: 25px;
}
.download2 a.primaryBtn {
color: #FFF;
padding: 13px 94px 17px 71px;
font-size: 1.3rem;
display: flex;
width: fit-content;
font-weight: 500;
letter-spacing: 0.04rem;
text-align: center;
border: solid 1px;
}
.download2 a.primaryBtn:hover {
background: #FFF;
color: #f8951d;
opacity: 1;
}
/* worries */
.worries__inner {
padding: 100px 0 60px;
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.worries__inner .resolution__heading {
margin-bottom: 100px;
}
.worries__inner p.resolution__heading--title, .worries__inner p.resolution__heading--bottom {
background: #FFF;
}
.worries__inner p.resolution__heading--title {
left: 65px;
}
ul.worries__list {
display: flex;
flex-direction: column;
gap: 40px;
}
ul.worries__list li {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #fff;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 3px 0 rgb(0 0 0 / 10%);
border-radius: 3px;
}
.worries__list--left, .worries__list--Right {
width: 50%;
position: relative;
}
.worries__list--left {
background: #F6F6F6;
padding: 30px 40px;
overflow: hidden;
height: auto;
min-height: 270px;
}
.worries__list--left:before {
content: "";
width: 190px;
height: 190px;
position: absolute;
right: 10px;
bottom: -20px;
background: #FFF;
border-radius: 9999px;
}
.worries__list--left p {
font-size: 0.9rem;
background: #000;
display: inline-block;
border-radius: 9999px;
color: #FFF;
padding: 3px 20px 3px;
margin-bottom: 12px;
}
.worries__list--left p span {
font-family: Helvetica;
font-weight: 600;
letter-spacing: 0.04rem;
}
.worries__list--left h3 {
font-size: 1.6rem;
line-height: 1.7;
position: relative;
}
.worries__list--leftimg {
display: inline-block;
position: absolute;
bottom: 5px;
right: 5px;
width: 190px;
text-align: center;
}
.worries__list--leftimg img {
max-height: 200px;
}
.worries__list--Right {
padding: 30px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.worries__list--Right:before {
content: "";
position: absolute;
top: 50%;
left: 0;
margin-top: -20px;
border: 20px solid transparent;
border-left: 20px solid #f6f6f6;
}
p.worries__list--Rightkaiketsu {
position: relative;
display: inline-block;
background: #f8951d;
color: #FFF;
padding: 3px 20px 3px;
margin-bottom: 12px;
border-radius: 9999px;
width: fit-content;
}
p.worries__list--Rightkaiketsu:before {
content: "\e8dc";
font-family: 'Material Icons';
font-weight: 900;
margin-right: 5px;
position: relative;
vertical-align: bottom;
}
.worries__list--Right h3 {
color: #f8951d;
margin-bottom: 10px;
line-height: 1.6;
}
/* consultation */
section#consultation {
position: relative;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(241,251,255,1) 60%, rgba(226,246,255,1) 87%, rgba(226,246,255,1) 100%);
}
.consultation__righttop {
position: absolute;
right: 10px;
top: -20px;
}
.consultation__leftbottom {
position: absolute;
bottom: -15px;
left: 0;
}
.consultation__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 0;
}
h2.consultation__inner--heading {
display: flex;
justify-content: center;
align-items: baseline;
}
h2.consultation__inner--heading span {
font-size: 1.5rem;
}
h2.consultation__inner--heading span:first-child {
color: #f8951d;
}
h2.consultation__inner--heading img {
width: 350px;
margin: 0 15px 0 15px;
transform: translateY(20px);
}
.consultation__inner--btn {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 40px;
margin: 40px 0;
}
.consultation__inner--btn a {
min-width: 360px;
justify-content: center;
}
p.consultation__inner--bottomtext {
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.08rem;
}
.consultation__inner--btn .primaryBtn {
padding: 16px 64px 20px 40px;
font-size: 1.3rem;
display: flex;
width: fit-content;
font-weight: 500;
letter-spacing: 0.04rem;
text-align: center;
}
.consultation__inner--btn a.secondaryBtn {
background: #000;
color: #FFF;
padding: 16px 64px 20px 40px;
font-size: 1.3rem;
display: flex;
width: fit-content;
font-weight: 500;
letter-spacing: 0.04rem;
text-align: center;
border: solid;
}
.consultation__inner--btn a.secondaryBtn:hover {
background: #fff;
color: #000;
border-color: #707070;
}
.consultation__inner--btn a.secondaryBtn:hover span {
background: #000;
color: #FFF;
}
/* flow */
section#flow {
padding: 110px 0 50px;
}
.flow__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.flow__inner .case__innerHeading {
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 60px;
}
.flow__inner .case__innerHeading h2.case__inner--text {
margin-bottom: 25px;
}
.flow__inner .case__innerHeading p {
text-align: center;
letter-spacing: 0.05rem;
}
.flow__listtop, .flow__listbottom {
background: #E2F6FF;
padding: 30px 35px;
position: relative;
margin-bottom: 35px;
border-radius: 3px;
}
.flow__listtop:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-top: 20px solid #e2f6ff;
}
.flow__listtop ul.resolution__step {
margin-bottom: 0;
}
.flow__listtop ul.resolution__step li {
padding: 20px 0;
}
.flow__listtop ul.resolution__step li p {
color: #000;
border: none;
font-weight: 500;
margin-bottom: 5px;
padding: 0;
}
.flow__listtop .resolution__step--img {
margin: 5px 0 15px;
}
.flow__listtop .resolution__step--img:after, .flow__listbottom .resolution__step--img:after {
content: "";
width: 180px;
height: 180px;
}
.flow__listtop ul.resolution__step li h3, .flow__listbottom ul.resolution__step li h3 {
padding: 0 25px;
font-size: 1rem;
font-weight: 400;
text-align: left;
line-height: 1.6;
}
.flow__listtop ul.resolution__step li h3 a {
text-decoration: underline;
}
p.flow__listtop--heading {
text-align: center;
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0.06rem;
color: #f8951d;
margin-bottom: 35px;
}
.flow__listbottom {
background: #f8951d;
margin-bottom: 0;
}
.flow__listbottom:before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -18px;
border: 18px solid transparent;
border-top: 18px solid #FFF;
}
.flow__listbottom ul.resolution__step {
margin-bottom: 0;
align-items: inherit;
}
.flow__listbottom ul.resolution__step li {
padding: 20px 0;
}
.flow__listbottom ul.resolution__step li p {
color: #f8951d;
border: none;
font-weight: 500;
margin-bottom: 5px;
padding: 0;
}
.flow__listbottom .resolution__step--img {
margin: -10px 0 0px;
}
.flow__listbottom .resolution__step--img:after {
background: #FFEDD7 ;
}
/* plan */
section#plan {
position: relative;
padding: 100px 0 80px;
margin-top: -20px;
}
section#plan:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: url(../img/port.svg) no-repeat;
right: 0;
top: 0;
background-position-x: right;
pointer-events: none;
background-size: contain;
}
section#plan:after {
content: "";
width: 100%;
height: 100%;
background: #d8f3ff;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.plan__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.plan__innerleft {
display: flex;
flex-direction: column;
}
.plan__innerleft .case__innerHeading {
flex-direction: column;
padding-top: 20px;
}
.plan__innerleft .case__innerHeading h2.case__inner--text {
margin-bottom: 25px;
padding-left: 60px;
padding-right: 60px;
}
.plan__innerleft .case__innerHeading p {
text-align: center;
margin-bottom: 35px;
}
.plan__innerleft a.primaryBtn {
padding: 12px 64px 16px 40px;
font-size: 1.3rem;
display: flex;
width: 100%;
justify-content: center;
font-weight: 500;
letter-spacing: 0.04rem;
text-align: center;
margin: 0 auto;
background: transparent;
color: #f8951d;
}
.plan__innerleft a.primaryBtn:hover {
background: #f8951d ;
color: #FFF;
}
.plan__innerright {
width: 52%;
position: relative;
transform: translateY(-20px);
}
p.plan__innerright--text {
margin-bottom: 5px;
}
p.plan__innerright--text span {
padding-top: 0.3em;
background-position: top left -2px;
background-repeat: repeat-x;
background-size: 1.15em 0.3em;
background-image: -webkit-radial-gradient(.15em .15em at center center,orange,orange 100%,transparent);
background-image: radial-gradient(0.15em 0.15em at center center,orange,orange 100%,transparent);
font-size: 1.4rem;
letter-spacing: 0.15rem;
margin-left: 5px;
font-weight: 500;
color: #f8951d;
}
.plan__innerright img {
width: 320px;
}
/* FAQ */
section#faq {
padding: 110px 0 80px;
}
.faq__inner {
width: 100%;
max-width: 820px;
margin: 0 auto;
}
.faq__inner dl {
display: flex;
flex-direction: column;
gap: 25px;
}
.faq__inner--acc {
background: #fff;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 6px 0 rgb(0 0 0 / 11%);
border-radius: 3px;
transition: 0.2s ease-in;
}
.faq__inner--acc:hover {
background: #fcfcfc;
}
.accordion {
display: block;
border: none;
cursor: pointer;
font-size: 1rem;
transition: 0.5s ease-in;
position: relative;
padding: 20px 0 24px 64px;
margin: 0;
}
.accordion:before {
content: "Q";
position: absolute;
left: 15px;
top: 50%;
display: inline-block;
width: 35px;
height: 35px;
line-height: 35px;
vertical-align: middle;
text-align: center;
font-family: Arial, sans-serif;
font-size: 21px;
background: #313131;
color: #fff;
border-radius: 50%;
transform: translateY(-50%);
}
.accordion.active {
margin-bottom: 0;
}
.panel{
max-height:0;
overflow:hidden;
transition: 0.3s ease-out;
}
.panel p {
padding: 15px 20px 10px;
margin: 0 0 15px;
position: relative;
padding-left: 64px;
color: #707070;
font-weight: 300;
line-height: 2;
}
.panel p:before {
content: "A";
position: absolute;
left: 15px;
display: inline-block;
width: 35px;
height: 35px;
line-height: 35px;
vertical-align: middle;
text-align: center;
font-size: 21px;
background: #f8951d;
color: #fff;
border-radius: 50%;
font-weight: 500;
}
.acco{
position:relative;
}
.accordion:after {
content: '＋';
font-size: 1rem;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: #ddd;
border-radius: 9999px;
padding: 0 4px;
font-weight: 900;
color: #FFF;
}
.accordion.active:after {
content: "ー";
background: #f8951d;
}
/* download3 */
section#download3 {
background: #f8951d;
padding: 60px 0;
}
.download3__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
ul.download3__innerhorizon {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 80px;
}
li.download3__innerhorizon--left, li.download3__innerhorizon--right {
width: 40%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
text-align: center;
}
li.download3__innerhorizon--left p, li.download3__innerhorizon--right p {
color: #FFF;
margin-bottom: 15px;
position: relative;
letter-spacing: 0.06rem;
font-weight: 500;
}
li.download3__innerhorizon--left p:before, li.download3__innerhorizon--left p:after, li.download3__innerhorizon--right p:before, li.download3__innerhorizon--right p:after {
display: inline-block;
position: absolute;
top: 50%;
width: 60px;
height: 1px;
border-radius: 5px;
background-color: #FFF;
content: "";
}
li.download3__innerhorizon--left p:before, li.download3__innerhorizon--right p:before {
left: -70px;
-webkit-transform: rotate( 50deg );
transform: rotate( 50deg );
}
li.download3__innerhorizon--left p:after, li.download3__innerhorizon--right p:after {
right: -70px;
-webkit-transform: rotate( -50deg );
transform: rotate( -50deg );
}
li.download3__innerhorizon--left a, li.download3__innerhorizon--right a {
background: transparent;
color: #FFF;
padding: 14px 0 16px 0;
font-size: 1.3rem;
display: flex;
width: 100%;
font-weight: 500;
letter-spacing: 0.04rem;
text-align: center;
border: solid 2px;
justify-content: center;
}
li.download3__innerhorizon--left a span {
color: #f8951d;
transition: 0.3s ease-in-out;
}
li.download3__innerhorizon--right a {
background: #000;
border-color: #000;
}
li.download3__innerhorizon--right a span {
transition: 0.3s ease-in-out;
}
li.download3__innerhorizon--left a:hover {
color: #f8951d;
background: #FFF;
opacity: 1;
}
li.download3__innerhorizon--left a:hover span {
color: #FFF;
background: #f8951d;
}
li.download3__innerhorizon--right a:hover {
opacity: 1;
background: #FFF;
color: #000;
}
li.download3__innerhorizon--right a:hover span {
color: #FFF;
background: #000;
}
/* footer */
footer#footer {
background: #000;
}
.footer__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 40px 0;
}
.footer__innerleft {
color: #FFF;
}
p.footer__innerleft--copy {
margin-bottom: 10px;
font-size: 0.9rem;
}
.footer__innerleft img {
margin-bottom: 8px;
}
p.footer__innerleft--corpname {
font-size: 0.75rem;
font-weight: 300;
}
.footer__innerright {
color: #FFF;
}
.footer__innerright nav {
display: block;
margin-bottom: 25px;
}
ul.footer__innerright--navi {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 40px;
font-size: 0.9rem;
}
ul.footer__innerright--navi li, ul.footer__innerright--navi li a {
position: relative;
}
ul.footer__innerright--navi li a:after {
content: "";
width: 0;
height: 1px;
background: #fff;
position: absolute;
bottom: -5px;
left: 0;
transition: 0.3s ease-in-out;
}
ul.footer__innerright--navi li a:hover {
opacity: 0.8;
}
ul.footer__innerright--navi li a:hover:after {
width: 100%;
}
ul.footer__innerright--navi li:after {
content: "";
width: 1px;
height: 100%;
position: absolute;
right: -20px;
top: 0;
background: #ccc;
transform: rotate(18deg);
}
ul.footer__innerright--navi li:last-child:after {
content: none;
}
.footer__innerright--btn {
display: flex;
justify-content: flex-end;
gap: 20px;
}
p.footer__innerbottom--copyright {
text-align: center;
color: #FFF;
font-size: 0.8rem;
letter-spacing: 0.05rem;
border-top: solid 1px #707070;
padding: 6px 0 10px;
}
/* form */
section#form {
margin-top: 100px;
padding: 80px 0 100px;
}
.form__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.form__innerleft {
padding-top: 25px;
width: 35%;
}
.form__innerleft .case__innerHeading {
flex-direction: column;
gap: 25px;
align-items: baseline;
}
.form__innerleft .case__innerHeading h2.case__inner--text {
margin-bottom: 0;
padding: 0 40px 20px 0;
}
.form__innerleft .case__innerHeading h2.case__inner--text span.headingSub {
left: 45px;
}
ul.form__innerlist--text {
display: flex;
flex-direction: column;
gap: 15px;
border: solid 1px #ddd;
padding: 25px;
border-radius: 3px;
}
ul.form__innerlist--text li {
position: relative;
padding-left: 35px;
}
ul.form__innerlist--text li:before {
content: "";
width: 25px;
height: 20px;
background: url(../img/check.svg)no-repeat;
position: absolute;
left: 0;
background-size: contain;
top: 3px;
}
.form__innerleft--img {
max-width: 450px;
text-align: center;
border: solid 1px #ccc;
padding: 35px 40px;
width: 100%;
border-radius: 3px;
}
.form__innerleft--img img {
filter: drop-shadow(0px 1px 8px #ddd);
}
.form__innerright {
background: #fff;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 15%);
border-radius: 3px;
width: 58%;
padding: 35px 45px;
position: relative;
}
p.form__innerright--text {
margin-bottom: 30px;
}
/* form size */
.form__innerright--form.contactFormRe iframe {
height: 760px;
}
.form__innerright--form iframe {
min-height: 680px;
}
/* thanks */
section#thanks {
margin-top: 100px;
padding: 40px 0 80px;
}
.thanks__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 35px;
}
.thanks__inner--logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
img.thanks__inner--stadagelogo {
width: 200px;
}
.thanks__inner--text {
display: flex;
flex-direction: column;
text-align: center;
gap: 20px;
}
.thanks__inner--text p {
line-height: 2.1;
}
.thanks__inner--link {
display: flex;
}
.thanks__inner--link a {
border: solid 1px #000;
padding: 12px 40px 16px;
border-radius: 3px;
position: relative;
}
.thanks__inner--link a:after {
content: "\E5e1";
font-family: 'Material Icons';
font-weight: 900;
margin-right: 0;
position: relative;
transition: 0.2s ease-in-out;
vertical-align: -2px;
padding-left: 5px;
}
.thanks__inner--link a:hover {
background: #000;
color: #fff;
}
/* 10000shien */
section#ichimanshien {
background: #FFE2BE;
padding: 80px 0 50px;
}
.ichimanshien__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 15%);
border-radius: 3px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 50px;
}
.ichimanshien__inner--left {
width: 55%;
padding: 50px 0 50px 60px;
display: flex;
flex-direction: column;
gap: 20px;
}
.ichimanshien__inner--left h2 {
line-height: 1.5;
}
.ichimanshien__inner--left p {
line-height: 2.1;
}
.ichimanshien__inner--left a.primaryBtn {
font-size: 1.2rem;
width: 460px;
display: block;
text-align: center;
background: #FFF;
color: #F8951D;
margin-bottom: 20px;
margin-top: 15px;
}
.ichimanshien__inner--left a.primaryBtn:hover {
background: #F8951D;
color: #FFF;
opacity: 1;
}
.ichimanshien__inner--right {
width: 45%;
display: flex;
justify-content: flex-end;
}
/* scrollin */
.fade-in {
opacity: 0;
transition-duration: 500ms;
transition-property: opacity, transform;
}
.fade-in-up {
transform: translate(0, 50px);
}
.fade-in-down {
transform: translate(0, -50px);
}
.fade-in-left {
transform: translate(-50px, 0);
}
.fade-in-right {
transform: translate(50px, 0);
}
.scroll-in {
opacity: 1;
transform: translate(0, 0);
}
/* contact modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background: #FFF;
overflow-y: auto;
padding: 20px 25px;
width: 90%;
max-width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 560px;
animation: show 0.6s linear 0s;
filter: drop-shadow(0px 2px 6px #777);
border-radius: 3px;
display: flex;
flex-direction: column;
gap: 20px;
}
.modal-content p {
margin: 0;
}
.modal--btn__block {
display: flex;
justify-content: end;
gap: 15px;
}
.modal--btn__block button {
padding: 4px 25px;
border: solid 1px #ddd;
border-radius: 3px;
font-size: 1rem;
}
.modal--btn__block button:hover {
opacity: 0.6;
}
button#ok {
background: #f8951d;
color: #fff;
}
/* 20231030 */
p.forCorp {
color: #707070;
font-size: 0.8rem;
}
/* 事例カスタム 20240111 */
.jireiCustom__inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.jireiCustom__inner--left {
width: 380px;
display: flex;
flex-direction: column;
gap: 20px;
}
.jireiCustom__inner--leftImg {
display: flex;
justify-content: center;
}
.jireiCustom__inner--leftImg img {
max-height: 150px;
width: 100%;
object-fit: contain;
max-width: 240px;
}
ul.case__innerList li .jireiCustom__inner--left h3 {
font-size: 1rem;
color: #313131;
font-weight: 600;
text-align: center;
margin: 0;
}
.jireiCustom__inner--left dl {
border: solid 1px #ddd;
padding: 25px 35px;
border-radius: 5px;
display: flex;
flex-direction: column;
gap: 15px;
}
.jireiCustom__inner--leftListrow {
display: flex;
justify-content: flex-start;
gap: 20px;
position: relative;
font-size: 0.9rem;
color: #313131;
}
.jireiCustom__inner--leftListrow dt {
position: relative;
min-width: 80px;
}
.jireiCustom__inner--leftListrow dd {
display: block;
}
.jireiCustom__inner--right {
width: 660px;
display: flex;
flex-direction: column;
gap: 30px;
}
.jireiCustom__inner--right h4 {
font-size: 2.1rem;
font-weight: 500;
}
.jireiCustom__inner--rightKadai {
display: flex;
flex-direction: column;
gap: 10px;
}
ul.jireiCustom__inner--rightKadaiList {
list-style: disc;
padding-left: 25px;
display: flex;
flex-direction: column;
gap: 5px;
}
.jireiCustom__inner--rightKadai ul.jireiCustom__inner--rightKadaiList li {
box-shadow: none;
padding: 0;
width: 100%;
line-height: 1.95;
}
.jireiCustom__inner--rightKadai ul.jireiCustom__inner--rightKadaiList li span {
font-weight: 600;
color: #f8951d;
}
p.midashi {
display: inline-block;
background: #ddd;
padding: 3px 25px 4px;
font-size: 1.1rem;
border-radius: 9999px;
width: fit-content;
letter-spacing: 1.8px;
}
p.midashi.orange {
background: #f8951d;
color: #fff;
}
ul.jireiCustom__inner--rightkaiketsuList {
display: flex;
flex-direction: column;
gap: 10px;
}
ul.jireiCustom__inner--rightkaiketsuList li {
width: 100%;
padding: 0;
box-shadow: none;
padding: 0 30px;
line-height: 1.95;
position: relative;
}
ul.jireiCustom__inner--rightkaiketsuList li:before {
content: "\E876";
font-family: 'Material Icons';
font-weight: 900;
margin-right: 0;
position: absolute;
left: 0;
top: -4px;
transition: 0.2s ease-in-out;
color: #f8951d;
font-size: 1.3rem;
}
.jireiCustom__inner--rightDounyuugo {
display: flex;
flex-direction: column;
gap: 10px;
}
/* food */
.example__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 120px 0 40px;
display: flex;
flex-direction: column;
gap: 50px;
}
.example__inner--imgBlock {
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
}
.example__inner--imgBlockLeft {
display: inline-block;
width: 65%;
}
.example__inner--imgBlockLeft img {
border-radius: 6px;
}
.example__inner--imgBlockRight {
display: flex;
position: absolute;
right: 0;
background: #fff;
padding: 35px 45px;
border-radius: 6px;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 15%);
width: 55%;
flex-direction: column;
align-items: center;
gap: 15px;
}
.example__inner--imgBlockRight h3 {
font-size: 1.7rem;
}
.example__inner--imgBlockRightInner {
background: #f9f9f9;
width: 100%;
display: flex;
justify-content: space-around;
gap: 40px;
align-items: flex-start;
padding: 15px 30px;
}
ul.foodList {
display: flex;
flex-direction: column;
}
.example__inner--imgBlockRightInner ul.listChild li, li.listParent {
font-size: 1.2rem;
font-weight: 500;
position: relative;
padding: 8px 0;
}
li.listParent {
padding-left: 25px;
}
li.listParent:before {
content: "\e876";
font-family: 'Material Icons';
font-weight: 900;
margin-right: 0;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: 0.2s ease-in-out;
color: #f8951d;
}
.example__inner--imgBlockRightInner ul.listChild li {
padding-left: 45px;
}
ul.listChild li:before {
content: "\e5cc";
font-family: 'Material Icons';
font-weight: 900;
margin-right: 0;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
transition: 0.2s ease-in-out;
color: #f8951d;
opacity: 0.5;
}
.foodArea {
display: flex;
border: dotted 2px #ddd;
border-radius: 6px;
padding: 30px 45px;
flex-direction: column;
gap: 15px;
}
button#foodAllList {
cursor: pointer;
padding-right: 40px;
transition: 0.3s ease-in-out;
}
button#foodAllList:after {
content: "\e89e";
font-size: 1.2rem;
opacity: 0.4;
top: 48%;
transition: none;
}
button#foodAllList:hover:after {
right: 15px;
}
/* food modal */
.modal-content.foodMoadl {
padding: 0;
display: flex;
flex-direction: column;
max-width: 900px;
}
.foodmodalHeader {
display: flex;
justify-content: center;
padding: 20px 0;
border-bottom: solid 1px #ddd;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
span.modalClose {
position: absolute;
right: 0px;
top: 50%;
font-size: 1.6rem;
padding: 10px;
cursor: pointer;
transform: translateY(-50%);
}
span.modalClose:hover {
opacity: 0.6;
}
.foodmodalList {
display: flex;
justify-content: space-around;
gap: 30px;
padding: 10px 45px;
}
.foodmodalList ul {
display: flex;
flex-direction: column;
gap: 12px;
list-style: disc;
width: 25%;
}
.foodmodalList--footer {
display: block;
padding: 0 30px 25px;
}
.foodmodalList--footer p {
color: #313131;
text-align: center;
border-radius: 6px;
font-size: 1.2rem;
font-weight: 500;
}
.workcase__inner {
width: 100%;
margin: 0 auto;
padding: 120px 0 120px;
}
ul.workcase__sample--card {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul.workcase__sample--card li {
width: 45%;
background: #fff;
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
position: relative;
}
ul.workcase__sample--card li.wide_sample {
width: 100%;
max-width: 800px;
margin: 0 auto;
box-shadow: none;
}
p.workcase__sample--cardDate {
display: inline-block;
position: absolute;
left: 0;
top: 0;
background: #f8951d;
color: #fff;
font-size: 0.9rem;
padding: 2px 14px 3px;
}
.workcase__sample--cardBottom {
padding: 20px 30px;
}
.workcase__sample--cardBottom h3 {
font-size: 1.2rem;
line-height: 1.7;
}
section#workcase p.itihojokingaku__bottom--text {
background: #f9f9f9;
padding: 15px 30px 20px;
border-radius: 6px;
margin-top: 30px;
}
span.staff__inner--subname {
color: #707070;
font-size: 0.9rem;
}
/* タブの表示・非表示 */
[data-tab-content]{
display: none
}
[data-tab-content].active{
display: block;
}
/* section同士の余白 */
section.someTabs {
padding-left: 35px;
padding-right: 35px;
padding-top: 10px;
}
section.someTabs:last-child {
margin: 0;
padding: 0;
border: none;
}
/* タブの中身のpタグの余白 */
.tabs__content p {
margin-bottom: 10px;
}
.tabs__content p:last-child {
margin-bottom: 0;
}
/* タブの見出し */
nav.tabs__nav {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
padding: 0;
margin: 0 0 1.5rem;
border: none;
gap: 20px;
}
a.tabs__item {
display: inline-block;
width: calc(100%/5 - 20px);
text-align: center;
transition: all 0.2s ease;
padding: 0 0 3px;
text-decoration: none;
background: #FFF;
box-shadow: 0 7px 34px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);
line-height: 50px;
position: relative;
border-radius: 5px;
}
a.tabs__item.active {
background: #f8951d;
color: #FFF;
}
a.tabs__item.active:after {
content: "";
position: absolute;
bottom: -22px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #f8951d;
z-index: 2;
}
/* 中のリスト */
dl.tabs__content--list {
border: solid 1px #ddd;
display: flex;
flex-direction: column;
padding: 30px 35px;
border-radius: 5px;
gap: 20px;
min-height: 260px;
}
.tabs__content--listInner {
display: flex;
justify-content: flex-start;
gap: 20px;
align-items: center;
}
.tabs__content--listInner dt {
background: #FFF2DE;
color: #f8951d;
width: 140px;
display: flex;
justify-content: center;
padding: 10px 0 12px;
border-radius: 5px;
letter-spacing: 2px;
}
.tabs__content--listInner dd {
letter-spacing: 3px;
width: calc(100% - 140px - 20px);
color: #313131;
}
.tabs__content--listInner.oversize {
align-items: center;
gap: 10px;
}
.tabs__content--listInner.oversize dt {
padding-left: 12px;
padding-right: 12px;
width: fit-content;
}
.tabs__content--listInner.oversize dd {
width: 100%;
}
/* 表示のアニメーション */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
}
}
.tabs__content.active {
animation: fadeIn 0.7s ease 0s 1 normal;
}
/* 20240130 CTA */
section#jireiDownload {
background: linear-gradient(90deg, #F8951D 0%, #F8951D 50.5%, #DD7900 100%);
position: relative;
}
section#jireiDownload:after {
content: "";
width: 70%;
height: 100%;
background: url(https://boueki.standage.co.jp/wp-content/uploads/2024/01/book_bg-2.png) no-repeat;
position: absolute;
top: 0;
right: 0;
background-size: cover;
pointer-events: none;
}
.jireiDownload__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 85px 0;
}
.jireiDownload__inner--left {
position: relative;
}
.jireiDownload__inner--leftMain {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
position: relative;
}
.jireiDownload__inner--leftMain p {
font-size: 0.9rem;
font-weight: 500;
color: #fff;
letter-spacing: 1.5px;
}
.jireiDownload__inner--leftMain h2 {
font-weight: 600;
font-size: 2.7rem;
line-height: 1.3;
color: #fff;
letter-spacing: 1.5px;
margin-bottom: 12px;
}
.jireiDownload__inner--leftMain .secondaryBtn {
background: #000;
color: #FFF;
padding: 16px 64px 20px 40px;
font-size: 1.3rem;
display: flex;
width: 100%;
font-weight: 500;
letter-spacing: 0.04rem;
text-align: center;
justify-content: center;
}
.jireiDownload__inner--leftMain .secondaryBtn:hover {
background: #fff;
color: #313131;
}
.jireiDownload__inner--leftMain .secondaryBtn:hover span {
background: #000;
color: #fff;
}
a.jireiDownload__absolute {
position: absolute;
bottom: -48px;
left: 50%;
transform: translateX(-50%);
color: #fff;
text-decoration: underline;
letter-spacing: 0.8px;
font-weight: 500;
}
a.jireiDownload__absolute:hover {
opacity: 0.7;
}
/* scroll head */
header#header.resize a.scrollHead {
width: 300px;
height: 100%;
}
/* 20240828 */
img.ithojo__innerLeft--headboxLogo {
max-height: 35px;
transform: translateY(3px);
}
/* 20241118 */
section#knowprice {
position: relative;
}
section#knowprice:before {
content: "";
width: calc(100% - 80px);
height: 100%;
position: absolute;
background: #f8951d;
right: 0;
top: 0;
pointer-events: none;
z-index: 2;
}
.knowprice__inner {
width: 100%;
max-width: 1200px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
position: relative;
z-index: 2;
padding: 40px 0;
}
.knowprice__inner--left {
display: flex;
flex-direction: column;
gap: 15px;
padding-left: 60px;
}
.knowprice__inner--left p {
color: #fff;
}
.knowprice__inner--left h2 {
color: #fff;
line-height: 1.53;
}
.knowprice__inner--left a.secondaryBtn {
background: #000;
color: #fff;
width: 350px;
display: flex;
justify-content: center;
padding: 15px 0 17px;
margin-top: 10px;
}
.resolution__heading h2 img {
padding: 0 40px;
}
section#solutions {
padding-top: 40px;
}
.solutions__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
background: #f8951d;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
padding: 60px 0;
border-radius: 6px;
}
.solutions__inner:after {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-top: 20px solid #FFF;
}
.solutions__inner h2 {
color: #fff;
line-height: 1.73;
font-size: 2rem;
}
.solutions__inner--img {
position: absolute;
bottom: -170px;
right: -40px;
width: 300px;
height: 270px;
}
/* three download */
section#threedownload {
background: #f8951d;
position: relative;
}
.threedownload__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 40px 0;
gap: 30px;
}
.threedownload__inner--right {
display: flex;
flex-direction: column;
gap: 18px;
}
ul.threedownload__inner--rightCheck {
display: flex;
flex-direction: column;
gap: 12px;
}
ul.threedownload__inner--rightCheck li {
padding-left: 34px;
font-size: 1.5rem;
letter-spacing: 1.5px;
font-weight: 500;
color: #fff;
position: relative;
}
ul.threedownload__inner--rightCheck li:before {
content: "\E5ca";
font-family: 'Material Icons';
font-weight: 900;
margin-right: 0;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: 0.2s ease-in-out;
color: #ffff00;
}
.threedownload__inner--right p {
color: #fff;
}
.threedownload__inner a.secondaryBtn {
background: #000;
color: #fff;
width: 350px;
display: flex;
justify-content: center;
padding: 15px 0 17px;
margin-top: 10px;
font-size: 1.1rem;
font-weight: 500;
}
.threedownload__inner a.secondaryBtn:hover {
opacity: 0.8;
}
.workcase__inner .case__innerHeading {
flex-direction: column;
}
@media screen and (min-width: 1500px) {
/* (1500~〜大きめ) */
.hero__inner {
max-width: 1200px;
}
.herounber__innerleft img {
padding-left: 0;
}
}
@media only screen and (min-width: 767px) and (max-width: 1280px) {
/* （1280〜1000まで） */
section#hero:after {
width: 100%;
border-radius: 0;
}
.hero__inner {
padding-left: 40px;
}
section#herounder:before {
width: 100%;
}
.herounder__inner {
padding-left: 40px;
padding-right: 40px;
}
.herounber__innerleft img {
padding-left: 0;
}
.herounber__innerleft--btn a.primaryBtn {
display: block;
}
.alliance__inner {
padding-left: 40px;
padding-right: 40px;
}
.resolution__inner {
padding-left: 40px;
padding-right: 40px;
}
.ithojo__inner {
padding-left: 40px;
padding-right: 40px;
}
section#itihojokingaku {
padding-left: 40px;
padding-right: 40px;
}
.case__inner {
padding-left: 40px;
padding-right: 40px;
}
ul.case__innerList {
gap: 30px;
}
.flow__listtop ul.resolution__step {
align-items: inherit;
}
.footer__inner {
padding-left: 40px;
padding-right: 40px;
}
.form__inner {
padding-left: 4%;
padding-right: 4%;
}
.form__innerleft {
width: 38%;
}
section#knowprice:before {
width: 100%;
}
.knowprice__inner--left {
padding-left: 0;
}
.knowprice__inner {
padding-left: 2%;
padding-right: 2%;
}
}
@media screen and (max-width: 1100px) {
/* （ここに1200px以下のスタイルを記述） */
.jireiDownload__inner {
padding-left: 2%;
padding-right: 2%;
}
section#knowprice:before {
width: 100%;
}
.knowprice__inner--left {
padding-left: 0;
}
.knowprice__inner {
padding-left: 2%;
padding-right: 2%;
flex-direction: column-reverse;
align-items: center;
text-align: center;
}
.knowprice__inner--left a.secondaryBtn {
margin: 20px auto 10px;
}
.knowprice__inner--left h2 br {
display: none;
}
.threedownload__inner {
padding-left: 4%;
padding-right: 4%;
}
}
@media screen and (max-width: 1000px) {
/* （ここに1000以下スタイルを記述） */
.jireiCustom__inner {
display: flex;
flex-direction: column;
gap: 30px;
}
.jireiCustom__inner--left {
width: 100%;
}
.jireiCustom__inner--right {
width: 100%;
}
.jireiCustom__inner--leftListrow {
flex-direction: column;
gap: 0;
}
.jireiCustom__inner--left dl {
padding: 10px 15px;
}
ul.case__innerList li .jireiCustom__inner--left h3 {
font-size: 1.3rem;
}
.jireiCustom__inner--right h4 {
font-size: 1.7rem;
}
/* 食品 */
nav.tabs__nav {
gap: 5px;
}
a.tabs__item {
width: calc(100%/5 - 5px);
}
.threedownload__inner {
flex-direction: column;
gap: 0;
}
.threedownload__inner--right {
align-items: center;
}
}
@media only screen and (min-width: 767px) and (max-width: 1000px) {
/* (1000から767まで) */
.header__inner {
padding-left: 2%;
padding-right: 2%;
}
.header__inner--btn {
gap: 10px;
}
.header__logoinner--stadageLogo {
display: none;
}
section#hero:before {
width: 600px;
background-position-y: bottom;
transform: none;
}
section#hero:after {
width: 100%;
border-radius: 0;
}
.hero__inner {
padding-left: 4%;
padding-right: 4%;
}
.herounder__inner {
padding-top: 40px;
padding-bottom: 40px;
flex-direction: column;
}
.hero__inner--left h1 img {
width: 500px;
}
.herounber__innerleft img {
transform: none;
}
.trouble__inner ul li {
width: 170px;
height: 170px;
font-size: 1rem;
line-height: 1.5;
}
.alliance__inner--Left {
width: 35%;
}
.alliance__inner--Right {
width: 65%;
}
.alliance__inner--Right ul li img {
width: 125px;
}
.resolution__step--img:after {
width: 150px;
height: 150px;
}
section#download1 {
overflow-x: clip;
}
.download1__inner {
padding-left: 4%;
padding-right: 4%;
}
.download1__innerLeft {
padding-left: 0;
}
.download1__innerRight {
right: -70px;
bottom: 0;
}
.download1__innerRight img {
width: 500px;
}
.itihojokingaku__inner {
gap: 20px;
}
.itihojokingaku__inner--sideblock:before {
width: 250px;
height: 250px;
}
.itihojokingaku__inner--sideblock {
width: 210px;
}
.itihojokingaku__inner--middleblock {
width: 310px;
}
ul.case__innerList li {
width: 48%;
}
.worries__inner {
padding-left: 4%;
padding-right: 4%;
}
.plan__inner {
padding-left: 4%;
padding-right: 4%;
}
.plan__innerleft {
width: 42%;
}
section#plan:before {
height: 400px;
top: auto;
bottom: 0;
}
.footer__inner {
gap: 30px;
}
.form__innerright {
padding: 15px 20px;
}
}
@media screen and (max-width: 767px) {
/* （モバイル） */
.pcView {display:none;}
.spView {display:block;}
h2.case__inner--text {
font-size: 1.6rem;
}
/* header */
.header__inner {
padding: 0;
height: 50px;
display: flex;
justify-content: center;
}
.header__logoinner {
margin-top: 0;
gap: 2px;
}
img.header__logoinner--logo {
width: 160px;
transform: translateY(5px);
}
.header__logoinner--stadageLogo {
transform: translateY(0);
}
p.header__logoinner--stadageLogoCopy {
display: none;
}
p.header__logoinner--stadageLogoBy {
transform: translateY(7px);
}
.header__logoinner--stadageLogoInner {
transform: translateY(12px);
}
.header__inner--btn {
display: none;
}
/* header resize */
header#header.resize, header#header.resize .header__inner {
height: 40px;
justify-content: flex-start;
}
header#header.resize img.header__logoinner--logo {
width: 110px;
transform: translateY(2px);
}
header#header.resize .header__inner {
padding-left: 3%;
padding-right: 0;
justify-content: space-between;
}
header#header.resize .header__inner--btn {
display: flex;
gap: 0;
}
header#header.resize .header__inner .header__inner--btn a {
padding: 10px 10px 11px;
font-size: 0.8rem;
border-radius: 0;
border: none;
}
header#header.resize .header__inner .header__inner--btn a:after {
content: none;
}
header#header.resize .header__inner .header__inner--btn a.secondaryBtn {
background: #000;
color: #fff;
}
/* modal */
.modal-content {
max-height: 500px;
}
.modal-container iframe {
height: 460px;
}
/* HERO */
section#hero {
margin-top: 60px;
height: 690px;
}
section#hero:before {
background-position-y: bottom;
transform: scale(1.2) translateY(-40px);
pointer-events: none;
}
section#hero:after {
width: 100%;
border-radius: 0;
}
.hero__inner {
padding-left: 4%;
padding-right: 4%;
}
.hero__inner--left {
padding-top: 20px;
}
.hero__inner--left h1 {
margin-bottom: 20px;
}
.hero__inner--left h1 img {
padding: 0 25px;
}
.hero__inner--left p {
line-height: 1.8;
font-size: 0.95rem;
text-align: center;
margin-bottom: 25px;
}
.hero__inner--leftLink {
display: flex;
justify-content: center;
}
.hero__inner--leftLink .secondaryBtn {
padding: 11px 0 13px;
width: 95%;
display: flex;
justify-content: center;
font-size: 1.1rem;
}
.hero__innerabsolute {
bottom: 45px;
right: 50%;
transform: translateX(50%);
position: absolute;
}
img.hero__innerabsolute--king {
width: 40px;
margin-bottom: -10px;
}
.hero__innerCircle {
width: 150px;
height: 150px;
}
.hero__innerCircle--top p {
height: 72px;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}
span.hero__innerCircle--topCopy {
font-size: 0.6rem;
}
.hero__innerCircle--bottom {
padding: 4px 0;
}
.hero__innerCircle--bottom img {
width: 80px;
padding-top: 6px;
}
.hero__innerCircle--bottom p {
font-size: 0.8rem;
}
.hero__innerabsolute--vertical {
gap: 15px;
}
/* hero under */
section#herounder:before {
width: 100%;
}
.herounder__inner {
padding-left: 6%;
padding-right: 6%;
flex-wrap: wrap;
}
.herounber__innerleft {
gap: 5px;
flex-direction: column;
margin-bottom:30px;
}
.herounber__innerleft img {
padding-left: 4%;
width: 100%;
padding-right: 4%;
}
.herounber__innerleft--text h2 {
font-size: 1.4rem;
}
.herounber__innerleft--text p br {
display: none;
}
.herounber__innerleft--btn {
margin-top: 0;
width: inherit;
padding-bottom: 35px;
}
.herounber__innerleft--btn a.primaryBtn {
width: 100%;
display: flex;
justify-content: center;
}
/* alliance */
.alliance__inner {
padding-left: 4%;
padding-right: 4%;
}
.alliance__inner--Left {
text-align: center;
width: 100%;
margin-bottom: 20px;
}
.alliance__inner--Right {
width: 100%;
}
.alliance__inner--Right ul {
justify-content: center;
}
/* trouble */
section#trouble {
margin: 30px 0px;
}
h2.trouble__head--heading {
font-size: 1.6rem;
margin-bottom: 25px;
}
h2.trouble__head--heading span {
font-size: 2.4rem;
}
.trouble__inner ul {
justify-content: center;
gap: 10px;
}
.trouble__inner ul li {
width: 160px;
height: 160px;
font-size: 0.9rem;
padding: 0 15px;
}
.trouble__inner ul li br {
display: none;
}
/* resolution */
.resolution__inner {
padding-left: 4%;
padding-right: 4%;
padding-top: 80px;
}
.resolution__heading {
width: 100%;
margin-bottom: 55px;
}
p.resolution__heading--title {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: #e4f7ff;
}
.resolution__heading h2 {
padding: 0 8%;
}
.resolution__heading h2 span {
transform: none;
margin-top: 10px;
}
p.resolution__heading--bottom {
white-space: break-spaces;
background: transparent;
position: relative;
text-align: left;
}
p.resolution__heading--bottom br {
display: none;
}
ul.resolution__step {
gap: 25px;
}
ul.resolution__step li {
width: calc(100% - 4%);
margin: 0 auto;
}
ul.resolution__step li:before {
content: "";
position: absolute;
bottom: -34px;
left: 50%;
margin-left: -18px;
border: 18px solid transparent;
border-top: 18px solid #ffffff;
top: auto;
}
p.resolution__bottom--Text {
text-align: left;
font-size: 1.3rem;
line-height: 1.6;
}
p.resolution__bottom--Text br {
display: none;
}
/* download */
.download1__inner {
padding-left: 4%;
padding-right: 4%;
overflow: hidden;
gap: 40px;
}
.download1__innerLeft {
padding: 0;
}
.hero__inner--leftLink {
width: 100%;
}
.hero__inner--leftLink .secondaryBtn span {
display: none;
}
.download1__innerRight {
position: relative;
right: auto;
bottom: 0;
}
.download1__innerRight img {
transform: scale(1.2) translateX(25px);
}
/* ithojo */
section#ithojo {
overflow: hidden;
}
.ithojo__absLeft {
width: 120px;
height: 100px;
}
.ithojo__abRight {
width: 80px;
height: 50px;
}
.ithojo__inner {
padding-left: 4%;
padding-right: 4%;
flex-wrap: wrap;
gap: 30px 0;
padding-top: 35px;
padding-bottom: 30px;
}
.ithojo__innerLeft {
order: 2;
}
p.ithojo__innerLeft--bodycopy br {
display: none;
}
.ithojo__innerLeft a.primaryBtn {
width: 100%;
}
.ithojo__innerRight img {
transform: scale(1.1);
}
.ithojo__innerLeft h2 {
font-size: 1.6rem;
}
.ithojo__innerLeft h2 br {
display: none;
}
/* ithojokingaku */
section#itihojokingaku {
padding-top: 20px;
padding-left: 4%;
padding-right: 4%;
}
.itihojokingaku__inner--sideblock:before {
width: 270px;
height: 270px;
}
img.ithojoArrow {
object-fit: cover;
width: 70px;
height: 30px;
object-position: right;
transform: rotate(90deg);
}
p.itihojokingaku__inner--middleBottom {
margin-bottom: 40px;
}
p.itihojokingaku__bottom--text {
font-size: 1.2rem;
line-height: 1.6;
text-align: left;
}
p.itihojokingaku__bottom--text br {
display: none;
}
.itihojoBtn__inner {
padding-left: 6%;
padding-right: 6%;
}
.itihojoBtn__inner h2 {
font-size: 1.4rem;
}
p.itihojoBtn__inner--text {
text-align: left;
}
p.itihojoBtn__inner--text br {
display: none;
}
.itihojoBtn__inner .primaryBtn {
width: 100%;
font-size: 1.2rem;
padding-bottom: 13px;
}
.ithojo__innerLeft--headbox {
padding-left: 0;
padding-right: 0;
width: inherit;
}
/* case */
section#case {
padding-top: 55px;
}
span.headingSub {
font-size: 2.2rem;
top: -15px;
}
ul.case__innerList {
gap: 30px;
}
ul.case__innerList li {
width: 100%;
padding: 15px 20px 25px 28px;
}
ul.jireiCustom__inner--rightkaiketsuList li:before {
top: 11px;
}
/* download2 */
.download1__inner.download2 {
gap: 20px;
}
.download1__inner.download2 .download1__innerLeft {
width: 100%;
}
.download1__innerLeft .hero__inner--leftLink {
flex-direction: column;
display: flex;
width: 100%;
}
.download1__inner.download2 .download1__innerLeft {
order: 2;
}
.download2 a.secondaryBtn {
width: 100%;
}
.download2 a.primaryBtn {
padding: 11px 0 13px;
font-size: 1.1rem;
width: 100%;
display: flex;
justify-content: center;
}
/* worries */
.worries__inner {
padding: 60px 4% 60px;
}
.worries__inner .resolution__heading {
margin-bottom: 50px;
}
.worries__inner p.resolution__heading--title {
left: 50%;
}
.worries__inner p.resolution__heading--bottom {
background: transparent;
}
ul.worries__list li {
flex-direction: column;
}
.worries__list--left, .worries__list--Right {
width: 100%;
padding: 25px 30px;
}
.worries__list--left {
padding-bottom: 180px;
}
.worries__list--left h3 {
font-size: 1.4rem;
line-height: 1.5;
}
.worries__list--left h3 br {
display: none;
}
.worries__list--Right:before {
content: none;
}
.worries__list--leftimg {
right: 50%;
transform: translateX(50%);
}
.worries__list--left:before {
right: 50%;
transform: translateX(50%);
}
/* consultation */
.consultation__inner {
padding: 120px 4% 160px;
}
h2.consultation__inner--heading {
flex-direction: column;
align-items: center;
}
h2.consultation__inner--heading img {
width: 100%;
padding: 0 15px;
margin-bottom: 15px;
transform: none;
}
.consultation__inner--btn {
gap: 15px;
margin: 20px 0;
}
.consultation__inner--btn a {
padding: 11px 0 13px !important;
}
/* flow */
section#flow {
padding-top: 55px;
padding-bottom: 0;
}
.flow__inner .case__innerHeading h2.case__inner--text {
padding: 0 20px 20px;
}
.flow__inner .case__innerHeading {
margin-bottom: 25px;
}
.flow__inner .case__innerHeading p {
text-align: left;
padding-left: 4%;
padding-right: 4%;
}
p.flow__listtop--heading {
padding-left: 4%;
padding-right: 4%;
}
.flow__listtop, .flow__listbottom {
padding: 30px 20px;
}
/* plan */
section#plan {
padding: 55px 0;
}
section#plan:before {
top: auto;
bottom: 0;
background-position-y: bottom;
}
section#plan:after {
height: 100%;
}
.plan__inner {
padding-left: 4%;
padding-right: 4%;
gap: 40px;
padding-bottom: 240px;
}
.plan__innerleft .case__innerHeading h2.case__inner--text {
padding-left: 0;
padding-right: 0;
}
.plan__innerleft a.primaryBtn {
padding: 11px 0 13px;
}
.plan__innerleft, .plan__innerright {
width: 100%;
}
.plan__innerright {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p.plan__innerright--text {
font-size: 0.8rem;
}
/* faq */
section#faq {
padding: 55px 0;
}
section#faq h2.case__inner--text {
padding: 0 20px 20px;
margin-bottom: 30px;
}
.faq__inner {
padding-left: 4%;
padding-right: 4%;
}
.accordion {
padding-right: 40px;
}
.accordion:before {
top: 15px;
transform: none;
}
/* download3 */
section#download3 {
padding: 40px 0;
}
.download3__inner {
padding-left: 4%;
padding-right: 4%;
}
ul.download3__innerhorizon {
flex-direction: column;
gap: 35px;
}
li.download3__innerhorizon--left, li.download3__innerhorizon--right {
width: 100%;
}
li.download3__innerhorizon--left p, li.download3__innerhorizon--right p {
font-size: 0.8rem;
}
li.download3__innerhorizon--left p:before, li.download3__innerhorizon--left p:after, li.download3__innerhorizon--right p:before, li.download3__innerhorizon--right p:after {
width: 40px;
}
li.download3__innerhorizon--left p:before, li.download3__innerhorizon--right p:before {
left: -50px;
}
li.download3__innerhorizon--left p:after, li.download3__innerhorizon--right p:after {
right: -50px;
}
li.download3__innerhorizon--left a, li.download3__innerhorizon--right a {
font-size: 1.1rem;
padding-top: 11px;
padding-bottom: 12px;
}
/* footer */
.footer__inner {
padding-left: 4%;
padding-right: 4%;
gap: 40px;
padding-bottom: 25px;
}
.footer__innerleft {
order: 2;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 20px;
}
ul.footer__innerright--navi {
flex-direction: row;
gap: 10px 40px;
flex-wrap: wrap;
justify-content: center;
}
ul.footer__innerright--navi li:after {
background: #707070;
}
ul.footer__innerright--navi li:nth-child(3):after, ul.footer__innerright--navi li:nth-child(5):after, ul.footer__innerright--navi li:last-child:after {
content: none;
}
.footer__innerright--btn {
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
}
.footer__innerright--btn a {
text-align: center;
padding-top: 9px;
padding-bottom: 11px;
}
p.footer__innerbottom--copyright {
padding: 12px 0 17px;
}
/* form */
section#form {
padding-top: 35px;
margin-top: 60px;
padding-bottom: 60px;
}
.form__inner {
flex-wrap: wrap;
padding-left: 4%;
padding-right: 4%;
gap: 30px;
}
.form__innerleft, .form__innerright {
width: 100%;
}
.case__innerHeading p br {
display: none;
}
.form__innerright {
padding: 30px 15px 15px;
}
.form__innerright--form iframe {
height: 820px;
}
.form__innerright--form.contactFormRe iframe {
height: 960px;
}
/* thanks */
section#thanks {
margin-top: 60px;
}
.thanks__inner {
padding-left: 6%;
padding-right: 6%;
gap: 20px;
}
.thanks__inner--logo {
gap: 20px;
}
.thanks__inner--logo h1 {
padding: 0 20px;
}
img.thanks__inner--stadagelogo {
width: 140px;
}
.thanks__inner--text {
gap: 10px;
}
.thanks__inner--text p {
text-align: left;
}
.thanks__inner--text p br {
display: none;
}
/* ichimansya */
section#ichimanshien {
padding: 60px 4%;
}
.ichimanshien__inner {
flex-direction: column-reverse;
}
.ichimanshien__inner--left, .ichimanshien__inner--right {
width: 100%;
}
.ichimanshien__inner--left {
padding: 25px 30px 20px;
}
.ichimanshien__inner--left p br {
display: none;
}
.ichimanshien__inner--left a.primaryBtn {
width: 100%;
}
/* example */
.example__inner {
padding-left: 4%;
padding-right: 4%;
}
.example__inner--imgBlock {
flex-direction: column;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 15%);
}
.example__inner--imgBlockLeft {
width: 100%;
}
.example__inner--imgBlockLeft img {
border-radius: 6px 6px 0 0;
}
.example__inner--imgBlockRight {
width: 100%;
position: relative;
margin-top: -7px;
border-radius: 0 0 6px 6px;
padding: 16px 25px 30px;
box-shadow: none;
}
.example__inner--imgBlockRightInner {
flex-wrap: wrap;
gap: 0;
}
ul.foodList {
width: 100%;
}
.modal-content.foodMoadl {
max-height: 70%;
}
.foodmodalList {
flex-wrap: wrap;
gap: 0;
}
.foodmodalList ul {
width: 100%;
}
.foodmodalList--footer p {
padding-left: 15px;
padding-right: 15px;
}
.workcase__inner {
padding-left: 4%;
padding-right: 4%;
padding-top: 80px;
}
.workcase__inner h2.case__inner--text {
padding-left: 20px;
padding-right: 10px;
}
ul.workcase__sample--card {
flex-direction: column;
gap: 30px;
}
ul.workcase__sample--card li {
width: 100%;
}
/* 食品 */
nav.tabs__nav {
flex-wrap: wrap;
gap: 10px;
}
a.tabs__item {
width: 100%;
}
a.tabs__item.active:after {
content: none;
}
dl.tabs__content--list {
gap: 30px;
}
.tabs__content--listInner {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.tabs__content--listInner dd {
width: 100%;
line-height: 1.83;
}
/* 20240130 CTA */
section#jireiDownload {
background: linear-gradient(0deg, #F8951D 0%, #F8951D 50.5%, #DD7900 100%);
}
section#jireiDownload:after {
width: 100%;
}
section#jireiDownload:after {
content: "";
width: 90%;
height: 50%;
background: url(https://boueki.standage.co.jp/wp-content/uploads/2024/01/book_bg-2.png) no-repeat;
position: absolute;
top: 0;
right: 0;
background-size: cover;
pointer-events: none;
}
.jireiDownload__inner {
padding-top: 220px;
padding-left: 4%;
padding-right: 4%;
}
.jireiDownload__inner--left {
width: 100%;
}
.jireiDownload__inner--leftMain .secondaryBtn span {
display: none;
}
/* solution */
.solutions__inner {
padding-left: 4%;
padding-right: 4%;
}
.solutions__inner--img {
width: 200px;
height: 180px;
bottom: -100px;
right: 0;
}
.solutions__inner h2 {
font-size: 1.8rem;
}
.solutions__inner h2 br {
display: none;
}
}