﻿@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique&display=swap');
.font_sa, .cms_title p, h3, h4, h2, #main_menu ul li a p:nth-child(2), #page10 #contents li a span {
    font-family: 'Shippori Antique', sans-serif;
    font-weight: normal!important;
}
.header .grid_3 p, .menu_title, #f_menu ul li a {
color: #333;
}
.txt_white {
    color: #212121;
}
#page9 .box_wrap a, .pager li a {
    color: #fff!important;
}
#main_menu ul li a p:nth-child(1), .cms_title h2, .overlay ul li, .foot_tel_bt a, #f_menu ul li a, .welcome, .page_title h2, #page10 #contents li a {
    font-family: 'Cinzel', serif;/*英字*/
    font-weight: bold;
}

#top_contents figure:before {
    content: "";
    width: 200px;
    height: 78px;
    display: block;
    bottom: 0;
    right: 0;
    border-width: 0 0 40px 40px;
    border-color: #000;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    transition: all .8s cubic-bezier(.77,0,.175,1);
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    z-index: 2;
    transform: translate(0,0);
}
#top_contents figure:after {
    content: "";
    display: block;
    top: 0;
    right: 0;
    border-width: 0 40px 40px 0px;
    border-color: transparent;
    border-top-color: #000;
    border-right-color: black;
    border-left-color: transparent;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    z-index: 2;
    transform: translate(0,0);
}
#top_contents figure div:after {
    content: "";
    display: block;
    top: 0;
    left: 0;
    border-width: 40px 40px 0px 0px;
    border-color: #000000;
    border-top-color: #0f0f0f;
    border-right-color: transparent;
    border-left-color: transparent;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    z-index: 2;
    transform: translate(0,0);
}
#top_contents figure div:before {
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    border-width: 40px 0px 0px 40px;
    border-color: #000000;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: black;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    z-index: 2;
    transform: translate(0,0);
}






#info_map {
        background: url(../Dup/img/bg.jpg);
    background-size: 290px auto;
    background-position: 50% 50%;
}
#logo a, #fakeloader .fl {
    position: relative;
    padding-right: 46px;
    max-width: 350px!important;
}
/*#logo a:before*/ #fakeloader .fl:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -44px;
    right: -32px;
    width: 104px;
    height: 69px;
    background: url(Dup/img/racco.png) no-repeat 100% 100%;
    background-size: contain;
    
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	
		-webkit-animation-name: sample1;
	animation-name: sample1;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	animation-timing-function: step-end;
}
@keyframes sample1 {
	from {
		transform: translate(0px,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;

	} to {
		transform: translate(0px,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1;
	} 10% {
		transform: translate(0px,-0px) scale(1,1) rotate(-2deg) skew(0deg,0deg);
		opacity: 1.0;
	} 20% {
		transform: translate(3px,-5px) scale(1,1) rotate(-5deg) skew(0deg,0deg);
		opacity: 1.0;
	} 30% {
		transform: translate(8px,-8px) scale(1,1) rotate(-6deg) skew(0deg,0deg);
		opacity: 1.0;
	} 55% {
		transform: translate(8px,-8px) scale(1,1) rotate(-5deg) skew(0deg,0deg);
		opacity: 1.0;
	} 65% {
		transform: translate(3px,-5px) scale(1,1) rotate(-3deg) skew(0deg,0deg);
		opacity: 1.0;
	} 75% {
		transform: translate(0px,0px) scale(1,1) rotate(-2deg) skew(0deg,0deg);
		opacity: 1.0;
	} 
}
@keyframes racco2 {
	from {
		transform: translate(0px,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);

	} to {
		transform: translate(0px,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
	} 10% {
		transform: translate(0px,-0px) scale(1,1) rotate(-2deg) skew(0deg,0deg);
	} 20% {
		transform: translate(2px,-3px) scale(1,1) rotate(-3deg) skew(0deg,0deg);
	} 30% {
		transform: translate(3px,-5px) scale(1,1) rotate(-5deg) skew(0deg,0deg);
	} 55% {
		transform: translate(3px,-5px) scale(1,1) rotate(-5deg) skew(0deg,0deg);
	} 65% {
		transform: translate(2px,-3px) scale(1,1) rotate(-2deg) skew(0deg,0deg);
	} 75% {
		transform: translate(0px,0px) scale(1,1) rotate(-2deg) skew(0deg,0deg);
	} 
}





















#logo a img {
    width: 232px;
}

.foot_tel_bt a {
    font-size: 26px;
}
#aisatsu h2, #aisatsu p, #info_map .txt_white {
    color: #fff;
}
#aisatsu h2 {
    border-top: 1px solid;
    display: inline;
    border-bottom: 1px solid;
    padding: 1px 27px;
    font-size: 16px;
}
.overlay {
background: #e2e2e2; 
}
.catch {
   top: 19%;
    width: 30%;
    left: -7%;
     opacity: 0;
     transform: translateY(20px);
     transition: 1.5s;
     transition-property: opacity,transform
}
.catch.trans{
     opacity: 1;
     transform: none;
}


