/* color */
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #4c4c4c} /* メインカラー */
.txt_color2{color: #ed98b2} /* サブカラー */
.txt_color3{color: #9b618f} /* アクセントカラー1 */
.txt_color4{color: #ffdee9} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #4c4c4c} /* メインカラー */
.bg_color2{background-color: #ed98b2} /* サブカラー */
.bg_color3{background-color: #9b618f} /* アクセントカラー1 */
.bg_color4{background-color: #ffdee9} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #4c4c4c}
.border_color2{border-color: #ed98b2}
.border_color3{border-color: #9b618f}
.border_color4{border-color: #ffdee9}

/* 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: #4c4c4c} /* メインカラー */
.hvr_txt_color2:hover{color: #ed98b2} /* サブカラー */
.hvr_txt_color3:hover{color: #9b618f} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #ffdee9} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #4c4c4c} /* メインカラー */
.hvr_bg_color2:hover{background-color: #ed98b2} /* サブカラー */
.hvr_bg_color3:hover{background-color: #9b618f} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #ffdee9} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #4c4c4c}
.hvr_border_color2:hover{border-color: #ed98b2}
.hvr_border_color3:hover{border-color: #9b618f}
.hvr_border_color4:hover{border-color: #ffdee9}

.linkStyle {
	color:#4d4d4d;
}
.linkStyle:hover {
	opacity: 0.7;
}
#fakeloader:before {
    background-color: #ffdee9;
    background-image: url('./Dup/img/bg.jpg');
}
#fakeloader .fl {
    max-width: 350px;
}
.overlay {
    background: linear-gradient(135deg, rgba(76,76,76,0.9) , rgb(70 37 63 / 90%) );
}
#pc_nav li, #top_pc_nav li, #footer_nav li {
    max-width: 188px;
}
.button_container .top,
.button_container .middle,
.button_container .bottom{
    box-shadow: 2px 2px #777;
}
.button_container .menu {
    text-shadow: 2px 2px #777;
}
#main_img:before {
    display: none;
}
#main_img .circle:before,#main_img .circle:after {
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
#main_img .circle{
width: 400px;
height: 400px;
display: block;
top: 50%;
z-index: 1;
}
#main_img .circle:before{
background-color: rgba(255,255,255,0.5);
width: 410px;
height: 410px;
border-radius: 35% 65% 40% 60% / 50% 40% 60% 45%;
z-index: -2;
-webkit-animation: rotate 15s linear infinite;
animation: rotate 15s linear infinite;
}
#main_img .circle:after{
background-color: rgba(255,255,255,0.7);
width: 400px;
height: 400px;
border-radius: 50% 43% 57% 50% / 40% 60% 47% 53%;
z-index: -1;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from{
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%) rotate(0deg);
-webkit-transform: translate(-50%,-50%) rotate(0deg);
transform: translate(-50%,-50%) rotate(0deg);
}
to{
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%) rotate(360deg);
-webkit-transform: translate(-50%,-50%) rotate(360deg);
transform: translate(-50%,-50%) rotate(360deg);
}
}

#main_img:after ,.content3_bg:after , #page_title:after {
	content: "";
	display: block;
	background-repeat: no-repeat;
	position: absolute;
    background-image: url(./Dup/img/wave.png);
    background-size: 100%;
    width: 100%;
    height: 5vw;
    left: 0;
	bottom: 0;
    z-index: 1;
}

.back1:before {
    top: 300px;
	height: calc(80% - 300px);
	background-image: url('./Dup/img/bg.jpg');
}
.back2:before {
    height: calc(100% - 200px);
    background-image: url('./Dup/img/bg.jpg');
}

footer {
	position: relative;
}
footer:before {
	content: "";
	display: block;
	background-repeat: no-repeat;
	position: absolute;
    background-image: url(./Dup/img/wave.png);
    background-size: 100%;
    width: 100%;
    height: 5vw;
    left: 0;
    z-index: 1;
    top: -10px;
    transform: scale(-1, -1);
}
#footer {
	padding-top: 90px;
}
#footer h2 {
    font-size:22px;
}
.content3_bg {
	height: 400px;
}
#top_cms.back1:before {
    z-index: -1;
}
main.back1:before {
    display: none;
}
/* タブレット */
@media screen and (max-width: 768px){
#main_img .circle{
width: 300px;
height: 300px;
}
#main_img .circle:before{
width: 310px;
height: 310px;
}
#main_img .circle:after{
width: 300px;
height: 300px;
}
.menu {
	display: block!important;
}
#main_img:after ,.content3_bg:after, #page_title:after {
	background-image: url(./Dup/img/wave_tb.png);
    height: 7vw;
}
footer:before {
    background-image: url(./Dup/img/wave_tb.png);
    height: 7vw;
}
.content3_bg {
	height: 250px;
	background-position: center;
    background-size: cover;
}
.page_title_box h2 {
    font-size: 24px;
}
}
/* スマホ */
@media screen and (max-width: 667px){
#logo {
    max-width: 180px;
}
#main_img .circle{
width: 250px;
height: 250px;
}
#main_img .circle:before{
width: 260px;
height: 260px;
}
#main_img .circle:after{
width: 250px;
height: 250px;
}
.menu {
	display: block!important;
}
#main_img:after ,.content3_bg:after, #page_title:after {
	background-image: url(./Dup/img/wave_sp.png);
    height: 10vw;
}
footer:before {
    background-image: url(./Dup/img/wave_sp.png);
    height: 10vw;
}
#footer h2 {
    font-size:20px;
}
.page_title_box {
    width:70%;
}
.page_title_box h2 {
    font-size: 20px;
}
}

@media screen and (max-width: 350px){
    #footer h2 {
    font-size: 18px;
}
}
/* fix_banner -------------------------------------- */
.fix_banner{
	max-width: 300px;
	position: fixed;
	bottom: 0;
	right: 60px;
	z-index: 10;
	transition: 0.5s;
}
.fix_banner .close_bt {
    position: absolute;
    bottom: 66px;
    right: 282px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: 0.5s;
    background-color: #eee;
    /* border: solid 2px #ddc21b; */
    z-index: 11;
    cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #221e03;
	height: 4px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close{right: -450px;}
.fix_banner.close2{right: -450px;}
@media  screen and (max-width: 768px){
.fix_banner{max-width: 300px;
    right:45px;
}
.fix_banner .close_bt {
    bottom: 66px;
    right: 277px;
}
}
@media  screen and (max-width: 667px){
.fix_banner{max-width: 60%;
   right: 20%;}
.fix_banner .close_bt {
    width: 22px;
    height: 22px;
    bottom: 52px;
    right: 94%;
}
.fix_banner .close_bt span {
    width: 22px;
    height: 22px;
}
}
/* fix_banner end -------------------------------------- */


@media  screen and (max-width: 667px){
#video,video {
    height: 350px!important;
}
.menu,#main_img .circle {
    display: none!important;
}
}