@font-face {
font-family: "maki";
  src: url("Dup/css/Maki.otf") format("otf"),url("Dup/css/Maki.woff") format("woff");
}


#cms_6-d .cate_title {
    font-size: 2em;
    text-align: center;
    color: gray;
}

#cms_6-d .cate_box:after, .cms_6-d .cate_box:after {
    font-size: 4.5em;
}

#fakeloader{
        background-color: #f7f7f7;
}

#fakeloader .fl {
    max-width: 270px;
}

.con1_inner p{
        text-align: left;
    max-width: 900px;
    margin: auto;
}

.ani{
    max-width: 160px;
    display: block;
    margin: auto;
     -webkit-animation: katakata 4s step-start 0s infinite normal;
          animation: katakata 4s step-start 0s infinite normal;
}

.move{
         -webkit-animation: katakata 4s step-start 0s infinite normal;
          animation: katakata 4s step-start 0s infinite normal;
}


@keyframes katakata {
  0% {
    -webkit-transform: translate(0, -2px) rotate(6deg);
            transform: translate(0, -2px) rotate(6deg);
  }
  10% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0, 0) rotate(-6deg);
            transform: translate(0, 0) rotate(-6deg);
  }
  30% {
    -webkit-transform: translate(0, -2px) rotate(0deg);
            transform: translate(0, -2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(0, -2px) rotate(6deg);
            transform: translate(0, -2px) rotate(6deg);
  }
  50% {
    -webkit-transform: translate(2px, 0) rotate(-2deg);
            transform: translate(2px, 0) rotate(-2deg);
  }
  60% {
    -webkit-transform: translate(0, 2px) rotate(0deg);
            transform: translate(0, 2px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0, 0) rotate(6deg);
            transform: translate(0, 0) rotate(6deg);
  }
  80% {
    -webkit-transform: translate(2px, 0) rotate(-2deg);
            transform: translate(2px, 0) rotate(-2deg);
  }
  90% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, -2px) rotate(6deg);
            transform: translate(0, -2px) rotate(6deg);
  }
}

#con3 .box .img {
        border: 10px solid rgb(225, 215, 207);
    box-sizing: border-box;
    border-radius: 43% 57% 53% 47% / 48% 42% 58% 52%; 
        transition: 0.3s;
}

#con3 .box .img:hover{
        border: 25px solid rgb(225, 215, 207);
}

#con3:before{
        content: "";
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    top: -39px;
    left: 0%;
    background-image: url(./Dup/img/ue.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

#con3:after{
        content: "";
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: -39px;
    left: 0%;
    background-image: url(./Dup/img/sita.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

#con2 .topimg3 {
    margin: -10% 0px 0px auto;
    position: relative;
}

#con2 .topimg3:before{
    content: "";
    display: block;
    width: 50%;
    height: 50%;
    position: absolute;
    bottom: -15%;
    left: -40%;
    background-image: url(./Dup/img/green.png);
    background-position: center;
    background-repeat: no-repeat;
    /* -webkit-transform: translate(-50% , -50%); */
    /* transform: translate(-50% , -50%); */
    background-size: contain;
    pointer-events: none;
    animation: katakata 4s step-start 0s infinite normal;
}

#con3{
        background-image: url(./Dup/img/right.png), url(./Dup/img/left.png);
    background-position: 87% 11%, 12% 1.5%;
    background-repeat: no-repeat;
    background-size: 13%;
}

.talk{
          margin: 100px 0;
    transform: scale(1.2);
    transform-origin: top;
}

.talk img{
    max-width: 70px;
    display: inline-block;
}

.talk .ni{
    margin-top: -50px;
    animation-delay: 2s;
}

.talk .san{
        max-width: 60px;
        margin-bottom: -100px;
            margin-left: 100px;
    }
    
.talk .yon{
    margin-top: -30px;
}

.talk .go{
        max-width: 100px;
    /* margin-bottom: 200px; */
    margin-top: 70px;
}

#con1{
        background-image: url(./Dup/img/way.png);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
}

#main_img{
    position: relative;
}

#main_img:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/green_f.png), url(./Dup/img/set_left.png), url(./Dup/img/set_right.png), url(./Dup/img/copy.png);
    background-position: 25% 22%, 5% 90%, 90% 60%, 100% 25%;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 7%, 15%;
    pointer-events: none;
}

#main_img span.pink_f{
        width: 35%;
    position: absolute;
    top: 5%;
    left: -10%;
    display: block;
}

#con1:before{
    content: "";
    display: block;
    width: 450px;
    height: 450px;
    position: absolute;
    top: -25%;
    right: 0%;
    background-image: url(./Dup/img/sub.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.con1_inner h2{
        font-weight: bold;
    font-size: 30px;
}

.pagetitle_img {
    opacity: 0.4;
    mix-blend-mode: normal;
}

.pagetitle {
    background: rgb(206,234,250);
    background: linear-gradient(42deg, rgba(206,234,250,1) 0%, rgba(250,221,227,1) 51%, rgba(255,246,149,1) 100%);
}


#page1{
    overflow: hidden;
}

#con4{
    display: none;
}

.footer > p{
    text-align: center;
}

.linkStyle{color: #f44a9b;}

.f_contact_box h4{
    margin-bottom: 20px;
}

.pagetitle h2, ul.pc_nav li a span:first-child, .cate_title, .box_title1, h2, h3 {
    font-family: maki;
}

.banner2{
      bottom: 50px;
      left: 0;
      text-align: right;
      z-index: 100;
      width: 70px;
}

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

#main_img img{
        transform: scale(1.2);
    z-index: 0;
}

#con1:before {
    width: 250px;
    height: 240px;
    top: -5%;
    right: 0%;
    z-index: 1;
}

#main_img:before {
    background-position: 25% 22%, 5% 90%, 90% 90%, 100% 25%;
    background-size: 7%, 21%;
    pointer-events: none;
    z-index: 1;
}

#main_img {
    padding-bottom: 50px;
    padding-top: 150px;
}

#main_img span.pink_f {
    width: 30%;
    top: 20%;
    z-index: 1;
    animation: none;
}

.talk {
    margin: 50px 0;
    transform: scale(1);
}

.ani {
    max-width: 100px;
}

.cate_list li a {
    padding: 10px 20px;
}

.cate_list li{
    width: auto !important;
}

}

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

#con1:before {
    width: 130px;
    height: 130px;
    top: -6.5%;
    right: 3.5%;
}



#main_img:before {
    background-position: 25% 22%, 5% 90%, 90% 80%, 100% 40%;
    background-size: 8%, 23%;
    z-index: 1;
}

#main_img span.pink_f {
        width: 30%;
    top: 15%;
    z-index: 2;
    animation: none;
    left: -13%;
}

.talk {
    transform: scale(1);
}

.ani {
    max-width: 100px;
    z-index: 1;
    position: relative;
}

.talk .go {
    margin-top: 0px;
}

#con1 {
    background-position: 0 10%;
    padding-top: 20px;
    z-index: 2;
    position: relative;
}

#main_img {
    padding-bottom: 50px;
        padding-top: 100px;
}

.con1_inner h2 {
    font-size: 26px;
    line-height: 1.2em;
    text-align: center;
}

#con3 {
    background-position: 87% 4%, 12% 0.5%;
    background-size: 25%;
}

#page8 .contact_tel a {
    padding: 10px 10px;
    width: 320px;
    display: block;
    box-sizing: border-box;
    letter-spacing: 0.01em;
}

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

.all_contents .content{
    width: 95% !important;
}

.date2{
        font-size: 15px;
    letter-spacing: 0.01em;
}

}