@charset "utf-8";
@font-face {
    font-family: 'HGPSoeiKakugothicUB';
    src: url(./font/HGPSoeiKakugothicUB.ttf) format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

body {
    font-family: 'HGPSoeiKakugothicUB';
    color: #666;
    letter-spacing: -.05em;
}

a {
    color: inherit;
}

a:hover,
a img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "alpha( opacity=60 )";
}

ul,
ol,
li,
p {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

figure {
    line-height: 0;
    margin: 0;
}

.full-img img {
    width: 100%;
    height: auto;
}

.text-border-b {
    text-shadow: #333 5px 0px 0px, #333 4.90033px 0.993347px 0px, #333 4.60531px 1.94709px 0px, #333 4.12668px 2.82321px 0px, #333 3.48353px 3.58678px 0px, #333 2.70151px 4.20736px 0px, #333 1.81179px 4.6602px 0px, #333 0.849836px 4.92725px 0px, #333 -0.145998px 4.99787px 0px, #333 -1.13601px 4.86924px 0px, #333 -2.08073px 4.54649px 0px, #333 -2.94251px 4.04248px 0px, #333 -3.68697px 3.37732px 0px, #333 -4.28444px 2.57751px 0px, #333 -4.71111px 1.67494px 0px, #333 -4.94996px 0.7056px 0px, #333 -4.99147px -0.291871px 0px, #333 -4.83399px -1.27771px 0px, #333 -4.48379px -2.2126px 0px, #333 -3.95484px -3.05929px 0px, #333 -3.26822px -3.78401px 0px, #333 -2.4513px -4.35788px 0px, #333 -1.53666px -4.75801px 0px, #333 -0.560763px -4.96845px 0px, #333 0.437495px -4.98082px 0px, #333 1.41831px -4.79462px 0px, #333 2.34258px -4.41727px 0px, #333 3.17346px -3.86382px 0px, #333 3.87783px -3.15633px 0px, #333 4.4276px -2.32301px 0px, #333 4.80085px -1.39708px 0px, #333 4.98271px -0.415447px 0px;
}

.col-y {
    color: #ffff00 !important;
}

.col-r {
    color: #ff0033 !important;
}

.col-lr {
    color: #ff6666 !important;
}

.col-b {
    color: #66ccff !important;
}

.relative {
    position: relative;
}

.sp,
.super-sp {
    display: none;
}

.ma_bo15 {
    margin-bottom: 1.5em;
}

@media (max-width: 768px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block;
    }
}

@media (max-width: 480px) {
    .super-sp {
        display: block;
    }
    .super-sp-hide {
        display: none;
    }
}

.inner {
    width: 100%;
    max-width: 1330px;
    margin: 0 auto;
    padding: 0 15px;
}

header {
    background: url(./image/kv_bg.jpg) no-repeat center top / 100% auto;
}

.header-character {
    width: 40%;
}

.header-cont {
    width: 60%;
    padding-top: 15px;
}

.header-logo {
    margin-top: 100px;
}

.logo-txt {
    color: #333;
    font-size: 3rem;
}

.kv-ttl {
    margin-right: 10px;
    font-size: 5.75rem;
    line-height: 1;
}

.kv-sm-ttl {
    font-size: 2.5rem;
    line-height: 1;
}

.header-red {
    margin-top: 20px;
    font-size: 3.85rem;
}

