﻿body {
    font-size: 18px;
}

.menu h1.logo{
        transform: scale(1.7);
}

.menu h1.logo img{
    width: 50% !important;
}

#contents .box .txt_wrap {
        width: 90%;
    padding: 0 20px;
    box-sizing: border-box;
}

#contents .box {
    width: 60%;
    background-color: white;
    padding: 50px 10px;
    border-radius: 20px;
    box-sizing: border-box;
    position: relative;
}

#contents .box figure {
    width: 90%;
}

.fst{
        background-image: url(./Dup/img/test.png);
    background-position: 92% 70%;
    background-repeat: no-repeat;
    background-size: 33%;
    padding: 10px;
    max-width: 1280px;
    margin: auto;
}

#contents .fst .box{
    width: 97%;
     background-color: transparent; 
     padding: 0px; 
     border-radius: none; 
     box-sizing: border-box;
         position: relative;
}
/*
#contents .fst .box figure {
    width: 100%;
}*/

.scd .box {
    width: 40%;
    background-color: white;
    padding: 10px;
    border-radius: 20px;
    margin-right: 0;
    margin-left: auto;
}

.svg_box{
    display: none;
}

.scd{
   padding: 10px;
  max-width: 1280px;
   margin: auto;
  box-sizing: border-box;
}

.thd{
   padding: 10px;
    max-width: 1280px;
   margin: auto;
    box-sizing: border-box;
}

#contents .fst .box figure:after{
    right: 0%;
    top: 100%;
        width: 70%;
    height: 50%;
    border: 300px solid;
    background-color: #bf9d74;
}

#contents .scd .box figure:after{
/*        right: 50%;*/
/*    top: 100%;*/
/*    background-color: #bf9d74;*/
/*    width: 200%;*/
/*    transform: none;*/
/*    height: 50%;*/
}

#contents .scd:before{
        content: '';
    position: absolute;
    /* top: 0; */
    bottom: 10%;
    margin: auto;
    width: 100%;
    height: 50%;
    z-index: 0;
    /* border: 155px solid #ede7dc; */
    opacity: 1;
    left: -50%;
    background-color: #ede7dc;
}

#contents .thd:before {
    content: '';
    position: absolute;
    /* top: 0; */
    bottom: 10%;
    margin: auto;
    width: 100%;
    height: 50%;
    z-index: 0;
    /* border: 155px solid #ede7dc; */
    opacity: 1;
    right: -50%;
    background-color: #ede7dc;
}

#contents .scd:after{
        content: "";
    display: block;
    width: 45%;
    height: 45%;
    position: absolute;
    top: 50%;
    left: 20%;
    background-image: url(./Dup/img/test2.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

#contents .thd:after{
     content: "";
    display: block;
    width: 48%;
    height: 48%;
    position: absolute;
    top: 50%;
    left: 82%;
    /* right: 20%; */
    background-image: url(./Dup/img/test3.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

.fst figure .img-container{
        border-radius: 30px;
    overflow: hidden;
        max-height: 600px;
}

.fst p.t_cms_txt2 {
    display: inline-block;
    position: absolute;
    right: 0;
    transform: rotate(90deg) translateY(-1em) !important;
    font-size: 35px;
    transform-origin: top left;
    top: 0;
}

#contents .box h3 {
    display: inline-block;
    position: relative;
    font-size: 32px;
    margin: 50px auto;
}

.scd p.t_cms_txt5 {
        display: inline-block;
    position: absolute;
    right: 0;
    transform: rotate(90deg) translateY(-7em) !important;
    font-size: 35px;
    transform-origin: top left;
    top: 0;
}

.thd p.t_cms_txt8 {
        display: inline-block;
    position: absolute;
    right: 0;
    transform: rotate(90deg) translateY(-7em) !important;
    font-size: 35px;
    transform-origin: top left;
    top: 0;
}

.scd, .thd{
    position: relative;
}

#contents .thd .box figure:after {
        right: -200%;
    top: 100%;
    background-color: #bf9d74;
    width: 200%;
    transform: none;
    height: 50%;
}

