@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&display=swap');
@import url("https://use.typekit.net/eok4grh.css");
::selection {
    color: #ffffff;
    background: #de9700;
}
a {
    color: #845a00;
}
h2, h3, h4 {
    font-family: 'Shippori Mincho', serif;
}
/*f7f7f7のところ*/
#footer .footer_bottom, .under_page #footer, #top_cms .top_cms_bg, .pager li a, #page07 p, #page09 .privacy_top, #top_info{
background-color: #ffffff;
}
#loader {
    background: rgba(255,250,246, 1);
background: linear-gradient(128deg, rgba(255,250,246,1) 0%, rgba(255,248,245,1) 35%, rgba(255,244,242,1) 51%, rgba(255,255,208,1) 67%, rgba(249,253,255,1) 100%);
}
.topContact {margin-top: 25px;}
.topContact a{
    padding: 15px 10px;
    border: 4px double #ffc64d;
    text-align: center;
    max-width: 229px;
    position: relative;background: #fff;
}
.topContact a:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
height: 0;
border-style: solid;
    border-width: 0 0 18px 42px;
border-color: transparent transparent #ffc64d transparent;
}
#top_info .info_left {
    background: url(Dup/img/frame2.png);
    background-repeat: no-repeat;
    background-size: 78%;
    background-position: 50% 9%;
}
#top_cms .cms_2-c .cate_box:nth-child(2) {
    flex-direction: row-reverse;
}
.cms_2-c .box_txt1 {
    padding: 1rem 2rem;
    border-left: 5px dotted #ffc64d;
    background: #ffffff;
    margin-bottom: 10px;
}


.cms_box {position: relative}
.cms_box:before {
    content: "";
    display: block;
    width: 213px;
    height: 44px;
    position: absolute;
    top: -22px;
    right: 0%;
    background: url(Dup/img/png2.svg) no-repeat;
    background-size: auto 100%;
    z-index: 1;
}
.cms_box:after {
    content: "";
    display: block;
    width: 257px;
    height: 48px;
    position: absolute;
    top: -27px;
    left: 4%;
    background: url(Dup/img/png1.svg) no-repeat;
    background-size: auto 100%;
    z-index: 1;
}


#contents2 .con2_right {
    position: relative;
}
#contents2 .con2_right:before {
    display: block;
    content: "";
    position: absolute;
    top: 5px;
    right: 76px;
    width: 237px;
    height: 200px;
    background: url(Dup/img/pnggg.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}
/* ------------------------------------------------------------------*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;  
}
}
/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}
/*左から右*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffcebd;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}
/*------------------------------------------------------*/
span.smoothText {
  overflow: hidden;
  display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger, span.smoothTextTrigger2{
  transition: 1.2s ease-in-out;
  transform: translate3d(0,100%,0) skewY(12deg);
  transform-origin: left;
  display: block;
}
span.smoothTextTrigger.smoothTextAppear, span.smoothTextTrigger2.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
}


.con2_title span, .con3_title span {
    width: auto;
    height: inherit;
}

/* ------------------------------------------------------------------------------- */
 body{
  animation: bgchange 20s ease infinite;
}
@keyframes bgchange{
      0%  {background:#fffaf6;}/*変化させたい色*/
      25%  {background:#fff4f2;}/*変化させたい色*/
      50%  {background:#ffffd0;}/*変化させたい色*/
      72%  {background:#f9fdff;}/*変化させたい色*/
      85%   {background:#fff;}/*変化させたい色*/
      100%   {background:#fffaf6}/*変化させたい色*/
 }

.cms_title h2, .cms_title p {
    color: #845a00;
}
.page1 #header {
z-index: 3;
padding-left: 0;
}
.con1_title p, .con2_title p, .con3_title p, .page_title_box p {
    font-family: emily-austin, sans-serif;font-size: 20px;font-size: 48px;
}
.con1_title h2:first-letter, .con2_title h2:first-letter {
color: #ffc64d;    
}
.con3_title h2:first-letter {
    color: #845a00;
}
#main_img:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: url(Dup/img/gray.png);
    width: 66.67%;
    height: 100%;
    z-index: 2;
    opacity: 0;
}
.page1 #logo {
    width: 67%;
    padding-left: 34%;
}
#logo span {
    display: none;
}
#logo img {
    max-width: 192px;
}
.page1 #pc_nav ul {
   max-width: 350px;
    margin: 0 auto;
}
#contents2 .con2_wrap{
    box-shadow: none;
}

h2.font_12up:first-letter {
    color: #fdb927;
}
#contents3 h2.font_10up:first-letter {
  color: #c48600;
}

.catch {
    position: absolute;
    right: 3%;
    bottom: 14%;
    z-index: 2;
    /* left: 0; */
    margin: auto;
    width: 31%;
}
@media(min-width: 769px) {
#header > .grid_12 {
    margin-top: -106px;
}
}
@media screen and (min-width:667px) and ( max-width:768px) {
.contents_wrap .contents_bg {
   width: 100%;
}
}
@media(max-width: 768px) {
.catch {
    bottom: 28%;
    width: 57%;
}

}
@media(max-width: 667px) {
.catch {
    right: 3%;
    bottom: 46%;
    width: 49%;
}
.cms_box:before {
    width: 112px;
    height: 36px;
    top: -17px;
}
.cms_box:after {
    width: 257px;
    height: 37px;
    top: -19px;
    left: 4%;
}
}

@media all and (-ms-high-contrast: none) {
.topContact a {
    padding: 17px 10px 12px;
}
.cms_2-c .box_txt1 {
    padding: 1rem 2rem 0.4rem;
}
#cms_3-d .cate .cate_title {
    padding-bottom: 16px;
}
#cms_6-a .cate .cate_title {
    padding-top: 8px!important;
}
#contact_tel a {
    padding: 25px 15px 17px;
}
}