@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

.bg_color1 {
    background-color: #0cf4ef;
}

.hvr_trans:hover {
    filter: none;
    transform: scale(1.2);
}

#main_img {
    background-color: white;
        padding: 2%;
    box-sizing: border-box;
}

#loading {
    background-color: white;
}

#loading .loading_logo.active {
    filter: blur(0px);
        width: 0px;
}

/*#main_img span{
        display: block;
    position: absolute;
}

#main_img span:nth-of-type(1){
    width: 70%;
}

#main_img span:nth-of-type(2){
        width: 20%;
    top: 0%;
    left: 69%;
}

#main_img span:nth-of-type(3){
        width: 10%;
    top: 7.5%;
    left: 90%;
}

#main_img span:nth-of-type(4){
        width: 25%;
    top: 14vw;
    left: 75%;
}*/

#main_img div.test:nth-of-type(1){
    width: 70%;
    height: 60vh;
    /*background-color: gray;*/
    top: 3%;
    position: absolute;
    left: 0%;
}

#main_img div.test:nth-of-type(1):before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/main1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
}

#main_img div.test:nth-of-type(2){
    width: 20%;
    height: 45vh;
    /*background-color: pink;*/
    top: 0%;
    position: absolute;
    left: 69%;
}

#main_img div.test:nth-of-type(2):before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/main2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
}

#main_img div.test:nth-of-type(3){
    width: 10%;
    height: 23vh;
    /*background-color: gray;*/
    top: 22%;
    position: absolute;
    left: 90%;
}

#main_img div.test:nth-of-type(3):before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/main3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
}




#main_img div.test:nth-of-type(4){
        width: 30%;
        height: 45vh;
        /*background-color: gray;*/
        top: 50%;
        position: absolute;
        left: 73%;
}

#main_img div.test:nth-of-type(4):before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/main4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
}

#main_img div.test:nth-of-type(5){
        width: 16%;
        height: 23vh;
        /*background-color: gray;*/
        top: 65%;
        position: absolute;
        left: 2%;
}

#main_img div.test:nth-of-type(5):before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/main5.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
}

#main_img div.test:nth-of-type(6){
            width: 15%;
    height: 50vh;
    /*background-color: pink;*/
    top: 60%;
    position: absolute;
    left: 19%;
}

#main_img div.test:nth-of-type(6):before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/main6.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
}

#main_img div.test:nth-of-type(7){
            width: 35%;
    height: 30vh;
    /*background-color: gray;*/
    top: 65%;
    position: absolute;
    left: 35%;
}

#main_img div.test:nth-of-type(7):before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/main7.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: cover;
    pointer-events: none;
}

#logo{
    top: 30px;
    left: 30px;
        width: 170px;
}

.top_con_wrap{
        background-color: #fffbf1;
            background-color: #f5fffc;
}

#top_intro .intro_img {
    margin-top: -20px;
}

#head_contact a {
    color: #049c8f;
}

.add{
    max-width: 900px;
    margin: auto;
    position: relative;
    background-image: url(./Dup/img/sub.png);
    background-position: 2% 5%;
    background-size: 20%;
    background-repeat: no-repeat;
    padding-top: 100px;
}

.add:before{
    content: "";
    display: block;
    width: 350px;
    height: 350px;
    position: absolute;
    top: 120%;
    left: 100%;
    background-image: url(./Dup/img/isi.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;
    transform-origin: top left;
}

.add h2{
    text-align: center;
    font-family: 'Montserrat';
    font-size: 60px;
    font-size: max(3.7vw, 30px);
    line-height: 1.4em;
}

.add h3{
         font-size: 1.7em;
    margin: 50px auto;
    text-align: center;
        font-family: 'Zen Maru Gothic', sans-serif;
}

#menu_bt {
    background-color: #049c8f;
}

.top_info_right{
        background-color: #fffbf1;
            color: #787878;
}

#logo2{
        max-width: 120px;
    margin: auto;
    margin-bottom: 30px;
}