.main_img_wrap{
    position: relative;
        width: 100%;
}

.test{
        position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.video_wrap {
    width: 105%;
}

.main_wrap {
    margin-top: 0 !important;
}

.int{
    padding: 100px;
    margin: auto;
    max-width: 1080px;
    box-sizing: border-box;
}

.main_img_wrap:before{
         content: "";
    display: block;
    width: 100%;
    height: 90%;
    position: absolute;
    top: 0%;
    right: 0%;
    background-image: url(./Dup/img/copy.png);
    background-position: top right;
    background-repeat: no-repeat;
    /* -webkit-transform: translate(-50% , -50%); */
    /* transform: translate(-50% , -50%); */
    background-size: 75px;
    pointer-events: none;
    z-index: 1;
}

.dotai h2{
    font-size: 30px;
    font-weight: bold;
        margin: 30px auto;
}

.all_page{
    background-color:white;}

.page5 span.img-container_img{
        background-image: url(./Dup/img/cafe.jpg) !important;
}

.page6 span.img-container_img, .page2 span.img-container_img, .page4 span.img-container_img, .page7 span.img-container_img, .page8 span.img-container_img, .page9 span.img-container_img, .page10 span.img-container_img{
        background-image: url(./Dup/img/sub_main2.jpg) !important;
}

.page3 span.img-container_img{
        background-image: url(./Dup/img/zen.jpg) !important;
}

.page_title_box p{
        filter: drop-shadow(2px 0px 10px white) drop-shadow(2px 0px 10px white);
}

.int{
    position: relative;
        margin: 50px auto;
}

.int:before{
    content: "";
    display: block;
    width: 40%;
    height: 40%;
    position: absolute;
    top: 85%;
    left: 110%;
    background-image: url(./Dup/img/right.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;
}

.int:after{
    content: "";
    display: block;
    width: 30%;
    height: 30%;
    position: absolute;
    top: 10%;
    left: -15%;
    background-image: url(./Dup/img/left.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;
}

.linkStyle{
color: #29a9e0;
font-weight: bold;
}

#top_cms{
    background-color: white;
}

.top_nav {
    margin-right: 8%;
}

#footer .logo{
    filter: contrast(0);
}

.banner2{
      bottom: 0px;
      left: 0;
      text-align: right;
      z-index: 100;
      max-width: 300px;
}

#contents .box:nth-child(odd) figure:after{
    display: none;
}

.cate_list li a {
    text-align: left;
}

/*--20230413 add start--*/

.scd > div{
    width: 70%;
}

.fst p.t_cms_txt2 {
    right: -5em;
    z-index: 2;
    font-size: 50px;
}

.fst {
    /*max-width: 1080px;*/
    position: relative;
}

.fst img{
    border-radius: 20px;
}

#contents .fst .box figure:after {
    width: 100%;
}

.fst .txt_wrap p{
        max-width: 650px;
}

/*
.fst .txt_wrap{
    margin: auto;
    margin-left: 0;
}*/

#contents .fst:before {
    content: '';
    position: absolute;
    /* top: 0; */
    bottom: 0%;
    margin: auto;
    width: 100%;
    height: 60%;
    z-index: 0;
    /* border: 155px solid #ede7dc; */
    opacity: 1;
    left: -50%;
    background-color: #ede7dc;
}

.fst figure .img-container {
    display: block;
}

#contents{
    padding-top: 150px;
    padding-bottom: 150px;
}

/*--20230413 add end--*/

.fst > div.box{
    position: relative;
}

.fst > div.box:before{
    content: "";
    display: block;
    width: 150px;
    height: 180px;
    position: absolute;
    top: -80px;
    left: 18%;
    background-image: url(./Dup/img/catch.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;
}

/*--20230421 correct start--*/

#tel_CONTACT p a{
        width: 275px;
    padding: 5% 10%;
    box-sizing: border-box;
    font-size: 20px;
    letter-spacing: 0.05em;
}

