@charset "UTF-8";

.mainColor {
    color: #f15900
}

.white {
    color: #fff
}

body {
    font-family: YakuHanJP_Narrow, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}

article,
b,
body,
canvas,
code,
div,
em,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
img,
li,
mark,
menu,
nav,
object,
p,
section,
small,
span,
sub,
th,
ul,
var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0
}

body {
    line-height: 1
}

article,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
    display: block
}

nav ul {
    list-style: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: 700
}

li {
    list-style-type: none
}

html {
    font-size: 10px
}

body,
html {
    font-feature-settings: "palt"
}

body {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: .1em
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.8
}

div,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
p,
span {
    line-height: 1.8;
    font-weight: 400
}

a {
    color: inherit;
    text-decoration: none
}

.bold {
    font-weight: 700 !important
}

.bold900 {
    font-weight: 900 !important
}

.nowrap {
    white-space: nowrap
}

.white {
    color: #fff
}

.black {
    color: #000
}

.gray {
    color: #9b9b9b
}

.red {
    color: #ff4501 !important
}

.red2 {
    color: #b50d23 !important
}

.blue {
    color: #333d80
}

.h000 {
    font-size: 100px
}

.h00 {
    font-size: 64px
}

.h0 {
    font-size: 42px
}

.h1 {
    font-size: 32px
}

.h2 {
    font-size: 28px
}

.h3 {
    font-size: 24px
}

.h4 {
    font-size: 18px
}

.h5 {
    font-size: 16px
}

.text_m {
    font-size: 14px
}

.text_s {
    font-size: 12px
}

@media screen and (min-width:768px) and (max-width:959px) {
    body {
        font-size: 14px
    }

    .h000 {
        font-size: 64px
    }

    .h00 {
        font-size: 36px
    }

    .h0 {
        font-size: 25px
    }

    .h1 {
        font-size: 24px
    }

    .h2 {
        font-size: 24px
    }

    .h3 {
        font-size: 20px
    }

    .h4 {
        font-size: 15px
    }

    .h5 {
        font-size: 14px
    }

    .text_m {
        font-size: 13px
    }

    .text_s {
        font-size: 11px
    }
}

@media screen and (max-width:767px) {
    body {
        font-size: 14px
    }

    .h000 {
        font-size: 42px
    }

    .h00 {
        font-size: 36px
    }

    .h0 {
        font-size: 24px
    }

    .h1 {
        font-size: 22px
    }

    .h2 {
        font-size: 20px
    }

    .h3 {
        font-size: 17px
    }

    .h4 {
        font-size: 15px
    }

    .h5 {
        font-size: 15px
    }

    .text_m {
        font-size: 13px
    }

    .text_s {
        font-size: 11px
    }
}

