h1 {
    font-family: "Hiragino Sans", sans-serif;
}

h2 {
    font-family: "Hiragino Sans", sans-serif;
}

h3 {
    font-family: "Hiragino Sans", sans-serif;
}

ul li {
    font-family: "Hiragino Sans", sans-serif;
}

p {
    font-family: "Hiragino Sans", sans-serif;
}

a {
    font-family: "Hiragino Sans", sans-serif;
}

span {
    font-family: "Hiragino Sans", sans-serif;
}

img {
    width: 100%;
}

ul {
    padding-left: 0px;
}

.pc {
    display: block;

}

a:hover {
    opacity: 0.7;
}

.sp {
    display: none;
}

.wrapper {
    max-width: 1500px;
    margin: 0 auto;
}

.wrapper2 {
    max-width: 1255px;
    margin: 0 auto;
}

.wrapper3 {
    max-width: 1000px;
    margin: 0 auto;
}

.wrapper4 {
    max-width: 1200px;
    margin: 0 auto;
}

.padleftright {
    padding-left: 0%;
    padding-right: 0%;
}

.spmock {
    display: none;
}

#humMenu {
    display: none;
}

header.service {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 10px;
    padding-right: 10px;
    position: sticky;
    background: #fff;
    top: 0;
    z-index: 10000;
}

header.service img {
    height: auto;
    margin: 0;
    width: 230px;
}

.headservicediv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

}

.headul li {
    list-style: none;
}

.headul li a {
    text-decoration: none;
    color: #000000;
    font-weight: 600;
    font-size: 17px;
}

.headul ul {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
}

.headbtn {
    display: flex;
    flex-wrap: wrap;
}

.headbtn div {
    width: 130px;
    text-align: center;

}

.headbtn div a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-family: "LINE Seed JP", sans-serif;
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: block;
}

.headbtn div:first-child {
    background: #229EBC;
    border-radius: 5px 0px 0px 5px;
}

.headbtn div:nth-child(2) {
    background: #E566A0;
    border-radius: 0px 5px 5px 0px;
}

.headbtn div:nth-child(2) a {
    background: #E566A0 !important;
    border-radius: 0px 5px 5px 0px !important;
}



.toptext h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: 4px;
    color: #fff;
    padding-bottom: 35px;
}

.bluebg {
    padding-top: 85px;
    background-image: url(../images/bluebg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 700px;
}

.toptext p {
    font-size: 17px;
    font-weight: 600;
    line-height: 30px;
    color: #fff;
    padding-bottom: 30px;
}

.awarddiv {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 15px;
    padding-bottom: 20px;
}

.awarddiv img {
    width: 225px;
}

.topflex {
    display: flex;
    flex-wrap: wrap;
}

.toptext {
    width: 43%;
    margin-left: 1.5%;
}

.topimg {
    width: 55%;
    position: relative;
}

.topimg img {
    position: absolute;
    bottom: -41px;
}

.lightbluebg {
    background: #E2F4F8;
}

.lightbluebg p {
    margin-left: 1.5%;
    font-weight: 600;
    padding-top: 15px;
    padding-bottom: 15px;
}

.lightbluebg p span {
    color: #229EBC;
    padding-right: 5px;
}



.performlogo {
    display: flex;
    flex-wrap: wrap;
    background: #F9F9F9;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.performlogo img {
    width: 150px;
}

.problemdiv {
    padding-top: 80px;
    margin-top: -2px;
    padding-bottom: 100px;
    background-image: url(../images/bluesen.png);
    background-color: #fff;
    background-position: right -13px;
    background-repeat: no-repeat;
    background-size: 103%;
}

.problemp {
    font-family: "LINE Seed JP", sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #229EBC;
    padding-bottom: 30px;
}

.swiper {
    max-width: 350px;
    height: 450px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.yoriaih img {
    width: 400px;
}

.yoriaih p {
    display: inline-block;
    font-size: 45px;
    font-weight: 600;
    padding-left: 10px;
}

.yoriaih {
    text-align: center;
    padding-bottom: 25px;
}

.slideflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.slidetext {
    width: 46%;
}

.swipertopdiv {
    width: 50%;
}

.slidetext p {
    font-size: 18px;
    font-weight: 500;
    line-height: 50px;
}

.secp {
    margin-top: 20px;
}


.slide1 {
    background: #43AFC9;
}

.slide2 {
    background: #2BD2CA;
}

.slide3 {
    background: #E83A3B;
}

.slide4 {
    background: #FF971E;
}

.slide5 {
    background: #4A7ABA;
}

.slide6 {
    background: #9E22BC;
}

.introducediv {
    padding-top: 80px;
    padding-bottom: 90px;
    background: #F9F9F9;
    margin-top: -2px;
}

.effectp {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding-bottom: 50px;
    margin-top: -15px;
}

.swiper-slide {
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    flex-direction: column;
    padding-top: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 40px;
}

.nayami {
    font-size: 14px;
    font-weight: 600;
    padding-left: 9px;
}

.count {
    font-family: 'LINE Seed JP';
    font-size: 50px;
    line-height: 50px;
    display: inline-block;
}

.catp {
    display: inline-block;
    vertical-align: 40%;
    padding-left: 12px;
    font-size: 18px;
    font-weight: bold;
    font-family: 'LINE Seed JP';
    font-size: 18px;
}

.swipebottom p {
    font-size: 25px;
    line-height: 45px;
    font-family: 'LINE Seed JP';
    margin-top: 30px;
    text-align: center;
}

.introducediv .yoriaih {
    padding-bottom: 0px;
}

.slide2 .swipebottom p {
    margin-top: 30px;
}

.slide3 .swipebottom p {
    margin-top: 30px;
}

.slide4 .swipebottom p {
    margin-top: 30px;
}

.slide5 .swipebottom p {
    margin-top: 30px;
}

.slider {
    width: 100%;
    margin: 0 auto;
}

.slider img {
    width: 100%;
}

.slider .slick-slide {
    height: auto !important;
}

.slider .slick-arrow {
    z-index: 2 !important;
}

.slider .slick-next {
    right: 10px !important;
}

.slider .slick-prev {
    left: 10px !important;
}

.slidertopdiv {
    max-width: 1600px;
    display: block;
    margin: 0 auto;
}

.innerslide {
    background: #fff;
    height: 450px;
    max-width: 480px;
    padding-top: 45px;
    border-radius: 10px;
    padding-left: 45px;
    padding-right: 45px;
    padding-bottom: 45px;
}

.slidertopdiv .slick-next {
    right: 17.2% !important;
}

.slidertopdiv .slick-prev {
    left: 14.6% !important;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: #fff !important;
    background: #229EBC !important;
}

.slidertopdiv .slick-prev {
    width: 50px;
    height: 50px;
    border-radius: 40px;
    padding: 0px;
    color: #000;
    background: #229EBC;
    z-index: 100;
}

.slidertopdiv .slick-next {
    width: 50px;
    height: 50px;
    border-radius: 40px;
    padding: 0px;
    color: #000;
    background: #229EBC;
    z-index: 100;
}

.innerjirei {
    font-size: 14px;
    color: #229EBC;
    padding-left: 15px;
    font-weight: 600;
}

.innercount {
    font-family: 'LINE Seed JP';
    font-weight: bold;
    line-height: 50px;
    font-size: 50px;
    color: #229EBC;
    display: inline-block;
}

.innertext {
    display: inline-block;
    font-size: 28px;
    font-weight: 600;
    vertical-align: 14%;
    padding-left: 15px;
    margin-bottom: 20px;
}

.innertitle {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: #229EBC;
    border-radius: 4px;
    padding-top: 7px;
    padding-bottom: 5px;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

ul {
    list-style: none;
}

.slideul li {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 600;
    line-height: 30px;
}

.circle {
    color: #229EBC;
}

.slideul li:before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(../images/circle.png);
    background-size: contain;
    vertical-align: -4%;
    background-repeat: no-repeat;
    margin-right: 7px;
}

.pink {
    color: #E566A0;
    background-image: url(../images/yellow.png);
    background-size: 50px;
    background-position: bottom;
    background-repeat: no-repeat;
    background-repeat: repeat-x;
}

.bignum {
    font-size: 25px;
}

.slideul {
    margin-bottom: 15px;
}

.com {
    width: 65px;
    border: 1px solid #DDDDDD;
    border-radius: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding-top: 2px;
    margin-right: 20px;
    display: inline-block;
}

.comabout {
    display: inline-block;
}

.accessul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

.comnum {
    color: #E25495;
    font-weight: 600;
}

.numabouttext {
    line-height: 30px;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
}

.beforep {
    padding-left: 20px;
    text-indent: -20px;
}

.beforep:before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(../images/circle.png);
    background-size: contain;
    vertical-align: -4%;
    background-repeat: no-repeat;
    margin-right: 7px;
}

.usebg {
    background: #229EBC;
    padding-top: 50px;
    padding-bottom: 80px;
}

.usescene {
    font-size: 17px;
    font-family: 'LINE Seed JP';
    font-weight: bold;
    color: #fff;
    padding-bottom: 10px;
}

.sceneh h2 {
    font-size: 45px;
    font-weight: 600;
    color: #fff;
    line-height: 50px;

}

.sceneh p {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}

.sceneh {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 50px;
}

.usecase {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: center;
    justify-content: left;
    margin-bottom: 40px;
}

.usecase img {
    max-width: 225px;
    margin-right: 10px;
}

.usecenter {
    width: 100%;
    max-width: 387px;
    padding-top: 53px;
    background-image: url(../images/scene1-1.png);
    background-repeat: no-repeat;
    background-size: 9%;
    background-position: top 6px left 0;
    padding-bottom: 36px;
}

.usecenter h3 {
    font-size: 28px;
    line-height: 35px;
    padding-bottom: 25px;
    font-weight: 600;
}

.usecenter p {
    font-size: 16px;
    font-weight: 600;
    padding-left: 20px;
    text-indent: -20px;
}

.blueinner {
    background: #A7E4F4;
    padding-top: 70px;
    padding-bottom: 50px;
    /* padding-right: 140px; */
    /* padding-left: 40px; */
    border-radius: 10px;
    width: 100%;
    max-width: 538px;
    padding-left: 40px;
    position: relative;
}

.blueinner h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 35px;
    padding-bottom: 25px;
}

