﻿
@media screen and (min-width:769px){
    ul.cate_list li {
    width: 47%;
    text-align: left;
}
   
.txt_wrap.pd_r-40px.wrap1::before {
    background-image: url(Dup/img/animal1.png);
    width: 280px;
    height: 500px;
    content: "";
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    transform: translateX(200px) translateY(-150px);
    z-index:2;
}
.txt_wrap.pd_r-40px.wrap3::before {
    background-image: url(Dup/img/animal3.png);
    width: 350px;
    height: 500px;
    content: "";
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    transform: translateY(250px) translateX(-50px);
    z-index:2;
}
.txt_wrap.pd_l-40px.wrap2::before {
    background-image: url(Dup/img/animal2.png);
    width: 400px;
    height: 500px;
    content: "";
    display: block;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    transform: translateY(-150px) translateX(400px);
    z-index:2;
}    

.contents4{
    margin-top:200px;
    margin-bottom:0;
}
    
.box.mg_b-50px{
    margin-bottom:200px;
}

.animal,.animal2,.animal3{
   display:none;
}

    .cms_wrap{
        left:50px;
    }
    .wrap4::after {
    content: "";
    background-image: url(Dup/img/txt4.png);
    width: 22vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(2vw) translateX(2vw)rotate( -10deg );
    opacity:0.7;
    z-index: 1;
}
.wrap3::after {
    content: "";
    background-image: url(Dup/img/txt3.png);
    width: 20vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(2vw) translateX(18vw)rotate( -10deg );
    opacity:0.7;
    z-index: 1;
}
.wrap2::after {
    content: "";
    background-image: url(Dup/img/txt2.png);
    width: 28vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(2vw) translateX(8vw)rotate( -10deg );
    opacity:0.7;
    z-index: 1;
}
.wrap1::after {
    content: "";
    background-image: url(Dup/img/txt1.png);
    width: 40vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(2vw) translateX(8vw)rotate( -10deg );
    opacity:0.7;
    z-index: 2;
}
}
@media all and (-ms-high-contrast: none){
    .page9 .box_wrap a{
         background: linear-gradient(to top,#6495f0 0%,#ad6aeb 50%,#fccb80 100%);
         color:white;
    }
    
    #page-top a.bg_color1{
       
        background: linear-gradient(to top,#6495f0 0%,#ad6aeb 50%,#fccb80 100%);
    }
    a.hvr_txt_color1:hover{
        color:#2d2d2d;
        opacity:0.4;
    }
    #contents h3{
        background:linear-gradient(transparent 60%,#ffdae7 60%);
    }
    .cms_title p.font_12up {
    background: linear-gradient(transparent 60%,#ffdae7 60%);
    display: inline-block;
}
   #contents .cms_title .txt_color3, #contents .txt_wrap .txt_color3{
       color:#2d2d2d !important;
   }
   .hvr_bg_color3:hover {
    background: linear-gradient(to top,#6495f0 0%,#ad6aeb 50%,#fccb80 100%);
    border: 0;
}
    .bg_color4,.bg_color2{
         background:#daf3ff;
    }
}
/*-----------------------------------------------------------------スマホ------------------------------------------------*/
@media screen and (max-width:667px){
    #cms_1-a .pager li {
    margin-right: 25px;
}
    #cms_1-a .pager li:last-of-type {
    margin-right: 25px;
}
    #contact_tel{
    white-space:nowrap;
    }
    .page4 h3.cate_title,.page6 h3.cate_title{
        background:transparent;
    }
    
figure.t_cms_img1.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt1.png);
    width: 40vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(30vw) translateX(7vw)rotate(
-10deg
);
    z-index: 1;
}


figure.t_cms_img2.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt2.png);
    width: 28vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(27vw) translateX(18vw)rotate(
-10deg
);
    z-index: 1;
}


figure.t_cms_img3.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt3.png);
    width: 20vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(27vw) translateX(25vw)rotate(
-10deg
);
    z-index: 1;
}