*,
:after,
:before {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

body,
html {
    width: 100%;
    overflow-x: hidden
}

ul {
    padding: 0;
    list-style-type: none;
    margin: 0
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto
}

a:hover {
    text-decoration: none;
    color: inherit
}

.remove {
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 0
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.inline {
    display: inline
}

.block {
    display: block
}

.text-center {
    text-align: center
}

.block-center {
    margin-inline: auto
}

.box-center {
    margin-inline: auto
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

@media only screen and (max-width:767px) {
    .text-center-sp {
        text-align: center
    }
}

@media only screen and (max-width:767px) {
    .text-right-sp {
        text-align: right
    }
}

@media only screen and (max-width:767px) {
    .text-left-sp {
        text-align: left
    }
}

@media screen and (min-width:768px) and (max-width:1279px) {
    .text-left-tabNote {
        text-align: left
    }
}

@media screen and (min-width:768px) {
    .sp {
        display: none !important
    }
}

@media screen and (max-width:767px) {
    .pc {
        display: none !important
    }
}

@media screen and (max-width:959px) {
    .Menu_p {
        display: none !important
    }
}

@media screen and (min-width:960px) {
    .Menu_s {
        display: none !important
    }
}

@media only screen and (min-width:767px) and (max-width:1279px) {
    .tabNote {
        display: block !important
    }
}

@media only screen and (max-width:766px),
(min-width:1280px) {
    .tabNote {
        display: none !important
    }
}

.m0 {
    margin: 0
}

.p0 {
    padding: 0
}

.mbL {
    margin-bottom: 30%
}

.mbL2 {
    margin-bottom: 25%
}

.mbL3 {
    margin-bottom: 20%
}

.mbL4 {
    margin-bottom: 15%
}

.mbL5 {
    margin-bottom: 12%
}

.mbM {
    margin-bottom: 10%
}

.mbM2 {
    margin-bottom: 7.5%
}

.mbM3 {
    margin-bottom: 5%
}

.mbS {
    margin-bottom: 3.5%
}

.mbS2 {
    margin-bottom: 2%
}

.mbS3 {
    margin-bottom: 1%
}

.mbS4 {
    margin-bottom: .5%
}

@media only screen and (max-width:767px) {
    .mbSpM {
        margin-bottom: 10%
    }

    .mbSpM2 {
        margin-bottom: 7.5%
    }

    .mbSpM3 {
        margin-bottom: 5%
    }

    .mbSpS {
        margin-bottom: 3.5%
    }

    .mbSpS2 {
        margin-bottom: 2%
    }

    .mbSpS3 {
        margin-bottom: 1%
    }
}

.flex {
    display: flex
}

.justCenter {
    justify-content: center
}

.justEnd {
    justify-content: flex-end
}

.alignCenter {
    align-items: center
}

@media screen and (max-width:767px) {
    .flexPc {
        display: block
    }
}

.cnt {
    width: 90%;
    max-width: 1920px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media only screen and (max-width:959px) {
    .cnt {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .cnt {
        max-width: 1200px
    }
}

.w100 {
    width: 100%
}

.cntS {
    max-width: 1398px;
    margin-right: auto;
    margin-left: auto
}

:root {
    --spaceSize: clamp(50px, 3.5vw, 63px);
    --spaceSizeMiddle: clamp(30px, 7.5vw, 144px);
    --spaceSizeSMiddle: clamp(65px, 4.5vw, 90px);
    --spaceSizeWide: clamp(135px, 14vw, 270px)
}

.padding {
    padding-top: var(--spaceSize);
    padding-bottom: var(--spaceSize)
}

.margin {
    margin-top: var(--spaceSize);
    margin-bottom: var(--spaceSize)
}

.marginM {
    margin-top: var(--spaceSizeMiddle);
    margin-bottom: var(--spaceSizeMiddle)
}

.margin-top {
    margin-top: var(--spaceSizeMiddle)
}

.bgImg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

@keyframes anime {
    0% {
        opacity: 0
    }

    16% {
        opacity: 1
    }

    33% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale(1.2);
        z-index: 9
    }

    100% {
        opacity: 0
    }
}

.button {
    display: inline-block;
    transition: all .3s;
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    border: 1px solid #333;
    padding: .5em 1em;
    letter-spacing: .1em;
    line-height: 1.4;
    box-shadow: 4px 4px 0 0 #596166;
    font-size: 21px;
    background-color: #fff
}

.button:hover {
    color: #596166;
    background-color: #fff
}

.button.small {
    font-size: 16px
}

.button.line {
    box-shadow: 4px 4px 0 0 #4caa4d
}

.overRayBox {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
    z-index: 997
}

.overRayBox>ul {
    display: inline-block;
    vertical-align: middle;
    width: 100%
}

.all_fixed_nav_bg {
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8888;
    pointer-events: none;
    opacity: 0
}

.menu-btn {
    position: fixed;
    cursor: pointer;
    z-index: 998;
    right: 0;
    top: 0;
    height: 56px;
    width: 56px;
    border: none;
    background-color: #f15900
}

.menu-btn span:after {
    content: attr(data-txt-menu)
}

@media only screen and (max-width:767px) {
    .menu-btn {
        height: 56px
    }
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box
}

.menu-trigger {
    position: relative;
    width: 32px;
    height: 24px
}

.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px
}

.menu-trigger span:nth-of-type(1) {
    top: 6px
}

.menu-trigger span:nth-of-type(2) {
    top: 17px
}

.menu-trigger span:nth-of-type(3) {
    bottom: -6px
}

@keyframes active-menu-bar02 {
    100% {
        height: 0
    }
}

:root {
    --header: 100px;
    scroll-padding: var(--header)
}

.vertical {
    writing-mode: vertical-rl;
    font-feature-settings: normal;
    white-space: nowrap
}

.loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 1;
    visibility: visible
}

.loadingInner img {
    width: 350px
}

@media only screen and (max-width:767px) {
    .loadingInner img {
        width: 280px
    }
}

.loading-animation {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden
}

.loadTitle {
    font-size: clamp(2rem, 1.2718446602rem + 1.9417475728vw, 5rem);
    font-weight: 900;
    line-height: 1.4
}

.loadTitle span {
    font-size: clamp(2rem, 1.2718446602rem + 1.9417475728vw, 5rem);
    font-weight: 900;
    line-height: 1.4
}

body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    height: auto !important;
    position: static !important;
    min-height: auto !important;
    top: auto !important;
    overflow-wrap: anywhere
}

main {
    margin-top: 97px
}

.home main {
    margin-top: 102px
}

@media only screen and (max-width:767px) {
    main {
        margin-top: 58px
    }

    .home main {
        margin-top: 75px
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    main {
        margin-top: 55px
    }

    .home main {
        margin-top: 56px
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    main {
        margin-top: 53px
    }
}

.boxSadow {
    box-shadow: 2px 1px 6px 1px rgba(0, 0, 0, .06)
}

.boxSadow2 {
    box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0
}

.commonTitle {
    font-size: clamp(2.4rem, 1.7689320388rem + 1.6828478964vw, 5rem);
    padding-bottom: .8em;
    line-height: 1.4;
    font-weight: 900;
    position: relative
}

.commonTitle::after,
.commonTitle::before {
    content: "";
    display: block;
    position: absolute;
    height: 5px;
    bottom: 0
}

.commonTitle::before {
    width: 140px;
    background-color: #f15900;
    left: 50%;
    transform: translateX(-50%)
}

.commonTitle::after {
    width: 70px;
    background-color: #22b038;
    left: 50%
}

@media only screen and (max-width:767px) {

    .commonTitle::after,
    .commonTitle::before {
        height: 3px
    }

    .commonTitle::before {
        width: 100px
    }

    .commonTitle::after {
        width: 50px
    }
}

@media only screen and (max-width:767px) {
    .commonTitle {
        padding-bottom: 1em
    }
}

.btnarrow {
    position: relative
}

.btnarrow.__small::after {
    right: 14px;
    font-size: 15px
}

.btnarrow::after {
    content: "";
    display: block;
    position: absolute;
    position: absolute;
    display: block;
    font-family: "Font Awesome 6 Pro";
    content: "\f054";
    top: 50%;
    right: 20px;
    font-size: 27px;
    transform: translateY(-50%);
    transition: .3s
}

.commonBtn {
    display: block;
    max-width: 442px;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    background-color: #22b038;
    padding: 1em 0;
    text-align: center;
    font-size: clamp(1.6rem, 1.5029126214rem + .2588996764vw, 2rem);
    font-weight: 900;
    color: #fff;
    transition: .3s
}

.centerBtn .commonBtn {
    margin-inline: auto
}

.voiceBtnList .commonBtn {
    font-size: clamp(1.6rem, 1.2601941748rem + .9061488673vw, 3rem);
    line-height: 1
}

.commonBtn:hover {
    background-color: #026602;
    color: #fff
}

.commonBtn:hover::after {
    right: 15px
}

@media only screen and (max-width:767px) {
    .commonBtn {
        padding: .8em 0
    }

    .commonBtn::after {
        font-size: 15px
    }
}

ul {
    list-style-type: disc !important
}

.text_link {
    font-size: clamp(1.5rem, 1.4757281553rem + .0647249191vw, 1.6rem);
    text-decoration: underline;
    color: #565555;
    transition: .3s
}

.text_link:hover {
    color: #f15900
}

.commontitle_line span {
    background: linear-gradient(transparent 85%, #ffca00 0);
    background-position: 0 calc(100% - 10px);
    background-repeat: no-repeat
}

.commontitle_line2 span {
    background: linear-gradient(transparent 75%, #ffca00 0);
    background-position: 0 calc(100% - 10px);
    background-repeat: no-repeat
}

.center_position {
    position: absolute;
    width: 95%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@keyframes shinyshiny {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.__shiny {
    overflow: hidden;
    transition: .3s
}

.__shiny::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50px;
    width: 30px;
    height: 100%;
    background: rgba(255, 255, 255, .6);
    transform: skewX(-30deg);
    animation: shinyshiny 2.5s ease-in-out infinite
}

header {
    position: fixed;
    z-index: 998;
    width: 100%;
    background-color: #fff;
    box-shadow: 2px 1px 6px 1px rgba(0, 0, 0, .06)
}

@media only screen and (max-width:767px) {
    header {
        padding: 3.5em 0 0
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    header {
        padding: 3.5em 0 0
    }
}

.headerBtnSp {
    display: none;
    position: fixed;
    right: 56px;
    top: 0;
    z-index: 998
}

.headerBtnSp>a {
    display: block;
    padding: 1.8em 1.8em 1.7em;
    background-color: #22b038;
    position: relative
}

.headerBtnSp>a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35px;
    height: 35px;
    transform: translate(-50%, -50%);
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/line_icon.svg);
    background-repeat: no-repeat;
    background-size: 35px
}

@media only screen and (max-width:959px) {
    .headerBtnSp {
        display: block
    }
}

.headerBtn_sp img {
    width: 30%
}

.headerBtnList>li a {
    width: 246px;
    display: block;
    letter-spacing: .05em;
    font-size: clamp(1.6rem, 1.4058252427rem + .5177993528vw, 2.4rem);
    text-align: center;
    padding: 1.2em 0 1.2em 2em;
    font-weight: 900;
    color: #fff;
    position: relative;
    transition: .3s
}

.headerBtnList>li a.__line {
    background-color: #22b038
}

.headerBtnList>li a.__line::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 15px;
    width: 35px;
    height: 35px;
    transform: translateY(-50%);
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/line_icon.svg);
    background-repeat: no-repeat;
    background-size: 35px
}

.headerBtnList>li a.__contact {
    background-color: #f15900
}

.headerBtnList>li a.__contact::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 26px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/mail_icon_w.svg);
    background-repeat: no-repeat;
    background-size: 24px
}

.headerBtnList>li a:hover.__line {
    background-color: #026602
}

.headerBtnList>li a:hover.__contact {
    background-color: #993407
}

@media screen and (max-width:1540px) {
    .headerBtnList>li a {
        width: 200px;
        padding: 1em 0 1em 2em;
        font-size: clamp(1.6rem, 1.5514563107rem + .1294498382vw, 1.8rem)
    }
}

@media only screen and (max-width:959px) {
    .headerBtnList {
        display: none
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .headerBtnList>li a {
        width: 140px;
        padding: 1em 0 1em 2em;
        font-size: 14px
    }

    .headerBtnList>li a.__line::after {
        content: "";
        display: block;
        position: absolute;
        left: 9px;
        width: 20px;
        height: 20px;
        background-size: 20px
    }

    .headerBtnList>li a.__contact::after {
        left: 9px;
        width: 18px;
        height: 18px;
        background-size: 18px
    }
}

.ahover {
    transition: .3s
}

.ahover:hover {
    transform: scale(1.04);
    opacity: .7
}

.headerlogoBlock {
    position: absolute;
    top: 23px;
    left: 100px;
    width: 225px
}

@media screen and (max-width:1540px) {
    .headerlogoBlock {
        left: 23px;
        top: 5px
    }
}

@media only screen and (max-width:767px) {
    .headerlogoBlock {
        top: 10px;
        left: 24px;
        width: 159px
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .headerlogoBlock {
        left: 12px;
        top: 4px;
        width: 200px
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .headerlogoBlock {
        left: 10px;
        top: 12px;
        width: 150px
    }
}

.headerMenuCard {
    margin-right: 13px
}

.headerMenuCard>li {
    transition: .3s
}

.headerMenuCard>li>a {
    display: inline-block;
    letter-spacing: .04em;
    font-size: clamp(1.6rem, 1.5029126214rem + .2588996764vw, 2rem);
    text-align: center;
    display: block;
    font-weight: 900;
    line-height: 2;
    padding: .6em .6em;
    transition: .3s
}

.headerMenuCard>li>a:hover {
    color: #e15000
}

@media screen and (max-width:1344px) {
    .headerMenuCard>li>a {
        font-size: 16px;
        padding: .7em .5em
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .headerMenuCard>li>a {
        font-size: 14px;
        padding: .7em .5em
    }
}

.overRayBtn {
    display: block;
    margin-inline: auto;
    border-radius: 10px;
    width: 300px;
    padding: 1.3em 0;
    padding-left: 1.2em;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border: solid 2px #fff;
    text-align: center;
    position: relative
}

.overRayBtn::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 42px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/mail_icon_w.svg);
    background-repeat: no-repeat
}

.overRayMenuUl {
    margin-bottom: 13%
}

.overRayMenuUl>li {
    position: relative;
    font-size: 16px;
    padding: 2rem .8rem;
    font-weight: 300
}

.overRayMenuUl>li:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #fff
}

.overRayMenuUl>li a {
    display: block;
    transition: .3s;
    position: relative;
    font-weight: 500
}

.overRayMenuUl>li a::before {
    position: absolute;
    display: block;
    font-family: "Font Awesome 6 Pro";
    content: "\f105";
    font-size: 20px;
    line-height: 1;
    width: 25px;
    height: 25px;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    font-weight: 100;
    z-index: 1;
    transition: .3s;
    opacity: 1
}

.overRayMenuUl>li a:hover {
    opacity: .5
}

.overRayMenuUl>li a>ul:not(:last-child)>li {
    padding: 30em
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .overRayMenuUl>li {
        padding: 1.6rem 1rem
    }
}

.overRayBlock {
    display: flex;
    width: 442px;
    margin-left: auto;
    overflow-y: scroll;
    position: relative;
    z-index: 9999
}

@media only screen and (max-width:767px) {
    .overRayBlock {
        width: 100%
    }
}

.overRayTextCard {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
    overflow-y: scroll;
    padding: 0 15px 70px;
    background-color: #f15900
}

@media only screen and (max-width:1366px) {
    .overRayTextCard {
        padding-top: 33px
    }
}

@media only screen and (max-width:767px) {
    .overRayTextCard {
        width: 100%;
        padding: 33px 22px 0;
        padding-bottom: 30%
    }
}

.topFvImg {
    padding-bottom: clamp(400px, 46%, 787px)
}

@media only screen and (max-width:767px) {
    .topFvImg {
        padding-bottom: 160%;
        background-image: url(https://sample5.work/wp-content/themes/initializr/img/topFv_sp.jpg) !important
    }
}

.topFvContent {
    max-width: 1746px;
    margin-inline: auto
}

@media only screen and (max-width:767px) {
    .topFvContent {
        width: 89%
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .topFvContent {
        width: 95%
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .topFvContent {
        width: 95%
    }
}

.topFvWrap {
    position: absolute;
    width: 100%;
    left: 0;
    top: 54px
}

.topFvWrap img {
    width: 66vw;
    margin: 0
}

@media only screen and (max-width:767px) {
    .topFvWrap {
        top: -9px
    }

    .topFvWrap img {
        display: none
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .topFvWrap {
        top: 13px
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .topFvWrap {
        top: 0
    }
}

.topFvTitle {
    font-size: clamp(3rem, 2.0291262136rem + 2.5889967638vw, 7rem);
    letter-spacing: .06em;
    font-weight: 900;
    line-height: 1.6
}

.topFvTitle span {
    font-size: clamp(3rem, 2.0291262136rem + 2.5889967638vw, 7rem);
    letter-spacing: .06em;
    font-weight: 900;
    line-height: 1.6;
    background: linear-gradient(transparent 85%, #ffca00 0);
    background-position: 0 calc(100% - 10px);
    background-repeat: no-repeat
}

.topFvTitle.__small {
    font-size: clamp(1.8rem, 1.2660194175rem + 1.4239482201vw, 4rem);
    letter-spacing: .08em;
    font-weight: 900;
    line-height: 1.6
}

.topFvTitle.__small span {
    font-size: clamp(1.8rem, 1.2660194175rem + 1.4239482201vw, 4rem);
    letter-spacing: .08em;
    font-weight: 900;
    line-height: 1.6
}

@media only screen and (max-width:767px) {
    .topFvTitle {
        font-size: 32;
        line-height: 1.3
    }

    .topFvTitle span {
        font-size: 32;
        line-height: 1.3;
        background: linear-gradient(transparent 80%, #ffca00 0)
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .topFvTitle {
        line-height: 1.5;
        margin-bottom: 3%
    }

    .topFvTitle span {
        line-height: 1.5;
        background: linear-gradient(transparent 80%, #ffca00 0)
    }
}

:root {
    --swiper-theme-color: #fff
}

.footerBlock {
    padding: 3em 0 2em
}

@media only screen and (max-width:767px) {
    .footerBlock {
        padding: 2em 0 1em
    }
}

.footerlogoImg img {
    width: 17%
}

@media only screen and (max-width:767px) {
    .footerlogoImg img {
        width: 63%
    }
}

.footerInfoBlock {
    width: 51%;
    margin-inline: auto;
    padding: 1.5em 1.3em;
    border-radius: 10px;
    border: solid 1px #aaa
}

@media only screen and (max-width:1360px) {
    .footerInfoBlock {
        width: 60%
    }
}

@media only screen and (max-width:767px) {
    .footerInfoBlock {
        padding: 1em .7em;
        width: 100%
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .footerInfoBlock {
        width: 88%
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .footerInfoBlock {
        width: 80%
    }
}

.footerInfoleftBlock {
    width: 17%
}

@media only screen and (max-width:767px) {
    .footerInfoleftBlock {
        width: 30%
    }
}

.footerInforightBlock {
    width: 85%
}

.footerInfoText {
    font-size: clamp(1.4rem, 1.3514563107rem + .1294498382vw, 1.6rem);
    letter-spacing: .08em;
    line-height: 1.5;
    font-weight: 400
}

.footerBtn {
    cursor: pointer;
    position: fixed;
    right: .6%;
    bottom: 10%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f15900;
    transition: .3s;
    z-index: 9999;
    display: none
}

.footerBtn::after {
    position: absolute;
    display: block;
    font-family: "Font Awesome 6 Pro";
    content: "\f077";
    font-weight: 900;
    font-size: 20px;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:1366px) {
    .footerBtn {
        display: none !important
    }
}

.footerMenueList>li>a {
    padding: 1em;
    font-size: clamp(1.6rem, 1.5029126214rem + .2588996764vw, 2rem);
    font-weight: 900;
    transition: .3s
}

.footerMenueList>li:hover {
    color: #f15900
}

@media only screen and (max-width:767px) {
    .footerMenueList {
        width: 90%;
        margin-inline: auto
    }

    .footerMenueList:nth-child(1) {
        margin-right: 7%
    }

    .footerMenueList>li {
        padding: 1.5em 0
    }

    .footerMenueList>li:not(:last-child) {
        border-bottom: solid 1px #000
    }

    .footerMenueList>li>a {
        padding: 0
    }
}

.footerCopy {
    padding: 8px 0;
    background-color: #000
}

@media only screen and (max-width:767px) {
    .footerCopy {
        margin-top: 0;
        padding: 15px 0
    }
}

.copylight {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    letter-spacing: .08em
}

.swipperInner {
    padding: 0 1em 1em
}

.contactWrap {
    padding: 1em 0 4.2em
}

@media only screen and (max-width:767px) {
    .contactWrap {
        padding: 1em 0 1.3em
    }
}

@media only screen and (min-width:767px) and (max-width:1279px) {
    .contactWrap {
        padding: 1em 0 2.2em
    }
}

.titleImg {
    max-width: 695px
}

@media only screen and (max-width:767px) {
    .contactImg {
        background-image: url(https://sample5.work/wp-content/themes/initializr/img/contact_sp.jpg) !important;
        background-repeat: no-repeat
    }
}

.contBtnlist {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -moz-column-gap: 30px;
    column-gap: 30px
}

.contBtnlist.__grid2 {
    grid-template-columns: 1fr 1fr
}

.contBtnlist.__grid2>li:nth-child(1) a {
    border: solid 3px #be0000;
    border-radius: 15px
}

.contBtnlist.__grid2>li:nth-child(2) a {
    border: solid 3px #22b038;
    border-radius: 15px
}

.contBtnlist>li a {
    display: block;
    border-radius: 10px;
    transition: .3s;
    background-color: #fff
}

@media only screen and (max-width:767px) {
    .contBtnlist {
        display: block
    }

    .contBtnlist>li:not(:last-child) {
        margin-bottom: 3%
    }

    .contBtnlist.__grid2>li:nth-child(1) a {
        border: solid 2px #be0000
    }

    .contBtnlist.__grid2>li:nth-child(2) a {
        border: solid 2px #22b038
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .contBtnlist {
        -moz-column-gap: 10px;
        column-gap: 10px
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .contBtnlist {
        -moz-column-gap: 12px;
        column-gap: 12px
    }
}

@media print,
screen and (min-width:768px) {
    .telBtn {
        pointer-events: none
    }
}

.contBox {
    padding: .6em 0
}

.contBox.__tel {
    padding: .9em 0 .3em
}

@media only screen and (max-width:767px) {
    .contBox {
        padding: .7em 0 .7em
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .contBox.__tel {
        padding: .7em 0 .5em
    }
}

.contTitle {
    background-color: #be0000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: .6em 0;
    font-size: clamp(2rem, 1.8058252427rem + .5177993528vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    line-height: .6;
    text-align: center
}

.__line .contTitle {
    background-color: #22b038
}

.__mail .contTitle {
    background-color: #f15900
}

.contTelWrap {
    position: relative
}

.contTelWrap::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 15px;
    width: 76px;
    height: 50px;
    transform: translateY(-50%);
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/fax.svg);
    background-repeat: no-repeat;
    background-size: 76px
}

@media only screen and (max-width:767px) {
    .contTelWrap::after {
        width: 57px;
        height: 37px;
        background-size: 57px
    }
}

@media only screen and (min-width:767px) and (max-width:1279px) {
    .contTelWrap::after {
        width: 44px;
        height: 48px;
        background-size: 44px
    }
}

.contTelBlock {
    text-align: center;
    padding-left: 5em
}

@media only screen and (max-width:767px) {
    .contTelBlock {
        padding-left: 3em
    }
}

@media only screen and (min-width:767px) and (max-width:1279px) {
    .contTelBlock {
        padding-left: 3.5em
    }
}

.telTextBlock {
    text-align: center;
    padding-left: 3em
}

@media only screen and (max-width:767px) {
    .telTextBlock {
        padding-left: 1.8em
    }
}

@media only screen and (min-width:767px) and (max-width:1279px) {
    .telTextBlock {
        padding-left: 0
    }
}

.telText {
    font-size: clamp(1.2rem, 1.1029126214rem + .2588996764vw, 1.6rem);
    letter-spacing: .01em;
    line-height: 1;
    font-weight: 500
}

.contTel {
    letter-spacing: .01em;
    font-size: clamp(4rem, 3.6844660194rem + .8414239482vw, 5.3rem);
    line-height: 1;
    font-weight: 900;
    font-family: Oswald, serif;
    color: #be0000
}

@media only screen and (min-width:767px) and (max-width:1279px) {
    .contTel {
        font-size: 30px
    }
}

.contText {
    font-size: clamp(3.2rem, 2.8359223301rem + .9708737864vw, 4.7rem);
    font-weight: 900;
    padding-left: 1.7em;
    color: #22b038;
    position: relative
}

.__mail .contText {
    color: #f15900
}

.__mail .contText::after {
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/mail_icon_o.svg);
    width: 53px;
    height: 53px;
    left: 22px;
    background-size: 53px
}

.contText::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 15px;
    width: 68px;
    height: 68px;
    transform: translateY(-50%);
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/line_icon.svg);
    background-repeat: no-repeat;
    background-size: 68px
}

@media only screen and (max-width:767px) {
    .contText {
        letter-spacing: .01em
    }

    .__mail .contText::after {
        left: 15px;
        width: 40px;
        height: 40px;
        background-size: 40px
    }

    .contText::after {
        width: 51px;
        height: 51px;
        left: 11px;
        background-size: 51px
    }
}

@media only screen and (min-width:767px) and (max-width:1279px) {
    .contText {
        font-size: 25px
    }

    .__mail .contText::after {
        left: 15px;
        width: 31px;
        height: 31px;
        background-size: 31px
    }

    .contText::after {
        width: 35px;
        height: 35px;
        left: 11px;
        background-size: 35px
    }
}

@media only screen and (max-width:767px) {
    .rezonTitleWrap {
        display: flex;
        flex-direction: row-reverse;
        align-items: center
    }

    .rezonTitleWrap.__top {
        margin-bottom: 10px
    }
}

@media only screen and (max-width:767px) {
    .rezonTitleBlock {
        width: 70%
    }
}

.rezonImgBlock {
    width: 38%;
    margin-inline: auto
}

@media only screen and (max-width:767px) {
    .rezonImgBlock {
        width: 23%;
        margin-bottom: 0
    }
}

.rezonText {
    font-size: clamp(1.4rem, 1.3514563107rem + .1294498382vw, 1.6rem);
    line-height: 1.8;
    font-weight: 700
}

.rezonList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -moz-column-gap: 93px;
    column-gap: 93px
}

@media only screen and (max-width:767px) {
    .rezonList {
        display: block
    }

    .rezonList>li:not(:last-child) {
        margin-bottom: 1%
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .rezonList {
        -moz-column-gap: 20px;
        column-gap: 20px
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .rezonList {
        -moz-column-gap: 30px;
        column-gap: 30px
    }
}

.rezonCard {
    margin-bottom: 4%
}

.rezonTitle {
    font-size: clamp(2.4rem, 2.254368932rem + .3883495146vw, 3rem);
    font-weight: 700;
    color: #f15900
}

@media only screen and (max-width:767px) {
    .rezonTitle {
        text-align: left
    }
}

.comBtnWrap {
    display: none
}

.home .comBtnWrap {
    display: block
}

@media screen and (max-width:1200px) {
    .itemWrap {
        display: block
    }
}

.itemUnit_left {
    background-color: #fef2eb;
    padding: 1.2em;
    border-radius: 12px;
    width: 65%;
    margin-right: 1%
}

@media screen and (max-width:1200px) {
    .itemUnit_left {
        width: 100%;
        margin-bottom: 3%
    }
}

.itemUnit_right {
    width: 34%;
    background-color: #d3dde0;
    padding: 1.2em;
    border-radius: 12px
}

@media screen and (max-width:1200px) {
    .itemUnit_right {
        width: 100%
    }
}

.itemTitle {
    font-size: clamp(2rem, 1.8058252427rem + .5177993528vw, 2.8rem);
    line-height: 1.3;
    font-weight: 900
}

.itemTitle.__small {
    font-size: clamp(1.8rem, 1.7514563107rem + .1294498382vw, 2rem)
}

.itemBlock {
    width: 30%;
    margin-right: 2%
}

@media only screen and (max-width:767px) {
    .itemBlock {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5%
    }
}

.itemList_1 {
    width: 68%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -moz-column-gap: 10px;
    column-gap: 10px
}

.itemList_1>li {
    background-color: #fff;
    border-radius: 7px;
    padding: 2.2em 0;
    position: relative
}

.itemList_1>li span {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    font-size: clamp(1.8rem, 1.6786407767rem + .3236245955vw, 2.3rem);
    line-height: 1.2;
    font-weight: 900;
    text-align: center
}

@media only screen and (max-width:767px) {
    .itemList_1 {
        width: 100%;
        display: block
    }

    .itemList_1>li {
        min-height: 8vh
    }

    .itemList_1>li:not(:last-child) {
        margin-bottom: 3%
    }
}

.itemList_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 10px;
    column-gap: 10px
}

.itemList_2>li {
    background-color: #fff;
    border-radius: 7px;
    text-align: center;
    font-size: clamp(1.5rem, 1.4757281553rem + .0647249191vw, 1.6rem);
    line-height: 1;
    font-weight: 900;
    padding: .8em 0
}

@media only screen and (max-width:767px) {
    .itemList_2 {
        width: 100%;
        display: block
    }

    .itemList_2>li {
        font-size: 18px;
        min-height: 8vh
    }

    .itemList_2>li:not(:last-child) {
        margin-bottom: 3%
    }
}

.adCard {
    padding: 2em 0 2.5em;
    background-color: #22b038
}

@media only screen and (max-width:767px) {
    .adCard {
        padding: 2em 0 1em
    }
}

.adTitleSub {
    color: #fff;
    letter-spacing: .1em;
    font-size: clamp(2rem, 1.5145631068rem + 1.2944983819vw, 4rem);
    line-height: 1.4;
    font-weight: 900
}

.adTitleWrap {
    width: 100%;
    margin-inline: auto
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .adTitleWrap {
        text-align: left;
        margin-left: 9em
    }
}

.adimgWrap {
    position: absolute;
    left: -1.5%;
    bottom: -39px
}

.adimgWrap img {
    width: 50%;
    margin: 0
}

@media screen and (max-width:1760px) {
    .adimgWrap img {
        width: 44%
    }
}

@media only screen and (max-width:767px) {
    .adimgWrap {
        bottom: -15px;
        right: 0;
        left: unset;
        top: unset;
        transform: unset
    }

    .adimgWrap img {
        width: 33%;
        margin-right: -5px;
        margin-left: auto
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .adimgWrap {
        left: -21%
    }

    .adimgWrap img {
        width: 32%
    }
}

@media only screen and (min-width:960px) and (max-width:1279px) {
    .adimgWrap {
        left: -6.5%
    }

    .adimgWrap img {
        width: 34%
    }
}

.adTitle {
    color: #ff0;
    font-size: clamp(4rem, 2.786407767rem + 3.2362459547vw, 9rem);
    line-height: 1.2;
    font-weight: 900
}

.adText {
    color: #ff0;
    font-size: clamp(2rem, 1.5145631068rem + 1.2944983819vw, 4rem);
    line-height: 1.2;
    font-weight: 900
}

@media only screen and (max-width:767px) {
    .adText {
        line-height: 1.4
    }
}

.kaitoriCard {
    padding: 4em 0 5em;
    position: relative
}

.kaitoriCard::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/back_y.jpg);
    background-repeat: repeat;
    z-index: -1
}

@media only screen and (max-width:767px) {
    .kaitoriCard {
        padding: 4em 0 1em
    }
}

.itemMidashi {
    font-size: clamp(2rem, 1.7087378641rem + .7766990291vw, 3.2rem);
    line-height: 1;
    color: #f15900;
    font-weight: 900
}

@media only screen and (max-width:767px) {
    .itemMidashi {
        text-align: center;
        margin-bottom: 5%
    }
}

@media only screen and (max-width:767px) {
    .listWrap {
        display: flex;
        align-items: center;
        flex-direction: row-reverse
    }
}

@media only screen and (max-width:767px) {
    .listTitleBlock {
        width: 70%
    }
}

@media only screen and (max-width:767px) {
    .listImgBlock {
        width: 30%;
        margin-bottom: 0
    }
}

.itemtTitle {
    font-size: clamp(1.6rem, 1.5029126214rem + .2588996764vw, 2rem);
    letter-spacing: .08em;
    line-height: 1.4;
    font-weight: 900
}

@media only screen and (min-width:767px) and (max-width:1279px) {
    .listTitleBlock .itemtTitle {
        position: absolute;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }
}

.itemList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-bottom: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    row-gap: 10px
}

.itemList.__grid2 {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0
}

.itemList.__grid2>li>a {
    padding: .5em 1em
}

.itemList>li {
    background-color: #fff;
    border-radius: 10px
}

.itemList>li>a {
    display: block;
    padding: 2em 1em;
    transition: .3s
}

@media only screen and (max-width:767px) {
    .itemList {
        grid-template-columns: 1fr
    }

    .itemList.__grid2 {
        grid-template-columns: 1fr
    }

    .itemList.__grid2>li>a {
        padding: 0 1em
    }

    .itemList>li {
        padding: .4em 1em
    }

    .itemList>li>a {
        padding: 0 1em
    }
}

.itemTextBlock {
    width: 30%;
    margin-right: 2%
}

@media only screen and (max-width:767px) {
    .itemTextBlock {
        width: 38%
    }
}

.itemImgBlock {
    width: 68%
}

@media only screen and (max-width:767px) {
    .itemImgBlock {
        width: 60%
    }
}

.blandList {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    -moz-column-gap: 10px;
    column-gap: 10px;
    row-gap: 10px
}

.blandList>li {
    background-color: #fff;
    padding: 2em .5em 1.5em;
    border-radius: 10px
}

.blandList>li img {
    width: 57%
}

@media only screen and (max-width:767px) {
    .blandList {
        grid-template-columns: repeat(2, 1fr)
    }

    .blandList>li {
        padding: 1em .5em 1em
    }

    .blandList>li img {
        width: 57%
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .blandList {
        grid-template-columns: repeat(5, 1fr)
    }
}

.blandTitle {
    font-size: clamp(1.3rem, 1.2757281553rem + .0647249191vw, 1.4rem);
    line-height: 1;
    font-weight: 600
}

@media only screen and (max-width:767px) {
    .blandTitle {
        font-size: 14px
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .blandTitle {
        font-size: 14px
    }
}

.workblandBox {
    font-size: clamp(1.5rem, 1.4757281553rem + .0647249191vw, 1.6rem);
    display: inline-block;
    color: #fff;
    line-height: 1;
    font-weight: 900;
    padding: .8em 1.5em;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #f15900
}

.workImg {
    width: 64%
}

.workTitle {
    font-size: clamp(1.8rem, 1.7514563107rem + .1294498382vw, 2rem);
    line-height: 1;
    font-weight: 900
}

@media only screen and (max-width:767px) {
    .workTitle {
        font-size: 20px
    }
}

.priceTitle {
    font-size: clamp(1.8rem, 1.7514563107rem + .1294498382vw, 2rem);
    line-height: 1;
    font-weight: 900;
    color: #be0000
}

@media only screen and (max-width:767px) {
    .priceTitle {
        font-size: 20px
    }
}

.priceWrap {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto
}

.workPrice {
    font-size: clamp(4rem, 3.6844660194rem + .8414239482vw, 5.3rem);
    display: inline-block;
    font-weight: 900;
    line-height: 1;
    font-family: Oswald, serif;
    color: #be0000
}

@media only screen and (max-width:767px) {
    .workPrice {
        font-size: 52px
    }
}

.workList {
    background-color: #fef2eb;
    border-radius: 10px;
    padding: 1.5em
}

.workList>li span {
    font-size: clamp(1.5rem, 1.4757281553rem + .0647249191vw, 1.6rem);
    display: inline-block;
    line-height: 1.5;
    font-weight: 600;
    position: relative;
    padding-left: 1em
}

.workList>li span::after {
    content: "";
    display: block;
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #f15900;
    left: 0;
    top: 6px
}

@media only screen and (max-width:767px) {
    .workList {
        padding: 1.2em 1em
    }

    .workList>li:not(:last-child) {
        margin-bottom: 5px
    }
}

.enText {
    display: inline-block;
    font-size: clamp(1.8rem, 1.7514563107rem + .1294498382vw, 2rem);
    line-height: 1;
    font-weight: 900;
    color: #be0000
}

@media only screen and (max-width:767px) {
    .enText {
        font-size: 20px
    }
}

.wayCard {
    padding: 4em 0 5em;
    position: relative
}

.wayCard::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/back_y.jpg);
    background-repeat: repeat;
    z-index: -1
}

@media only screen and (max-width:767px) {
    .wayCard {
        padding: 2em 0 1em
    }
}

.waylist .slick-slide {
    text-align: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    transition: .3s;
    cursor: pointer;
    line-height: 1;
    font-weight: 500;
    font-size: clamp(2rem, 1.7572815534rem + .6472491909vw, 3rem);
    font-weight: 900;
    padding: .7em 0 .6em;
    background-color: #fff
}

.waylist .slick-slide:nth-child(1) {
    margin-right: 5px
}

.waylist .slick-slide:nth-child(2) {
    margin-left: 5px
}

.waylist .slick-slide:hover {
    opacity: .7
}

@media only screen and (max-width:767px) {
    .waylist .slick-slide {
        padding: .7em 0 .7em
    }
}

.flowSlider {
    margin-top: -2px
}

.flowSlider .slick-slide {
    padding: 2em 2.8em 3em;
    background: #fff;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px
}

@media only screen and (max-width:767px) {
    .flowSlider .slick-slide {
        padding: 1.5em 1em
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .flowSlider .slick-slide {
        padding: 1.5em
    }
}

.wayTitle {
    font-size: clamp(2rem, 1.5145631068rem + 1.2944983819vw, 4rem);
    line-height: 1;
    font-weight: 900;
    color: #f15900
}

@media only screen and (max-width:767px) {
    .wayTitle {
        padding-left: 2.9em;
        margin-bottom: 7%
    }
}

.wayText {
    font-size: clamp(1.4rem, 1.254368932rem + .3883495146vw, 2rem);
    line-height: 1.6;
    font-weight: 700
}

.wayTitleBlock {
    position: relative;
    padding-left: 9em
}

.wayTitleBlock.__delivery::after {
    width: 90px;
    height: 102px;
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/delivery.svg);
    background-size: 90px
}

.wayTitleBlock::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 114px;
    height: 95px;
    background-image: url(https://sample5.work/wp-content/themes/initializr/img/house.svg);
    background-repeat: no-repeat;
    background-size: 114px
}

@media only screen and (max-width:767px) {
    .wayTitleBlock {
        padding-left: 0
    }

    .wayTitleBlock.__delivery::after {
        width: 44px;
        height: 51px;
        background-size: 44px
    }

    .wayTitleBlock::after {
        top: -13px;
        width: 51px;
        height: 44px;
        background-size: 51px
    }
}

.flowList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -moz-column-gap: 30px;
    column-gap: 30px
}

@media only screen and (max-width:767px) {
    .flowList {
        grid-template-columns: 1fr;
        row-gap: 25px
    }

    .flowList>li {
        display: flex
    }
}

@media only screen and (min-width:767px) and (max-width:959px) {
    .flowList {
        -moz-column-gap: 20px;
        column-gap: 20px
    }
}

@media only screen and (max-width:767px) {
    .flowImgBlock {
        width: 40%;
        margin-right: 3%
    }
}

@media only screen and (max-width:767px) {
    .flowInfoBlock {
        width: 57%
    }
}

.flowImg {
    padding-bottom: 79%;
    border-radius: 10px
}

.flowTitle {
    font-size: clamp(1.6rem, 1.3087378641rem + .7766990291vw, 2.8rem);
    letter-spacing: .05em;
    line-height: 1.6;
    font-weight: 900;
    color: #f15900
}

@media only screen and (max-width:767px) {
    .flowTitle {
        margin-bottom: 0;
        margin-top: -5px
    }
}

.flowText {
    font-size: clamp(1.3rem, 1.227184466rem + .1941747573vw, 1.6rem);
    line-height: 1.8;
    font-weight: 500
}

@media only screen and (max-width:767px) {
    .flowText {
        line-height: 1.5
    }
}

.prev-arrow {
    display: block;
    width: 50px;
    height: 50px;
    background: #22b038;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    z-index: 99;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2%
}

.prev-arrow.content_2 {
    right: -1.3%
}

.prev-arrow::before {
    position: absolute;
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    font-size: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "\f054";
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:767px) {
    .prev-arrow {
        width: 42px;
        height: 42px
    }

    .prev-arrow::before {
        font-size: 18px
    }
}

.next-arrow {
    display: block;
    width: 50px;
    height: 50px;
    background: #22b038;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    z-index: 99;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2%
}

.next-arrow.content_2 {
    left: -1.3%
}

.next-arrow::before {
    position: absolute;
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    font-size: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "\f053";
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:767px) {
    .next-arrow {
        width: 42px;
        height: 42px
    }

    .next-arrow::before {
        font-size: 18px
    }
}

.workSlider .slick-slide {
    opacity: .5
}

.slide6 .slick-slide {
    opacity: 1
}

.workBox {
    background-color: #fff;
    margin: 1em 5px;
    border-radius: 10px
}

@media only screen and (max-width:767px) {
    .workBox {
        margin: 1em 16px
    }
}

.voiceWrap {
    max-width: 1040px;
    margin-inline: auto
}

.voiceImg {
    padding-top: clamp(40px, 3.9em, 62.4px);
    padding-bottom: clamp(40px, 3.9em, 62.4px)
}

@media only screen and (max-width:767px) {
    .voiceImg {
        background-image: url(https://sample5.work/wp-content/themes/initializr/img/voice_sp.jpg) !important
    }
}

.voiceBox {
    background-color: rgba(255, 255, 255, .9);
    border-radius: 10px;
    padding: 2em
}

@media only screen and (max-width:767px) {
    .voiceBox {
        padding: 1.5em 1.5em
    }
}

.voiceTitle {
    font-size: clamp(3rem, 2.5145631068rem + 1.2944983819vw, 5rem);
    line-height: 1.8;
    font-weight: 900;
    color: #be0000
}

@media only screen and (max-width:767px) {
    .voiceTitle {
        line-height: 1.4
    }
}

.voiceSubTitle {
    font-size: clamp(1.8rem, 1.5087378641rem + .7766990291vw, 3rem);
    line-height: 1.6;
    font-weight: 900
}

.voiceBtnList {
    max-width: 903px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 18px;
    column-gap: 18px
}

@media only screen and (max-width:767px) {
    .voiceBtnList {
        grid-template-columns: 1fr;
        row-gap: 14px
    }
}

.contact_title {
    font-size: clamp(2rem, 1.6601941748rem + .9061488673vw, 3.4rem);
    line-height: 1.4;
    font-weight: 900
}

/* ===== ファーストビューのフォントサイズ変更 ===== */
@media only screen and (max-width: 767px) {
    .topFvTitle {
        font-size: 28px; /* 本来のSCSSの数値 */
        line-height: 1.5;
    }
    .topFvTitle span {
        font-size: 28px;
        line-height: 1.5;
        background: linear-gradient(transparent 80%, rgb(255, 202, 0) 0%);
    }
}

/* ===== 画像をWebpに変更 ===== */
.wayTitleBlock::after {
    background-image: url(img/house.webp);
}
.wayTitleBlock.__delivery::after {
    background-image: url(img/delivery.webp);
}
.contTelWrap::after {
    background-image: url(img/fax.webp);
}
.contText::after {
    background-image: url(img/line_icon.webp);
}
.__mail .contText::after {
    background-image: url(img/mail_icon_o.webp);
}
.headerBtnSp > a::after {
    background-image: url(img/line_icon.webp);
}
.overRayBtn::after {
    background-image: url(img/mail_icon_w.webp);
}
.headerBtnList > li a.__line::after {
    background-image: url(img/line_icon.webp);
}
.headerBtnList > li a.__contact::after {
    background-image: url(img/mail_icon_w.webp);
}
.kaitoriCard::after {
    background-image: url(img/back_y.webp);
}
.wayCard::after {
    background-image: url(img/back_y.webp);
}
@media only screen and (max-width: 767px) {
    .voiceImg {
        background-image: url(img/voice_sp.webp) !important;
    }
		.contactImg {
        background-image: url(img/contact_sp.webp) !important;
        background-repeat: no-repeat;
    }
    .topFvImg {
        background-image: none!important;
    }
}


/* ===== 画像にLazy Loadを付与したことによるCSS修正 ===== */
.comImg,
.delyImg,
.stepImg,
.cmNewsListImg,
.flowImg,
.compCanImg{
    padding-bottom: 0px;
}

@font-face {
    font-family: "Font Awesome 6 Pro";
    font-display: swap;
    src: local("Font Awesome 6 Pro"); /* 端末にあればそれを使う */
}







/*==================================================
ふわっアニメーション
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}



/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}



/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;

}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}



.workPrice {
    font-family: "Oswald", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic StdN", "Meiryo", sans-serif!important;
}