.blueinner span {
    color: #229EBC;
}

.usecenter span {
    color: #229EBC;
    padding-right: 5px;
}

.blueinner p {
    font-size: 16px;
    font-weight: 600;
    padding-left: 20px;
    text-indent: -20px;
}

.case2 .usecenter {
    background-image: url(../images/scene2-1.png);

}

.case2 img {}

.case3 .usecenter {
    background-image: url(../images/scene3-1.png);

}

.case4 .usecenter {
    background-image: url(../images/scene4-1.png);

}

.case5 .usecenter {
    background-image: url(../images/scene5-1.png);

}

.case2 {
    background-color: #A7E4F4;
}

.case2 .blueinner {
    background-color: #fff;
}

.case4 .blueinner {
    background-color: #fff;
    padding-bottom: 25px;
}

.case5 .blueinner {
    padding-bottom: 25px;
}

.case4 {
    background-color: #A7E4F4;
}

.case2 .usecenter {
    background-size: 14%;
    background-position: top 3px left 0;
}

.case3 .usecenter {
    background-size: 14%;
    background-position: top 3px left 0;
}

.case4 .usecenter {
    background-size: 14%;
    background-position: top 3px left 0;
}

.case5 .usecenter {
    background-size: 14%;
    background-position: top 3px left 0;
}

.blueinner .skome {
    font-size: 12px;
}

.blueinner:before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(../images/triwhi.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 44%;
}

.case2 .blueinner:before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(../images/triblu.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 44%;
}

.case4 .blueinner:before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(../images/triblu.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 44%;
}

.contactdiv {
    padding-top: 70px;
}

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


.contactdiv {
    position: relative;
    z-index: 1;
    padding: 100px 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
}

.contactdiv h2 {
    font-size: 45px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 25px;
    color: #fff;
}

.trip {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 30px;
}

.contactflex {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

.shiryoucontact {
    width: 47%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    border: 1px solid #229EBC;
    padding-top: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

.trialcontact {
    width: 47%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    border: 1px solid #229EBC;
    padding-top: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

.ship {
    text-align: center;
    font-size: 15px;
    font-family: 'LINE Seed JP';
    color: #000;
}

.shiryoucontact h3 {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: #000;
    padding-bottom: 20px;
}

.trialcontact h3 {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: #000;
    padding-bottom: 20px;
}

.shiryoucontact img {
    max-width: 350px;
    width: 100%;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.trialcontact img {
    max-width: 350px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.shiryoucontact a {
    text-align: center;
    display: block;
    background: #229EBC;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    margin-top: 5px;
}

.trialcontact a {
    text-align: center;
    display: block;
    background: #E566A0;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    margin-top: 5px;
}

.purplehuki {
    position: relative;
    background: #9b4bb5;
    color: white;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    width: 190px;
    margin: 0 auto;
    margin-top: -22px;
}

.purplehuki::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #9b4bb5;
    margin-top: -22px;
}

.functiondiv {
    padding-top: 100px;
    padding-bottom: 140px;
    background: #fff;
}

.wrapyori {
    text-align: left;
}

.functext {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 50px;
}

.functext h2 {
    font-size: 45px;
    font-weight: 600;
    color: #000;
    line-height: 65px;
}

.functext p {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding-top: 20px;
}

.functext span {
    color: #229EBC
}

.funcsidebar {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.funcmenu-item {
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s, border-left 0.3s;
    margin-bottom: 8px;
}

.funcmenu-item:hover {
    background-color: #229EBC;
    transition: background 0.3s, border-left 0.3s;
}

.funcmenu-item.funcactive {
    background-color: #229EBC;
    color: white;
}

.menu-icon {
    margin-right: 10px;
}

.funccontent {
    flex-grow: 1;
    padding: 40px;
    background-color: #229EBC;
    max-width: 700px;
    border-radius: 30px;
    padding-top: 80px;
    padding-left: 60px;
    padding-bottom: 60px;
    padding-left: 60px;
    padding-right: 60px;
}

.funccontent h3 {
    font-size: 40px;
    font-weight: 600;
    color: #ffff;
}

.contp {
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    padding-bottom: 20px;
}

.contdiv {
    padding-top: 35px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 35px;
    background: #4EB0C9;
    border-radius: 5px;
}

.contdiv ul li {
    color: #fff;
    padding-left: 25px;
    text-indent: -25px;
}

.contdiv ul li:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/checkc.png);
    background-size: contain;
    vertical-align: -10%;
    background-repeat: no-repeat;
    margin-right: 7px;
}

.contdiv p {
    color: #fff;
    font-size: 18px;
    padding-bottom: 5px;
    font-weight: 500;
}

.contdiv ul.marulcon {
    margin-bottom: 15px;
}

.funccontent-section {
    display: none;
}

.funccontent-section.funcactive {
    display: block;
}

/* --- SVG Animation Layout --- */
.func-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 30px;
}

.func-header-text {
    flex: 1;
}

.func-header-image {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.func-svg-anim {
    width: 100%;
    height: auto;
    max-width: 220px;
    display: block;
}

@media screen and (max-width: 768px) {
    .func-header-flex {
        flex-direction: column;
        gap: 20px;
    }
    
    .func-header-image {
        width: 100%;
        max-width: 180px;
        order: -1; 
        margin: 0 auto;
    }
}
/* ---------------------------- */

.funccheck-item {
    margin-top: 1em;
}

.funccheck-item::before {
    content: '✔';
    color: white;
    background-color: #57A9C6;
    border-radius: 50%;
    padding: 0.2em 0.4em;
    margin-right: 0.5em;
}

.funcflex {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}

.funcitem1 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb1.png);
    background-size: cover;
}

.funcitem2 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb2.png);
    background-size: cover;
}

.funcitem3 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb3.png);
    background-size: cover;
}

.funcitem4 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb4.png);
    background-size: cover;
}

.funcitem5 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb5.png);
    background-size: cover;
}

.funcitem6 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb6.png);
    background-size: cover;
}



.sideright {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
}

.sideright p {
    font-size: 18px;
    font-weight: 600;
    margin-left: 20px;
}

.sidearrow {
    width: 35px;
    height: 35px;
    background-image: url(../images/greyarrow.png);
    background-size: cover;
}

.funcactive .right1 .sideicon {
    background-image: url(../images/iconw1.png);
}

