﻿/*FAQ-------------------------------------------------------------------------------*/
div#cms_5-a h4::before {
    content: "Q.";
    font-size: -webkit-calc(1rem + 10px);
    font-size: calc(1rem + 10px);
    position: absolute;
    top: -2px;
    left: 9px;
}
div#cms_5-a p::before {
    content: "A.";
    font-size: -webkit-calc(1rem + 10px);
    font-size: calc(1rem + 10px);
    position: absolute;
    top: -2px;
    left: 9px;

}
/*FAQ-------------------------------------------------------------------------------*/

/*font-----------------------------------------------------------------------------------*/

.cms_title p,#contents4 p.txt_color2,.page_title_box p {
    font-family: 'Parisienne', cursive;
    font-size: -webkit-calc(1rem + 5px);
    font-size: calc(1rem + 5px);
}
.font_100per {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}
.font_serif {
    font-family: 'Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
/*font-----------------------------------------------------------------------------------*/

/*color---------------------------------------------------------------------------------*/
/*白#f9f4f2 249 244 242*/
/*　#ede8e6 237 232 230*/
/*茶#24140e 36 20 14*/
/*赤#890c15*/

.bg_color1 {background-color: #f9f4f2;
            background-image: url(dup/img/bg_img.jpg);
            background-size:contain;}
.bg_color3 { background-color: #ede8e6;}
.bg_black {background-color: #24140e;}
#header {
    background: -moz-linear-gradient(top, rgba(36,20,14,0.8), transparent);
    background: -webkit-linear-gradient(top, rgba(36,20,14,0.8), transparent);
    background: linear-gradient(to bottom, rgba(36,20,14,0.8), transparent);
}

#contents3 .con_box {
    background: -moz-linear-gradient(left, rgba(36,20,14,0.8), transparent);
    background: -webkit-linear-gradient(left, rgba(36,20,14,0.8), transparent);
    background: linear-gradient(to right, rgba(36,20,14,0.8),transparent);
}

#contents2 .con_box,#add_contents .con_box{
    background: -moz-linear-gradient(left, transparent, rgba(36,20,14,0.8));
    background: -webkit-linear-gradient(left, transparent, rgba(36,20,14,0.8));
    background: linear-gradient(to right, transparent, rgba(36,20,14,0.8));
}


