/*--------リンク・フォント--------*/
@font-face {
    font-family: 'A1gothic';
    font-style: normal;
    font-weight: 400;
    src: url('../Dup/img/A1gothic_r.woff') format('woff'),
        url('../Dup/img/A1gothic_r.eot')  format('eot');
    font-display: swap;
}
@font-face {
    font-family: 'A1gothic';
    font-style: normal;
    font-weight: 700;
    src: url('../Dup/img/A1gothic_bold.woff') format('woff'),
        url('../Dup/img/A1gothic_bold.eot')  format('eot');
    font-display: swap;
}

body,.font_serif{
    font-family: "A1gothic","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;
}

.linkStyle{color: #333333; text-decoration: underline;}
.mailStyle{color: #333333; text-decoration: underline;}



/*--------全体--------*/
#page_title .svg_box{display:none;}
figure,figure img{border-radius:15px;}
.filter,.filter2{
    border-radius: 25px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: +1;
	width: 100%;
	-webkit-transition:-webkit-transform 0.8s ease-out;
	-ms-transition:-ms-transform 0.8s ease-out;
	transition:transform 0.8s ease-out;
}
.filter.active{
    transition-delay : .3s;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}
.filter2.active{
    transition-delay : .3s;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}
#fakeloader .fl{
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%, -50%);
    width: 11%;
}
header {padding-bottom: 10px;}
header #logo{
    padding-top: 5px;
    padding-bottom: 10px;
}
#header .txt_color1 { color: #5e5e5e;}

header #header #header_menu li:last-child{
    padding-top: 26px;
}
header #header #header_menu li:last-child a span {
    border-radius: 5px;
    padding-top: 10px;
}
header #header #header_menu li:last-child a span.txt_color3{color: #e8a0bd;}
#header_menu li a span{    
  position: relative;
}
#header_menu li a span::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0%;
    width: 100%;
    height: 2px;
    background: #e985ad;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}
.gnavi li.current a::after,
#header_menu li a span:hover::after {
    transform: scale(1, 1);
}
#header_menu li:last-child a span::after {display: none;}
header #header #header_menu li:last-child a span:hover{
    background: #e985ad;
    border: 2px solid #e985ad;
    color: #fff;
}
#main_img::before{
    content: "";
    position: absolute;
    display: inline-block;
    background: url(./Dup/img/main_catch.png) no-repeat;
    background-size: contain;
    z-index: 5;
    width: 10%;
    height: 85%;
    right: 37%;
    top: 55%;
    transform: translate(-50%, -50%);
}
#intro #intro_txt{
    margin: 1.5em;
    border-radius: 20px;
    overflow: hidden;
}
#intro #intro_txt h2,#intro #intro_txt p{
    position:relative;
    z-index:+1;
}
#intro #intro_txt h2::before{
    content: "";
    position: absolute;
    display: inline-block;
    background: url(./Dup/img/item_01.png) no-repeat;
    background-size: contain;
    z-index: -1;
    opacity: 1;
    width: 80%;
    height: 8em;
    left: 50%;
    top: -2em;
    transform: translate(-50%,0);
}
#contents{
    margin: 1.5em;
    border-radius: 20px;
    max-width: inherit;
    width: auto;
    padding: 2% 5%;
    background-color: #ffffff;
}
#contents .box:nth-of-type(2) div{
    flex-direction: row-reverse;
}
#contents .box{
    background: url(./Dup/img/item_02.png) no-repeat 51% 50%;
    background-size: auto;
}
#contents .con_txt{
    position: absolute;
    background-color: #fff9f6;
    border-radius: 25px;
    z-index: 3;
    right: 0em;
    bottom: -3em;
    padding: 3em;
    width: 65%!important;
}

#contents .box:nth-of-type(2) .con_txt {
    right: auto;
    left: 0;
}
#contents .box .con_img{
	-webkit-transition:opacity 0.3s ease-out 1.1s;
	-ms-transition:opacity 0.3s ease-out 1.1s;
	transition:opacity 0.3s ease-out 1.1s;
	opacity:0;
}

#contents .box .con_img.active{
	opacity:1;
}
#top_cms{
    margin: 1.5em;
    border-radius: 20px;
    max-width: inherit;
    padding: 2% 5%;
    background-color: #ffffff;
    width: auto;
}
#top_cms .top_cms_box {
    margin-top: 3em;
}
#top_cms .cms_wrap{margin-top: 11em;}
.more{margin: 4em auto;}
.more a{
    padding: 10px;
    border-radius: 5px;
}
.top_cms_box{
    position:relative;
    text-align: center;
}
.top_cms_box::before {
	content: "";
    position: absolute;
    display: inline-block;
    background: url(./Dup/img/item_03.png) no-repeat;
    background-size: contain;
    z-index: 1;
    opacity: 0.85;
    width: 9.5em;
    height: 16em;
    left: 50%;
    top: -5em;
    transform: translate(-50%,0);
}
.cms_title h2{
    color:#333;
    background-color: rgba(255, 255, 255, .9);
    position: relative;
    z-index: +1;
    padding: 5px;
}

.svg_box2{color: #a1c6c0;}
#bottom_menu li a{    
  position: relative;
  padding: 0 5px;
}
#bottom_menu li a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0%;
    width: 100%;
    height: 2px;
    background: #e985ad;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}
#bottom_menu ul li a:hover {
    color: #ffffff;
    border: 0;
}

#bottom_menu li a:hover::after {
    transform: scale(1, 1);
}

