/* color ---------------------------------------------------------------------------------------------*/
body,.txt_color_nomal{color: #42302a}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #f58982} /* メインカラー */
.txt_color2{color: #ffb6c1} /* サブカラー */
.txt_color3{color: #f0948d} /* アクセントカラー1 */
.txt_color4{color: #f6f5ee;} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white;} /* 白背景 */
.bg_black{background-color: #42302a} /* 黒背景 */
.bg_color1{background-color: #ffb5ba;} /* メインカラー */
.bg_color2{background-color: #ffe6e6} /* サブカラー */
.bg_color3{background-color: #fff4e0} /* アクセントカラー1 */
.bg_color4{background-color: #f6f5ee;} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important;}


/* border-color ※!important */
.border_color1{border-color: #ffb5ba;}
.border_color2{border-color: #ffe6e6}
.border_color3{border-color: #f0948d}
.border_color4{border-color: #ffe2a3;}


/* hover */
/* color */
.hvr_txt_color_nomal:hover{color: #42302a}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #f58982 !important} /* メインカラー */
.hvr_txt_color2:hover{color: #ffe6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #fff4e0;} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f6f5ee} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.hvr_bg_black:hover{background-color: #42302a} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #ffb5ba;} /* メインカラー */
.hvr_bg_color2:hover{background-color: #ffe6e6} /* サブカラー */
.hvr_bg_color3:hover{background-color: #fff4e0} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f6f5ee;} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #ffb5ba;}
.hvr_border_color2:hover{border-color: #ffe6e6}
.hvr_border_color3:hover{border-color: #fff4e0}
.hvr_border_color4:hover{border-color: #f6f5ee;}


/*その他*/
.img-container:before{ background: #fae0d9;}
.t_cms_img2 .img-container:before{  background: #f5d0c6}
.cate_list{border-bottom: 2px solid #42302a;}
.cate_list li a:hover::before{color: #42302a;}
footer{background-color:  #ffb5ba;}
.top_cms_box .more_box .more:before,.top_cms_box .more span:before,.other .box:hover,
.page10 .more_box .more:before,.page10 .more span:before{ background-color: #42302a}
.top_cms_box .more_box .more:after {  border: solid 1px #42302a;}
.top_cms_box .more span:after{ border-left: 5px solid #42302a;}
.page10 .more_box .more:after { border: solid 1px #42302a;}
.page10 .more span:after{ border-left: 5px solid #42302a;}
.other .box{border: 2px solid #42302a;}
section#page7 p {color: #42302a;}
#page8 #form_box #form_bt div:hover{	box-shadow: 0 2px 4px rgba(66,48,42,0.5);}

span.circle.bg_color3 {background: #ffe2a3;}
.cms_5-c .box_title1 {border-color: rgba(66,48,42,0.15);}
#cms_5-c .box_title1 {border-color: rgba(66,48,42,0.15);}
.cms_5-c .box_txt1::before {color: rgba(66,48,42,0.6);}
#cms_5-c .box_txt1::before {color: rgba(66,48,42,0.6);}

/*linkStyle*/
a.linkStyle {
    color: #42302a;
    transition: 0.5s;
    border-bottom: solid 1px;
}
a.linkStyle:hover {
    opacity: 0.7;
    color: #42302a;
    border-bottom: solid 1px; 
}

.opacity07,.opacity08{opacity:0.9 !important;}
/* color ---------------------------------------------------------------------------------------------*/

/* font---------------------------------------------------------------------------------------------*/
body { font-family: 'Kiwi Maru',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
/* font---------------------------------------------------------------------------------------------*/

/* 装飾しやすいように消すやつとか---------------------------------------------------------------------------------------------*/
.vegas-overlay {    background-image: none !important;}
.vegas-overlay { background: rgba(255,255,255,0.7) !important;}
.top_nav .txt_white {color: #42302a;}
#top_cms, .all_page {background: #fff;}
#top_cms:before{content: none;}
#contents .box figure:after {content: none;}
.svg_box { display: none;}
.con1,.con2 {margin-bottom: 250px;}
.con3{margin-bottom: 200px !important;}
.navi a{display:none;}

/*TOPCMS*/
.line.txt_color_nomal { display: none;}
.cms_title {text-align: center;}
/* 装飾しやすいように消すやつとか---------------------------------------------------------------------------------------------*/

/*border-radius------------------------------------------------------------------------*/
img, li a, .top_cms_box .more_box .more, figure.box_img1,p#contact_tel a{border-radius: 5px;}
.img-container, .img-container_img, .img-container:before{border-radius: 15px;}
ul.sns_links li a {border-radius: 0px;}
.other .box {border-radius: 15px;}
/*border-radius------------------------------------------------------------------------*/


section#contents {
    background: url(dup/img/bg_img.jpg);
    background-size: 5%;
    background-attachment: fixed;
}

.con1,.con2,.con3{position: relative;}

.con1::before {
    content: '';
    background: url(dup/img/maru.png);
    position: absolute;
    width: 500px;
    height: 500px;
    left: -2%;
    bottom: -10%;
    max-width: 500px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}
.con1::after {
    content: '';
    background: url(dup/img/maru02.png);
    position: absolute;
    width: 300px;
    height: 300px;
    left: 350px;
    bottom: -100px;
    max-width: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}


.con2::before {
    content: '';
    background: url(dup/img/maru03.png);
    position: absolute;
    width: 400px;
    height: 400px;
    right: -3%;
    bottom: -30%;
    max-width: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}
.con2::after {
    content: '';
    background: url(dup/img/maru.png);
    position: absolute;
    width: 300px;
    height: 300px;
    right: 200px;
    bottom: 20px;
    max-width: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}

.con3::before {
    content: '';
    background: url(dup/img/maru03.png);
    position: absolute;
    width: 500px;
    height: 500px;
    left: -2%;
    bottom: -20%;
    max-width: 500px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}
.con3::after {
    content: '';
    background: url(dup/img/maru02.png);
    position: absolute;
    width: 300px;
    height: 300px;
    left: 280px;
    bottom: 150px;
    max-width: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}

.con1::before,.con2::before,.con3::before {
animation:scale 15s linear infinite;
}

@keyframes scale {

 0% {transform:scale(1);}
 50% {transform:scale(1.1);}
 100% {transform:scale(1);}
}


/*上下に揺らす----------------------------------------*/

.con1::after,.con2::after,.con3::after{
  animation: img_box_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;}
@keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-8px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }}


/*上下に揺らす----------------------------------------*/

/*contact info 丸く小さく*/
.other .box {
    border-radius: 15px;
    width: 40%;
    margin: 10px;
    height: 350px;}
.other .box:last-child { border-left: 2px solid #42302a;}
/*contact info 丸く小さく*/

/*背景画像----------------------------------------*/
#top_cms, .all_page {
  background: url("dup/img/bg.png");
    background-repeat: repeat;
    background-position: 0px 0px;
    background-size: cover;}

/*背景画像----------------------------------------*/


.hanen {top: -100px;}
.hanen02 {top: -190px;}



        
.catch_img {
    max-width: 500px;
    left: 8%;
    top: 19%;
    height: auto;
    width: 500px;
}


.fixed_img {
    position: fixed;
    bottom: 10px;
    left: 20px;
    z-index: 12;
    transition: 0.5s;
}
.fixed_img:hover{
    opacity: 0.8;
    transition: 0.5s;
}

.other .box:hover{ background-color: #f7dedc;}
.other .box:hover p{color: #f0948d;}
.other .box:hover h2 span {color: #42302a;}
/*sns--------------------------*/
.sns_links li a img {
    width: 100% !important;
    height: auto !important;
}
.sns_links li {
    max-width: 30px;
    height: 30px !important;
}
/*sns--------------------------*/

/*下層------------------------------------------------------------------------------------*/
.img-container:after {
    background-color: rgba(255,255,255,0.4);
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100%;
}
section#cms_3-d .box_txt2,.cms_3-d .box_txt2 { color: #42302a;}
/*下層------------------------------------------------------------------------------------*/

.tel_banner{
    width: calc(80% - 20px);
    margin: 0 auto;
    display: inline-block;}


#page9 p a {
    padding-top: 4px !important;
    padding-bottom: 7px !important;
}

.font_bold { font-weight: 500;}

@media screen and (max-width: 1100px){
.hanen02 {
    top: -100px;
}
}

/*タブレット*/
@media screen and (max-width: 768px){
    .main_img_wrap {
    height: 80vh;
    width: 97%;
    z-index: 1;
    background-color: #fff;
}
.main_wrap {
    padding-top: 10px;
    margin-top: 78vh;
}

.catch_img {
    max-width: 300px;
    left: 5%;
    top: 25%;
    height: auto;
    width: 500px;
}


#contents .box .txt_wrap {
    width: 80%;
    padding: 0;
}
#contents .box figure {
    width: 80%;
    padding: 30px 0;}

.con1, .con2 {margin-bottom: 180px;}

.con1::before {
    left: 0%;
    bottom: -10%;}

.con1::after {
    left: auto;
    right: 0;
    bottom: 20%;
}
.con2::before {
    right: 3%;
    bottom: -30%;}
    
.con2::after {
    bottom: 0px;}

.con3::after{
    left: auto;
    right: 0;
    bottom: 180px;}
    
.hanen02 { top: -115px;}
.logo img {width: 70% !important;}

.tel_banner {
    width: auto;
    margin: 0 auto;
    display: block;
}

.other .box { height: 220px ;}
}
/*スマホ*/
@media screen and (max-width: 667px){
    #page_title .img-container::after { background-color: rgba(66, 48, 42,0.15);}
    .logo img { width: 60% !important;}

    .tel_banner {width: calc(80% - 20px);}
    p#contact_mail a {
                width: calc(80% - 20px);
                margin: 0 auto;}
    
    .main_img_wrap { height: 60vh;
                     width: 95%;}
    .main_wrap{margin-top: 60vh;}
    .catch_img {
                max-width: 200px;
                left: 2%;
                top: 25%;}

section#contents {
    background: url(dup/img/bg_img_sp.jpg);
    background-size: 10%;
    background-attachment: fixed;}
    
.con1::after {
            left: auto;
            right: -15%;
            bottom: 22%;
            width: 200px;
            height: 200px;
}
.con1::before {
    left: -20%;
    bottom: 1%;
    width: 400px;
    height: 400px;
}

.con2::after{right: 100px;}

.con2::before {
    right: -12%;
    bottom: -23%;
    width: 350px;
    height: 350px;
}

.con3::before {
    width: 450px;
    height: 450px;
    left: 10%;
    bottom: -13%;}


.con3::after {
    left: auto;
    right: 90px;
    bottom: 180px;
    width: 250px;
    height: 250px;
}
.con1, .con2 {
    margin-bottom: 100px;
}
.con3 {
    margin-bottom: 50px !important;
}
.hanen { top: -45px;}

#top_cms .top_cms_wrap {padding-bottom: 50px;}
.hanen02 {top: -55px;}

.other .box {
        border-radius: 15px;
        width: 90%;
        margin: 10px;
        height: 220px;}
        
.other .box { border: 2px solid #42302a !important;}


div#tel_CONTACT a {
    padding: 20px;
    width: 80%;
}
}

/*IE*/
@media all and (-ms-high-contrast: none){
.top_cms_box .more_box .more div {
    padding-top: 0px !important;
    padding-bottom: 2px !important;}
.top_cms_box .more span::after{top:0px !important;}
.pager li a span {
    padding-top: 10px !important;
    padding-bottom: 13px !important;}
#cms_2-d .cate .cate_title { padding-top: 8px !important;}
#cms_3-d .cate .cate_title {padding-top: 7px !important;}
#page8 #tel_CONTACT p a {padding-top: 19px !important;}
#page9 p a {
    padding-top: 4px !important;
    padding-bottom: 7px !important;}
.page10 .more_box .more div { padding-top: 0px !important;}
.fixed_img {
    padding-top: 8px !important;
    padding-bottom: 12px !important;}



}