﻿/* all page */
/* color */
.txt_color_nomal{color: #2b2b2b;}
.txt_color1{color: #f5817f;} /* メインカラー */
.txt_color2{color: #f9f1b7} /* サブカラー */
.txt_color3{color: #ff8d5a;} /* アクセントカラー1 */

/* background-color */
.bg_color1{background-color: #f5817f;} /* メインカラー */
.bg_color2{background-color: #fff7bb;} /* サブカラー */
.bg_color3{background-color: #ff8d5a;} /* アクセントカラー1 */

/* border-color ※!important */
.border_color1{border-color: #f5817f;}
.border_color2{border-color: #fff7bb;}
.border_color3{border-color: #ff8d5a;}

.hvr_txt_color1:hover{color: #f5817f;} /* メインカラー */

.linkStyle{
    color: #f5817f;
    text-decoration: underline;
}

/* fonts */
header nav li a, #menu_wrap nav li a, #main_img .catch h2, #contents .contents_txt h2 span, #contents .contents_box .contents_txt .contents_link a, .top_cms_box .top_cms_title h3 span, .top_cms .top_cms_box .cms_title p, .top_cms_box .more a, .top_cms_box .more a i, footer #footer .footer_txt p, #info h4 span, #info .info_link a, footer #copyright, #footer li a, .page_title h2 span, .page_title.active p, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, .box_title, .box_title1, a[href^="tel:"], .pager li a {
    font-family: 'Kiwi Maru',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.fa-caret-right:before {
    font-family: 'Font Awesome 5 Free';
}

.loader img{
    top: 50%;
    transform: translate(-50%,-50%);
}

/* top ----------------*/
#wrap.bg_dot2 {
    background-image: none !important;
	background: none;
}
#wrap{
	position: relative;
}
#wrap::before{
	content: "";
	background-image: url("./Dup/img/suisai_top.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 80vh;
	position: absolute;
	top: -140px;
	left: 0;
	opacity: 0.6;
	z-index: -1;
}

/* header */
#header nav ul li{
	border-right: none;
}
header nav li a::after {
    border-bottom: none !important;
    background-color: rgba(239,121,69,0.3);
    top: 50% !important;
	width: 0 !important;
	height: 0;
    border-radius: 100%;
    z-index: -1;
    transform: translate(-50%,-50%) !important;
}
header nav li a:hover::after {
    width: 50px !important;
    height: 50px;
}

/* main img */
#main_img {
    margin-bottom: 0;
	padding-bottom: 220px;
}
#main_img::after {
    content: "";
	background-image: url("./Dup/img/piano.png");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: 400px;
	width: 400px;
	height: 400px;
	position: absolute;
	bottom: 0;
	left: 5%;
}
#main_img #slide {
    height: 100vh !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#main_img #slide .video {
    border-top-right-radius: 100px;
}
.posi_center {
    top: 5%;
    transform: translate(-50%,0);
}
#main_img .catch {
    width: 50%;
    margin-left: 45%;
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
}
#main_img .catch h2 {
    text-shadow: none !important;
	color: #ff8f5e;
    margin-bottom: 10px;
	text-align: center;
}
#main_img .catch h2::after{
    width: 15px !important;
    height: 15px !important;
    border-radius: 100% !important;
    background-color: #ef7945 !important;
    top: 50% !important;
    left: 3% !important;
    transform: translateY(-50%);
}
#main_img .catch h2::before{
	content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: #ef7945;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
}
#main_img .catch p {
    background: none;
    color: #000;
    font-weight: normal;
	padding: 0;
}

/* main */

/* contents */
#contents .contents_img figure{
	border-radius: 10px;
}

/* topcms */
.cms_1-a .cate_box .box_img1{
	border-radius: 5px;
}
.cms_3-f .cate .cate_img1{
	border-radius: 5px;
}

/* footer */


/* under page */
.cate_list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page_title::before{
    content: "";
    background-color: rgba(255,255,255,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* cms1 */

/* cms2 */
#cms_1-a .cate_box img{
	border-radius: 5px;
}

/* cms3 */
#cms_3-f .cate .cate_img1{
	border-radius: 5px;
}

/* cms4 */

/* cms5 */

/* page7 */
#page07 .box h3 span {
    font-weight: normal;
}

/* page8 */

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	.logo img {
		max-width: 280px;
	}
	#main_img #slide {
		height: 10vh !important;
		border-radius: 0 !important;
		width: 100% !important;
		left: 0 !important;
		top: 0px !important;
	}
	#main_img #slide .video{
	    width: 100% !important;
	    height: auto !important;
	    border-top-right-radius: 0;
	}
	#main_img .catch {
		width: 95% !important;
		margin-left: 0 !important;
		background-color: rgba(255,255,255,0.8);
		margin-top: -50px;
	}
	#main_img .catch h2::before {
		right: 20%;
	}
	#main_img .catch h2::after {
		left: 20% !important;
	}
	#page07 .box h3 span {
        font-size: 14px;
    }
    .page_title {
        margin-top: 0;
        margin-bottom: 0;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .loader img {
        width: 280px;
    }
	.logo{
		width: 60%!important;
	}
	#main_img .catch {
		width: 90% !important;
	}
	#main_img .catch h2::before {
		right: 0;
	}
	#main_img .catch h2::after {
		left: -1% !important;
	}
	#main_img::after {
        background-size: 350px;
        width: 350px;
        height: 400px;
    }
    #info .tel.font_40 {
        font-size: 23px;
    }
    .page_title { padding: 40px 20px 40px 30px;}
    .page_title h2 {
        font-size: 19px;
        letter-spacing: 0.4px;
    }
	
}