header h1 {
    margin-top: -40px;
    font-size: 6.5rem;
    text-shadow: #333 10px 0px 0px, #333 9.95004px 0.998334px 0px, #333 9.80067px 1.98669px 0px, #333 9.55336px 2.9552px 0px, #333 9.21061px 3.89418px 0px, #333 8.77583px 4.79426px 0px, #333 8.25336px 5.64642px 0px, #333 7.64842px 6.44218px 0px, #333 6.96707px 7.17356px 0px, #333 6.2161px 7.83327px 0px, #333 5.40302px 8.41471px 0px, #333 4.53596px 8.91207px 0px, #333 3.62358px 9.32039px 0px, #333 2.67499px 9.63558px 0px, #333 1.69967px 9.8545px 0px, #333 0.707372px 9.97495px 0px, #333 -0.291995px 9.99574px 0px, #333 -1.28844px 9.91665px 0px, #333 -2.27202px 9.73848px 0px, #333 -3.2329px 9.463px 0px, #333 -4.16147px 9.09297px 0px, #333 -5.04846px 8.63209px 0px, #333 -5.88501px 8.08496px 0px, #333 -6.66276px 7.45705px 0px, #333 -7.37394px 6.75463px 0px, #333 -8.01144px 5.98472px 0px, #333 -8.56889px 5.15501px 0px, #333 -9.04072px 4.2738px 0px, #333 -9.42222px 3.34988px 0px, #333 -9.70958px 2.39249px 0px, #333 -9.89993px 1.4112px 0px, #333 -9.99135px 0.415807px 0px, #333 -9.98295px -0.583741px 0px, #333 -9.8748px -1.57746px 0px, #333 -9.66798px -2.55541px 0px, #333 -9.36457px -3.50783px 0px, #333 -8.96758px -4.4252px 0px, #333 -8.481px -5.29836px 0px, #333 -7.90968px -6.11858px 0px, #333 -7.25932px -6.87766px 0px, #333 -6.53644px -7.56803px 0px, #333 -5.74824px -8.18277px 0px, #333 -4.90261px -8.71576px 0px, #333 -4.00799px -9.16166px 0px, #333 -3.07333px -9.51602px 0px, #333 -2.10796px -9.7753px 0px, #333 -1.12153px -9.93691px 0px, #333 -0.123887px -9.99923px 0px, #333 0.87499px -9.96165px 0px, #333 1.86512px -9.82453px 0px, #333 2.83662px -9.58924px 0px, #333 3.77978px -9.25815px 0px, #333 4.68517px -8.83455px 0px, #333 5.54374px -8.32267px 0px, #333 6.34693px -7.72764px 0px, #333 7.0867px -7.0554px 0px, #333 7.75566px -6.31267px 0px, #333 8.34713px -5.50686px 0px, #333 8.8552px -4.64602px 0px, #333 9.27478px -3.73877px 0px, #333 9.6017px -2.79415px 0px, #333 9.83268px -1.82162px 0px, #333 9.96542px -0.830894px 0px;
}

header h1 span {
    font-size: 60%;
}

@media screen and (max-width: 1330px) {
    .header-contact {
        width: 70%;
        margin-left: auto;
    }
    .header-logo {
        margin-top: 5vw;
        margin-left: auto;
        width: 60%;
    }
    .logo-txt {
        font-size: 4vw;
    }
    .kv-ttl {
        font-size: 6.75vw;
    }
    .kv-sm-ttl {
        font-size: 3vw;
    }
    .header-red {
        font-size: 4.5vw;
    }
    header h1 {
        font-size: 7.75vw;
    }
}

@media (max-width: 768px) {
    .header-character {
        width: 38%;
    }
    .header-cont {
        width: 62%;
    }
    header h1,
    .text-border-b {
        text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
    }
}

@media (max-width: 600px) {
    header h1 {
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .header-logo {
        margin-top: 0;
        width: 75%;
    }
    .kv-ttl {
        font-size: 9vw;
        margin-right: 0;
    }
    .kv-sm-ttl {
        font-size: 5vw;
        margin-top: 5px;
    }
    .header-red {
        margin-top: 10px;
        font-size: 5.5vw;
        width: 150%;
        margin-left: -50%;
    }
    header h1 {
        font-size: 8.5vw;
    }
}

.price-main ul li {
    font-size: 2.5rem;
}

.price-main ul li h2 {
    margin: 50px 0;
    padding: 10px 20px;
    background: #f19ec2;
    border-left: 30px solid #ff0000;
    font-size: 3.5rem;
}

.price-estimate h2 {
    display: inline-block;
    margin: 30px auto;
    position: relative;
    padding: 0 100px;
    color: #333;
    font-size: 4.5rem;
    position: relative;
}

.price-estimate h2::before,
.price-estimate h2::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    background: url(./image/shape.png) no-repeat;
    background-size: contain;
}

.price-estimate h2::before {
    left: 0;
    background-position: right;
}

.price-estimate h2::after {
    right: 0;
    background-position: left;
}

.estimate-cont {
    padding: 50px 30px;
    background: #7ecef4;
    font-size: 3.5rem;
    line-height: 1.2;
}

.estimate-cont h3 {
    font-size: 4.5rem;
    margin-bottom: 30px;
}

.estimate-flex figure {
    width: calc(35% + 50px);
    margin: -50px 0 0 -50px;
}

.estimate-right {
    width: 65%;
}

.estimate-right h3 {
    font-size: 5.5rem;
    margin: 30px 0;
}

.estimate-right h3 span {
    font-size: 90%;
}

.estimate-right-cont {
    background: #ffff00;
    padding: 30px 40px;
    font-size: 3.35rem;
    line-height: 1.2;
}

.price-area {
    margin: 50px 0;
}

.price-area-cont {
    padding: 30px 0;
    background: url(./image/back01.jpg) repeat;
}


/*********  top_banner **************/