#aisatsu > div {
background-color: rgba(73, 73, 73, 0.70)!important;
}
#contents1 .contents_box, #contents2 .contents_box, #contents3 .contents_box {
/*    margin-left: 0;*/
/*    width: 49%!important;*/
/*    margin-top: 30px;*/
/*background: transparent!important;*/
}
#contents1 .contents_img, #contents2 .contents_img, #contents3 .contents_img {
    box-shadow: 0px 8px 40px -2px rgba(255, 255, 255, 0.33);
}



.header .grid_3 a:first-child, .foot_tel_bt a:first-child {
display: none; /*★*/
}
.header .grid_3 a { /*★*/
  background: #333;
  margin-top: 5px;
  padding: 7px 18px 7px 13px;
  box-sizing: border-box;
  display: inline-block;
  color: #fff;
}
#main_menu ul li a {
    color: #212121;
    font-weight: bold;
}
#main_menu li a .menu_sub_title {
    color: #808080;
}

#main_menu.fixed {
background-color: rgba(240, 240, 240, 0.9)!important; 
}

#top_contents figure, #top_contents figure div {
position: relative;
}
#top_contents figure:before {
    /*content: "";*/
    /*display: block;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*position: absolute;*/
    /*top: 10px;*/
    /*left: 10px;*/
    /*background-size: cover;*/
    /*z-index: -1;*/
    /*background-color: #2d2d2d;*/
}
#top_cms h2 {
    font-size: 38px;
}
#top_cms section {/*★*/
    text-align: left;
    max-width: inherit!important;
    padding-top: 66px;
    padding-bottom: 14px;
}
#top_cms .cms_title {
    text-align: center;/*★*/
}
#top_cms .border_white {/*★*/
    border: none;
}
#top_cms section > div {/*★*/
    max-width: 1000px;
    margin: 0 auto;
}




.dot_line {
    height: 8px;
    width: 90%;
    display: flex;
    margin: 0 auto;
    padding: 0;  
}
.dot_line_dot1 {
    background: #000;
    height: 4px;
    width: 4px;
    margin: 2px 0;
    border-radius: 100%;
}
.dot_line_dot2 {
    height: 8px;
    width: 100%;
    background-image: radial-gradient(#000 25%,transparent 0);
    background-size: 8px 8px;
    margin: 0 2px;
}
#page10 li a {/*★*/
    padding: 10px 0;
}
#cms_2-a .cate_box {
border-bottom: 4px dotted #aaaaaa;
}
#cms_2-a h3 {
    display: block;
    text-align: center;
    border: none;
    font-weight: bold;
}
#cms_2-a .box_wrap {
padding: 10px 15px;background: #fff;margin-top: 14px;
}
.cms_5-c .cate_box {
    padding: 10px;
    border: 1px solid #c1c1c1;
    background: #f0f0f0;
}
.cms_5-c .box_txt1 {
padding-top: 12px;
}
.cms_5-c .box_txt1::before {
top: 6px;
}
.cms_5-c .box_title1 {
padding-bottom: 8px;line-height: 1;
}
@media(max-width: 1226px) {
.catch {
    top: 4%;
    width: 34%;
    left: 2%;
    transform: translateY(20px);
}
}
@media(min-width: 769px) {
#contents1 .contents_box, #contents2 .contents_box, #contents3 .contents_box {
margin-left: 50%;
}

#main_menu {
    padding-top: 10px;
    padding-bottom: 0px;
    margin-bottom: 5px;
}
}
@media(max-width: 768px) {
    .catch {
top: 63%;
}
    #logo img {
        margin-left: 15px;
    }
#f_menu ul li a {/*★*/
font-size: 0.9rem;
}
#page10 .cate li a span {/*★*/
padding-left: 0;
}
}

@media(max-width: 667px) {

#logo a img {
width: 194px;
    }
#top_cms section {
    padding-left: 0;
    padding-right: 0;
}
#fakeloader .fl:before {
    bottom: -34px;
    right: -10px;
    width: 79px;
    height: 62px;
    animation-name: racco2;
}

#top_contents figure:before {
   
    border-width: 0 0 20px 20px;
}
#top_contents figure:after {
    border-width: 0 20px 20px 0px;
}
#top_contents figure div:after {
    border-width: 20px 20px 0px 0px;
}
#top_contents figure div:before {
    border-width: 20px 0px 0px 20px;
}
#top_cms h2 {
    font-size: 27px;
}
#top_cms .border_white {
    padding: 26px 10px 10px;
}

  #cms_2-a h3 {
        margin-bottom: 5px;
    }
    #cms_2-a .cate_box {
     margin-top: 22px;
    }
    .cms_3-d .cate_box {
        padding-left: 10px;padding-right: 10px;
    }
    .cms_6-c .box_wrap {
        padding-left: 10px;
        padding-right: 10px;
    }
     .pager li {
        display: none;
    }
    .pager li.prev {
        display: block;
    }
}

@media all and (-ms-high-contrast:none){
.header .grid_3 a {
padding: 9px 18px 5px 13px; 
}    
}

/*2022/12/22*/
.map {display:none;}
#info_map .grid_6.grid_12_sp {max-width: 700px;width: 100%!important;}
.header .grid_3 a, .foot_tel_bt a {
    display: none;
}
.tel_box, #tel_txt,
.overlay ul li:last-of-type {display:none;}