﻿body{
    background: #f4f2ef;
}


header{
background-size: 400% 400%;
background: #f4f2ef;

animation: gradient 30s ease infinite;
}

#main_right.bg_color1{
background: #ccffcc; /* Old browsers */
background: -moz-linear-gradient(left, #ccffcc 0%, #f9fcd4 57%, #ffd5ec 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ccffcc 0%,#f9fcd4 57%,#ffd5ec 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ccffcc 0%,#f9fcd4 57%,#ffd5ec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffcc', endColorstr='#ffd5ec',GradientType=1 ); /* IE6-9 */
background-size: 400% 400%;
animation: gradient 30s ease infinite;
}


@keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

#pc_intro, #page_title{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffd5ec+0,f9fcd4+57,ccffcc+100 */
background: #ffd5ec; /* Old browsers */
background: -moz-linear-gradient(left, #ffd5ec 0%, #f9fcd4 57%, #ccffcc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffd5ec 0%,#f9fcd4 57%,#ccffcc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffd5ec 0%,#f9fcd4 57%,#ccffcc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd5ec', endColorstr='#ccffcc',GradientType=1 ); /* IE6-9 */
background-size: 400% 400%;
animation: gradient2 20s ease infinite;
}


@keyframes gradient2 {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}


.bg_color3 {
    background-color: #ffffff;
}

/*header:before {
    content: "";
    display: block;
    width: 57%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 70%;
    background-color: rgba(255,255,255,0.9);
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    pointer-events: none;
    z-index: 0;
}*/

.bg_color1 {
    background-color: #acabaf;
}

.bg_color2 {
    background-color: #fffdf7;
}

#pc_news {
    background-color: transparent;
}

#contents:after {
    background-color: rgba(255,255,255,0.3);
}

.txt_color2 {
    color: #717171;
}

#top_header{
background-color:transparent !important;
}

h1{
max-width:280px;

}

.links_bt{
animation-name: test;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes test {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}


.txt_shadow {
    text-shadow: none;
}


#main_right header{
padding-right:0;
}


#pc_intro h3{
width:40% !important;
}


#page_title h2 {
    margin-top: -40px;
    color: #acabaf;
    font-weight: bold;
}

.ban2{
max-width: 300px;
    display: block;
    margin: auto;
}

#pc_tel a{
color:black;
}

#tel_txt .width_70per{
text-align:left;
}


#left_link{
width:40% !important;
}

#contents h3{
       background-color: rgba(229, 152, 209, 0.8);
    border-radius: 10px;
    padding: 20px;
position: relative;
}

#contents h3:before{
content: "";
    display: block;
    width: 500px;
    height:500px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/con_back.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;
}


.cate .retop {
    display: none;
}

.box_link{
    max-width: 300px;
    margin: auto;
}

.linkStyle{
color:green;
}

#page_title {
    padding-right: 5%;
}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.links_bt{
animation:none;
}


h1 {
    max-width: 180px;
}

#main_right.bg_color1 {
    background: transparent;
}

header{
background:rgba(244, 242, 239, 0.7);
}

#pc_news {
    background-color: rgb(240 239 234) !important;
}

main {
    overflow: hidden;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#contact_tel{
text-align:center;
}


#contents h3:before {
    width: 110%;
}


}