@charset "utf-8";
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}
 * {
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight: 500;
}
img {
max-width: 100%;
display: inline-block;
}
.wrapper {
max-width: 1200px;
padding: 0 5%;
margin: 0 auto;
}
h2 {
position: relative;
font-size: 2.2rem;
margin-bottom: 20px;
max-width: 540px;
}
h2 span {
position: relative;
top: 0;
left: 140px;
opacity: 0;
}
h2.view span {
animation-name: h2Txt;
animation-duration: 800ms;
animation-fill-mode: forwards;
}
@keyframes h2Txt {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
50.00000000000001% {
opacity: 1;
}
100% {
opacity: 1;
}
}
h2 span::before {
position: absolute;
top: 0;
left: -140px;
content: "";
display: block;
width: 130px;
height: 30px;
background-color: #fff;
border-radius: 20px 0 0 20px;
box-shadow: 2px 2px 0 0;
}
h2.view::after {
content: "";
display: block;
background-color: #665C52;
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100%;
animation-name: h2Slide;
animation-duration: 800ms;
animation-fill-mode: forwards;
}
@keyframes h2Slide {
0% {
transform: scaleX(0%);
transform-origin: left;
opacity: 1;
}
50% {
transform: scaleX(100%);
transform-origin: left;
opacity: 1;
}
50.00000000000001% {
transform: scaleX(100%);
transform-origin: right;
opacity: 1;
}
100% {
transform: scaleX(0%);
transform-origin: right;
opacity: 1;
}
}
.section-fade {
opacity: 0;
}
.section-fade.view {
animation-name: fade;
animation-duration: 1000ms;
animation-fill-mode: forwards;
}
@keyframes fade {
0% {
opacity: 0;
transform: translateY(80px);
}
100% {
opacity: 1;
}
} header {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
height: 70px;
background-color: #665C52;
box-shadow: 0 0 10px 0 #000;
}
header ul {
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
header li {
list-style: none;
}
header .logo img {
height: 40px;
}
header .tel img {
height: 24px;
vertical-align: middle;
position: relative;
top: -2px;
}
header .tel {
background-color: #fff;
border-radius: 8px;
font-size: 2.0rem;
font-weight: bold;
padding: 4px 6px;
}
header .tel-sp {
display: none;
} .mainvisual {
background-color: #289BDE;
width: 100%;
height: 100vh;
padding-top: 90px;
z-index: -999;
position: fixed;
top: 0;
}
.mainvisual.none {
display: none;
}
.mainvisual .h1-pc {
width: 1080px;
color: #fff;
font-size: 6.2rem;
letter-spacing: -0.05em;
margin: 0 auto;
}
.mainvisual .h1-sp {
display: none;
}
.mainvisual .txt01,
.mainvisual .txt02,
.mainvisual .txt03 {
position: relative;
margin-left: 14px;
z-index: 10;
}
.mainvisual .txt01 span,
.mainvisual .txt02 span,
.mainvisual .txt03 span {
opacity: 0;
}
.mainvisual .txt01.inview span {
animation-name: showTxt;
animation-duration: 1000ms;
animation-fill-mode: forwards;
}
.mainvisual .txt02.inview span {
animation-name: showTxt;
animation-duration: 1000ms;
animation-fill-mode: forwards;
animation-delay: 250ms;
}
.mainvisual .txt03.inview span {
animation-name: showTxt;
animation-duration: 1000ms;
animation-fill-mode: forwards;
animation-delay: 500ms;
}
@keyframes showTxt {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
50.00000000000001% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.mainvisual .txt01.inview::before {
content: "";
position: absolute;
top: 76%; left: 0;
transform: translateY(-50%); border: 7px solid transparent;
border-left: 580px solid #d8db16; border-radius: 10px 0 0 10px;
z-index: -10;
animation-name: showArrow;
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-delay: 1700ms;
opacity: 0;
}
.mainvisual .txt02.inview::before {
content: "";
position: absolute;
top: 76%; left: 0;
transform: translateY(-50%); border: 7px solid transparent;
border-left: 1050px solid #d8db16; border-radius: 10px 0 0 10px;
z-index: -10;
animation-name: showArrow;
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-delay: 1700ms;
opacity: 0;
}
.mainvisual .txt03.inview::before {
content: "";
position: absolute;
top: 76%; left: 0;
transform: translateY(-50%); border: 7px solid transparent;
border-left: 1050px solid #d8db16; border-radius: 10px 0 0 10px; 
z-index: -10;
animation-name: showArrow;
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-delay: 1700ms;
opacity: 0;
}
@keyframes showArrow {
0% {
transform: scaleX(0%);
transform-origin: left;
opacity: 1;
}
100% {
transform: scaleX(100%);
transform-origin: left;
opacity: 1;
}
}
.mainvisual .txt01.inview::after {
content: "";
display: block;
background-color: #665C52;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 95%;
animation-name: showSlide;
animation-duration: 1000ms;
animation-fill-mode: forwards;
}
.mainvisual .txt02.inview::after {
content: "";
display: block;
background-color: #665C52;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 95%;
animation-name: showSlide;
animation-duration: 1000ms;
animation-fill-mode: forwards;
animation-delay: 250ms;
opacity: 0;
}
.mainvisual .txt03.inview::after {
content: "";
display: block;
background-color: #665C52;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 95%;
animation-name: showSlide;
animation-duration: 1000ms;
animation-fill-mode: forwards;
animation-delay: 500ms;
opacity: 0;
}
@keyframes showSlide {
0% {
transform: scaleX(0%);
transform-origin: left;
opacity: 1;
}
50% {
transform: scaleX(100%);
transform-origin: left;
opacity: 1;
}
50.00000000000001% {
transform: scaleX(100%);
transform-origin: right;
opacity: 1;
}
100% {
transform: scaleX(0%);
transform-origin: right;
opacity: 1;
}
}
.mainvisual .under {
display: flex;
margin-top: calc((96vh - 650px) / 2);
margin-left: auto;
margin-right: auto;
}
.mainvisual .underLeft {
position: relative;
flex: 1;
text-align: right;
}
.mainvisual .underLeft img {
width: 500px;
border-radius: 20px;
}
.mainvisual .underLeft::before {
content: "";
display: flex;
position: absolute;
top: 14px;
right: 14px;
width: 500px;
height: 278px;
border: 3px solid #665C52;
border-radius: 20px;
}
.mainvisual .underRight {
flex: 1;
}
.mainvisual .underRight-sp {
display: none;
}
.mainvisual .underRightin {
width: 90%;
margin: 0 auto;
font-size: 1.9rem;
color: #fff;
line-height: 1.9em;
}
.mainvisual .underRightin span {
position: relative;
top: -14px;
left: 36px;
font-size: 1.2rem;
} main {
position: relative;
margin-top: 97vh;
padding-top: 200px;
background-color: #DBE043;
}
main .scrolldown::before {
content: "";
display: block;
width: 150px;
height: 60px;
border-radius: 30px;
background-color: #DBE043;
position: absolute;
top: -6px;
right: -30px;
z-index: -100;
}
main .scrolldown {
position: absolute;
top: -24px;
right: 30%;
z-index: 50;
font-weight: bold;
font-size: 1.4rem;
}
main .scrolldown::after {
content: "";
display: block;
position: absolute;
top: 8px; right: 75px; 
border: 4px solid transparent;
border-left: 12px solid #000;
transform: rotate(90deg);
animation-name: scrollDown;
animation-duration: 2000ms;
animation-iteration-count: infinite;
}
@keyframes scrollDown {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
} .first {
display: flex;
padding-bottom: 250px;
}
.first .firstLeft,
.first .firstRight {
flex: 1;
}
.first .firstLeftin {
font-size: 1.6rem;
max-width: 90%;
margin: 0 auto;
line-height: 2.0em;
}
.first .firstRightin {
font-size: 1.6rem;
max-width: 90%;
}
.first .news {
width: 90%;
margin: 0 auto;
}
.first .column-all {
margin-bottom: 20px;
}
.first .column-all .flex {
display: flex;
}
.first .column-all li {
list-style: none;
margin-bottom: 10px;
}
.first .column-all li .txt {
margin-left: 20px;
}
.first .column-all li .txt {
width: 70%;
}
.first .column-all li .img {
width: 30%;
}
.first .column-all li img {
width: 140px;
height: auto;
border-radius: 4px;
box-shadow: 2px 2px 2px #888;
vertical-align: bottom;
}
.first .column-all li a {
text-decoration: none;
font-size: 1.6rem;
color: #000;
}
.first .column-list {
width: 90%;
margin: 0 auto;
}
.first .column-list a {
font-size: 1.4rem;
text-decoration: none;
color: #000;
} .second {
padding-bottom: 250px;
}
.second .step01,
.second .step02 {
display: flex;
}
.second .step01 .step01Left,
.second .step01 .step01Right,
.second .step02 .step02Left,
.second .step02 .step02Right {
flex: 1;
padding-left: 3%;
padding-right: 2%;
}
.second .step01 span.big,
.second .step02 span.big {
font-size: 2.0rem;
display: inline-block;
position: relative;
}
.second .step01 span.big::before,
.second .step02 span.big:before {
content: "";
display: block;
width: 8px;
height: 8px;
position: absolute;
top: -2px;
left: -6px;
background-color: #fff;
border-radius: 50%;
}
.second .step01 span.small,
.second .step02 span.small {
font-size: 1.4rem;
position: relative;
top:  0;
left: 20px;
display: inline-block;
margin-bottom: 30px;
}
.second .step02 .step02Right {
position: relative;
z-index: -100;
}
.second .step02 .step02Right img {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
border-radius: 20px;
vertical-align: bottom;
width: 450px;
}
.second .step02 .step02Right::before {
content: "";
display: block;
position: absolute;
top: 53%;
right: 14px;
transform: translateY(-50%);
width: 450px;
height: 256px;
border: 3px solid #665C52;
border-radius: 20px;
z-index: 100;
} .third {
padding-bottom: 250px;
}
.third .thirdin {
display: flex;
margin-bottom: 60px;
}
.third .thirdLeft,
.third .thirdRight {
flex: 1;
padding-left: 3%;
padding-right: 2%;
}
.third h3 {
background-color: #95602B;
font-size: 1.6rem;
color: #fff;
padding: 8px 0 8px 20px;
border-radius: 10px;
}
.third p.thirdinP {
margin: 20px 0;
font-size: 1.6rem;
}
.third dl {
display: flex;
flex-wrap: wrap;
font-size: 2.0rem;
}
.third dt {
width: 30%;
margin-bottom: 20px;
position: relative;
border-bottom: 1px solid #000;
}
.third dt::before {
content: "";
display: block;
width: 8px;
height: 8px;
position: absolute;
top: -2px;
left: -6px;
background-color: #fff;
border-radius: 50%;
}
.third dd {
width: 70%;
margin-bottom: 20px;
border-bottom: 1px solid #000;
}
.third dd:nth-of-type(5) {
padding-top: 6px;
line-height: 1.0em;
border-bottom: 1px solid #000;
}
.third dd:nth-of-type(5) span {
font-size: 1.4rem;
}
.third .thirdin2 {
display: flex;
background-color: #ddd;
border-radius: 20px;
font-size: 1.4rem;
max-width: 100%;
}
.third .txt,
.third .image {
flex: 1;
padding: 25px;
}
.third image {
text-align: center;
}
.third .image img {
width: 500px;
border-radius: 10px;
}
.third p.thirdin2P {
font-size: 1.4rem;
line-height: 1.6em;
}
.third .apri-pc a {
font-size: 1.0rem;
display: inline-block;
background: #666;
padding: 6px;
margin: 5px 0;
border-radius: 4px;
text-decoration: none;
box-shadow: 2px 2px #333;
color: #fff;
width: 140px;
text-align: center;
}
.third .apri-sp a {
font-size: .7rem;
display: block;
background: #666;
padding: 3px;
margin: 5px 0;
border-radius: 4px;
box-shadow: 2px 2px #333;
color: #fff;
width: 140px;
text-align: center;
}
.third .apri-pc a:hover {
opacity: .7;
}
.third .apri-sp {
display: none;
} .fourth {
padding-bottom: 350px;
position: relative;
}
.fourth .fourthin {
display: flex;
margin-bottom: 60px;
}
.fourth .fourthLeft,
.fourth .fourthRight {
flex: 1;
padding-left: 3%;
padding-right: 2%;
}
.fourth h3 {
background-color: #95602B;
font-size: 1.6rem;
color: #fff;
padding: 8px 0 8px 20px;
border-radius: 10px;
}
.fourth .txt01 {
font-size: 6.0rem;
text-align: center;
}
.fourth .txt01-sp {
display: none;
}
.fourth .txt02 {
margin-left: 60px;
font-size: 1.4rem;
line-height: 1.2em;
}
.fourth .txt03 {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6rem;
}
.fourth .txt04 {
margin-bottom: 40px;
font-size: 1.2rem;
}
.fourth .txt05 {
text-align: center;
margin-top: 20px;
font-size: 1.2rem;
}
.fourth .txt05 a {
text-decoration: none;
color: #000;
}
.fourth .lineTxt h4 {
position: absolute;
bottom: 4px;
color: #fff;
font-weight: bold;
font-size: 9.1rem;
line-height: 0.8em;
opacity: .5;
z-index: 100;
}
.fourth .form {
font-size: 20px;
width: 90%;
margin: 0 auto;
}
.fourth .width {
width: 100%;
}
.fourth .line {
border-bottom: 1px solid #000;
width: 100%;
margin-bottom: 20px;
}
.fourth .file {
width: 100%;
font-size: 14px;
margin-bottom: 20px;
}
.fourth textarea {
width: 100%;
height: 200px;
border: 1px solid #000;
}
.fourth .btn {
margin-top: 10px;
text-align: center;
}
.submit {
width: 20%;
border: 1px solid #000;
border-radius: 4px;
cursor: pointer;
color: #000;
}
.submit:hover {
opacity: .7;
}
.fourth .wpcf7-spinner {
display: none !important;
} footer {
max-width: 100%;
background-color: #665C52;
}
footer h3 {
position: relative;
font-size: 2.2rem;
margin-bottom: 20px;
max-width: 540px;
}
footer h3 span {
position: relative;
top: 0;
left: 140px;
color: #fff;
}
footer h3 span::before {
position: absolute;
top: 0;
left: -140px;
content: "";
display: block;
width: 130px;
height: 30px;
background-color: #fff;
border-radius: 20px 0 0 20px;
box-shadow: 2px 2px 0 0 #000;
}
.fifth {
display: flex;
padding-top: 100px;
padding-bottom: 40px;
}
.fifth .fifthLeft,
.fifth .fifthRight {
flex: 1;
}
.fifth .profileimage img {
width: 210px;
}
.fifth .fifthLeft .img-sp {
display: none;
}
.fifth .fifthLeftin {
display: flex;
padding-left: 3%;
padding-right: 2%;
}
.fifth .profile {
color: #fff;
flex: 1;
font-size: 1.15rem;
padding: 0 2%;
line-height: 1.6em;
}
.fifth .fifthRightin {
font-size: 1.4rem;
color: #fff;
text-align: center;
}
.fifth .fifthRight .step01 {
margin-bottom: 20px;
}
.fifth .fifthRight p {
margin-bottom: 10px;
}
.fifth .fifthRight img {
width: 450px;
}
.fifth .fifthRightin a {
text-decoration: none;
}
.fifth .fifthRightin a:hover {
opacity: .5;
}
footer .corp {
color: #fff;
font-size: 1.4rem;
text-align: center;
padding-bottom: 10px;
} .column-main {
font-size: 1.6rem;
padding-top: 130px;
padding-bottom: 60px;
background-color: #d8db16;
}
.column-main .bread {
margin-bottom: 40px;
color: #000;
}
.column-main .bread a {
text-decoration: none;
color: #000;
}
.column-main li {
list-style-type: none;
margin-bottom: 40px;
border-bottom: 1px solid #000;
min-height: 200px;
}
.column-main li a {
text-decoration: none;
color: #000;
}
.column-main img {
width: 200px;
height: auto;
float: left;
margin: 0 15px 0 0;
}
.column-main h4 {
font-size: 2.0rem;
margin: 5px 0 10px 0;
} .columnsingle-main {
font-size: 1.6rem;
padding-top: 130px;
padding-bottom: 60px;
background-color: #d8db16;
}
.columnsingle-main .bread {
margin-bottom: 40px;
color: #000;
}
.columnsingle-main .bread a {
text-decoration: none;
color: #000;
}
.columnsingle-main .upper {
height: 100%;
}
.columnsingle-main img {
width: 200px;
height: auto;
float: left;
margin: 0 15px 0 0;
}
.columnsingle-main h4 {
font-size: 2.0rem;
margin: 10px 0 40px 0;
}
.columnsingle-main .prev-next {
margin: 40px 0;
}
.columnsingle-main .prev-next a {
text-decoration: none;
color: #000;
} .shadow {
background-color: #DBE043;
padding-top: 100px;
}
.shadow .clear {
display: none;
}
.shadow h3 {
font-size: 2.0rem;
margin-bottom: 60px;
text-align: center;
}
.shadow p.txt {
font-size: 1.6rem;
margin-bottom: 60px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.shadow p.google {
text-align: center;
margin-top: 20px;
font-size: 1.2rem;
padding-bottom: 60px;
}
.shadow p.google a {
text-decoration: none;
color: #000;
}
.shadow .contract {
width: 90%;
margin: 0 auto;
}
.shadow dl {
font-size: 1.4rem;
margin-bottom: 60px;
}
.shadow dt,
.shadow dd {
margin: 0;
padding: 0;
}
.shadow dd {
margin-bottom: 24px;
}
.shadow .width {
width: 100%;
}
.shadow .contract .line {
border-bottom: 1px solid #000;
width: 100%;
font-size: 2.0rem;
margin-bottom: 20px;
}
.shadow .check {
font-size: 2.0rem;
text-align: center;
margin-bottom: 20px;
}
.shadow .btn2 {
margin-top: 10px;
text-align: center;
font-size: 2.0rem;
}
.shadow .submit2 {
width: 20%;
border: 1px solid #000;
border-radius: 4px;
cursor: pointer;
color: #000;
}
.shadow .submit2:hover {
opacity: .7;
}
.shadow .wpcf7-spinner {
display: none !important;
}  @media screen and (max-width:1050px) { .mainvisual .h1-pc {
width: 850px;
font-size: 4.8rem;
letter-spacing: -0.05em;
}
.mainvisual .txt01.inview::before {
border-left: 440px solid #d8db16; }
.mainvisual .txt02.inview::before {
border-left: 820px solid #d8db16; }
.mainvisual .txt03.inview::before {
border-left: 820px solid #d8db16; }
.mainvisual .underLeft::before {
display: none;
}
.mainvisual .underRightin {
font-size: 1.5rem;
} .second .step02 .step02Right img {
width: 400px;
}
.second .step02 .step02Right::before {
display: none;
}
}  @media screen and (max-width:850px) { h2 span {
left: 60px;
font-size: 1.8rem;
}
h2 span::before {
top: 3px;
left: -64px;
width: 55px;
height: 20px;
}
h2.view::after {
width: 100%;
} header {
height: 50px;
}
header ul {
height: 50px;
}
header .logo img {
height: 36px;
}
header .tel {
display: none;
}
header .tel-sp img {
height: 24px;
vertical-align: middle;
position: relative;
top: -2px;
}
header .tel-sp {
display: block;
background-color: #fff;
border-radius: 8px;
font-size: 2.0rem;
font-weight: bold;
padding: 4px 6px;
} .mainvisual .h1-pc {
display: none;
}
.mainvisual .h1-sp {
display: block;
max-width: 340px;
font-size: 2.8rem;
letter-spacing: -0.05em;
line-height: 1.2em;
margin: 0 auto;
color: #fff;
}
.mainvisual {
padding-top: 70px;
}
.mainvisual .txt04,
.mainvisual .txt05 {
position: relative;
margin-left: 0;
z-index: 10;
}
.mainvisual .txt04 span,
.mainvisual .txt05 span {
opacity: 0;
}
.mainvisual .txt04.inview span {
animation-name: showTxt;
animation-duration: 1000ms;
animation-fill-mode: forwards;
}
.mainvisual .txt05.inview span {
animation-name: showTxt;
animation-duration: 1000ms;
animation-fill-mode: forwards;
animation-delay: 250ms;
}
@keyframes showTxt {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
50.00000000000001% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.mainvisual .txt04.inview::before {
content: "";
position: absolute;
top: 36%; left: 0;
transform: translateY(-50%); border: 5px solid transparent;
border-left: 335px solid #d8db16; border-radius: 10px 0 0 10px;
z-index: -10;
animation-name: showArrow;
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-delay: 1700ms;
opacity: 0;
}
.mainvisual .txt05.inview::before {
content: "";
position: absolute;
top: 38%; left: 0;
transform: translateY(-50%); border: 5px solid transparent;
border-left: 335px solid #d8db16; border-radius: 10px 0 0 10px;
z-index: -10;
animation-name: showArrow;
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-delay: 1700ms;
opacity: 0;
}
@keyframes showArrow {
0% {
transform: scaleX(0%);
transform-origin: left;
opacity: 1;
}
100% {
transform: scaleX(100%);
transform-origin: left;
opacity: 1;
}
}
.mainvisual .txt04.inview::after {
content: "";
display: block;
background-color: #665C52;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 95%;
animation-name: showSlide;
animation-duration: 1000ms;
animation-fill-mode: forwards;
}
.mainvisual .txt05.inview::after {
content: "";
display: block;
background-color: #665C52;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 95%;
animation-name: showSlide;
animation-duration: 1000ms;
animation-fill-mode: forwards;
animation-delay: 250ms;
opacity: 0;
}
@keyframes showSlide {
0% {
transform: scaleX(0%);
transform-origin: left;
opacity: 1;
}
50% {
transform: scaleX(100%);
transform-origin: left;
opacity: 1;
}
50.00000000000001% {
transform: scaleX(100%);
transform-origin: right;
opacity: 1;
}
100% {
transform: scaleX(0%);
transform-origin: right;
opacity: 1;
}
}
.mainvisual .under {
display: block;
margin-top: 16px;
}
.mainvisual .underLeft {
position: relative;
text-align: center; }
.mainvisual .underLeft img {
width: 350px;
}
.mainvisual .underLeft::before {
display: none;
}
.mainvisual .underRight {
display: none;
}
.mainvisual .underRight-sp {
display: block;
flex: 1;
color: #fff;
max-width: 350px;
margin-left: auto;
margin-right: auto;
margin-top:  24px;
}
.mainvisual .underRightin-sp {
width: 350px;
font-size: 1.4rem;
line-height: 1.6em;
} main {
position: relative;
padding-top: 150px;
}
main .scrolldown::before {
content: "";
display: block;
width: 120px;
height: 30px;
border-radius: 30px;
background-color: #DBE043;
position: absolute;
top:1px;
left: -34px;
z-index: -100;
}
main .scrolldown {
position: absolute;
top: -14px;
left: 43%;
z-index: 50;
font-weight: bold;
font-size: 1.2rem;
animation-name: scrollDown;
animation-duration: 3000ms;
animation-iteration-count: infinite;
z-index: -100;
}
main .scrolldown::after {
display: none;
}
@keyframes scrollDown {
0% {
opacity: 0;
transform: translateY(0);
}
25% {
opacity: 1;
transform: translateY(0);
}
40% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 1;
transform: translateY(20px);
}
} .first {
display: flex;
flex-direction: column-reverse;
padding-bottom: 100px;
}
.first .firstLeft,
.first .firstRight {
flex: 1;
}
.first .firstRight {
margin-bottom: 100px;
}
.first .column-all li a {
font-size: 1.4rem;
} .second {
padding-bottom: 100px;
}
.second .step01,
.second .step02 {
display: flex;
flex-direction: column;
}
.second .step01 .step01Left,
.second .step01 .step01Right,
.second .step02 .step02Left,
.second .step02 .step02Right {
padding-left: 3%;
padding-right: 3%;
}
.second .step02 .step02Left {
order: 2;
}
.second .step02 .step02Right {
order: 1;
margin-bottom: 20px;
}
.second .step01 span.big,
.second .step02 span.big {
font-size: 1.7rem;
}
.second .step01 span.small,
.second .step02 span.small {
font-size: 1.2rem;
left: 10px;
}
.second .step02 .step02Right img {
position: static;
top: 0;
right: 0;
transform: translateY(0);
}
.second .step02 .step02Right::before {
display: none;
} .third {
padding-bottom: 100px;
}
.third .thirdin {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.third .thirdLeft,
.third .thirdRight {
padding-left: 3%;
padding-right: 3%;
}
.third .thirdLeft {
margin-bottom: 50px;
}
.third h3 {
background-color: #95602B;
font-size: 1.6rem;
color: #fff;
padding: 8px 0 8px 20px;
border-radius: 10px;
}
.third dl {
display: flex;
flex-wrap: wrap;
font-size: 1.8rem;
}
.third dt {
width: 40%;
margin-bottom: 20px;
position: relative;
border-bottom: 1px solid #000;
}
.third dt::before {
content: "";
display: block;
width: 8px;
height: 8px;
position: absolute;
top: -2px;
left: -6px;
background-color: #fff;
border-radius: 50%;
}
.third dd {
width: 60%;
margin-bottom: 20px;
border-bottom: 1px solid #000;
}
.third .thirdin2 {
display: flex;
flex-direction: column;
}
.third .txt,
.third .image {
padding: 15px;
}
.third image {
text-align: center;
}
.third p.thirdin2P {
font-size: 1.4rem;
line-height: 1.6em;
}
.third .apri-sp {
margin-bottom: 10px;
}
.third .apri-sp a {
font-size: 1.0rem;
display: block;
background: #666;
padding: 3px;
margin: 5px 0;
border-radius: 4px;
box-shadow: 2px 2px #333;
color: #fff;
width: 140px;
text-align: center;
}
.third .apri-sp a:hover {
opacity: .7;
}
.third .apri-pc {
display: none;
}
.third .apri-sp {
display: block;
} .fourth {
padding-bottom: 150px;
position: relative;
}
.fourth .fourthin {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.fourth .fourthLeft,
.fourth .fourthRight {
flex: 1;
padding-left: 3%;
padding-right: 3%;
margin-bottom: 40px;
}
.fourth h3 {
background-color: #95602B;
font-size: 1.6rem;
color: #fff;
padding: 8px 0 8px 20px;
border-radius: 10px;
}
.fourth .txt01 {
display: none;
}
.fourth .txt01-sp {
display: block;
font-size: 4.0rem;
text-align: center;
}
.fourth .txt01-sp a {
text-decoration: none;
color: #000;
}
.fourth .txt03 {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6rem;
}
.fourth .waku {
border: 1px solid black;
border-radius: 10px;
width: 100%;
height: 300px;
}
.fourth .lineTxt h4 {
font-size: 4.1rem;
} footer h3 {
position: relative;
font-size: 2.0rem;
margin-bottom: 20px;
max-width: 540px;
}
footer h3 span {
top: 0;
left: 60px;
}
footer h3 span::before {
position: absolute;
top: 5px;
left: -64px;
width: 55px;
height: 20px;
}
.fifth {
display: flex;
flex-direction: column;
padding-top: 50px;
padding-bottom: 100px;
}
.fifth .profileimage {
margin-bottom: 20px;
}
.fifth .profileimage img {
width: 100%;
}
.fifth .fifthLeft .img-pc {
display: none;
}
.fifth .fifthLeft .img-sp {
display: block;
}
.fifth .fifthLeftin {
display: flex;
flex-direction: column;
padding-left: 3%;
padding-right: 3%;
margin-bottom: 80px;
}
.fifth .fifthRightin {
padding-left: 3%;
padding-right: 3%;
}
footer .corp {
color: #fff;
font-size: 1.4rem;
text-align: center;
padding-bottom: 10px;
} .shadow .clear {
display: block;
}
}