@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;500&display=swap');
h2, h3, h4, .box_txt1 {
    font-family: 'Kaisei Opti', serif;
    font-weight: normal;
}
#contents2 .con2_wrap {
    position: relative;
}
body {
    background-color: #F7F6EB;
}
#pc_nav ul  {
    /*display: inline-block;*/
}
#loader{z-index: 9999;}
#loader .loader_img {
    animation-name: fadein;
    animation-duration: 2.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    z-index: 1;
}
#wrap {
    overflow: hidden;
}
/*#loader img {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    top: 50%;*/
/*    left: 0;*/
/*}*/
/*.loader_icon {*/
/*    top: 50%;*/
/*    width: 300px;*/
/*}*/
@keyframes fadein {
	0% {opacity:0;}
	40% {opacity:0.8;}
	70% {opacity: 0.8}
	100% {opacity:0;}
}


#contents2 .con2_wrap::before {
	content: "";
	display: block;
	position: absolute;
	top: -32px;
	left: -32px;
	width: 270px;
	height: 270px;
	background-image: url(Dup/img/bara_lt.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
}
#contents2 .con2_wrap:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -32px;
    right: -32px;
    width: 270px;
	height: 241px;
    background-image: url(Dup/img/bara_rb.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
}



















/*SVGのサイズ*/

svg {
    max-width: 465.14px;
    width: 100%;
    height: auto;
    left: 0;
    /* right: 0; */
    /* margin: auto; */
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
    /* left: 50%; */
}
/*========= 手書き風にするためのCSS ===============*/

#mask .cls-1, #mask .cls-2 {/*#maskがないと動かない*/
    fill: none;
	 stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}	

	.cls-1{stroke-width:26px;}
	.cls-1,.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}
	.cls-2{stroke-width:31px;}
	
	
.toppage #header {
    background-image: url(Dup/img/bara.png);
    background-repeat: no-repeat;
    background-size: 630px;
}
header > span.page_title_bg {
    background-image: url(Dup/img/bara.png);
    background-repeat: no-repeat;
    background-size: 630px;
}
.under_page #header {
    background-size: 33.3%;
}
#main_img .slider {
    background-image: url(Dup/img/main_img.jpg);
    background-size: cover;
    background-position: 50% 50%;
}
.trans_logo a img {
    max-width: 125px;
}
.cms_box {
    /*margin-bottom: 0;*/
    /*padding-bottom: 150px;*/
    /*background-image: url(Dup/img/bara3.png);*/
    /*background-repeat: no-repeat;*/
    /*background-position: 100% 100%;*/
}
.cms_box:before {
    content: "";
    display: block;
    position: absolute;
    top: -58px;
    right: 8px;
    width: 247px;
    height: 92px;
    background-image: url(Dup/img/bara4.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
}
#cms_2-c .box_item {
    background: #fff;
}
.catch {
    z-index: 2;
    width: 42%;
    max-width: 420px;
    right: 9%;
    top: 5%;
    filter: drop-shadow(0px 0px 4px #ffffff) drop-shadow(3px 3px 9px #ffffff) drop-shadow(0px 0px 6px #ffffff);
}
.eng1, .eng2, .eng3 {
    max-width: 400px;
    text-align: center;
    margin: 0 auto;
}
#contents1 {
    position: relative;
    overflow: hidden;
}
#contents1:before {
    content: "";
    display: block;
    position: absolute;
    top: -100px;
    right: -88px;
    width: 500px;
    height: 500px;
    background-image: url(Dup/img/illust.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 3s;
    /* z-index: 1; */
    transform: rotate(9deg);
    transition-delay: 1s;z-index: -1;
}
#contents1.trans:before {
    background-image: url(Dup/img/illust2.png);
}

.contents_wrap .contents_bg {
    background-image: url(../Dup/img/bara2.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
}

.con3_wrap {
	text-shadow: 1px 1px 2px #ecaccc, -1px 1px 2px #ecaccc, 1px -1px 2px #ecaccc, -1px -1px 2px #ecaccc, 1px 0px 2px #ecaccc, 0px 1px 2px #ecaccc, -1px 0px 2px #ecaccc, 0px -1px 2px #ecaccc;
    padding-left: 15px;
    padding-right: 15px;
}
.link_type1 .link_top .link_title {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 50px!important;
    margin-bottom: 30px;
    color: #5c5c5c;
    font-weight: normal;
    background-image: url("../dup/img/link_type1_icon.png");
    background-size: 76px;
    background-position: top center;
    background-repeat: no-repeat;
}
.link_type1 .link_top .link_title{
    font-size: 20px;
    margin-bottom: 20px;
}
.link_type1 .link_top a{
	padding-top: 40px;
	padding-bottom: 40px;border-color: #787e7d;
}
.link_type1 .link_top a:hover{
    background-color: #fff4f6;
}
.link_type1 .link_top a:hover .link_img1{
    transform: translate(-50%, -50%) scale(1.1,1.1);
    opacity: 0.1;
}

#cms_1-a .pager li {
    border: 1px solid #ffabd5;
}

@media screen and (max-width: 1700px){
.catch {
    width: 42%;
    right: 6%;
    top: 5%;
}
}
@media screen and (max-width: 1200px){
.catch {
    width: 42%;
    right: 2%;
    top: 4%;max-width: 330px;
}
}
@media screen and (max-width: 768px){
.catch {
    right: 2%;
    top: 96px;
}
}
@media screen and (max-width: 667px){
.catch {
    width: 57%;
    right: 4%;
    top: 91px;
}
#main_img .slider {
    background-size: auto 114%;
    background-position: 50% 0%;
}
#main_img {
    height: 114vw!important;
}
#contents1:before {
    top: -69px;
    right: -34px;
    width: 210px;
    height: 208px;
}
.link_type1 .link_top .link_title{
    font-size: 15px;
}
#page02, #page03, #page04, #page05, #page06 {
    padding-left: 20px;
    padding-right: 20px;
}
.cms_box:before {
    top: -34px;
    right: 7px;
    width: 164px;
    height: 63px;
}
}