@import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap');

.didot {
    font-family: 'East Sea Dokdo', cursive;
}

body{
        background-color: #ddcebe;
        background-color: #ebded1;
        background-color: #d7c1ac;
}

.back1:before, .back2:before{
    background-image: url(./Dup/img/back.jpg);
    opacity: 0.18;
}

#intro_wrap:before{
        content: "";
    display: block;
    width: 70%;
    height: 230px;
    position: absolute;
    top: -20%;
    left: 95%;
    background-image: url(./Dup/img/majime.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;
}

.pic1{
        width: 60%;
        margin: auto;
        margin-right: 0;
        display: block;
        position: relative;
        margin-top: 10%;
}

.pic1:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 135%;
    left: 60%;
    background-image: url(./Dup/img/tyo.png), url(./Dup/img/outdoor.jpg);
    background-position: right bottom, center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 60%, contain;
    pointer-events: none;
    z-index: 1;
    max-width: 350px;
}

.pic1 a {
    display: block;
    width: 70%;
    /* height: 100%; */
    position: absolute;
    top: 50%;
    left: -10%;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    z-index: 1;
}

.pic2{
        display: block;
        margin: auto;
        margin-left: 0;
        width: 30%;
        min-width: 300px;
        transform: translate(0px, -30%);
}



.cursor {
  width: 100px;
  height: 100px;
  transition: transform .2s;
  pointer-events: none;
  transform: scale(0);
  position: absolute;
  z-index: 2;
}

.cursor.active {
  transform: scale(1);
}

.cursor span {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(252,250,239);
  background: linear-gradient(204deg, rgba(252,250,239,1) 0%, rgba(240,250,252,1) 21%, rgba(111,223,166,1) 56%, rgba(253,253,247,1) 98%);
  /* opacity: .6; */
  border-radius: 50%;
  position: absolute;
  animation: elemspin 1.5s linear infinite;
}

.cursor span::after {
  content: '';
  display: block;
  width: 90%;
  height: 90%;
  background-color: #000;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-image: url(./Dup/img/go.png);
  background-position: center;
  background-size: contain;
}


@keyframes elemspin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.num {
    -ms-transform: translate(-50%,0) scale(2);
    -webkit-transform: translate(-50%,0) scale(2);
    transform: translate(-50%,0) scale(2);
    opacity: 0.8;
}


#intro{
    margin-top: 5%;
}


#info_contact .con_img:before {
    background-color: rgba(54, 32, 22, 0.7) !important;
}

.bg_color2 {
    background-color: #cdcab6;
}

.bg_color1 {
    background-color: #4a2d2f;
}

#main_img:before {
    background-color: rgba(149, 104, 69, 0.35);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#main_img .menu p.bg_white{
    background-color: transparent;
    position: relative;
}

#main_img .menu p.bg_white span{
     
display: block;
     
width: 100%;
     
height: 100%;
     
position: absolute;
     
top: 30%;
     
left: 60%;
     
background-image: url(./Dup/img/niga.png);
     
background-position: center;
     
background-repeat: no-repeat;
     
-webkit-transform: rotate(10deg);
     
transform: rotate(10deg);
     
transform-origin: center bottom;
     
background-size: 35%;
     
pointer-events: none;
     
animation: bgiLoop 1s linear infinite alternate;
}

@keyframes bgiLoop {
    0% {transform: rotate(2deg);}
  100% {transform: rotate(-2deg);}
}

.prof{
    text-align: center;
    margin-bottom: 100px;
}

.prof > span{
    display: block;
    width: 15%;
    margin: auto;
    min-width: 100px;
    margin-bottom: 10px;
}

h2, h3{
    font-weight: bold;
}

.num{
    -ms-transform: translate(-50%,0) scale(1.5) !important;
    -webkit-transform: translate(-50%,0) scale(1.5) !important;
    transform: translate(-50%,0) scale(1.5) !important;
}

header.scr_header #logo {
    max-width: 110px;
}

#fakeloader{
        background-color: #d7c1ac;
}

.linkStyle{
    color: red;
}



.cms_5-b .cate_box .open_bt .box_title1:before {
    color: rgb(74, 45, 47) !important;
}

.border_color4 {
    border-color: #f1d4bb;
}

.nav_menu_more a .icon:before{
    display: none;
}


#pc_nav li a, #top_pc_nav li a, #footer_nav li a {
    font-weight: bold;
}


@media all and (-ms-high-contrast: none){
  
.henko p a{
    padding-bottom: 20px;
}

}



@media screen and (max-width: 1280px){
    .menu p a{
        display: none;
    }
    
    #main_img .menu p.bg_white span {
    top: 0%;
    left: 3%;
    background-size: 50%;
}
    
}






/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img .menu p.bg_white span {
    top: 50%;
    left: 55%;
    background-size: contain;
}

#intro_wrap:before {
    width: 70%;
    height: 150px;
    top: -15%;
    left: 86%;
}

.pic1:before {
    top: 115%;
    left: 60%;
    background-size: 30%, 50%;
}

}

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

.pic1 a {
    display: block;
    width: 90%;
    left: -20%;
}

.pic2 {
        min-width: 200px;
    transform: none;
}

.pic1:before {
    background-size: 40%, 50%;
    top: 125%;
    height: 180%;
}

#contents1{
        margin-top: 100px;
}

.prof figure{
        max-width: 200px;
    margin-bottom: 50px;
}

#page_title .page_title_box {
    width: 75%;
}

#intro_wrap:before {
    left: 75%;
}

.pic1:before {
    background-position: 80% 100%, center;
}

.prev{
    margin-right: 0;
}

}