.foot_tel{
    margin-bottom: 30px;
}

#top_info .con_no {
    top: 70px;
    left: 50px;
    color: #049c8f;
    font-weight: bold;
    font-size: 20px;
}

.bg_black {
    background-color: #cdcdcd;
}

#top_info .contact_bt a {
    border-radius: 50px;
    background-color: rgba(255,255,255,0.6);
    color: #787878;
}

h2.intro_title1{
        color: #049c8f;
}

.more span.d_inline_b .top, .more span.d_inline_b .bottom, .more a .top, .more a .bottom {
    color: #642d0c;
}

#top_con .top_about{
    opacity: 0.6;
    color: #049c8f;
}

#top_con:before {
    background-color: #0af2f6;
    opacity: 0.2;
    border-radius: 0 300px 0 0;
}

.top_con_wrap{
         background-image: url(./Dup/img/ha1.png), url(./Dup/img/ha2.png);
    background-position: -80% 50%, 120% 35%;
    background-size: 85%, 60%;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
}

.modal_bt{
    background-color: #ffffff;
}

.intro_txt_wrap{
    background-image: url(./Dup/img/catch.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: top right;
}

#top_intro .con_no {
    color: #18eeee;
}

#top_intro .intro_img {
    border-radius: 0 0 300px 0;
}

.modal_bt h3.con_title{
     color: #049c8f;
    display: inline-block;
    /* background-color: white; */
    /* background-color: rgb(250 244 229); */
    margin-top: 150px;
}

.modal_bt .con_txt_wrap p.mg_t-150px {
    margin-top: 0;
    color: #5e4130;
    text-align: center;
    border: 1px solid;
    display: block;
    margin: auto;
    width: 80%;
    transform: translateX(-50%);
    left: 50%;
    max-width: 300px;
    position: relative;
    background-color: #049c8f;
    color: white;
}

.modal_bt .con_txt_wrap p.mg_t-150px:before{
        content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 100%;
    background-image: url(./Dup/img/ar.svg);
    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;
    transition: 0.3s;
}




.modal_box_item .txt_white{
    color: #642d0c;
}

body, .txt_color_nomal {
    color: #642d0c;
}

.bg_base {
    background-color: #fdfcf5;
}

.modal_bg{
        background-color: #cee5e4;
}

#top_con .con1{
    position: relative;
}

#top_con .con1:before {
    content: "";
    display: block;
    width: 350px;
    height: 350px;
    position: absolute;
    top: 122%;
    left: 63%;
    background-image: url(./Dup/img/sita.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: 0;
    transform-origin: top left;
}

.date{
    color: #049c8f;
}

.page_title_bg{
    background-color: transparent !important;
}

.add p{
    max-width: 85%;
    margin: auto;
}

.bg_color3 {
    background-color: #f1f1f1;
}

#pc_nav li a{
    filter: drop-shadow(0px 0px 5px #057c72);
}

.bg_color2 {
    background-color: #f3f3f3;
}

.page_title_box p{
    color: #049c8f;
}

.form_wrap{
    display: none;
}

.banner_wrap{
    display: none;
}


.dec{
    display: block;
    font-size: 14px;
    color: white;
}

.foot_tel{
    margin-bottom: 0;
}

#menu_nav span{
        background-color: #c0e1e0 !important;
}

.iro{
    color: #642d0c !important;
}

#main_img .main_txt{
        color: #0ac3bf;
            max-width: 650px;
}

#main_img .main_txt h3{
        text-align: right;
    width: 95%;
    margin: auto;
    display: none;
}


#main_img .main_txt img{
       max-width: 500px;
    filter: drop-shadow(1px 1px 1px rgba(255,255,255,0.7)) drop-shadow(-1px 1px 1px rgba(255,255,255,0.7)) drop-shadow(1px -1px 1px rgba(255,255,255,0.7)) drop-shadow(-1px -1px 1px rgba(255,255,255,0.7));
    transform: translate(-50%, -50%) rotate(-5deg);
    position: absolute;
    width: 80%;
    top: 125%;
    left: 50%;
}

