﻿
/* color */
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #ADA584} /* メインカラー */
.txt_color2{color: #aadab4} /* サブカラー */
.txt_color3{color: #b94047} /* アクセントカラー1 */
.txt_color4{color: #FFF7F0} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #ADA584} /* メインカラー */
.bg_color2{background-color: #aadab4} /* サブカラー */
.bg_color3{background-color: #b94047} /* アクセントカラー1 */
.bg_color4{background-color: #FFF7F0} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #ADA584}
.border_color2{border-color: #aadab4}
.border_color3{border-color: #b94047}
.border_color4{border-color: #FFF7F0}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #ADA584} /* メインカラー */
.hvr_txt_color2:hover{color: #aadab4} /* サブカラー */
.hvr_txt_color3:hover{color: #b94047} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #FFF7F0} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #ADA584} /* メインカラー */
.hvr_bg_color2:hover{background-color: #aadab4} /* サブカラー */
.hvr_bg_color3:hover{background-color: #b94047} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #FFF7F0} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #ADA584}
.hvr_border_color2:hover{border-color: #aadab4}
.hvr_border_color3:hover{border-color: #b94047}
.hvr_border_color4:hover{border-color: #FFF7F0}

.linkStyle {
    color: #b94047;
}
#pc_nav .txt_white {
    color: #333333;
}
#intro_wrap {
	background-image: url(./Dup/img/intro_back.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.intro_txt .txt_left {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5%;
}
header.scr_header #logo {
    max-width: 70px;
}
.menu .square_box {
    background-color: rgba(0,0,0,0);
        height: 300px !important;
}
.menu .square_box .width_300-max {
    width: 100%;
    max-width: 300px;
}
#contents1 .con_title, #contents2 .con_title {
    position: relative;
    padding: 1em 1.5em;
    background-color: #ffffff;
    color: #ffffff;
    z-index: 1;
    text-align: center;
}
#contents1 .con_title::before,
#contents1 .con_title::after, #contents2 .con_title::before, #contents2 .con_title::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
#contents1 .con_title::before, #contents2 .con_title::before {
    background-color: rgba(255, 255, 255, 0.2);
    left: 0;
    top: 0;
    z-index: -1;
}
#contents1 .con_title::after, #contents2 .con_title::after {
    background-color: #b94047;
    top: 5px;
    left: 5px;
    z-index: -2;
}
#contents1 .line:before, #contents2 .line:before {
    display: none;
}

#contents3 .con_box {
    background-image: url(./Dup/img/con4_back2.jpg);
    background-position: center;
    background-size: cover;
    border: 4px solid #faf7f2;
    border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
}
.con3_txt_box {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5%;
}
#logo2 .width_300-max {
    width: 100%;
    max-width: 200px;
}
#logo {
    max-width: 200px;
    box-sizing: border-box;
}
/*#contents1 .txt_color1, #contents2 .txt_color1, #contents3 .txt_color1, .first {
    color: #b94047;
}*/
/*.catch {
    font-size: 40px;
    color: #fff;
}*/
.catch_txt {
    top: 50%;
    transform: translateY(-50%);
}
.catch_box {
    /*border: 2px solid #fff;*/
    padding: 10px 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /*top: -100px;*/
    width: 500px;
    height: 500px;
    animation: fadein-keyframes 4s ease 5s 1 forwards;
    background-color: #d6d2c1;
    pointer-events: none;
}

@keyframes fadein-keyframes {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
  
.insta_banner:hover, .base_banner:hover {
    opacity: 0.7;
}
.back1:before, .back2:before {
    background-image: url(./Dup/img/back.png);
}
#cms_3-b .cate_img1 img {
    width: 70%;
}
.nav_menu_more a .icon:before {
    display: none;
}
#cms_2-b .cate_title, #cms_3-b .cate_title {
    padding: 0px 10px 10px;
}
#contents3_wrap:after {
    background-color: rgba(255,255,255,0.5) !important;
}
footer {
    background-color: #daf5e0 !important;
}
.pager li a {
    background-color: rgba(185,64,71,1) !important;
}
.pager li a:hover {
    background-color: rgba(173,165,132,0.8) !important;
}
#pc_nav li a::after, #top_pc_nav li a::after, #footer_nav li a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: rgba(50,50,50,0.5);
    bottom: -10px;
    transform: scale(0, 1);
    transition: transform .3s;
    transform-origin: left top;
}
#logo2 img {
    width: 130%;
}
header.scr_header #logo {
    max-width: 180px;
}
/* タブレット */
@media screen and (max-width: 768px){
    .catch_box {
    width: 300px;
    height: 300px;
}
.page_title_box .font_30 {
    font-size: 29px;
}
#logo2 .width_300-max {
    width: 100%;
    max-width: 180px;
}
#logo {
    max-width: 200px;
    box-sizing: border-box;
}
header.scr_header #logo {
    max-width: 150px;
}
}

/* スマホ */
@media screen and (max-width: 667px){
    #logo {
    max-width: 160px;
    box-sizing: border-box;
}
.page_title_box {
    width: 70%;
}
.page_title_box .font_30 {
    font-size: 23px;
}
#logo2 img {
    width: 100%;
}
#logo2 .width_300-max {
    width: 100%;
    max-width: 300px;
}
}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.banner_box {
    width: 20% !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

#cms_3-b .cate_title {
    padding-top: 5px !important;
}

#cms_2-b .cate .cate_title {
    padding-top: 5px !important;
}

#cms_2-a .cate .cate_title {
    padding-top: 0px !important;
}


}