.funcactive .right2 .sideicon {
    background-image: url(../images/iconw2.png);
}

.funcactive .right3 .sideicon {
    background-image: url(../images/iconw3.png);
}

.funcactive .right4 .sideicon {
    background-image: url(../images/iconw4.png);
}

.funcactive .right5 .sideicon {
    background-image: url(../images/iconw5.png);
}

.funcactive .right6 .sideicon {
    background-image: url(../images/iconw6.png);
}

.funcactive .sidearrow {
    background-image: url(../images/bluearrow.png);
}

.funcmenu-item:hover {
    background-color: #229EBC;
}

.funcitem1:hover .right1 .sideicon {
    background-image: url(../images/iconw1.png);
}

.funcitem1:hover .right1 p {
    color: #fff;
}

.funcitem1:hover .sidearrow {
    background-image: url(../images/bluearrow.png);
    transition: background 0.3s, border-left 0.3s;
}

.funcitem2:hover .right2 .sideicon {
    background-image: url(../images/iconw2.png);
}

.funcitem2:hover .right2 p {
    color: #fff;
}

.funcitem2:hover .sidearrow {
    background-image: url(../images/bluearrow.png);
    transition: background 0.3s, border-left 0.3s;
}

.funcitem3:hover .right3 .sideicon {
    background-image: url(../images/iconw3.png);
}

.funcitem3:hover .right3 p {
    color: #fff;
}

.funcitem3:hover .sidearrow {
    background-image: url(../images/bluearrow.png);
    transition: background 0.3s, border-left 0.3s;
}

.funcitem4:hover .right4 .sideicon {
    background-image: url(../images/iconw4.png);
}

.funcitem4:hover .right4 p {
    color: #fff;
}

.funcitem4:hover .sidearrow {
    background-image: url(../images/bluearrow.png);
    transition: background 0.3s, border-left 0.3s;
}

.funcitem5:hover .right5 .sideicon {
    background-image: url(../images/iconw5.png);
}

.funcitem5:hover .right5 p {
    color: #fff;
}

.funcitem5:hover .sidearrow {
    background-image: url(../images/bluearrow.png);
    transition: background 0.3s, border-left 0.3s;
}

.funcitem6:hover .right6 .sideicon {
    background-image: url(../images/iconw6.png);
}

.funcitem6:hover .sidearrow {
    background-image: url(../images/bluearrow.png);
    transition: background 0.3s, border-left 0.3s;
}

.funcitem6:hover .right6 p {
    color: #fff;
}

.pricediv {
    background: #F9F9F9;
    padding-top: 50px;
    padding-bottom: 100px;
    margin-top: -2px;
}

.sprice {
    font-size: 17px;
    font-weight: bold;
    font-family: 'LINE Seed JP';
    text-align: center;
    color: #229EBC;
}

.pricediv h2 {
    font-size: 45px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 15px;
}

.aboutprice {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 30px;
}



.seotooldiv h2 {
    font-size: 45px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 15px;
}

.seotooldiv {
    padding-top: 80px;
    background-color: #FFFFFF;
    padding-bottom: 100px;
    margin-top: -2px;
}




.ryoukinwhite {
    background-color: #fff;
}

.ryoukinbg h2 {
    text-align: center;
    font-size: 20px;
    padding-bottom: 50px;
}

p.kome {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
}




#table03 th {
    background-color: #fff;
}

#table03 th,
#table03 td {
    text-align: center;
    line-height: 1.8em;
    min-width: 162px;
    padding: 8px;
    vertical-align: middle;
    font-size: 16px;
    padding-left: 0px;
    padding-right: 0;
    background: #fff;
}

#table03 {
    width: 100%;
    background: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 30px;
}

#table03 .head {
    background-color: #e2e2e2;
}

#table03 th.fixed {
    background-color: #f0f0f0;
}

#table03 th.widthfix {
    width: 0%;
}

#table03 th.whitefix {
    background-color: #fff;
}

#table03 th.nonborleft {
    border-left: none;
}

#table03 th.bgor {
    background-color: #FFC200;
}

#table03 td.bgor {
    background-color: #FFC200;
}

#table03 th.bgwh {
    background-color: #fff;
}

#table03 td.bgwh {
    background-color: #fff;
}

#table03 td.fw {
    font-weight: bold;
}

#table03 tr.toptr th.boror {
    border-left: 4px solid #FFC200;
    border-right: 4px solid #FFC200;
    position: relative;
    border-radius: 0px;
    color: #FFC200;
}

#table03 td.borbotor {
    border-bottom: 4px solid #FFC200;
}

table:not(.has-border-color) :where(th, td) {
    border: none;
}

#table03 tr.toptr th {
    margin-left: 10px;
    font-weight: bold;
    font-size: 20px;
    vertical-align: baseline;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-right: 12px solid #fff;
    border-left: 12px solid #fff;
    border-radius: 11px;
}

#table03 tr th.borwhite {
    border-top: 10px solid #fff;
    border-left: none;
}

#table03 td span.onlybold {
    font-weight: bold;
}

#table03 td span.bluebig {
    font-weight: bold;
    color: #003566;
    font-size: 20px;
}

tr.toptr th span {
    font-size: 12px;
    display: block;
    color: #000;
    padding-top: 14px;
    line-height: 1.5em;
    font-weight: normal;
}

#table03 tr th.bororange {
    font-size: 18px;
}

span.smallplus {
    font-size: 12px;
}

/* tab */
@media only screen and (max-width: 1280px) {
    #table03 {
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
    }

    #table03 th.fixed {
        min-width: auto;
    }

    #table05 .fixed:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        right: -1px;
        height: 100%;
        border-left: 1px solid #707070;
        border-right: 1px solid #707070;
    }
}


.ryoukinbg .freectadiv a {
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 20px;
    color: #fff;
    border: 2px solid #FFF;
    border-radius: 7px;
}

#table03 th.free {
    color: #229EBC;
    background: #9CDAE8;
    border-radius: 4px;
}

#table03 th.light {
    color: #FFEBEB;
    background: #7BC1D1;
    border-radius: 4px;
}

#table03 th.normal {
    color: #FFFFFF;
    background: #56ABBF;
    border-radius: 4px;
}

#table03 th.pro {
    color: #FFFFFF;
    background: #229EBC;
    border-radius: 4px;
}









.casediv {
    background-color: #fff;
    margin-top: -2px;
}

.casediv .yoriaih {
    padding-bottom: 0;
}

.innerslidecase img.caseimg {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}


.innerslidecase h3 {
    font-size: 16px;
    font-weight: 500;
    width: fit-content;
}

.innerslidecase div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.innerslidecase {
    padding: 17px;
    padding-top: 90px;
}

.innerslidecase img.arrowimg {
    width: 40px;
}

.innerslidecase a {
    text-decoration: none;
    color: #000;
}

.dounyu {
    font-size: 12px;
    width: fit-content;
    background-color: #E566A0;
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 12px;
    padding-top: 2px;
    display: inline-block;
    margin-right: 6px;
}

.efp {
    color: #777777;
    font-size: 14px;
    display: inline-block;
    font-weight: 600;
}

.slidercasediv {
    padding-bottom: 50px;
    margin-top: -7.6%;
}


.flowdiv {
    padding-top: 50px;
    background: #fff;
    padding-bottom: 120px;
}

.flowdiv .usescene {
    color: #229EBC;
}

.flowdiv .sceneh h2 {
    color: #000;
}

.flowdiv .sceneh p {
    color: #000;
}


