@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
body{
    font-family: 'Kosugi Maru',"Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
}

/*
.fix_bnr,#pagetop{
    position:absolute;
}
*/

/*--all page---------------------------
-------------------------------------*/

.linkStyle{
    color:#bf9d74;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

body{
    overflow:hidden;
}

.footer_contact{
    display:none;
}
.footer_sitemap{
    border-top:0;
    padding-top: 10px;
}
.logo2 a{
    max-width:400px;
}

.fix_bnr{
    left:10px;
    z-index:2;
}

/*--top page---------------------------
-------------------------------------*/
#con1{
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(255, 253, 241, 1) 7px, rgba(255, 253, 241, 1) 21px );
}
#con1 h2{
    width: 700px;
    margin: 30px auto 0;
}

.cases {
    height: 400px;
    margin: 10px auto 70px;
}
.case{
    width:350px;
    z-index:2;
}
.case1 {
    top: 30%;
    left: 1%;
}
.case2 {
    bottom: -8%;
    left: -7%;
}
.case3 {
    top: 3%;
    left: 36%;
}
.case4 {
    top: 30%;
    right: -4%;
}
.case5 {
    bottom: -1%;
    right: -8%;
}
.customer{
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    width:550px;
    z-index:0;
}

/*下からフェードイン*/
 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}
.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

#con2 .point {
    width: 300px;
    top: -3%;
    left: -2%;
    transform: rotate(-3deg);
}
.zoomInTrigger{
    opacity: 0;
}
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

#con3 .sl,
#con3 .icon{
    display:none;
}
#con3 .point {
    width: 300px;
    margin:0 auto;
}
#con3 .box a{
    border-radius:50px;
}

#con4{
    display:none;
}


/*--under page---------------------------
-------------------------------------*/
/*page_title*/
.pagetitle{
    background:transparent;
    background-image:url(./Dup/img/page_title.png);
    background-repeat:repeat-x;
    background-position:bottom;
    background-size:500px auto;
}
#cms_2-f .bnr a{
    border-radius:50px;
}
 

/* ---------- responshive ---------- */
@media screen and (max-width: 1170px){
#fakeloader .fl{
    max-width:340px;
}
.logo1 {
    max-width: 220px;
}
.cases{
    height:400px;
}
.case{
    width:300px;
}
.case1 {
    top: 26%;
    left: 13%;
}
.case2 {
    bottom: 12%;
    left: 0;
}
.case3 {
    top: 1%;
    left: 38%;
}
.case4 {
    top: 31%;
    right: 3%;
}
.case5 {
    bottom: 8%;
    right: -5%;
    z-index: 1;
}
.customer{
    width:330px;
}
}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#con1 h2 {
    width: 550px;
    margin: 30px auto;
}
.case1 {
    top: 21%;
    left: 4%;
}
.case2 {
    bottom: 20%;
    left: 0;
}
.case3 {
    top: -6%;
    left: 31%;
}
.case4 {
    top: 25%;
    right: 3%;
}
.case5 {
    bottom: 18%;
    right: -5%;
    z-index: 1;
}
#con2{
    padding-top:120px;
}
#con2 .point {
    width: 250px;
    top: -12%;
}
#con2 .topimg2 {
    width: 60%;
    margin: auto;
}
#con3 .point{
    width:250px;
}

.fadein,.zoomInTrigger{
  opacity: 1;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#fakeloader .fl{
    width:80%!important;
}

#main_img{
    padding-top:70px;
}
#con1 h2 {
    width: 100%;
}
.cases {
    height: 550px;
}
.case {
    width: 250px;
}
.case1 {
    top: 14%;
    left: 25%;
}
.case2 {
    bottom: 35%;
    left: 0;
}
.case3 {
    top: -3%;
    left: -3%;
}
.case4 {
    top: 29%;
    right: 11%;
}
.case5 {
    bottom: 18%;
    right: -3%;
    z-index: 1;
}
#con2 .topimg2 {
    width: 90%;
}
#con3 .box .img {
    max-width: 200px;
}
#con3 .box{
    margin-bottom:80px;
}
}