figure.t_cms_img4.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt4.png);
    width: 22vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(32vw) translateX(25vw)rotate(
-10deg
);
    z-index: 1;
}

#page-top{
	right: 10px;

}
#footer{
	padding-bottom:200px !important;
}
.bg_color4 {
	background-color: #daeef8 !important;
}
.top_page .bg_color4{
	background:white !important;
}
figure.t_cms_img4.txt_color3::before {
	width: 40vw !important;
	transform: translateY(62vw) translateX(50vw)rotate( -10deg ) !important;
	z-index: 1;
}
figure.t_cms_img3.txt_color3::before {
	width: 40vw !important;
	transform: translateY(50vw) translateX(45vw)rotate( -10deg ) !important;
	z-index: 1;
}
figure.t_cms_img2.txt_color3::before {
	width: 40vw !important;
	transform: translateY(53vw) translateX(50vw)rotate( -10deg ) !important; 
	z-index: 1;
}
figure.t_cms_img1.txt_color3::before {
	width: 50vw !important;
	transform: translateY(60vw) translateX(40vw)rotate(-10deg) !important;
}
.animal2,.animal,.animal3 {
	width: 100px !important;
	margin: 30px auto !important;
}
#contents h3 {
	background:transparent !important;
}
#main_txt {
	position: absolute;
	width: 65vw !important;
	top: 300px !important;
	left: 20px !important;
}
.sns_fix{
	display:none;
}
#banner {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	width: 200px !important;
	position: absolute;
	padding: 10px;
}
}
   
    

/*-----------------------------------------------------------------ここまで------------------------------------------------*/
/*-----------------------------------------------------------------タブレット-------------------------------------------------*/
@media screen and (min-width:668px) and (max-width:768px){
 ul.cate_list li {
    width: 47%;
    text-align: left;
}
.button_container{
	position:relative;
	top:50px;
}
#header {
	margin-top:20px;
}
 #contents h3 {
	white-space: nowrap;
}
header .logo img {
	width: 80%!important;
}
#main_txt {
	position: absolute;
	width: 500px !important;
	top: 450px !important;
	left: 50px !important;
}
#footer {
	padding-bottom: 350px;
}
#banner {
	width: 280px !important;
}
.sns_fix{
	margin-top:15px;
}

figure.t_cms_img1.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt1.png);
    width: 40vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(30vw) translateX(7vw)rotate(
-10deg
);
    z-index: 1;
}


figure.t_cms_img2.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt2.png);
    width: 28vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(27vw) translateX(18vw)rotate(
-10deg
);
    z-index: 1;
}


figure.t_cms_img3.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt3.png);
    width: 20vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(27vw) translateX(25vw)rotate(
-10deg
);
    z-index: 1;
}

figure.t_cms_img4.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt4.png);
    width: 22vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(32vw) translateX(25vw)rotate(
-10deg
);
    z-index: 1;
}


}
/*-----------------------------------------------------------------ここまで------------------------------------------------*/
.linkStyle{
    color:#2d2d2d;
    border-bottom:1px solid #2d2d2d;
}
.sns_fix {
    position: fixed;
    top: 5px;
    right: 0px;
    z-index: 99;
    right: 10px;
}

.nav div.logo{
    width: 300px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    bottom: 2px;
}
#banner{
    display:none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 400px;
    position: abolute;
    padding: 10px;
}
#main_txt{
    position: absolute;
    width: 46vw;
    top: 280px;
    left: 100px;
}
footer div.grid_6{
    /*background-image: url(Dup/img/back.png);*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.page9 .box_wrap a{
    background:linear-gradient(to top,#6495f073 0%,#ad6aeb6e 50%,#fccb808f 100%);
}
.page9 .box_wrap a:hover{
    opacity:0.4;
    color:#4d4d4d;
}
#tel_txt h3{
    color:#4d4d4d;
}
.border_color2 {
    border-color: #a2a2a2;
}
.s1:hover{
    opacity:0.5;
}
.cate_list {
  border-color:#4d4d4d;
  border-bottom:2px solid ;
}
.top_cms_box:before {
    background-color: #ffdae7;
}
.hvr_txt_color1:hover {
    /*
    color: #ffdae700;
    background: linear-gradient(to top,#6495f073 0%,#ad6aeb6e 50%,#fccb808f 100%);
    -webkit-background-clip: text;
    */
    opacity:0.4;
}
.page_title_box:before {
    content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 35px;
    color: #ffdae7;
    border-bottom: 2px solid;
}