.flowstepdiv {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.stepdiv .cir {
    position: absolute;
    max-width: 65px;
    top: -20px;
    left: -16px;
}

.stepdiv {
    width: calc((100% - 60px) / 4);
    position: relative;
    background: #F9F8FF;
    padding-bottom: 20px;
    border-radius: 10px;
}

.stepdiv h3 {
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
}

.stepdiv p {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    font-weight: 500;
}

.faqdiv {
    background: #fff;
    padding-bottom: 120px;
    margin-top: -2px;
}


.faqdiv .usescene {
    color: #229EBC;
}

.faqdiv .sceneh h2 {
    color: #000;
}

.faqdiv .sceneh p {
    color: #000;
}

.faqdiv .faqmenu-item.faqactive {
    background-color: #fff;
    color: #000;
}

.faqmenu-item {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s, border-left 0.3s;
    border-top: 1px solid #DDDDDD;
}

.faqitem4 {
    border-bottom: 1px solid #ddd;
}

.faqdiv .faqmenu-item:hover {
    background-color: #fff;
    color: #000;
}

.faqdiv .faqitem1:hover .right1 p {
    color: #000;
}

.faqdiv .faqitem2:hover .right2 p {
    color: #000;
}

.faqdiv .faqitem3:hover .right3 p {
    color: #000;
}

.faqdiv .faqitem4:hover .right4 p {
    color: #000;
}











.faqtext {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 50px;
}

.faqtext h2 {
    font-size: 45px;
    font-weight: 600;
    color: #000;
    line-height: 65px;
}

.faqtext p {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding-top: 20px;
}

.faqtext span {
    color: #229EBC
}

.faqsidebar {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}


.faqmenu-item:hover {
    background-color: #229EBC;
    transition: background 0.3s, border-left 0.3s;
}

.faqmenu-item.faqactive {
    background-color: #229EBC;
    color: white;
}

.menu-icon {
    margin-right: 10px;
}

.faqcontent {
    flex-grow: 1;
    padding: 40px;
    max-width: 720px;
    border-radius: 30px;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-left: 0;
}

.faqcontent h3 {
    font-size: 40px;
    font-weight: 600;
    color: #ffff;
}

.faqcontent-section {
    display: none;
}

.faqcontent-section.faqactive {
    display: block;
}

.faqcheck-item {
    margin-top: 1em;
}

.faqcheck-item::before {
    content: '✔';
    color: white;
    background-color: #57A9C6;
    border-radius: 50%;
    padding: 0.2em 0.4em;
    margin-right: 0.5em;
}

.faqflex {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}

.faqitem1 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb1.png);
    background-size: cover;
}

.faqitem2 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb2.png);
    background-size: cover;
}

.faqitem3 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb3.png);
    background-size: cover;
}

.faqitem4 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb4.png);
    background-size: cover;
}

.faqitem5 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb5.png);
    background-size: cover;
}

.faqitem6 .sideicon {
    width: 35px;
    height: 35px;
    background-image: url(../images/iconb6.png);
    background-size: cover;
}


.faqsidebar .sideright p {
    font-size: 16px;
    font-weight: 500;
    margin-left: 0px;
}

.sideright p {
    font-size: 18px;
    font-weight: 600;
    margin-left: 20px;
}

.faqsidebar .sidearrow {
    width: 17px;
    height: 17px;
    background-image: url(../images/ga.png);
    background-size: cover;
}

.faqactive .right1 .sideicon {
    background-image: url(../images/iconw1.png);
}

.faqactive .right2 .sideicon {
    background-image: url(../images/iconw2.png);
}

.faqactive .right3 .sideicon {
    background-image: url(../images/iconw3.png);
}

.faqactive .right4 .sideicon {
    background-image: url(../images/iconw4.png);
}

.faqactive .right5 .sideicon {
    background-image: url(../images/iconw5.png);
}

.faqactive .right6 .sideicon {
    background-image: url(../images/iconw6.png);
}

.faqactive .sidearrow {
    background-image: url(../images/ba.png);
}

.faqmenu-item:hover {
    background-color: #229EBC;
}

.faqitem1:hover .right1 .sideicon {
    background-image: url(../images/iconw1.png);
}

.faqitem1:hover .right1 p {
    color: #fff;
}

.faqitem1:hover .sidearrow {
    background-image: url(../images/ba.png);
    transition: background 0.3s, border-left 0.3s;
}

.faqitem2:hover .right2 .sideicon {
    background-image: url(../images/iconw2.png);
}

.faqitem2:hover .right2 p {
    color: #fff;
}

.faqitem2:hover .sidearrow {
    background-image: url(../images/ba.png);
    transition: background 0.3s, border-left 0.3s;
}

.faqitem3:hover .right3 .sideicon {
    background-image: url(../images/iconw3.png);
}

.faqitem3:hover .right3 p {
    color: #fff;
}

.faqitem3:hover .sidearrow {
    background-image: url(../images/ba.png);
    transition: background 0.3s, border-left 0.3s;
}

.faqitem4:hover .right4 .sideicon {
    background-image: url(../images/iconw4.png);
}

.faqitem4:hover .right4 p {
    color: #fff;
}

.faqitem4:hover .sidearrow {
    background-image: url(../images/ba.png);
    transition: background 0.3s, border-left 0.3s;
}


.accordion-container {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-item {
    background: #F6F6F6;
    border-radius: 8px;
    margin-bottom: 20px;
}

.accordion-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 20px; */
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 25px;
    cursor: pointer;
}

.accordion-icon::before {
    content: "+";
    font-size: 30px;
    font-weight: 100;
    transition: transform 0.3s;
}

.accordion-item.open .accordion-icon::before {
    content: "−";
}

.accordion-label {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
}

.accordion-label::before {
    content: "";
    background-image: url(../images/hatena.png);
    width: 30px;
    height: 30px;
    margin-right: 10px;
    color: #3aa4da;
    font-size: 24px;
    background-repeat: no-repeat;
    position: relative;
    top: 50%;
    background-size: contain;
}

.accordion-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
    margin: 0 30px;
}

.accordion-answer p {
    margin: 15px 0 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    font-weight: 500;
    line-height: 35px;
    padding-bottom: 20px;
}


footer {
    padding-top: 110px;
    background-color: rgba(0, 0, 0, 0.9);
    padding-bottom: 30px;
}

footer h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 45px;
    padding-bottom: 35px;
}

footer h2 span {
    font-size: 65px;
    margin-left: -40px;
}

.footp1 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 10px;
}

.footp2 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 70px;
}

.footseo {
    max-width: 635px;
    width: 100%;
    display: block;
    margin: 0 auto 200px;
}

.cp {
    font-size: 17px;
    font-family: 'LINE Seed JP';
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
}

.footcontent {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.cominkadiv {
    display: flex;
    flex-wrap: wrap;
    max-width: 345px;
    width: 100%;
    gap: 25px;
}

.comimg {
    max-width: 72px;
    width: 100%;
}

.cominkatext {
    max-width: 250px;
    color: #fff;
}

.cominkatext h4 {
    font-size: 16px;
    font-weight: 600;
}

.cominkatext p {
    font-size: 14px;
    font-weight: 500;
}

.flexfoot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
}

.copydiv {
    font-size: 12px;
    font-family: 'LINE Seed JP';
    color: #fff;
}

.footprofile {
    max-width: 735px;
    width: 100%;
}

.pricediv .aboutprice {
    padding-bottom: 95px;
}