.border_color4 {border-color: #b8a0a2;}
.border_color3 {border-color: #b8a0a2;}
.border_color2 {border-color: #a68b8d;}
.page9 h3 {border-color: #a68b8d;}
body, .txt_color_nomal {color: #24140e!important;}
.txt_white {color: #f9f4f2;}
.txt_color2 {color: #24140e;}
#contents2 .con_box h2, #contents2 .con_box p, #contents3 .con_box h2, #contents3 .con_box p,#add_contents .con_box h2, #add_contents .con_box p {
    color: #f9f4f2;}
div#footer p {color: #f9f4f2;}
section#contents4 p { color: #f9f4f2;}
.page_title_box { color: #f9f4f2;}
.cate_list li a {color: #24140e;}
.cate_list {border-color: #24140e;}
.cate_list li:not(:first-child):not(:nth-child(4n + 1))::before {
    background-color: #24140e;}


#sp_nav .tel_bt {
    color: #24140e;
    border-color: rgba(36,20,14,0.3);
    background: #f9f4f2;
}
#sp_nav .tel_bt:hover {
    background-color: transparent;
    border: solid 1px rgba(255,255,255,0);
}

#pc_nav a {
    color: #24140e;
    text-shadow: 0 1px 4px rgb(102 86 81);
}
#pc_nav a::before {background-color: #24140e;
}

.more a::before {
    border-top: solid 1px #24140e;
    border-right: solid 1px #24140e;}
.more a::after {
    border-bottom: solid 1px #24140e;
    border-left: solid 1px #24140e;}
.more a {color: #24140e;}
div#cms_5-a h3 {color: #24140e;
    border-color: #ede8e6;
}
div#cms_5-a h4 {color: #890c15;}
.page9 a{background-color:#890c15;}

#contents1 .con_box::before {background-color: #24140e;}
.cms_title::before {background-color: #24140e;}
#top_info .con_box::before {background-color: #24140e;}
#top_info .con_box a{color: #24140e;}
/*color---------------------------------------------------------------------------------*/
/*catchcopy---------------------------------------------------------------------------------*/
header.catchcopy::before {
    content: '';
    background-image: url(dup/img/catchcopy01.png);
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 650px;
    opacity: 1.3;
    content: "";
    display: block;
    z-index: 3;
    right: 4%;
    bottom: 20.2%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}
header.catchcopy::after {
    content: '';
    background-image: url(dup/img/catchcopy02.png);
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 550px;
    opacity: 1.3;
    content: "";
    display: block;
    z-index: 3;
    right: 3.5%;
    bottom: 10%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}

header.catchcopy::before,header.catchcopy::after {
    opacity: 0;
    animation: fadein 4s ease forwards;
    
}
@keyframes fadein {
    100% {  opacity: 1;
    transform: rotate(0.0001deg);
    }
}
header.catchcopy::before {animation-delay: 1s;}
header.catchcopy::after {animation-delay: 2s;}

/*catchcopy---------------------------------------------------------------------------------*/
/*logo---------------------------------------------------------------------------------*/
#header{height: 166px;}
#header img.width_auto {
    max-width: 300px;
    height: auto;
    position: absolute;
    top: 15%;
    left: 5%;
}
div#loading img {max-width: 400px;}
.footer_logo {max-width: 350px;}
/*logo---------------------------------------------------------------------------------*/


#contents2 .con_box .d_table,#add_contents .con_box .d_table {
    margin-left: 55px !important;}

#contents2 .con_box, #contents3 .con_box, #add_contents .con_box{
    text-align: center;}
#contents2 .con_box h2, #contents2 .con_box p, #contents3 .con_box h2, #contents3 .con_box p, #add_contents .con_box h2, #add_contents .con_box p{
    text-align: left;}
#contents2 .con_box p,#contents3 .con_box p,#add_contents .con_box p{
    padding-left: 100px;
    padding-right: 100px;
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
}


/*fadein---------------------------------------------------------------------------------*/
.fadein{
     opacity: 0;
     transform: translateY(20px);
     transition: 1.5s;
     transition-property: opacity,transform
}

.fadein.fadetrans{
     opacity: 1;
     transform: none
}
/*fadein---------------------------------------------------------------------------------*/

/*linkStyle-------------------------------------------------------------------------------*/
a.linkStyle {
    color: #24140e;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #890c15;
}
.hvr_opa08 {
    transition: 0.5s;
}
/*linkStyle-------------------------------------------------------------------------------*/



/*IE*/
@media all and (-ms-high-contrast: none){
 #pc_nav a {text-shadow: 0px 4px 5px rgba(102,86,81,0.5)!important;}
.tel_bt { padding-top: 7px;}
.more a{padding-top: 18px;}

#cms_2-a .cate .cate_title {
    padding-top: 8px !important;
}

#cms_5-a .cate .cate_title span:last-of-type {
    padding-top: 0px !important;
    padding-bottom: 2px !important;
}

#contact_tel{ padding-top: 24px;}

.page9 p a {
    padding-top: 0px;
    padding-bottom: 3px;
}

.sitemap_box .more a {
    padding-top: 0px;
    padding-bottom: 5px;
}



}


/*タブレット*/
@media screen and (max-width: 768px){
    #main_img {
    z-index: 1;
    overflow: hidden;
    position: relative;
    max-height: 100%;
    min-height: 100vh;
}
div#video {
    width: auto !important;
    height: 100%!important;
}
video.video.width_100per {
    height: 100% !important;
    width: auto !important;
}

header.catchcopy::before {
    content: '';
    background-image: url(dup/img/catchcopy01.png);
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 400px;
    opacity: 1.3;
    content: "";
    display: block;
    z-index: 3;
    right: 4%;
    bottom: 16.2%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}
header.catchcopy::after {
    content: '';
    background-image: url(dup/img/catchcopy02.png);
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 350px;
    opacity: 1.3;
    content: "";
    display: block;
    z-index: 3;
    right: 3.5%;
    bottom: 10%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}




#pc_nav a {
    color: #24140e;
    text-shadow: 0 1px 4px rgb(102 86 81);}
#pc_nav a::before {background-color: #24140e;}
#video.posi_center_tb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-39%,-50%);}
    
    


header.catchcopy::before,header.catchcopy::after {
    opacity: 0;
    animation: fadein 4s ease forwards;
    
}
@keyframes fadein {
    100% {  opacity: 1;
    transform: rotate(0.0001deg);
    }
}
header.catchcopy::before {animation-delay: 1s;}
header.catchcopy::after {animation-delay: 2s;}

#contents2 .con_box p, #contents3 .con_box p, #add_contents .con_box p {
    padding-left: 0px;
    padding-right: 0px;
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
}

#contents2 .con_box .d_table, #add_contents .con_box .d_table {
    margin-left: 0px !important;
}


#contents2 .con_box h2, #contents3 .con_box h2, #add_contents .con_box h2 {
    text-align: center;
}

#under_page .under_box{padding: 9%;}

#cms_4-b .cate_box {
     margin: 0%; 
}

