/*-------------------------------------------------
個別
---------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&family=Noto+Serif+JP:wght@500&display=swap');

.font_serif, .cate_title, .sub_cate_title, #intro .intro_txt h2, .box_title1, .box_title, .cms_5-c .box_txt1::before, #cms_5-c .box_txt1::before, #top_contents2 h3 span,.top_cms_title h4{
    font-family: 'Noto Serif JP', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
.font1,.top_cms_title p,#top_cms .top_cms_box .more a span,.view_bt{
font-family: Josefin Sans, sans-serif;}
.z_index-1{z-index: 1;}
h1 img,.sc_nav .logo img{
    max-width: 150px;
}
.catch{
    color: #fff;
    z-index: 1;
    bottom: 10%;
    right: 4%;
}
.catch span{
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.intro_title h3::before{
content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 180px;
    background-color: #333;
    left: 50%;
    top: 300px;
}
#top_contents1 .contents1_txt h3{text-shadow: none;}
#top_contents1 .contents1_txt h3 span::after{
        position: absolute;
    content: "";
    width: 180px;
    height: 1px;
    right: -200px;
    top: 50%;
    background-color: #1a1a1a;
}
.top_cms_title{
        padding: 20px 0;
    margin: 0 20px;
    border-bottom: 1px solid;
}
.cms_2-a a .view_bt span{
transform-origin: left;
    transform: scaleX(0);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.cms_2-a a:hover .view_bt span{
transform-origin: left;
    transform: scaleX(1);
    z-index: -1;
}
.cms_2-a a:hover .view_bt{
    color: #fff;
    border: 1px solid #333;
}
.cms_2-a a:hover .cate_img1{transform: translate(-50%,-50%) scale(1.2);}
.linkStyle{color: #333;}
/*-------------------------------------------------
下層
---------------------------------------------------*/
#page_title{
    color: #fff;
    text-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
}
.btn_container a:hover{transform: translateY(-5px);}
#page08 .line a{
        font-size: 20px;
    background-color: #06c655;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
}

/*-------------------------------------------------
1281px
---------------------------------------------------*/
@media screen and (max-width: 1281px){
#intro h3 {
    font-size: 30px;
}
}


/*-------------------------------------------------
tab
-----------------------------------------------------*/
@media screen and (max-width: 768px){
#top_contents1 .contents1_txt{
    margin-left: 0;
    width: 100%!important;
}
#top_contents1 .contents1_txt h3{transform: none;}
#menu_bt > div span{
    height: 1px;
    margin-bottom: 5px;
}
#menu_bt.active > div span:nth-of-type(1) {
    transform: translateY(-5px) rotate(
45deg
);
}
.intro_title h3::before{height: 100px;}
#page10 ul li a span{letter-spacing: 2px;}
#menu_bt.active > div span:nth-of-type(1) {
    transform: translateY(-3px) rotate( 
45deg
 );
}
#menu_bt.active > div span:nth-of-type(3) {
    transform: translateY(-16px) rotate(
-45deg
);
}


}



/*-------------------------------------------------
sp
-----------------------------------------------------*/
@media screen and (max-width: 667px){
#top_contents1 .contents1_txt h3 span::after{
    width: 100px;
    right: -120px;
}
h1 img, .sc_nav .logo img {
    max-width: 100px;
}
#loader .logo{max-width: 150px;}
.intro_title h3::before{
    width: 120px;
    height: 1px;
    top: 50%;
    right: 20px;
    left: inherit;
}
#intro .intro_title{transform: none;}
#intro h3{font-size: 20px;}
#page_title{
    min-height: 200px;
    height: 200px;
}


}


/*-------------------------------------------------
IE
-----------------------------------------------------*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){



}


/*-------------------------------------------------
Firefox
-----------------------------------------------------*/
@-moz-document url-prefix(){

}