.priceboard {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.plantopleft {
    max-width: 340px;
    width: 100%;
}

.innerplanleft {
    display: flex;
    flex-wrap: wrap;
}

.innerleft {
    max-width: 100px;
    width: 100%;
    background: #fff;
    text-align: center;
    height: 208px;
}

.leftl {
    line-height: 208px;
    height: 208px;
}

.innerright {
    width: 56%;
}

.innerright li {
    text-align: right;
}

.get {
    text-align: right;
    padding-top: 10px;
    padding-bottom: 50px;
    margin-bottom: 25px
}

.leftk {
    height: 240px;
    line-height: 240px;
    background: #e3f4f9;
}

.innerright li {
    text-align: right;
    height: 60px;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 60px;
}

.leftm {
    height: 540px;
    line-height: 540px;
    background: #7BC1D1;
}

.plantopright {
    display: flex;
    flex-wrap: wrap;
    max-width: 860px;
    width: 100%;
    padding: 50px;
    gap: 20px;
    margin-top: -52px;
    background: #fff;
    box-shadow: 0px 0px 19px -7px #20a08c;
    border-radius: 10px;
}

.innercontent {
    max-width: 175px;
    width: 100%;
}

.innercontent div {
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-weight: 600;
}

.innercontent .tha {
    height: 40px;
    margin-bottom: 22px;
    line-height: 40px;
    background: #9CDAE8;
    color: #229EBC;
    font-size: 17px;
    font-weight: 500;
    border-radius: 4px;
}

.innercontent .thu {
    height: 40px;
    margin-bottom: 22px;
    line-height: 40px;
    background: #56ABBF;
    color: #fff;
    border-radius: 4px;
}

.innercontent .the {
    height: 40px;
    margin-bottom: 22px;
    line-height: 40px;
    color: #Fff;
    background: #7BC1D1;
    border-radius: 4px;
}

.innercontent .tho {
    height: 40px;
    margin-bottom: 22px;
    line-height: 40px;
    background: #229EBC;
    color: #fff;
    border-radius: 4px;
}

.planlistdiva {
    height: 40px;
    font-size: 17px;
    border-radius: 4px;
    line-height: 40px;
    border: 1px solid #ddd;
    width: 290px;
    text-align: center;
    background: #fff;
    margin-bottom: 18px;
}

.riyoum {
    margin-bottom: 25px;
}

.riyoum p {
    font-size: 17px;
    font-weight: bold;
    font-family: 'LINE Seed JP';
}

.riyoum p span {
    font-size: 32px;
}

.riyoum .month {
    font-size: 12px;
    font-weight: 500;
    line-height: 5px;
    font-family: sans-serif;
    color: #777777;
}

.borgrey {
    background: #F7F8FA;
    border-radius: 4px;
}

.p5 {
    font-size: 13px;
}

.fs13 {
    font-size: 13px;
}

.innercontent .support {
    line-height: 20px;
    padding-top: 13px;
}

.cre {
    font-size: 12px;
    font-weight: 500;
    text-align: right;
    margin-top: 15px;
}

.leftlseo {
    line-height: 840px;
    height: 840px;
    background-color: #e3f4f9;
    color: #000;
}

.innercontent .yoriaitha {
    background-color: #fff;
    border: 1px solid #229EBC;
}

.yoriaitha img {
    width: 110px;
    padding-top: 7px;
}

.seotooldiv .innercontent {
    max-width: 136px;
}



.brsp {
    display: none;
}

.brpc {
    display: block;
}


.funcdropdown {
    display: none;
    margin-bottom: 20px;
}

.func-select {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    padding: 20px;
    font-size: 18px;
    background-color: #229EBC;
    color: #fff;
    font-weight: 600;
    border: none;
    max-width: 500px;
}

.faqselect {
    display: none;
    width: 100%;
    margin: 1em 0;
    padding: 0.5em;
    font-size: 1em;
}

.lefttool {
    padding-top: 58px;
}


.hyout span {
    font-size: 12px;
    line-height: 0px;
    display: block;
}

.hyout {
    line-height: 40px;
}

.custom {
    line-height: 20px;
    font-size: 13px;
    padding-top: 11px;
}

.etsuran {
    font-size: 13px;
}

.aboutprice {
    padding-bottom: 100px;
}

.innercontent div.circle p {
    color: #229EBC;
}

.innercontent div p span {
    color: #000;
}

.logosdiv {
    display: block;
}

.logosdiv {
    background: #fff;
}

.logo-slider {
    overflow: hidden;
    width: 100%;
    background: #fff;
}

.logo-track {
    display: flex;
    width: max-content;
    animation: scrollLeft 30s linear infinite;
}

.logo-track img {
    height: 70px;
    /* 高さ調整 */
    margin-right: 10px;
    /* 画像間の隙間 */
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}




.pricesp {
    display: none;
    ;
}

.pricetopsp {
    display: none;
}

div#wpcf7-f946-o1 {
    max-width: 600px;
    margin: auto;
    background-color: #fff;
    padding: 40px;
    border-radius: 16px;
}


.formsec {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fff;
}




.slick-slider {
    overflow: hidden;
}

.slidercasediv .slick-prev {
    background: #229EBC;
    color: #fff;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 40px;
    z-index: 9999;
    pointer-events: auto;
    left: -20px;
    transform: translateY(-50%);
    cursor: pointer;
}

.slidercasediv .slick-next {
    background: #229EBC;
    color: #fff;
    right: -20px;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 40px;
    z-index: 9999;
    cursor: pointer;
    transform: translateY(-50%);
}

.headflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.creditkaku {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 10px;
}

.creditflex {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;
    box-shadow: 0px 0px 19px -7px #20a08c;
    gap: 60px;
}

.creditinner p.cretit {
    color: #229EBC;
    font-weight: 600;
    font-size: 18px;
    margin-left: -22px;
}

.creditinner ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.creditinner {
    max-width: 260px;
    width: 100%;
}

.creditinner ul li p {
    width: 130px;
    font-weight: 500;
}

#dounyuu {
    scroll-margin-top: 100px;
}

#katsuyou {
    scroll-margin-top: 100px;
}

#kinou {
    scroll-margin-top: 100px;
}

#priceplan {
    scroll-margin-top: 100px;
}

#jirei {
    scroll-margin-top: 100px;
}

#nagare {
    scroll-margin-top: 100px;
}

#shitsumon {
    scroll-margin-top: 100px;
}

.smarttext a {
    color: #fff;
}

.toptext p.smarttext {
    font-size: 12px;
    color: #fff;
    font-weight: 400;
}

@media screen and (max-width: 1280px) {
    section {
        padding: 0;
    }
}