#info_title_box {
    margin: 0 1.5em;
    background-image: url(./Dup/img/back1.jpg)!important;
}
.info_box{
    margin: 1.5em;
    border-radius: 20px;
}
.info_title span{
    background-color: rgba(255, 255, 255, .75);
    border-radius: 10px;
    color: #333;
    font-size: 1.15em;
    padding: 0.8em 5em;
}
#info {
    padding-top: 25px;
}
.info_txt h3{margin-bottom:0px;}
footer{background-color: #f2bcca;}
.bg-mask{
    margin:0  1.5em;
    border-radius: 20px;
}

/*--------下層--------*/
.subpage footer {padding-top: 30px;}
#page_title h2 span{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    border-radius: 10px;
    color: #333;
    background-color: rgba(255,255,255,0);
    padding: 18px 25px 13px;
    
}
.cate_list li a {
    border-radius: 5px;
    padding: 7px 10px 4px;
}
.pager li a span{top:54%;}
.cate_title{
    position:relative;
    z-index:+1;
}
.cate_title::before{
    content: "";
    position: absolute;
    display: inline-block;
    background: url(./Dup/img/item_04.png) no-repeat;
    background-size: contain;
    z-index: -1;
    opacity: 1;
    width: 70%;
    height: 4.5em;
    left: 14%;
    top: 46%;
    transform: translate(0%,-50%);
}

.youtube_wrap{     margin: 70px 0 0;}
.youtube_box{
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
}
.youtube_box iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#cms_3-d .cate_title::before {
    width: 20%;
    height: 4em;
    left: 50%;
    top: 46%;
    transform: translate(-50%,-50%);
}
#cms_6-a .cate_title::before {
    width: 15%;
    height: 4em;
    left: -2%;
    top: 53%;
}


#page8 .tel_box{
    position: relative;
    overflow: hidden;
    padding: 20px 20px 15px 20px;
}
#page8 .tel_box > a:before{
    content:"";
    position: absolute;
    width:100vw;
    height:100vh;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    left:50%;
    top:50%;
}
@media screen and (max-width: 1200px){
    #page8 .tel_box p{
        display: block;
        padding-right: 0px;
        margin-right: 0px;
        border-right: none;
        
    }
}

@media screen and (max-width: 667px){  
#page8 .tel_box a{
    font-size: 5.3vw;
    letter-spacing: 2px;    
}
}
@media screen and (max-width: 1100px){
.flex_column_re{flex-direction: column-reverse;}
#contents .con_txt {
    position: static;
    width: 90%!important;
    margin-left: auto;
    margin-top: -4em;
}
  #contents .box:nth-of-type(2) div {
    flex-direction: column-reverse;
    align-items: flex-end;
}  
#contents .box:nth-of-type(2) .con_txt {
    flex-direction: column;
    margin-left: inherit;
    margin-right: auto;
}
}
/*--------タブレット--------*/
@media screen and (max-width: 768px){

 #fakeloader .fl {
    width: 25%;
}
header #header #header_menu li a span {
    padding-top: 5px;
}
    header #header #header_menu li:last-child {
    padding-top: 0px;
}

header #logo {
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 3px;
}
 .logo {
    width: 200px;
}
#main_img::before {
    width: 9%;
    height: 71%;
    right: 40%;
    top: 63%;
}
#contents{
    min-width: inherit;
    padding: 0 2em;
}

#contents .box {
    background-position:50% -48%;
}
#top_cms {
    min-width: inherit;
    padding: 3em 1em;
}    
#top_cms .cms_wrap {
    margin-top: 7.5em;
}
.top_cms_box::before {
    width: 7.5em;
    height: 13em;
    top: -4em;
}
.info_box {
    padding: 0 1em 0 0;
}
.cate_title::before {
    width: 24%;
    height: 4.5em;
    left: 1%;
}
#cms_6-a .cate_title::before {
    width: 21%;
    height: 3.5em;
    left: -1.5%;
    top: 44%;
}
}

/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
    #fakeloader .fl {
    width: 38%;
}
#intro #intro_txt,#contents,#top_cms,.info_box {
    margin: 1em;
}
header #logo {
    padding-top: 3px;
    padding-bottom: 0px;
}
.logo {
    width: 160px;
}
#main_img::before {
   width: 13%;
    height: 97%;
    right: 35%;
    top: 50%;
}
#intro #intro_txt {
    padding-bottom: 50px;
    padding-top: 30px;
}
#intro #intro_txt h2::before {
    width: 100%;
    height: 4em;
    left: 50%;
    top: 0em;
}
#contents {
    padding: 0 1.2em;
}

#contents .con_txt {
    width: 100%!important;
    padding: 1.5em;
    margin-top: -1em;
}
.info_box {
    padding: 0 0.5em 1.5em 0.5em;
}
.cate_list li a {
    padding: 3px 10px 3px;
    font-size: 4vw;
}

.cate_title::before {
    width: 36%;
    height: 3.5em;
    left: -1%;
}
#cms_3-d .cate_title::before {
    width: 42%;
    height: 3.5em;
}
#cms_6-a .cate_title::before {
    width: 36%;
    height: 3.5em;
    left: -2%;
}
}


/*--------------------------------------------
IE
--------------------------------------------*/
@media all and (-ms-high-contrast:none){
#fakeloader canvas{width: 100%;}
.cms_1-a figure img{width:100%!important;height:auto!important;}
#cms_6-a .cate_title{padding-bottom:4px;}
}