.border_color3 {
    border-color: #ffdae7;
}
.is-fixed .logo {
    width: 10%!important;
}
#loading_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
    max-width: 300px;
    z-index: 3;
}
.txt_color3 {
    color: #2d2d2d;
}
.other .box {
    border: 1px solid #333;
}
.other_link h2::before{
    background:#ffdae7;
}
.other_link .box_title2{
    color:#a1a1a1;
}
.other_link .txt_color1{
    color: #ffdae7 !important;
}
footer{
    background-color: #fcfcfc;
   
}
.top_nav .txt_white{
    color:#2d2d2d;
}
.top_nav .txt_white a:hover{
    opacity:0.5;
}

.txt_white {
    color: #4d4d4d;
}
footer .txt_white{
     color:#4d4d4d;
}
.cate_list .hvr_txt_color1:hover {
    color: #ffdae700;
    background: linear-gradient(to top,#6495f073 0%,#ad6aeb6e 50%,#fccb808f 100%);
    -webkit-background-clip: text;
}
.top_page .bg_color4{
    background:white;
}
.opacity07{
    opacity:1;
}
.img-container:before {
   
}
.bg_color4 {
    background-color: #a9dbf44d;
}
.cms_title p.font_12up{
background: linear-gradient(transparent 60%,#ffdae7f7 60%);
    display: inline-block;
}
.bg_color2 {
    background: #a9dbf44d;
}
.txt_color1{
    color: #4D4D4D !important;
}

.border_color1 {
    border-color: #ffdae7;
}
span.letter_3.txt_color_nomal,.cms_title p{
    color:#4d4d4d;
}



.hvr_bg_color3:hover {
    background: linear-gradient(to top,rgb(100 149 240 / 20%) 0%,rgb(173 106 235 / 20%) 50%,rgb(252 203 128 / 20%) 100%);
    border: 0;
}
#page-top a.bg_color1{
      background: linear-gradient(to top,rgb(100 149 240 / 50%) 0%,rgb(173 106 235 / 20%) 60%,rgb(252 203 128 / 25%) 100%);
      color:white;
}
.cms_title .txt_color3, .txt_wrap .txt_color3{
    color: liner-gradient(to top,0% white,100% black);
   /* background: linear-gradient(to top,#6495f0 0%,#ad6aeb 50%,#fccb808f 100%);*/
     background: linear-gradient(to top,#6495f073 0%,#ad6aeb6e 50%,#fccb808f 100%);
    -webkit-background-clip: text;
}

body, .txt_color_nomal {
    color: #4d4d4d;
}


.animal{
    width:250px;
    margin:30px auto;
}
.animal2{
    width:300px;
    margin:30px auto;
}
.animal3{
    width:300px;
    margin:30px auto;
}
#contents .cms_title .txt_color3,#contents .txt_wrap .txt_color3{
    color:transparent;
    font-weight:bold;
}

/*
figure.t_cms_img4.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt4.png);
    width: 400px;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(40px) translateX(720px)rotate(-10deg);
    z-index: 1;
}
figure.t_cms_img3.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt3.png);
    width: 350px;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(40px) translateX(-260px)rotate(10deg);
    z-index: 1;
}
figure.t_cms_img2.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt2.png);
    width: 480px;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(40px) translateX(650px)rotate(-10deg);   
    z-index: 1;
}
figure.t_cms_img1.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt1.png);
    width: 700px;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(40px) translateX(-430px)rotate(10deg);
    z-index: 1;
}
figure.t_cms_img1.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt1_2.png);
    width: 550px;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(0px) translateX(-430px);
    z-index: 1;
}
*/
#contents .box h3:before{
    display:none;
}
#contents h3{
 background:linear-gradient(transparent 60%,#ffdae7f7 60%);
}
.t_cms_img2 .img-container:before,.t_cms_img4 .img-container:before{
    background:linear-gradient(to right,#fff4f8 0%,white 100%);
    background:linear-gradient(to right,#e5f4ff 0%,#fff1ff 50%,#ffefcc 100%);
}
.img-container:before{
    background:linear-gradient(to right,#fff4f8 0%,white 100%);
    background:linear-gradient(to right,#e5f4ff 0%,#fff1ff 50%,#ffefcc 100%);
}
span .txt_color3{
   color:#a9dbf44d;
}
#contents .box figure:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 95%;
    height: 0%;
    z-index: -1;
    border: 155px solid;
    opacity: 0.15;
    color:#a9dbf4;
 
}
/*
figure.t_cms_img1.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt1.png);
    width: 40vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(30vw) translateX(7vw)rotate(
-10deg
);
    z-index: 1;
}


figure.t_cms_img2.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt2.png);
    width: 28vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(27vw) translateX(18vw)rotate(
-10deg
);
    z-index: 1;
}


figure.t_cms_img3.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt3.png);
    width: 20vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(27vw) translateX(25vw)rotate(
-10deg
);
    z-index: 1;
}

figure.t_cms_img4.txt_color3::before {
    content: "";
    background-image: url(Dup/img/txt4.png);
    width: 22vw;
    height: 200px;
    background-size: contain;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translateY(32vw) translateX(25vw)rotate(
-10deg
);
    z-index: 1;
}
*/


/* スマホ追従メニュー ---------------------------------------------------------------------------------------------*/
.sp_menu{
transition: .3s;
z-index: 9;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-size: 13px;
letter-spacing: 0px;
}
.sp_menu li {
width: 25%;
border-top: 1px solid #9dd8f5;
border-bottom: 1px solid #9dd8f5;
border-right: 1px solid #9dd8f5;
box-sizing: border-box;
}
.sp_menu li:nth-of-type(1),.sp_menu li:nth-of-type(5){border-left: 1px solid #fff;}
.sp_menu li:nth-of-type(5),.sp_menu li:nth-of-type(6){border-top: none;}
.sp_menu li a{padding: 14px 3px;height: 100%;box-sizing: border-box;background-color: white;}

.sp_menu_btn {
width: 20%;
padding: 10px 9px 8px 10px;
position: absolute;
top: -38px;
cursor: pointer;
background-color: #a9dbf4;
}

.sp_menu_btn .nav_btn{
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
position: relative;
top: 3px;
}
.sp_menu_btn .nav_btn span{
display: block;
background-color: #6d6d6d;
height: 2px;
width: 15px;
position: absolute;
left: 5px;
top: 5px;
transition: .3s;
}
.sp_menu_btn .nav_btn.open_btn span:nth-child(1){
transform: rotate(-55deg);
left: -1px;
width: 13px;
}
.sp_menu_btn .nav_btn.open_btn span:nth-child(2){
transform: rotate(55deg);
right: -1px;
width: 13px;
}

.sp_menu_btn .nav_btn.close_btn span{left: 0;}
.sp_menu_btn .nav_btn.close_btn span:nth-child(1){transform: rotate(45deg);}
.sp_menu_btn .nav_btn.close_btn span:nth-child(2){transform: rotate(-45deg);}

.sp_menu_btn .close,.sp_menu_btn .open{
display: inline-block;
font-size: 14px;
}
.sp_menu_btn.opennow .open{display: none!important;}
.sp_menu.navclose{bottom: -97px;}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#banner{
	width: 70%!important;
	max-width: 148px;
	bottom: auto;
	top: 5px;
	left: auto;
	right: 58px;
}
header .logo {width: 25%!important;}
.button_container{bottom: 21px;}
.main_img_wrap .navi{bottom: 121px;}
.cate_list{font-size: 15px;}
}