@media(max-width:1280px) {
    .padleftright {
        padding-left: 3%;
        padding-right: 3%;
    }

    .pc {
        display: none;

    }

    .sp {
        display: block;
    }

    .firstlist {
        margin-right: 60px;
    }

    .boxilpc {
        display: block;
    }

    #humMenu nav li a {
        writing-mode: horizontal-tb;
    }

    #humCheck:checked~nav {
        background-color: #EFF4F7;
    }

    #humMenu {
        float: right;
        display: block;
    }

    #humCheck,
    #humClose {
        display: none;
    }

    #humOpen {
        display: block;
        width: 32px;
        cursor: pointer;
    }

    #humOpen:hover {
        opacity: 0.5;
    }

    #humOpen img {
        display: block;
    }

    #humClose,
    #humMenu nav {
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
    }

    #humClose {
        z-index: 2;
        width: 100%;
        background: gray;
        opacity: 0.8;
        transition: 0.5s;
    }

    #humMenu nav {
        z-index: 3;
        width: 250px;

        transition: 0.5s;
        transform: translateX(100%);
    }

    #humCheck:checked~#humClose {
        display: block;
    }

    #humCheck:checked~nav {
        transform: translateX(0);
    }

    #humMenu nav ul {
        overflow: hidden;
        list-style: none;
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
        gap: 200px;
    }

    #humMenu nav li {
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        padding: 15px 0;
        margin: 10px 0;
        padding-left: 20px;
    }

    #humMenu nav li:first-child {
        padding-top: 30px;
    }

    #humMenu nav li:hover {
        opacity: 0.5;
    }

    #humMenu nav li a {
        font-size: 20px;
        text-decoration: none;
        color: #212529;
    }

    .headul {
        display: none;

    }


    header.service {
        padding-left: 10px;
        padding-right: 10px;

    }

    .headbtn div a {
        font-size: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    header.service img {
        height: auto;
        margin: 0;
        width: 100px;
    }

    .headbtn div {
        width: 105px;
        text-align: center;
    }

    header.service {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .toptext {
        width: 100%;
        margin-left: 1.5%;
    }

    .toptext h1 {
        font-size: 30px;
        font-weight: 600;
    }

    .bluebg {
        padding-top: 40px;
        background-size: 100% 1280px;
    }

    .toptext h1 {
        padding-bottom: 10px;
        line-height: 50px;
    }

    .awarddiv img {
        width: 47%;
        max-width: 195px;
    }

    .spmock {
        display: block;
    }

    .pcmock {
        display: none;
    }

    .topimg {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .topimg img {
        position: relative;
        bottom: 0;
        padding-bottom: 20px;
    }

    .toptext p {
        padding-bottom: 20px;
    }

    .awarddiv {
        padding-bottom: 20px;
        margin: 0 auto;
        justify-content: center;
    }

    .lightbluebg p {
        font-size: 13px;
        margin-left: 0%;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 20px;
        text-indent: -20px;
        text-align: center;
    }

    .problemdiv {
        padding-top: 45px;
    }

    .yoriaih img {
        max-width: 260px;
    }

    .yoriaih p {
        margin-top: -20px;
        font-size: 28px;
    }

    .swipertopdiv {
        width: 80%;
        margin: 0 auto;
    }

    .swiper {
        height: 385px;
    }

    .swipebottom p {
        font-size: 20px;
        line-height: 38px;
        font-family: 'LINE Seed JP';
        margin-top: 125px;
    }

    .slide5 .swipebottom p {
        margin-top: 160px;
    }

    .brsp {
        display: block;
    }

    .brpc {
        display: none;
    }

    .slide2 .swipebottom p {
        margin-top: 160px;
    }

    .slide3 .swipebottom p {
        margin-top: 160px;
    }

    .slide4 .swipebottom p {
        margin-top: 160px;
    }

    .slidetext p {
        font-size: 16px;
        line-height: 40px;
    }

    .slidetext {
        width: 100%;
        margin-top: 30px;
    }

    .problemdiv {
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 60px;
        background-position: left;
        overflow: hidden;
    }

    .order1 {
        order: 1
    }

    .order2 {
        order: 2
    }

    .order3 {
        order: 3
    }

    .order4 {
        order: 4
    }

    .slider {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 35px;
    }

    .effectp {
        padding-bottom: 0px;
        margin-top: 5px;
        font-size: 16px;
        padding-bottom: 20px;
    }

    .innerslide {
        background: #fff;
        height: auto;
        width: 100%;
        max-width: 480px;
        padding-top: 30px;
        padding-bottom: 24px;
        border-radius: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 20px;
    }

    .introducediv {
        padding-top: 50px;
        padding-bottom: 60px;

    }

    .usecase img {
        max-width: 180px;
    }

    .usecase {
        justify-content: center;
    }

    .sceneh h2 {
        padding-bottom: 15px;
    }

    .blueinner {
        padding-right: 20px;
        padding-left: 0px;
        padding-left: 30px;
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .usecenter {
        padding-top: 40px;
    }

    .usecenter h3 {
        font-size: 24px;
    }

    .blueinner h3 {
        font-size: 24px;
    }

    .case2 .usecenter {
        background-position: top 0px left 0;
    }

    .case5 .blueinner {
        padding-bottom: 35px;
    }

    .usebg {
        padding-bottom: 40px;
    }

    .contactdiv {
        padding: 50px 0;
    }

    .contactdiv h2 {
        font-size: 28px;
    }

    .shiryoucontact {
        width: 100%;
        padding-top: 25px;
    }

    .trialcontact {
        width: 100%;
    }

    .functiondiv {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .yoriaih p {
        margin-top: -20px;
        font-size: 25px;
        text-align: center;
        display: block;
        padding-left: 0;
    }

    .trip {
        font-size: 16px;
    }

    .yoriaih h2 {
        text-align: center;
    }

    .functext h2 {
        font-size: 35px;
        line-height: 50px;
    }

    .funccontent {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
        padding-right: 30px;
        max-width: 920px;
    }

    .contdiv {
        padding-top: 30px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 30px;
    }

    .funcsidebar {
        display: none;
    }

    .funcdropdown {
        width: 100%;
        display: block;
        text-align: center;
    }

    .functext {
        padding-bottom: 35px;
    }

    .funcflex {
        gap: 20px;
        justify-content: center;
    }

    .pricediv {
        padding-top: 20px;
        padding-bottom: 30px;
        background: #fff;
    }

    .pricediv h2 {
        font-size: 28px;


    }

    .seotooldiv h2 {
        font-size: 28px;
    }

    .sceneh h2 {
        font-size: 28px;
    }

    .functext p {
        font-size: 16px;
    }

    .aboutprice {
        font-size: 16px;
    }

    .stepdiv {
        width: 47%;
    }

    .flowdiv {
        padding-bottom: 60px;
    }

    .stepdiv h3 {
        font-size: 17px;
    }

    .faqsidebar {
        display: none;
    }

    .faqselect {
        display: block;
    }

    .sceneh {
        padding-bottom: 10px;
    }

    .faqselect {
        color: #000;
        display: block;
        border-radius: 6px;
        background: #F6F6F6;
        font-size: 18px;
        font-weight: 500;
        max-width: 500px;
        margin: 0 auto;
    }

    .faqflex {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;
    }

    .faqcontent {
        padding-right: 0;
    }

    .accordion-question {
        padding-right: 15px;
        padding-left: 15px;
        padding-top: 20px;
        padding-bottom: 20px;
        max-width: 920px;
    }

    .accordion-label {
        font-size: 16px;
        line-height: 30px;
    }

    .video-background {
        display: none;
    }

    .faqdiv {
        padding-bottom: 40px;
    }

    footer h2 span {
        font-size: 38px;
        margin-left: -20px;
    }

    footer h2 {
        padding-bottom: 15px;
    }

    footer {
        padding-top: 50px;
    }

    footer h2 {
        color: #fff;
        font-size: 25px;
        font-weight: 600;
        line-height: 45px;
        padding-bottom: 15px;
    }

    .footp2 {
        padding-bottom: 40px;
    }

    .footseo {
        margin: 0 auto 45px;
    }

    .comimg {
        max-width: 55px;
    }

    .cominkatext p {
        font-size: 12px;
        line-height: 20px;
    }

    .cominkatext h4 {
        font-size: 14px;
        line-height: 20px;
    }

    .footprofile {
        padding-bottom: 30px;
    }

    .copydiv {
        font-size: 12px;
        text-align: center;
        width: 100%;
    }

    .loopSlide {
        display: flex;
        width: max-content;
        height: 65px;
        overflow: hidden;
    }

    .sceneh p {
        font-size: 16px;
        padding-bottom: 20px;
    }

    .pricepc {
        display: none;
    }

    .pricesp {
        display: block;
    }

    .aboutprice {
        padding-bottom: 25px;
    }

    .pricetopsp {
        display: block;
    }

    .pricediv .aboutprice {
        padding-bottom: 30px;
    }

    .freet {
        color: #fff;
        background: #9CDAE8;
        border-radius: 4px;
        color: #229EBC;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
        font-weight: 600;
    }

    .lightt {
        color: #fff;
        background: #7BC1D1;
        border-radius: 4px;
        text-align: center;
        padding-top: 8px;
        font-weight: 600;
        padding-bottom: 8px;
    }

    .normalt {
        color: #fff;
        background: #56ABBF;
        border-radius: 4px;
        font-weight: 600;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .prot {
        color: #fff;
        background: #229EBC;
        border-radius: 4px;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
        font-weight: 600;
    }

    .pricetopsp ul li {
        margin-bottom: 10px;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        padding-top: 9px;
        padding-bottom: 8px;
    }

    .pricetopsp ul li .borg {
        background: #F7F8FA;

    }

    .pricetopsp ul li span {
        display: block;
    }

    .pricetopsp ul li.borg {
        background: #F7F8FA;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .pricetopsp ul li span.bign {
        font-size: 32px;
        display: inline-block;
        font-weight: 700;
    }



    .pricetopsp ul {
        margin-bottom: 50px;
    }

    .seotooldiv {
        padding-top: 25px;
        padding-bottom: 70px;
    }

    .pricetopsp ul li span {
        font-weight: 700;
        font-size: 18px;
    }

    .flowstepdiv {

        justify-content: center;
    }

    .motto {
        background: #259dbd;
        text-decoration: none;
        color: #fff;
        text-align: xc;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        max-width: 220px;
        display: block;
        margin: 15px auto;
    }

    .motto:hover {
        color: #fff;
    }

    .innerslidecase {
        padding-top: 0px;
        padding-bottom: 40px;
    }

    .slidercasediv {
        padding-bottom: 50px;
        margin-top: 0;
    }

    .headflex {
        width: auto;
    }

    .creditflex {
        gap: 25px;
    }

    .logo-track img {
        height: auto;
    }

    .toptext p.smarttext {
        text-align: center;
    }
}


@media screen and (min-width:768px) and (max-width:1279px) {
    .slidetext p {
        font-size: 20px;
        line-height: 50px;
    }



}

@media screen and (min-width:1350px) and (max-width:1495px) {
    .headul ul {
        gap: 25px;
    }
}

@media screen and (min-width:1280px) and (max-width:1570px) {

    .slick-slide {

        margin: 10px;
    }

    .innerslide {
        height: 540px;
        padding-top: 30px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .slidertopdiv .slick-prev {
        left: 19.6% !important;
    }

    .slidertopdiv .slick-next {
        right: 19.7% !important;
    }

    footer {
        padding-left: 30px;
        padding-right: 30px;
    }

    .headul li a {
        font-size: 14px;
    }

}

footer {
    position: relative;
    /* 必須 */
    z-index: 1;
    /* フッターを上に表示 */
}



.footbanner {
    position: fixed;
    max-width: 420px;
    right: 1%;
    bottom: 0;
    border-radius: 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    bottom: 12px;
    z-index: 10000;
}

@media(max-width:768px) {
    .footbanner {
        max-width: 280px;
    }
}

.footbanner img {
    border-radius: 12px;
    display: block;
    width: 100%;
    border: 3px solid #45C476;
}

.footbanner-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.2s ease;
}

.footbanner-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.grecaptcha-badge {
    visibility: hidden;
}

.lawfootdiv {
    text-align: right;
    margin-bottom: 5px;
}

.lawfootdiv a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    margin-left: 10px;
}

.copydiv p {
    text-align: end;
}

.reviews-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.review-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: calc(50% - 10px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: #fff;
    font-family: sans-serif;
    box-sizing: border-box;
}

.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.user-info {
    display: flex;
}

.user-icon1 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
    background-image: url(../images/avatar_man_2.png);
    background-size: cover;
}

.user-icon2 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
    background-image: url(../images/avatar_woman_2.png);
    background-size: cover;
}

.user-details {
    font-size: 13px;
}

.username {
    font-weight: bold;
    color: #229EBC;
    font-size: 16px;
}

.badge {
    background: #b2f0e4;
    color: #008080;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
}

.category,
.meta,
.date {
    font-size: 12px;
    color: #555;
}

.rating {
    text-align: right;
    font-size: 14px;
}

.stars {
    color: #229EBC;
    font-size: 16px;
}

.score {
    margin-left: 4px;
}

.labels span {
    display: inline-block;
    background: #eee;
    font-size: 11px;
    margin-top: 4px;
    margin-right: 5px;
    padding: 2px 6px;
    border-radius: 3px;
}

.review-body h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.review-body p {
    font-size: 13px;
    margin-bottom: 8px;
}

.innerawarddiv {
    background: #fff;
    padding-bottom: 100px;
}

.innerawarddiv h2 {
    vertical-align: 40px;
    font-size: 32px;
    font-weight: 600;
    padding-left: 10px;
    line-height: 1.5em;
    text-align: center;
}

.innerawarddiv ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.innerawarddiv ul li {
    width: 20%;

}

.awardtext {
    color: #229EBC;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .review-card {
        width: 100%;
    }

    .review-header {
        flex-direction: column;
    }

    .rating {
        text-align: left;
        margin-top: 10px;
    }

    .innerawarddiv h2 {
        font-size: 19px;
    }

    .innerawarddiv ul li {
        width: 25%;
    }

    .innerawarddiv {
        padding-bottom: 50px;
    }
}

a.boxilhref {
    text-align: center;
    display: block;
    /* background: #229EBC; */
    padding-top: 10px;
    padding-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    background: #229EBC;
    color: #fff;
    border-radius: 5px;
    margin-top: 25px;
    max-width: 300px;
    margin: 30px auto;
}

@media (max-width: 768px) {
    a.boxilhref {
        max-width: 220px;
        font-size: 16px;
    }
}



.custom-news-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Helvetica Neue', sans-serif;
    color: #000;

}