#top_con .modal_bt:hover .con_txt_wrap p.mg_t-150px:before{
    left: 102%;
    transition: 0.3s;
}


/*--20230525 add--*/

.more span.d_inline_b::before, .more a::before {
    display: none;
}

.more{
        background-color: #049c8f;
            width: 300px;
    text-align: center;
    margin: auto;
}

.more a{
    padding: 20px;
    box-sizing: border-box;
}

.more span.d_inline_b .top, .more span.d_inline_b .bottom, .more a .top, .more a .bottom{
    color: white;
}

.more span.d_inline_b:hover .top, .more a:hover .top {
    transform: none;
    opacity: 1;
}

.more span.d_inline_b:hover .bottom, .more a:hover .bottom{
    opacity: 0;
}

/*--20230525 add--*/

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

#main_img {
    height: 100vh;
}

#main_img div.test:nth-of-type(2) {
       width: 25%;
    left: 75%;
    top: 10%;
    height: 15vh;
}

#main_img div.test:nth-of-type(4) {
    width: 50%;
    left: 45%;
}

#main_img div.test:nth-of-type(3) {
        width: 15%;
    height: 15vh;
    top: 38%;
    left: 82%;
}

#main_img .main_txt img {
        width: 70%;
    top: 150%;
    left: 50%;
}

#main_img div.test:nth-of-type(1) {
    width: 90%;
}

#main_img .main_txt {
    top: 45%;
}

#main_img div.test:nth-of-type(6) {
    width: 25%;
    height: 15vh;
    top: 65%;
    left: 30%;
}

#main_img div.test:nth-of-type(5) {
    width: 25%;
    height: 23vh;
    top: 65%;
    left: 2%;
}

}

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

#logo {
    top: 10px;
    left: 20px;
    width: 100px;
}

#top_intro .intro_img {
    border-radius: 0 0 100px 0;
}

#main_img .main_txt h2{
    font-size: 45px;
}

}




@media screen and (max-width: 390px){
    #main_img div.test:nth-of-type(2) {
    width: 40%;
}

#main_img div.test:nth-of-type(4) {
    width: 60%;
    left: 35%;
}

#main_img div.test:nth-of-type(6) {
    width: 45%;
    height: 30vh;
    background-color: pink;
    top: 60%;
    position: absolute;
    left: 0%;
}

#top_intro .intro_img {
    border-radius: 0 0 100px 0;
}

.intro_txt_wrap {
    background-size: 60%;
}

#top_intro .more{
    text-align: center;
}

.add h2 {
    font-size: max(3.7vw, 27px);
    line-height: 1.4em;
    width: 90%;
    margin: auto;
}

.add h3 {
    font-size: 1.2em;
    width: 80%;
}

#top_con{
        padding: 100px 20px;
}

}


@media screen and (max-width: 390px) and (max-height: 850px){
    #main_img {
    height: 80vh;
}

#main_img div.test:nth-of-type(2) {
        width: 45%;
    left: 50%;
    height: 15vh;
    top: 12%;
}

#main_img div.test:nth-of-type(4) {
    width: 50%;
    left: 45%;
    height: 30vh;
    top: 60%;
}

#main_img div.test:nth-of-type(6) {
    width: 27%;
    height: 13vh;
    left: 30%;
    z-index: 1;
    top: 70%;
}

#main_img div.test:nth-of-type(3) {
    width: 20%;
    height: 15vh;
    /* background-color: gray; */
    top: 32%;
    position: absolute;
    left: 80%;
}

#main_img div.test:nth-of-type(1) {
    width: 75%;
    height: 60vh;
    top: 3%;
}

#main_img div.test:nth-of-type(5) {
    width: 30%;
    height: 23vh;
    top: 65%;
    left: 2%;
}

#main_img div.test:nth-of-type(7) {
    width: 45%;
    height: 17vh;
    top: 75%;
    left: 35%;
}

}