div#cms_5-a h4::before {
    content: "Q.";
    font-size: -webkit-calc(1rem + 9px);
    font-size: calc(1rem + 9px);
    position: absolute;
    top: -3px;
    left: 9px;
}
div#cms_5-a p::before {
    content: "A.";
    font-size: -webkit-calc(1rem + 9px);
    font-size: calc(1rem + 9px);
    position: absolute;
    top: -6px;
    left: 9px;
}

#header { height: 150px;}

#header img.width_auto {
    max-width: 250px;
    height: auto;
    position: absolute;
    top: 15%;
    left: 5%;
}

}



/*スマホ*/
@media screen and (max-width: 667px){
#header img.width_auto {
    max-width: 210px;
    height: auto;
    position: absolute;
    top: 40%;
    left: 5%;
}
div#loading img {
    max-width: 220px !important;
}
.footer_logo {
    max-width: 220px;
}
#cms_5-a h3.font_4up_sp {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
    padding: 4px 1px;
}
#under_page .under_box06{padding: 6%;}

#cms_4-b .cate_box {
    margin: 0% 0 30px 0;
}
header.catchcopy::before {
    content: '';
    background-image: url(dup/img/catchcopy01.png);
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 230px;
    opacity: 1.3;
    content: "";
    display: block;
    z-index: 3;
    right: 4%;
    bottom: 60.2%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}

header.catchcopy::after {
    content: '';
    background-image: url(dup/img/catchcopy02.png);
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 200px;
    opacity: 1.3;
    content: "";
    display: block;
    z-index: 3;
    right: 3.5%;
    bottom: 55%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}


#contents2 .con_box p, #contents3 .con_box p, #add_contents .con_box p {
    padding-left: 0px;
    padding-right: 0px;
    font-size: -webkit-calc(1rem + 0px);
    font-size: calc(1rem + 0px);
}
.font_100per {
    font-size: -webkit-calc(1rem + 0px);
    font-size: calc(1rem + 0px);
}
.letter_4 {
    letter-spacing: 3px;
}
header.catchcopy::before,header.catchcopy::after {
    opacity: 0;
    animation: fadein 4s ease forwards;
    
}
@keyframes fadein {
    100% {  opacity: 1;
    transform: rotate(0.0001deg);
    }
}
header.catchcopy::before {animation-delay: 1s;}
header.catchcopy::after {animation-delay: 2s;}
}







/*20210913 公開後修正*/

.footer_mail.d_none {display: none !important;}

/*【調整用】*/

@media screen and (max-width: 1280px){
.footer_mail {font-size: -webkit-calc(1rem + -1px);
    font-size: calc(1rem + -1px);}
    
.footer_mail,.tel_bt{ padding:5px;}

}





p#contact_tel a, p#contact_mail a {
    font-size: -webkit-calc(1rem + 5px) !important;
    font-size: calc(1rem + 5px) !important;
    padding: 25px 5px;}
    
    
@media screen and (max-width: 1200px){
p#contact_tel a, p#contact_mail a {
    font-size: -webkit-calc(1rem + 4px) !important;
    font-size: calc(1rem + 4px) !important;
    padding: 25px 5px;
    letter-spacing: 2px;}}


@media screen and (max-width: 768px){


.footer_mail {font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);}
    
.footer_mail,.tel_bt{ padding:10px;}
}


/*【スマホ】*/

@media screen and (max-width: 667px){
.footer_mail.d_none {display: block !important;}



.footer_mail {
    font-size: -webkit-calc(1rem + -1px);
    font-size: calc(1rem + -1px);
}    



p#contact_tel a, p#contact_mail a {
    letter-spacing: 2px;
    font-size: -webkit-calc(1rem + 0px) !important;
    font-size: calc(1rem + 0px) !important;
    padding: 20px 5px;
    letter-spacing: 2px;
    font-weight: 800 !important;}
    
    
.mail_sp i{margin-right: 5px;}


#header {height: 120px;}
#header img.width_auto {
    max-width: 167px;
    height: auto;
    position: absolute;
    top: 18%;
    left: 5%;
}

}




/*公開後修正20211004*/
/*スマホ*/
@media screen and (max-width: 667px){
header.catchcopy::before {
    right: 7%;
    bottom: 59.2%;}
header.catchcopy::after {
    right: 6.5%;
    bottom: 54%;}

header{
    height: 50vh !important;
}

#main_img {
    max-height: 50vh;
    min-height: 50vh;
    width: auto;
}
    
    
video.video.width_100per {
    height: 50vh !important;
    width: auto !important;
}    

    #video.posi_center_tb {
    position: absolute;
    top: 50%;
    left: 50%;
     transform: translate(-50%,-50%); 
}
}