.custom-news-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 10px 0;
}

.custom-news-date {
    min-width: 100px;
    color: #229EBC;
    font-weight: bold;
    font-size: 18px;
}

.custom-news-content {
    font-size: 16px;
    line-height: 1.7;
}

.custom-news-divider {
    height: 1px;
    background-color: #000;
    opacity: 0.2;
    margin: 20px 0;
}


.custom-news-more-btn {
    text-align: center;
    display: block;
    /* background: #229EBC; */
    padding-top: 10px;
    padding-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    background: #229EBC;
    color: #fff;
    border-radius: 5px;
    margin-top: 25px;
    max-width: 300px;
    margin: 0px auto;
}

.custom-news-more-btn:hover {
    color: #fff;
}

.custom-news-top {
    background: #fff;
}

.custom-news-link {
    color: #000;
    text-decoration: none;
    transition: color 0.3s, text-decoration 0.3s;
}

.custom-news-link:hover {
    color: #000;
}

.single-custom-news .custom-news-item {
    align-items: unset;
}

.custom-news-wrapper h2 {
    font-size: 30px;
    margin-bottom: 20px;
}

.custom-news-title {
    margin-bottom: 20px;
}

.custom-news-wrapper h2 img {
    width: 200px;
    vertical-align: middle;
    margin-right: 5px;
}

.custom-news-wrapper h1 img {
    width: 200px;
    vertical-align: middle;
    margin-right: 5px;
}

/* =========================================
   REFACTORED STYLES (Migrated from yoriai-fix.css)
   ========================================= */

/* Reset common WordPress/Cocoon theme containers to allow full-width LP layout */
/* Increased specificity with 'html' prefix to avoid !important */
html body.page-template-page-yoriaiseo #content,
html body.page-template-page-yoriaiseo .entry-content,
html body.page-template-page-yoriaiseo .article-body,
html body.page-template-page-yoriaiseo .wrap,
html body.page-template-page-yoriaiseo #main,
html body.page-template-page-yoriaiseo .main,
html body.page-template-page-yoriaiseo .site-content,
html body.page-template-page-yoriaiseo .content {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

/* Ensure box-sizing is border-box for all elements on this page */
html body.page-template-page-yoriaiseo * {
    box-sizing: border-box;
}

/* Flexbox containers behavior */
html body.page-template-page-yoriaiseo .wrapper,
html body.page-template-page-yoriaiseo .wrapper2,
html body.page-template-page-yoriaiseo .wrapper3,
html body.page-template-page-yoriaiseo .wrapper4 {
    box-sizing: border-box;
}

/* Fix Section Header Alignment (Logo + Text) */
html body.page-template-page-yoriaiseo .yoriaih h2 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    font-size: 45px;
    font-weight: 600;
}

html body.page-template-page-yoriaiseo .yoriaih img {
    max-width: 260px;
    height: auto;
    margin: 0;
    object-fit: contain;
}

html body.page-template-page-yoriaiseo .yoriaih p {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    line-height: 1.2;
}

@media screen and (max-width: 768px) {
    html body.page-template-page-yoriaiseo .yoriaih h2 {
        flex-wrap: wrap;
        gap: 10px;
    }

    html body.page-template-page-yoriaiseo .yoriaih img {
        max-width: 200px;
    }
}

/* =========================================
   HEADER LAYOUT FIXES (Refactored)
   ========================================= */

/* Make the inner wrapper full width or flex container */
html body.page-template-page-yoriaiseo .headservicediv {
    display: block;
    max-width: 1500px;
    margin: 0 auto;
}

/* Main Flex Container for Logo, Menu, Buttons */
html body.page-template-page-yoriaiseo .headflex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: nowrap;
    gap: 40px;
}

/* Logo Area */
html body.page-template-page-yoriaiseo .headimg {
    flex-shrink: 0;
}

/* Navigation Menu - Left aligned next to logo */
html body.page-template-page-yoriaiseo .headul {
    margin: 0;
    padding: 0;
}

html body.page-template-page-yoriaiseo .headul ul {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Header Menu Hover Behavior */
html body.page-template-page-yoriaiseo .headul .menu-item {
    position: relative;
}

/* Hide Submenu by default */
html body.page-template-page-yoriaiseo .headul .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    margin: 0;
    list-style: none;
    border-radius: 4px;
}

/* Show Submenu on Hover */
html body.page-template-page-yoriaiseo .headul .menu-item-has-children:hover>.sub-menu {
    display: block;
}

/* Submenu Link Styles */
html body.page-template-page-yoriaiseo .headul .sub-menu li {
    display: block;
    margin: 0;
    padding: 0;
}

html body.page-template-page-yoriaiseo .headul .sub-menu li a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
    color: #333;
    text-decoration: none;
    transition: background 0.3s ease-out;
}

html body.page-template-page-yoriaiseo .headul .sub-menu li a:hover {
    background: #f5f5f5;
    color: #000;
}

