/*font------------------------------------------------------------------------*/
a span,.more a,.l-menu ul li a,.f_sitemap_inner li a,.copy,.contact_tel a,#page10 .sitemap li a,
.cate_list li a,.topTxt1,.f_contact_btn a,.jp,.f_contact_box p
{font-family:'Montserrat', 'Kosugi Maru', sans-serif !important;
        transform: rotate(0.03deg);}
p{font-family:'Kosugi Maru', sans-serif !important;
        transform: rotate(0.03deg);}

#page10 .sitemap li a:hover,.f_contact_btn a:hover {
    transform: scale(1.05) rotate(0.03deg) !important;}

        
h1,h2,h3,h4,h5,h6{font-family: 'Montserrat','Kosugi Maru', sans-serif !important;
    font-weight: bold !important;
    transform: rotate(0.03deg);}
    

.contact_tel a i {font-weight: normal;}
.opacity08 {
    opacity: 0.9 !important;}
.font_14 {
    font-size: 16px;}
ul.f_sitemap_inner li a {
    font-size: 15px;
    letter-spacing: 1px;}
/*font------------------------------------------------------------------------*/
/*color-----------------------------------------------------------------------*/
/*黄#ffc926*/
/*水#e6f6ff*/
/*青#0059b3*/

.txt_color1 { color: #ff9a26;}
.txt_color2 { color: #0059b3;}
.txt_color3 {color: #ff9a26;}

.bg_color1 {background-color: #ff9a26;}
.bg_color2 { background-color: #0059b3;}
.bg_color3 { background-color: #ff9a26;}
.bg_color5 {background-color: #e6f6ff;}
.con1_squ .bg_color3 {background: #ffc926 !important;}
#cms_6-a h3.cate_title { background: #0059b3 !important;}
.border_color2 {border-color: #0059b3;}
.border_color3 {border-color: #ffc926;}
.border_color4 {border-color: #ffc926 !important;}
.hvr_txt_color3:hover { color: #ff9a26;}
.hvr_bg_color4:hover { background-color: #0059b3;}
.l-menu ul li a span {color: #ff9a26;}


/*linkStyle*/
a.linkStyle {
    color: #0059b3;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #0059b3;
    opacity: 0.8;
}
/*color-----------------------------------------------------------------------*/
/*catch-----------------------------------------------------------------------*/
.catch {
    position: absolute;
    top: 49.5%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 50%;
    max-width: 560px;
    /* z-index: 5; */
}
.main01 {
    position: absolute;
    top: 46%;
    left: 5%;
    transform: translateY(-50%) translateX(0%);
    -webkit- transform: translateY(-50%) translateX(0%);
    width: 50%;
    max-width: 480px;
    /* z-index: 5; */
}
.main02 {
    position: absolute;
    top: 46%;
    right: 5%;
    transform: translateY(-50%) translateX(0%);
    -webkit- transform: translateY(-50%) translateX(0%);
    width: 50%;
    max-width: 480px;
    /* z-index: 5; */
}

/*調整用*/
@media screen and (max-width: 1700px){
.catch {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 50%;
    max-width: 560px;
    /* z-index: 5; */
}
.main02 {
    top: 45%;
    right: 5%;
    max-width: 450px;}    
.main01 {
    top: 45%;
    left: 5%;
    max-width: 450px;}
}



@media screen and (max-width: 1600px){
.catch {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 50%;
    max-width: 500px;
    /* z-index: 5; */
}
.main02 {
    top: 39%;
    right: 5%;
    max-width: 400px;}    
.main01 {
    top: 39%;
    left: 5%;
    max-width: 400px;}
}
    
@media screen and (max-width: 1450px){
.catch {
    position: absolute;
    top: 43.5%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 50%;
    max-width: 450px;
}
}

@media screen and (max-width: 1350px){
.main02 {
    top: 38%;
    right: 5%;
    max-width: 350px;}    
.main01 {
    top: 38%;
    left: 5%;
    max-width: 350px;}
}
}

@media screen and (max-width: 1300px){
.catch {
    position: absolute;
    top: 39.5%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 50%;
    max-width: 350px;
}



}

@media screen and (max-width: 1280px){
.catch {
    position: absolute;
    top: 39.5%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 50%;
    max-width: 350px;
}


}

@media screen and (max-width: 1200px){
.main02 {
    top: 38%;
    right: 5%;
    max-width: 330px;}    
.main01 {
    top: 38%;
    left: 5%;
    max-width: 330px;}
}
}


/*catch-----------------------------------------------------------------------*/

.icon img {  width: 150px !important;}
ul.f_sitemap_inner { max-width: 1200px;}
.f_contact_box h4 {
    margin-bottom: 13px;
    font-size: 33px;}
.tel { display: none;}
.f_contact_btn { padding: 5px 0;}
.pagetitle_img {mix-blend-mode: multiply !important;}
#fakeloader:before{background:transparent;}
.pagetop { z-index: 5;}
.menu_btn { padding: 28px 25px 25px 25px;}
.pagetitle.txt_center.bg_color4.posi_rel { background: #e6f6ff;}
.pagetitle_img {mix-blend-mode: normal !important;}
.pagetitle_img { opacity: 0.3 !important;}
.menu_btn.stick_trans span:last-child { margin-top: -3px !important;}
/*logo-----------------------------------------------------------------------*/
.logo1 { max-width: 180px;}
.logo2 a {max-width: 270px;}
#sp_nav .sp_nav_inner .menu__header .logo3 img { max-width: 300px;}
#fakeloader .fl { max-width: 300px;}
/*logo-----------------------------------------------------------------------*/


/*anime------------------------------------------------------------------------------------*/
#con1{padding-bottom:150px}

.demo_stage{margin-top: 100px;
    margin-bottom:30px;
}


.demo_item {
    width: 250px;
    height: 200px;
    /* border-radius: 10px; */
    background-image: url(dup/img/demo.png);
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
}
.demo_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}
.demo_stage{
    position: relative;
    width: 100%;
    top: 0px;
    display: block;

}
.demo_wrap{
	display: block;
    position: absolute;
    bottom: 0%;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: 1;
}

.demo_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.demo_wrap[data-order="right"] {
    animation-name: GoRight;
}

[data-order="right"] > .demo_item {
    transform: rotateY(180deg);
}

@keyframes GoLeft {
    0% {
        right: 0%;
    }
    100% {
        right: 85%;
    }
}
@keyframes GoRight {
    0% {
        right: 85%;
    }
    100% {
        right: 0%;
    }
}



/*anime------------------------------------------------------------------------------------*/


/*IE*/
@media all and (-ms-high-contrast: none){
.c-btn{ padding-bottom: 1px !important;}
.pager li a {padding-top: 0px !important;
            padding-bottom: 1px !important;}
.cate_list li a{
    padding-top: 10px !important;
    padding-bottom: 11px !important;}
#page8 .contact_tel a {padding: 13px 40px 14px !important; }
div#page9 .privacy a {
    padding-top: 0px !important;
    padding-bottom: 1px !important;}
    

@keyframes GoLeft {
    0% {
        right: 0%;
    }
    100% {
        right: 85%;
    }
}
@keyframes GoRight {
    0% {
        right: 85%;
    }
    100% {
        right: 0%;
    }
}


}
/*タブレット*/
@media screen and (max-width: 768px){
.menu_btn.stick_trans {
    padding: 34px 25px 20px 25px;
}
.catch {
    position: absolute;
    top: 25.5%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 50%;
    max-width: 250px;}

.main02 {
    top: 23%;
    right: 5%;
    max-width: 200px;}

.main01 {
    top: 24%;
    left: 5%;
    max-width: 200px;}
    
div#main_img {padding-top: 118px;}

#con3 .box_wrap .box{width:31% !important;}
#con3 .box_wrap .box .txt{ letter-spacing: 1px;}

.cate_list li { width: auto !important;}
.cate_list li a{ padding: 10px !important;}

.f_sitemap_inner li { width: 37%;}

#sp_nav .sp_nav_inner .menu__header .logo3 img {
    max-width: 250px;}

.con1_inner h2 { text-align: center;}
section#con2 .font_22 {
    text-align: center;
    margin-bottom: 20px;
}
section#con2 .font_15 {
    margin-bottom: 15px;
}
/*anime------------------------------------------------------------------------------------*/
.demo_item {
    width: 230px;
    height: 180px;
    background-image: url(dup/img/demo.png);
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
}

@keyframes GoLeft {
    0% {
        right: 0%;
    }
    100% {
        right: 70%;
    }
}
@keyframes GoRight {
    0% {
        right: 70%;
    }
    100% {
        right: 0%;
    }
}

/*anime------------------------------------------------------------------------------------*/


}
/*スマホ*/
@media screen and (max-width: 667px){
.menu_btn.stick_trans {padding: 24px 18px 15px 18px;}
.menu_btn { padding: 19px 18px 20px 18px;}
    
.logo1 {
    max-width: 120px;
    padding-left: 0px;}

div#main_img {
    padding-top: 90px;}
    
.catch {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 50%;
    max-width: 150px;
}

.main02 {
    top: 24%;
    right: 3%;
    max-width: 102px;}
.main01 {
    top: 26%;
    left: 3%;
    max-width: 104px;}
    
#sp_nav .sp_nav_inner .menu__header .logo3 img {
    max-width: 158px;}
    
#con3 .box_wrap .box {
    width: 100% !important;}
#con3 .box_wrap .box .txt {
    letter-spacing: 2px;}

.f_contact_box h4 {
    margin-bottom: 10px;
    font-size: 30px;}
    
.footer p {
    text-align: center;}
    
#cms_1-a .pager li {
    margin-right: 0px;}
    
.cate_list li {
    width: 100% !important;}
.pagetitle h2 {
    font-size: 25px;}
h3.cate_title {
    letter-spacing: 1px;
    font-size: -webkit-calc(1rem + 3px);
    font-size: calc(1rem + 3px);}

.topTxt1 {
    border-radius: 67px;
    padding: 11px 20px 9px;
    font-size: 16px;
}

#sp_nav .sp_nav_inner .l-menu {
    padding: 6% 7% 8%;}

span.sl {
    padding: 10px !important;}

.font_18 {
    font-size: 17px;}
    
.cmstitle .en {
    font-size: 23px;
    letter-spacing: 0;}

/*anime------------------------------------------------------------------------------------*/
.demo_wrap { animation-duration: 9s;}

#con1{padding-bottom:115px}

.demo_stage{margin-top: 65px;
    margin-bottom:30px;
}

.demo_item {
    width: 180px;
    height: 130px;
    background-image: url(dup/img/demo.png);
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
}

@keyframes GoLeft {
    0% {
        right: 0%;
    }
    100% {
        right: 50%;
    }
}
@keyframes GoRight {
    0% {
        right: 50%;
    }
    100% {
        right: 0%;
    }
}

/*anime------------------------------------------------------------------------------------*/
}


@media screen and (max-width: 320px){
    .cmstitle .en {
    font-size: 21px;
    letter-spacing: 0;
}

#con3 .title .en {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
}

}





/*2022/4/19*/
.cate_list li a {
    display: block;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}