@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
body,h1,h2,h3,h4{font-weight: 600;}
h2,.cate_title,.custom_txt{font-family: 'Kosugi Maru', sans-serif;}
#contents2 .con_wrap{z-index: 2;}
.custom_txt span:before ,.con_no:before,.title_wrap:before{
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}
.con_no{
position: relative;
z-index: -1;
    color: #feda1d;
}
#contents .con_box1::before,
#contents2 .con_box2::before{
background-image: url(Dup/img/dec2.png);
background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    z-index: -1;
    background-size: contain;
    top: -70px;
left: 0;
bottom: inherit;
background-color: transparent;
}
#contents .con_box1::before{top: -50px;}
#contents2 .con_box2::before{background-image: url(Dup/img/dec3.png);}
#contents .con_bg{
background-image: url(Dup/img/bg.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}
.custom_box{position: relative;}
.custom_txt{
    bottom: 50px;
    left: 50px;
background-color: #ffffff;
    padding: 50px;
    color: #343434;
    border: 1px solid #333;
z-index: 1;
}
.custom_txt span{position: relative;}
.custom_txt span:before{
    background-image: url(./Dup/img/dec1.png);
    width: 150px;
    height: 150px;
    bottom: -87px;
    right: -160px;
    z-index: -1;
}
#contents2 .con_wrap{right: -10px}
#contents2.trans .con_wrap{
	opacity: 1;
	right: 0;
}

#contents2 .con_bg{
	top: 0;
	right: 0
}
#contents2 .con_img{
	top: 100px;
	bottom: 100px;
	left: 0
}
#contents2 .con_box1::before{
	width: 40px;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: #fff
}
.con_no{font-size: 3rem;}
#contents .con_bg:before,#contents2 .con_bg:before {
    content: "";
    display: block;
    /*background-image: url(./Dup/img/con_bg.jpg);*/
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.2;
}
/*#contents2 .con_bg:before{background-image: url(./Dup/img/con2_bg.jpg);}*/
#contents .con_box1,#contents2 .con_box2{
    background-color: #ffffff;
    padding: 50px;
    margin-left: -150px;
    z-index: 2;
    color: #333;
border-radius: 10px;
box-shadow: 10px 10px 0px #feda1d;
}
#contents .con_img,#contents2 .con_img {
border-bottom-right-radius: 200px;
    -webkit-border-bottom-right-radius: 200px;
    border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
}
#contents .con_wrap{z-index: 2;}

.intro_wrap{position: relative;}
.intro_wrap p.font_bar{
position: absolute;
    top: -90px;
    font-size: 6rem;
    opacity: 0.2;
    left: 50%;
    transform: translateX(-50%);
}
#intro .intro_right div {
position: relative;
    border-radius: 40% 40% 50% 40%/30% 50% 50% 65%;
}
#intro .intro_img2{border-radius: 40% 60% 47% 53% / 50% 43% 57% 50%!important;}
#intro .intro_right div:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #feda1d;
    border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
    z-index: -1;


}
header .nav_bg{border-radius: 50%;}
header .nav_bg.trans{border-radius: 0;}
.footer_bg{
background-image: url(Dup/img/bg.png);
    background-repeat: no-repeat;
    background-position: bottom center;
}
#top_cms .cms_title p{color: #fff;}
.cms_4-a .box_wrap{align-items: stretch;}
.more a{border-radius: 40px;}
figure{
border-radius: 10px;
over-flow: hidden;
}
.br_sp{display: none;}
#intro .intro_right{
z-index: 1;
justify-content: space-between;}
.intro_img2.grid_6,.intro_img3.grid_6{width: calc(50% - 10px)!important;}
#top_cms,#intro,#loader{background-image: url(Dup/img/bg_img.jpg);}
#top_cms .cms_title p{
    background-image: url(Dup/img/title_bg.png);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: center left 51%;
}
.con_no{line-height: 1;}
#pp-nav ul, .pp-slidesNav ul {
    background-color: #f6f4ef;
    padding: 15px 0;
    border-radius: 15px;
}
.loader_logo img{max-width: 300px;}
.fade-in{ 
　opacity:0;
  animation-name:sample01;
  animation-duration:3s; 
  animation-fill-mode: forwards;
}
@keyframes sample01 {
0% {
 opacity: 0;
    transform: translate(-50%,-40%);
}
 100% {
 opacity:1;
    transform: translate(-50%,-50%);
 } 
}
#contents,#contents2{background-image: url(Dup/img/bg_img.jpg);}
/*-------------------------------------------------
下層
---------------------------------------------------*/
.title_wrap:before{
background-image: url(./Dup/img/dec1.png);
    width: 150px;
    height: 150px;
    bottom: 30px;
    left: 230px;
    z-index: 0;
animation: anime 1s 2s forwards;
opacity: 0;
}
.page9 .title_wrap:before{left: 380px;}
.page7 .title_wrap:before{left: 330px;}
@keyframes anime {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

/*-------------------------------------------------
tab
-----------------------------------------------------*/
@media screen and (max-width: 768px){
#custom{height: 50vh!important;}
#contents .con_box1, #contents2 .con_box2{margin-left: 0;}
#menu_stick, header .nav_bg{
    top: 20px;
    right: 20px;
}
.custom_txt{
text-align: left;
bottom: -50px;}
.custom_txt span:before{
    bottom: -150px;
right: -70px;}
#contents2 .con_wrap{right: 0;opacity: 1}
#contents2 .con_img{
	height: 60vw;
	top: auto;
	bottom: auto
}
#intro{padding-bottom: 100px;}
.title_wrap:before{left: 170px;}
.page9 .title_wrap:before {
    left: 300px;
}
.page7 .title_wrap:before {
    left: 250px;
}
}



/*-------------------------------------------------
sp
-----------------------------------------------------*/
@media screen and (max-width: 667px){
.intro_wrap p.font_bar{font-size: 3rem;}
.intro_left{padding-top: 120px;}
.custom_txt{
box-sizing: border-box;
    width: 80%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
padding: 20px;
left: 50%;

}
.custom_txt span:before{
    bottom: -90px;
    right: -130px;
    width: 100px;
    height: 100px;
}
/*.br_sp{display: block;}*/
#contents .con_box1::before, #contents2 .con_box2::before{
    width: 100px;
    height: 100px;
    top: -10px;
}
#intro {
    padding-bottom: 50px;
}
.title_wrap:before,.page9 .title_wrap:before{
    left: 240px;
    width: 100px;
    height: 100px;
    bottom: 15px;
}
}


/*-------------------------------------------------
IE
-----------------------------------------------------*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){
#cms_2-a .cate .cate_title{padding-top: 15px!important;}
#cms_6-b .cate .cate_title{padding: 10px 5px 10px!important;}

}

/*-------------------------------------------------
Firefox
-----------------------------------------------------*/
@-moz-document url-prefix(){
.custom_txt span::before{
width: 100px;
bottom: -157px;
}
}