/*--20230421 correct end--*/

/*--20230531 correct start--*/

#loading_line .line {
    background-image: url(./Dup/img/sakura.jpg);
    background-position: center;
    background-size: cover;
    width: 100% !important;
}

#contents .fst:before, #contents .scd:before, #contents .thd:before {
    opacity: 0.45;
    background-color: #ffd9d9;
        border-radius: 0 0 200px 0px;
}

footer {
    background-color: #c5bdb5;
}

.other .box:hover {
    background-color: #ffd9f1;
}

.hvr_txt_color1:hover {
    color: #ed6b65;
}

.img-container:before {
    background-image: url(./Dup/img/ha.jpg);
    background-size: cover;
    background-position: center;
}

.box_link{
    max-width: 500px;
    margin: auto;
    width: 90%;
}

/*--20230531 correct end--*/

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
video {
    min-width: auto;
    min-height: auto;
    width: auto;
    z-index: 1;
    position: relative;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(-50%, 0%);
    vertical-align: bottom;
    height: 70vh;
}

.main_img_wrap{
        height: 70vh !important;
}


.t_cms_txt2, .t_cms_txt5, .t_cms_txt8{
    display: none !important;
}

#contents .fst .box figure:after {
    opacity: 0;
}

#contents .scd .box figure:after {
    opacity: 0;
}

#contents .box {
    width: 100%;
    padding: 0px;
}



.fst {
    background-position: 100% 20%;
    background-size: 30%;
    padding: 0px;
}

#contents .box .txt_wrap {
    width: 100%;
    padding: 5px;
}

#contents .scd:after {
        top: 7%;
    width: 25%;
    left: 10%;
    z-index: 1;
}

#contents .thd:after {
        top: 7%;
    width: 25%;
    left: 90%;
    z-index: 1;
}

.main_img_wrap:before {
    width: 100%;
    height: 90%;
    position: absolute;
    top: 10%;
    right: -20%;
    background-image: url(./Dup/img/copy.png);
    z-index: 2;
}

.main_img_wrap {
    width: 80%;
}

.int:before {
    width: 35%;
    height: 35%;
    top: 100%;
    left: 80%;
    z-index: 2;
}

.int:after {
    width: 30%;
    height: 30%;
    top: 10%;
    left: 10%;
    z-index: 1;
}

}

/* ---------- スマートフォン(横) ---------- */
@media screen and (max-width: 667px){

.int {
    padding: 0;
    margin: auto;
    max-width: 1080px;
    box-sizing: border-box;
    margin-bottom: 100px;
}



#contents .box h3 {
    font-size: 25px;
}

.dotai, .dou{
        width: 90%;
    margin: auto;
}

/*#contents .scd:after {*/
/*    top: 6%;*/
/*    z-index: 1;*/
/*}*/

.main_img_wrap:before {
    top: 5%;
    right: -25%;
    background-size: contain;
}

.int:before {
    width: 40%;
    height: 40%;
    top: 120%;
    left: 80%;
}

video {
    left: 0%;
}

.fst {
    background-position: 100% 34.5%;
}

/*#contents .thd:after {*/
/*    width: 40%;*/
/*    height: 40%;*/
/*    top: 25%;*/
/*    left: 17%;*/
/*    z-index: 1;*/
/*}*/

.banner_top{
    margin-top: 20px;
}


.int nav{
        padding: 20px;
    width: 90%;
    box-sizing: border-box;
    background-image: url(./Dup/img/sakura.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 50px auto;
}

.int nav li{
        padding: 10px;
    background-color: rgba(255,255,255,0.8);
}

.int nav li a{
    display: block;
    border-bottom: 1px solid #f7b5b5;
    text-align: center;
    padding: 20px;
}

header .logo {
    width: 100px;
}

}

/* ---------- スマートフォン(縦) ---------- */
@media screen and (max-width: 400px){
    
}