/*20211104公開後修正*/
/* background-color */
.bg_color1{background-color: #f7c6f7;} /* メインカラー */
.bg_color2{background-color: #f7c6f7;} /* サブカラー */
.bg_color3{background-color: #b1834b;} /* アクセントカラー1 */
.bg_dot1, .bg_dot2{
    background-image: none;
}
#main_img::after{
    background-image: url("./Dup/img/onpu.png");
    background-size: 800px;
    width: 800px;
    height: 250px;
    bottom: 130px;
    left: 1%;
    transform: rotate(350deg);
}
.page_title{
    overflow: hidden;
}
#cms_1-a .pager{
    background: none;
}
#page08 .tel_contact{
    background-color: #ffdeff;
}
#page08 .tel_txt{
    background-color: #eba4eb;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#main_img .catch h2::before {
		right: 5%;
	}
	#main_img .catch h2::after {
		left: 5% !important;
	}
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#main_img .catch h2::before {
		right: 0;
	}
	#main_img .catch h2::after {
		left: -2% !important;
	}
	
}

/*20211203公開後修正*/
#main_img {
    padding-bottom: 0;
}/**/
#main_img::after{
    background-image: url("./Dup/img/animal.png");
    background-size: 100%;
    width: 800px;
    height: 100%;
    bottom: 0;
    left: -10px;
    transform: none;
    z-index: 1;
}
#main_img .catch {
	background-color: rgba(255,255,255,0.8);
}
#top_cms1 .top_cms_box{
    position: relative;
}
#top_cms1 .top_cms_box::before{
    content: "";
	background-image: url("./Dup/img/bird.png");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: 160px;
	width: 160px;
	height: 200px;
	position: absolute;
	bottom: 10px;
	left: 10%;
	z-index: 5;
	animation:katakata 2s steps(2,start) infinite;
	transform-origin: bottom;
}
#contents .contents_box:nth-of-type(1) .contents_txt::before{
    content: "";
	background-image: url("./Dup/img/bear.png");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 150px;
	width: 150px;
	height: 300px;
	position: absolute;
	bottom: 10px;
	right: 0;
	z-index: 5;
	animation:katakata 2s steps(2,start) infinite;
	transform-origin: bottom;
}
#contents .contents_box:nth-of-type(2) .contents_txt::before{
    content: "";
	background-image: url("./Dup/img/cat.png");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: 170px;
	width: 170px;
	height: 300px;
	position: absolute;
	bottom: -10px;
	left: 0;
	z-index: 5;
	animation:katakata 2s steps(2,start) infinite;
	transform-origin: bottom;
}
#contents .contents_box:nth-of-type(3) .contents_txt::before{
    content: "";
	background-image: url("./Dup/img/rabbit.png");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: 150px;
	width: 150px;
	height: 300px;
	position: absolute;
	bottom: -50px;
	left: 40px;
	z-index: 5;
	animation:katakata 2s steps(2,start) infinite;
	transform-origin: bottom;
}
#info .info_txt{
    position: relative;
}
#info .info_txt::before{
    content: "";
	background-image: url("./Dup/img/squirrel.png");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 200px;
	width: 200px;
	height: 260px;
	position: absolute;
	bottom: -30px;
	right: -30px;
	z-index: 5;
	animation:katakata 2s steps(2,start) infinite;
	transform-origin: bottom;
}
@keyframes katakata{
0%{transform:rotate(-10deg);}
50%{transform:rotate(0deg);}
100%{transform:rotate(-10deg);}
}

.banner__fixed {
    position: fixed;
    top: 20px;
    right: 120px;
    z-index: 10;
	transform: translateY(-110px);
    transition: ease 0.6s;
}
.banner__fixed a {
    background-color: #f7c6f7;
    border-radius: 30px;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
#banner__fixed.sc{transform: translateY(0px);}
#banner__fixed.sc:hover{transform: translateY(5px);opacity: 0.6;}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #main_img::after {
        background-size: 700px;
        background-position: bottom center;
        width: 100%;
        height: 50%;
        bottom: auto;
        top: 50px;
        left: 0;
    }
	#top_cms1 .top_cms_box::before {
        bottom: -20px;
        left: 5%;
    }
    #contents .contents_box:nth-of-type(1) .contents_txt::before {
        background-size: 140px;
        width: 140px;
        bottom: -20px;
        right: -50px;
    }
    #contents .contents_box:nth-of-type(2) .contents_txt::before {
        bottom: -40px;
        left: -30px;
    }
    #contents .contents_box:nth-of-type(3) .contents_txt::before {
        background-size: 130px;
        width: 130px;
        left: -50px;
    }
    #info .info_txt::before {
        bottom: -10px;
        right: 0px;
    }
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .banner__fixed {
        max-width: 150px!important;
        right: 90px;
    }
    .banner__fixed a {
        padding: 5px;
    }
    
    #main_img .catch {
        margin-top: 30px;
    }
    #main_img::after {
        background-size: 320px;
        height: 30%;
        top: 10px;
    }
	#top_cms1 .top_cms_box::before {
        background-size: 130px;
        width: 130px;
    }
    #contents .contents_box:nth-of-type(1) .contents_txt::before {
        background-size: 100px;
        width: 100px;
        bottom: -90px;
        right: 0;
    }
    #contents .contents_box:nth-of-type(2) .contents_txt::before {
        background-size: 120px;
        width: 120px;
        bottom: -100px;
        left: 0;
    }
    #contents .contents_box:nth-of-type(3) .contents_txt::before {
        background-size: 90px;
        width: 90px;
        bottom: -100px;
        left: 10px;
    }
    #info .info_txt::before {
        background-size: 130px;
        width: 130px;
        height: 180px;
        bottom: 0;
        z-index: 0;
    }
    #info .tel{
        position: relative;
        z-index: 3;
    }
    #info .info_link a{
        position: relative;
        z-index: 3;
    }
}