/* Buttons (Request/Trial) - Pushed to the far right */
html body.page-template-page-yoriaiseo .headbtn {
    margin-left: auto;
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

/* FIXED BUTTON STYLE: Rounded pill shape */
html body.page-template-page-yoriaiseo .headbtn>div {
    border-radius: 50px;
    overflow: hidden;
    width: auto;
}

html body.page-template-page-yoriaiseo .headbtn div a {
    padding-left: 25px;
    padding-right: 25px;
    display: inline-block;
    width: auto;
    transition: background-color 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* =========================================
   FOOTER MENU (Static/Sitemap)
   ========================================= */
html body.page-template-page-yoriaiseo .footnav {
    width: 100%;
    background: transparent;
    padding: 0 0 40px 0;
}

html body.page-template-page-yoriaiseo .footnav ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

html body.page-template-page-yoriaiseo .footnav>ul>li {
    text-align: left;
    min-width: 150px;
}

html body.page-template-page-yoriaiseo .footnav>ul>li>a {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    color: #fff;
    text-decoration: none;
}

/* Footer Submenu - ALWAYS VISIBLE */
html body.page-template-page-yoriaiseo .footnav .sub-menu {
    display: block;
    position: static;
    padding-left: 0;
    margin: 0;
    list-style: none;
    box-shadow: none;
    background: transparent;
}

html body.page-template-page-yoriaiseo .footnav .sub-menu li {
    margin-bottom: 8px;
}

html body.page-template-page-yoriaiseo .footnav .sub-menu li a {
    font-size: 14px;
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease-out;
}

html body.page-template-page-yoriaiseo .footnav .sub-menu li a:hover {
    color: #fff;
    text-decoration: underline;
}

/* SP Adjustments for Footer Menu */
@media screen and (max-width: 768px) {
    html body.page-template-page-yoriaiseo .footnav ul {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    html body.page-template-page-yoriaiseo .footnav>ul>li {
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   MISCELLANEOUS FIXES (Refactored)
   ========================================= */

/* Header Service Transitions & Sizing */
html body.page-template-page-yoriaiseo header.service {
    transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
    box-sizing: border-box;
    width: 100%;
    /* Ensure default full width */
    max-width: 100%;
}

/* Link Transitions */
html body.page-template-page-yoriaiseo a {
    transition: opacity 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out;
}

/* Problem Section Overflow */
html body.page-template-page-yoriaiseo #dounyuu {
    overflow-x: hidden;
}

/* Use Scene Card Layout Fix */
html body.page-template-page-yoriaiseo .usecase {
    justify-content: flex-start;
}

/* Swiper Slide Sizing */
html body.page-template-page-yoriaiseo .swiper-slide {
    box-sizing: border-box;
}

/* =========================================
   ENTRY FOOTER (Single Post Navigation) FIX
   ========================================= */
html body.page-template-page-yoriaiseo .entry-footer {
    background-color: transparent;
    padding: 30px 0;
    margin-top: 50px;
    border-top: 1px solid #eee;
    color: #333;
    width: 100%;
    max-width: 100%;
    position: static;
}

html body.page-template-page-yoriaiseo .entry-footer a {
    color: #333;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease-out;
}

html body.page-template-page-yoriaiseo .entry-footer a:hover {
    color: #229EBC;
    opacity: 0.8;
}

html body.page-template-page-yoriaiseo .nav-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

html body.page-template-page-yoriaiseo .nav-previous,
html body.page-template-page-yoriaiseo .nav-next {
    width: 48%;
}

html body.page-template-page-yoriaiseo .nav-next {
    text-align: right;
}

html body.page-template-page-yoriaiseo .nav-subtitle {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

html body.page-template-page-yoriaiseo .nav-title {
    display: block;
    font-weight: bold;
    font-size: 16px;
}

/* Fix for Problems Section (Swiper) overlapping text on Mobile */
@media screen and (max-width: 768px) {
    .slideflex {
        flex-direction: column;
        gap: 60px;
        /* Create space between the swiper card and the text */
    }

    /* Resize swiper for mobile to fit screen better */
    .swiper {
        max-width: 280px;
        height: 380px;
        overflow: visible;
        /* Swiper cards effect needs visible overflow sometimes, but checks if it causes issue */
    }

    .swiper-slide {
        box-sizing: border-box;
        /* Ensure padding doesn't add to width */
        padding-left: 15px;
        /* Reduce padding for mobile */
        padding-right: 15px;
    }

    .swipertopdiv {
        width: 100%;
        display: flex;
        justify-content: center;
        /* Ensure it doesn't overflow if card acts weirdly */
        overflow: visible;
    }

    .slidetext {
        width: 100%;
        text-align: center;
        padding: 0 15px;
    }

    .slidetext p {
        text-align: center;
        /* Ensure line height is managed */
        line-height: 1.8;
    }
}

/* =========================================
   New Pricing Plan Styles
   ========================================= */

.new-pricing-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 50px;
}

/* Main Plan Card */
.main-plan-card {
    width: 100%;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 2px solid #229EBC;
    /* Brand Color Border */
}

.plan-header {
    background: #229EBC;
    color: #fff;
    text-align: center;
    padding: 30px 20px;
}

.plan-header h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: #fff;
}

.price-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 10px;
}

.price-display .unit {
    font-size: 16px;
    font-weight: bold;
    margin-right: 5px;
}

.price-display .amount {
    font-size: 50px;
    font-weight: bold;
    font-family: 'LINE Seed JP', sans-serif;
    line-height: 1;
}

.price-display .currency {
    font-size: 20px;
    font-weight: bold;
    margin-left: 2px;
}

.price-display .tax-note {
    font-size: 14px;
    font-weight: normal;
    margin-left: 5px;
}

.contract-period {
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

.plan-specs {
    padding: 30px 40px;
}

.plan-specs dl {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    align-items: center;
}

.plan-specs dl:last-child {
    border-bottom: none;
}

.plan-specs dt {
    width: 30%;
    font-weight: bold;
    color: #229EBC;
    font-size: 16px;
}

.plan-specs dd {
    width: 70%;
    font-weight: bold;
    font-size: 18px;
    color: #333;
}

.plan-specs dd .note {
    font-size: 13px;
    color: #777;
    font-weight: normal;
    display: block;
    margin-top: 5px;
}

/* Sub Section Cards (Initial Cost & Options) */
.sub-section-card {
    width: calc(50% - 15px);
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 30px;
    border: 1px solid #eee;
}

.sub-section-card h3 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
    border-bottom: 2px solid #229EBC;
    display: inline-block;
    padding-bottom: 5px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Initial Cost Items */
.cost-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ddd;
}

.cost-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.cost-item h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.cost-item .price {
    font-size: 22px;
    font-weight: bold;
    color: #229EBC;
    margin-bottom: 5px;
    font-family: 'LINE Seed JP', sans-serif;
}

.cost-item .price .tax {
    font-size: 12px;
    color: #333;
    font-weight: normal;
}

.cost-item .desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* Option List */
.option-list {
    list-style: none;
    padding: 0;
}

.option-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dashed #ddd;
}

.option-list li:last-child {
    border-bottom: none;
}

.option-list .opt-name {
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

.option-list .opt-price {
    font-weight: bold;
    color: #229EBC;
    font-size: 18px;
    font-family: 'LINE Seed JP', sans-serif;
}

.option-list .opt-price .tax {
    font-size: 12px;
    color: #333;
    font-weight: normal;
}

/* Credit Consumption Table Updates */
/* Reusing existing classes, just ensuring alignment */
.creditdiv p.creditkaku {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 20px;
    background: #e3f4f9;
    padding: 10px;
    border-radius: 8px;
    color: #229EBC;
}
.creditdiv p.cre {
   font-size: 13px; 
   color: #777;
   margin-top: 15px;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .sub-section-card {
        width: 100%;
    }

    .plan-specs {
        padding: 20px;
    }

    .plan-specs dl {
        display: block;
        text-align: center;
    }

    .plan-specs dt {
        width: 100%;
        margin-bottom: 5px;
    }

    .plan-specs dd {
        width: 100%;
        font-size: 16px;
    }
    
    .new-pricing-container {
        padding: 0 15px;
    }
    
    .option-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .option-list .opt-price {
        align-self: flex-end;
    }

    /* Hide old elements just in case js/php cache lingers old html somehow, 
       though we replaced the php file content. 
       This also ensures we don't accidentally style old elements if they exist. */
    .pricepc, .pricetopsp {
        display: none !important;
    }
}