﻿@font-face {
font-family: "rogo";
  src: url("Dup/css/rogo.woff") format("woff"),url("Dup/css/rogo.woff2") format("woff2");
}

h2, h3, header ul li a span.font_16{
    font-family: rogo;
}

.v_type3 .cate_box{border: 1px solid #c9baa9;}
.v_type3 .box_title1{color: #a67c52;}

#cms_3-h .box_item div, .cms_3-h .box_item div {
    min-width: 100px;
}

#con1{
       background-image: url(./Dup/img/test.png), url(./Dup/img/sora.png);
    background-repeat: no-repeat;
    background-size: 20%, contain;
    background-position: bottom right, center right;
}

.con1_inner p{
        max-width: 1080px;
    margin: auto;
}

#main_img {
    position: relative;
    padding-top: 50px;
    background-color: transparent;
}

#main_img:before{
   content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/copy.png), url(./Dup/img/car.png), url(./Dup/img/hito.png), url(./Dup/img/girl.png), url(./Dup/img/boy.png), url(./Dup/img/fufu.png), url(./Dup/img/kumo.png);
    background-position: 25% 40%, bottom right, bottom left, 10% 40%, 90% 48%, 50% 88%, 87% 17%;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 6%, 35%, 28%, 13%, 20%, 17%, 15%;
    pointer-events: none;
    z-index: 1;
}

#main_img:after{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/sora2.png);
    background-position: center right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 66%;
    pointer-events: none;
    z-index: -1;
}

#con3 .box .img {
    border-radius: 160px;
    /*transform: scale(1.15);*/
    width: 85%;
    margin: auto;
        margin-bottom: 30px;
}

.bg_color2 {
        background-color: #5dc63f;
    background-image: url(./Dup/img/pat.png);
    background-size: 15%;
}

#con3 .title{
    position: relative;
}

#con3 .title:before{
    content: "";
    display: block;
    width: 280px;
    height: 280px;
    position: absolute;
    top: -230px;
    left: 5%;
    background-image: url(./Dup/img/ira.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: 1;
}

.title h3{
    max-width: 450px;
    margin: auto;
    width: 70%;
}

.catch{
    max-width: 360px;
    display: block;
    margin: auto;
    margin-top: -115px;
    margin-bottom: 50px;
}

#con2{
        background-image: url(./Dup/img/left.png), url(./Dup/img/right.png);
    background-repeat: no-repeat;
    background-position: 3% 30%, 97% 70%;
    background-size: 12%, 14%;
}

#con1 p.font_22{
    display: none;
}

#con1 p.font_15{
    text-align: left;
}

#fakeloader .fl {
    max-width: 260px;
}

#fakeloader:before {
    background-color: rgba(255,255,255,0) !important;
}

.con1_inner{
    text-align: center;
}

.con1_inner h2{
    font-size: 32px;
    color: #d94352;
}

#con4{
    display: none;
}

.sl{
    display: none;
}

.topimg2{
    border-radius: 30px;
    overflow: hidden;
}

#con3 .box .icon {
    display: none;
}

.f_contact_box h4{
    margin-bottom: 10px;
        font-family: 'rogo';
}

.pagetitle_img {
    mix-blend-mode: normal;
    background-size: cover;
    opacity: 0.8;
}

.pagetitle div.posi_rel{
        display: inline-block;
    background-color: rgba(255,255,255,0.7);
    border-radius: 10px;
    padding: 10px;
}

.linkStyle{
color: #5dc63f;
font-weight: bold;
}

.pagetitle h2 {
    color: #5dc63f;
}

#con3 h3{
        color: #6aca4e;
    margin-bottom: 50px;
    display: inline-block;
    font-size: 35px !important;
    max-width: 100%;
}

.koren{
        font-size: 19px;
    font-weight: bold;
    color: #6aca4e;
    line-height: 1.2em;
}

#page4 h3.cate_title{
    color: white;
    padding-left: 10px;
}

/*---20221004 品証 start---*/

.cate_list li a:hover{
        transform: translateY(-10px);
    background-color: #f8d357;
    color: white;
}



/*---20221004 品証 end---*/


@media all and (-ms-high-contrast: none){
  

}




/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

#con1 {
        background-size: 35%, contain;
    background-position: bottom right, bottom right;
    padding-bottom: 210px;
}

.con1_inner h2{
text-align: center;
}

#con2 {
    background-position: 3% 10%, 97% 100%;
    background-size: 17%, 21%;
}

.topimg2{
        width: 80%;
    border-radius: 30px;
    overflow: hidden;
}

#con3 .title:before {
    width: 220px;
    height: 220px;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#main_img {
    padding-bottom: 50px;
    height: 300px;
}

#main_img img{
        width: 125%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}

#page1{
    overflow: hidden;
}

#main_img:before {
    background-position: 15% 40%, bottom right, bottom left, 4% 45%, 95% 67%, 50% 88%, 98% 36%;
    background-size: 11%, 35%, 35%, 16%, 24%, 20%, 22%;
}

.catch {
    max-width: 260px;
    margin-top: -75px;
        margin-bottom: 30px;
}

#con1 {
    padding-bottom: 130px;
}

#con3 .title:before {
    width: 120px;
    height: 120px;
    top: -110px;
}

#con3 .box .img {
    border-radius: 100px;
    transform: none; 
    width: 98%;
    margin: auto;
}

.f_contact_box h4{
    margin-bottom: 10px;
        font-size: 40px;
}

.koren {
    font-size: 17px;
    margin-top: 30px;
}

footer .copy{
    font-size: 11px;
}

.header-in {
    background-color: rgba(255,255,255,0.6);
}

/*---20221004 品証 start---*/

#cms_1-g .date_box{
    width: 100% !important;
}

#cms_1-g .box_item.grid_10{
    width: 100% !important;
}

/*---20221004 品証 end---*/

}