.top_banner {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f8f5f0;
    background-image: linear-gradient( -45deg, #fff 25%, #f8f5f0 25%, #f8f5f0 50%, #fff 50%, #fff 75%, #f8f5f0 75%, #f8f5f0);
    -webkit-background-size: 7px 7px;
    margin-top: 60px;
}

.top_banner_area {
    max-width: 962px;
    margin: 0 auto;
}

.top_banner_area a {
    width: 31%;
}

@media screen and (max-width: 991px) {
    .price-main ul li {
        font-size: 3.5vw;
    }
    .price-main ul li h2,
    .estimate-cont {
        font-size: 5vw;
    }
    .price-main ul li figure,
	.price-main ul li .price-main-txt {
        max-width: 50%;
    }
    .price-estimate h2 {
        font-size: 6vw;
        padding: 0 7vw;
    }
    .price-estimate h2::before,
    .price-estimate h2::after {
        width: 7vw;
    }
    .estimate-cont h3,
    .estimate-right h3 {
        font-size: 7vw;
    }
    .estimate-right-cont {
        font-size: 4.25vw;
    }
    .estimate-flex figure {
        width: calc(35% + 15px);
        margin-left: -15px;
    }
}

@media screen and (max-width: 480px) {
    .price-main ul li h2 {
        margin: 20px 0;
        padding: 10px;
        border-left: 10px solid #ff0000;
        font-size: 5.25vw;
    }
    .estimate-cont {
        padding: 20px 15px;
        font-size: 6vw;
    }
    .estimate-cont h3 {
        margin-bottom: 10px;
    }
    .estimate-flex figure {
        margin-top: -15px;
    }
    .estimate-right h3 {
        margin: 10px 0;
    }
    .estimate-right-cont {
        padding: 10px;
        font-size: 4.75vw;
    }
    .price-main ul li {
        font-size: 5vw;
    }
    .price-main ul li figure,
	.price-main ul li .price-main-txt {
        max-width: none;
        width: 100%;
    }
    .top_banner_area a {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
}


/************ footer ******************/

.footer_sp {
    display: none;
}

@media screen and (min-width: 992px) {
    .footer {
        background-color: #f8f5f0;
        background-image: linear-gradient( -45deg, #fff 25%, #f8f5f0 25%, #f8f5f0 50%, #fff 50%, #fff 75%, #f8f5f0 75%, #f8f5f0);
        -webkit-background-size: 7px 7px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .footer_area {
        width: 962px;
        margin: 0 auto;
    }
    .footer_left {
        display: block;
        float: left;
        width: 450px;
    }
    .footer_address {
        font-size: 80%;
        margin-left: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .footer_list {
        line-height: 210%;
        font-size: 90%;
        padding-top: 20px;
    }
    .footer_list a:hover {
        color: #eb70a6;
    }
    .footer_right1 {
        float: left;
        width: auto;
        margin-right: 30px;
        margin-left: 30px;
    }
    .footer_right2 {
        float: left;
        width: auto;
        margin-right: 30px;
    }
    .footer_right3 {
        float: left;
        width: auto;
    }
    .copy {
        text-align: center;
        margin-top: 40px;
        margin-bottom: 40px;
        font-size: 80%;
    }
}

@media screen and (max-width: 991px) {
    .footer {
        display: none;
    }
    .footer_sp {
        display: block;
        background-color: #f8f5f0;
        background-image: linear-gradient( -45deg, #fff 25%, #f8f5f0 25%, #f8f5f0 50%, #fff 50%, #fff 75%, #f8f5f0 75%, #f8f5f0);
        -webkit-background-size: 7px 7px;
    }
    .footer_area {
        width: 100%;
        margin: 0 auto;
    }
    .footer_address {
        font-size: 80%;
        width: 90%;
        margin-left: 3%;
        line-height: 150%;
    }
    .footer_list {
        line-height: 300%;
    }
    .footer_list li {
        border-top: 1px dashed #999;
        padding-left: 3%;
    }
    .footer_list a {
        width: 100%;
        height: 300%;
        display: block;
    }
    .footer_list a:hover {
        color: #eb70a6;
    }
    .copy {
        text-align: center;
        margin-top: 40px;
        margin-bottom: 40px;
        font-size: 80%;
    }
}

@media screen and (max-width: 768px) {
    .contact-fix {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        background: #fff;
        padding: 10px 15px;
        z-index: 100;
    }
    .contact-fix-tel,
    .contact-fix-cont {
        width: 48%;
    }
    .contact-fix a {
        display: block;
        border-radius: 10px;
        color: #fff;
        font-size: 18px;
        text-align: center;
        padding: 10px 0;
    }
    .contact-fix-cont a {
        background: #e38431;
        box-shadow: 0 5px 0 #d16728;
    }
    .contact-fix-tel a {
        background: #3d89e9;
        box-shadow: 0 5px 0 #25589d;
    }
    .contact-fix a:hover {
        box-shadow: none;
    }
    .contact-fix a i {
        margin-right: 15px;
        font-size: 120%;
        vertical-align: middle;
    }
    .contact-fix-tel a i {
        transform: rotateY(180deg);
    }
    .copy {
        padding-bottom: 40px;
    }
}