﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/*h2,h3,h4,#main_menu ul:not(.sns_links) li a{
font-family: tbcgothic-std, sans-serif!important;
font-weight: 800;
font-style: normal;
}*/
#wrap,body{
font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
header h1{
top: 0px;
    left: 0px;
}
#main_img{border-bottom: 10px solid;}
/*#main_img:before{
	content: "";
    display: block;
    position: absolute;
    left: 170px;
    top: 127px;
    background: url(Dup/img/catch.png)no-repeat;
    background-size: contain;
    width: 60%;
    height: 60%;
    z-index: 1;

    transform: rotate(
-5deg
);
}*/



#main_img .catch{
   left: -51px;
    top: -7px;
    width: 50%;
    height: 60%;
    z-index: 1;
animation: fadein-keyframes 10s ease 0s 1 forwards;
}

@keyframes fadein-keyframes {
    0% {
      opacity: 1;
    }

  97% {
      opacity: 1;
    }


    100% {
      opacity: 0;
    }
  }

#main_img .catch.animStart{
  animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards,fadein-keyframes 10s ease 0s 1 forwards;
}
 
@keyframes poyoyon {
  0% {
    transform: translateX(-140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(-30px);
  }
  100% {
    transform: translateX(0) rotate(
-15deg
);
  }
  20% {
    opacity: 1;
  }
}
.con2_wrap{
float: left;
background-color   : #ffffff;
  background-image   : radial-gradient(#fff0e9 17%, transparent 20%),
                       radial-gradient(#fff0e9 17%, transparent 20%);
  background-position: 0 0, 22px 22px;
  background-size    : 44px 44px;
}
.top_cms_title + .cms_wrap{
border-top: 10px solid;
    border-bottom: 10px solid;
background-color: #ffffff;
    background-image: radial-gradient(#fff0e9 17%, transparent 20%), radial-gradient(#fff0e9 17%, transparent 20%);
    background-position: 0 0, 22px 22px;
    background-size: 44px 44px;
}
#contents1{border-bottom: 10px solid;}
.con2_wrap{
border-top: 10px solid;
position: relative;
}
.con2_wrap:before{
	content: "";
    display: block;
    position: absolute;
    left: 43%;
    top: -16%;
    background: url(Dup/img/item1.png)no-repeat;
    background-size: contain;
    width: 20vw;
    height: 20vw;
    z-index: 1;
}
.img_shadow{box-shadow: 0px 0px 0px 10px #000;}
.sns_links{display: none;}
/*main{border-top: 10px solid;}*/
#contents2 .box > div{
position: relative;
border: 10px solid;
background-color   : #ffffff;
  background-image   : radial-gradient(#fff0e9 17%, transparent 20%),
                       radial-gradient(#fff0e9 17%, transparent 20%);
  background-position: 0 0, 22px 22px;
  background-size    : 44px 44px;
}
/*#contents1 .obj:before{
	content: "";
    display: block;
    position: absolute;
       right: -85px;
    top: -100px;
    background: url(Dup/img/item2.png)no-repeat;
    background-size: contain;
    width: 40%;
    height: 40%;
    z-index: 1;
}*/

#contents2 .box .num:before{
	content: "";
    display: block;
    position: absolute;

    background: url(Dup/img/num.png)no-repeat;
    background-size: contain;
    width: 40%;
    height: 46%;
    z-index: 1;
}
#contents2 .box .num1:before{
    left: -10px;
    top: -115px;
}
#contents2 .box .num2:before{
 background: url(Dup/img/num2.png)no-repeat;
    background-size: contain;
bottom: -115px;
    right: 10px;
}
#footer .width_150{width: 250px;}
.cms_2-a figure{border: 10px solid;}
footer{
    border-bottom: 10px solid;
}
#top_cms .top_cms_box{
    margin-bottom: 150px;
}
.cms_5-c .box_txt1::before,#cms_5-c .box_txt1::before{color: rgba(0,0,0,0.7);}
/*下層---------------------------*/
#cms_3-c .cate_title{
	background: #ef8200;
    color: #fff;
}

@media screen and (max-width: 1280px){
#main_img{height: auto;
}



/*タブレット--------------------*/
@media screen and (max-width: 768px){
#contents1 .obj:before{right: 100px;}
.font_24_tb {
    font-size: 30px;
}
.font_16_tb {
    font-size: 24px;
}
#contents2 .box:nth-of-type(1) div.box_img,#contents2 .box:nth-of-type(2) div.box_img{
background-color: transparent;
border: none;
}
#contents2 .box .num:before{top: -90px;}
.con2_wrap .posi_rel:before{
left: 60px;
    top: -120px;
}
#main_img .catch {
    left: 00px;
    top: 20px;
    width: 50%;
    height: 60%;
    z-index: 1;

}
header h1{z-index: 9;}
.con2_wrap:before{display: none;}
#contents2 figure,.cms_2-a figure{border: 10px solid;}
.con2_wrap .box.posi_rel:before{
	content: "";
    display: block;
    position: absolute;
    left: 36px;
    top: -115px;
    background: url(Dup/img/item1.png)no-repeat;
    background-size: contain;
    width: 40%;
    height: 43%;
    z-index: 1;
}
#main_img{height: 43vh;}
}


/*スマホ------------------*/
@media screen and (max-width: 667px){
	#main_img .catch{
		top: 0px;
		left: 0px;
	}
	#contents1 h2{margin-bottom: 20px;}
	.con2_wrap .posi_rel:before{
		width: 30%;
		height: 30%;
		top: -72px;
		left: 10px;
	}
	#contents2 .box .num:before{
		top: -55px;
		width: 40%;
		height: 40%;
	}
	.font_16_tb {
    font-size: 20px;
}
#footer_cms .font_24_tb{font-size: 20px;}
#footer .width_150 {
    width: 150px;
}
.con2_wrap .box.posi_rel:before{
left: -5px;
    top: -73px;
width: 30%;
}
#contents2 .box > div{width: 100%;}
#main_img{height: 37vh;}
header h1 {
    top: 10px;
    left: 10px;
    position: relative;
    margin-bottom: 20px;
}
#main_img{height: 33vh;}
}



/*IE----------------*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){
	#cms_2-a .cate .cate_title{padding-top: 10px!important;}
}