:root {
    --color5: #fef2e2;
    --white:#fffbf5;
    --brown:#917866;
    --green: #37a056;
    --red: #d56047;
    --yellow: #e7c990;
    --yellow2: #e9be29;
}

.border_color5, .hvr_border_color5:hover {
    border-color: var(--yellow);
}

.bg_color1, .hvr_bg_color1:hover {
    background-color: var(--yellow);
}

.txt_color3, .hvr_txt_color3:hover {
    color: var(--red);
}

.txt_color2, .hvr_txt_color2:hover {
    color: var(--green);
}

body{
    background-color:var(--white) ;
}

.bg_color2, .hvr_bg_color2:hover {
    background-color: var(--white);
}

.bg_color3, .hvr_bg_color3:hover {
    background-color: var(--brown);
}

.menu_btn span {
    background-color: var(--brown);
}

#con4{
    display: none;
}

div.con1_inner div.title + div{
    text-align: left;
    margin: auto;
}

#sp_nav {
    background-color: var(--color5);
}

#main_img > img{
    mask-image: url(/files/img/uneune.svg);
    mask-size: 90%;
    mask-position: center;
    max-width: 82%;
    margin: auto;
    display: block;
    mask-repeat: no-repeat;
        min-width: 1280px;
}

#main_img{
    position: relative;
}

#main_img:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(/files/img/top-left.png), url(/files/img/top-right.png);
    background-repeat: no-repeat;
    background-position: top left, top right;
    background-size: 50%, 45%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: darken;
}

.con1_inner .title{
      font-size: max(1.5vw, 26px);
}

.con1_inner {
        background-color: white;
    max-width: 920px;
    padding: 10px 40px 55px;
    box-sizing: border-box;
    width: calc(100% - 10px) !important;
    border-radius: 40px;
        filter: drop-shadow(0px 0px 10px rgba(220, 220, 220, 0.3));
            position: relative;
            z-index: 2;
}

.con1_inner:before{
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 100%;
    left: 75%;
    background-image: url(/files/img/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: contain;
    pointer-events: none;
}

.con1_inner:after {
        content: "";
    display: block;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 80%;
    left: 130%;
    background-image: url(/files/img/waku2.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.con1_inner img{
        margin-top: -20%;
    max-width: 560px;
    width: 70%;
}

.footer{
        background-image: url(/files/img/bottom-left.png), url(/files/img/bottom-right.png);
    background-position: left bottom, right bottom;
    background-repeat: no-repeat;
    background-size: 50%, 60%;
}

.con1_squ{
    display: none;
}

#main_img .footer_sns{
    position: absolute;
bottom: 10vw;
    bottom: 20%;
    left: 5%;
    z-index: 1;
}

#main_img .footer_sns:before{
    content: "";
    display: block;
    width: 400%;
    height: 280%;
    position: absolute;
    top: 90%;
    left: 80%;
    background-image: url(/files/img/waku.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.header-in {
    background-color: white;
}

.footer_sns .box:last-of-type {
    z-index: 1;
}

footer .txt_white{
    color: black;
}

#con3 .box .img {
    mask-image: url(/files/img/test.svg);
    mask-position: center;
    mask-size: contain;
}

#con1:before{
    content: "";
    display: block;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 40%;
    left: 85%;
    background-image: url(/files/img/img07.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

#con1:after{
    content: "";
    display: block;
    width: 250px;
    height: 250px;
    position: absolute;
    top: 90%;
    left: 18%;
    background-image: url(/files/img/img08.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

#page1{
    overflow: hidden;
}

body{
    min-width: 1280px;
}

.footer > p.width_1280-max{
    max-width: 1000px;
}

#con2{
    z-index: 1;
    padding-bottom: 0;
    margin-bottom: -5%;
}

.btns{
    max-width: 120px;
    left: calc(5% + (50px / 2));
    position: absolute;
   /* bottom: 35.5%;
        bottom: 18vw;*/
     bottom: 37.5%;
}

.btns a{
    margin-bottom: 10px;
    display: block;
    animation: doki 2s ease-in-out infinite;
}

@keyframes doki {
    0%, 100% { transform: scale(1);}
  50% {  transform: scale(1.02);}
}

.sl{
    display: none;
    opacity: 0;
}

#con3 .title span.pc_txt{
    font-size: 40px;
}

.pagetitle {
    background-color: white;
}

.pagetitle_img {
    opacity: 0.8;
    mix-blend-mode: normal;
    background-position: top;
}

.f_contact_box p{
    margin-top: 15px;
}

#con1 > img{
        position: absolute;
    top: -10%;
    left: 12.5%;
    max-width: 180px;
    /* opacity: 0;*/
}

.contact__form{
    display: none;
}

#page7 .map iframe {
    margin-top: -150px;
    padding-top: 150px;
}

#con2 .topimg3 {
    width: 40%;
    left: 15%;
}

#page9 .box .no {
    background-color: #d56047;
}

#main_img .copy{
    position: absolute;
    right: 7%;
    bottom: 20%;
    z-index: 1;
    max-width: 250px;
}

section.footer_contact div.tel a{
    background-color: #917866;
    color: white;
    padding: 10px;
    margin: auto;
    margin-top: 30px;
    display: block;
    max-width: 300px;
    border-radius: 40px;
    box-sizing: border-box;
}

div.f_contact_btn{
    display: none;
}

#page7 .block_add_area{
    border: none !important;
}



/* ---------- カスタム ---------- */
@media screen and (max-width: 1450px){
#con1:before {
    width: 200px;
    height: 200px;
    top: 40%;
    left: 94%;
}

#con1:after {
    width: 200px;
    height: 200px;
    top: 100%;
    left: 18%;
}

}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

body{
    min-width: 100%;
}

#main_img > img {
    max-width: 100%;
}

.btns {
    max-width: 120px;
    left: calc(4% + (0px / 2));
    bottom: 20.5%;
}

#main_img .footer_sns {
    bottom: 0%;
}

#main_img > img {
    min-width: auto;
}

.con1_inner {
    width: calc(100% - 40px) !important;
}

#con1 > img, #con1:before, #con1:after{
    display: none;
}

#con3 .title span.pc_txt {
    font-size: 37px;
}

#main_img .copy{
    position: absolute;
    right: 5%;
    bottom: -5%;
    z-index: 1;
    max-width: 200px;
}

.cate{
        padding-top: 100px;
    margin-top: -100px;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#main_img .footer_sns {
    bottom: 0%;
}

#main_img > img {
    max-width: 100%;
    transform: scale(1.5) translateY(15%);
}

#main_img {
    height: 420px;
}

.btns {
    max-width: 62px;
    left: calc(3% + (0px / 2));
    bottom: 12.5%;
}

#main_img .copy{
    position: absolute;
    right: 2%;
    bottom: -1%;
    z-index: 1;
    max-width: 120px;
}


.f_contact_box h4{
    font-size: 41px;
}

section.footer_contact div.tel a {
    font-size: 23px;
}

.f_contact_box {
    padding: 60px 0px;
}

.f_contact_img {
    height: 300px;
}

}