/*-----------
reset
-----------*/
* {margin: 0;padding: 0;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

img {height: auto;}

/*-----------
commone
-----------*/
.left{float: left;}
.right{float: right;}
.listL li{float: left;}

/*flex box*/
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}

.pc{display: block;}
.sp{display: none;}

.font-sawarabi{font-family: 'Sawarabi Mincho', sans-serif;}
.font-note{font-family: 'Noto Serif JP', serif;}

@media screen and ( max-width:560px) {
    .pc{display: none;}
    .sp{display: block;}
}
/*-----------
body
-----------*/
body{position: relative;width: 100%; background:url(../images/bg.jpg) #000 center top;color: #fff; background-size: cover;/*font-family: 'Noto Serif JP', serif;*/background-attachment: fixed;}

/*-----------
header
-----------*/
header{color: #fff; padding: 5px 10px;position: relative;z-index: 10;}
header .inner{width: 98%; margin: 0 auto;display: flex; }
header h1{font-weight: normal; font-size: 0.8em; padding: 0;margin:8px 0 0 0;line-height: 1em;}
header .btn_sns a,header .lang a{margin-left: 0.5em;}
header .btn_sns a:hover{filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;}
header .btn_sns a{ width: 28px; height: 28px; line-height: 1; display: block;}
header .btn_sns a img{ width: 28px; height: 28px; }
header .lang a{border: 1px solid #fff;padding: 4px;color: #fff;text-decoration: none;font-size: 0.8em;height: 28px;box-sizing: border-box;line-height: 1.5em;display: block;}
header .lang a:hover{background: #fff; color: #000;}

@media screen and ( max-width:1200px) {
    header .inner .mleft{margin-left: 0.5em; }
}

@media screen and (max-width: 860px){
    header h1 span{display: none;}
    header .btn_sns{display: none;}
}


@media screen and ( max-width:768px) {
    header h1{font-size: 0.7em;}
}


/*-----------
#TOP
-----------*/
#top{background: url(../images/bg_top.jpg) no-repeat center top; background-size: cover;position: relative;height: 898px; overflow: hidden;}

#main{width: 80%;margin: 0 auto;display: flex;position: relative; z-index: 10;}
#main .txt_area{background: url(../images/bg_top_inner.png) no-repeat center center;width: 52%; max-width: 690px;}
#main.en .txt_area{background: none;}
#main h3{margin-top: 20px;}
#main h2{margin: 14% auto 0; width: 100%;}
#main .btn_ol_top{max-width: 443px; width: 50%;margin: 0 auto;}

.top_img_main{margin-left: -2%;}
.top_img_bg01{position: absolute;top: 0; left: 49%;z-index: 2;}
.top_img_bg02{position: absolute;top: 8%; left: 78%; z-index: 10;}
.ber{display: block; background: #000; height: 40px; position: absolute;width: 100%; top: 0;left: 0;z-index: 1;}

@media screen and ( max-width:1500px) {
    #top{height: auto;}
    #main{width: 95%;}
    #main h3{width: 40%;}
    #main h2{margin-top: 13%;}
    #main .txt_area{background-size: contain;width: 50%;}
    #main .top_img_main{width: 30%;margin-left: 0;}
    .top_img_bg01{width: 68%;}
    .top_img_bg02{width: 15%;left: 82%;}
}

@media screen and ( max-width:960px) {
    #main h3{margin-top: 5%; width: 35%;}
    #main .txt_area{background-size: 50% auto;}
    #main .btn_ol_top{width: 80%;}
}

@media screen and ( max-width:768px) {
    body{background: none;}
    body::before {background:url(../images/bg_sp.jpg);background-size: 100% auto;display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding-bottom: 108px;content: "";z-index: -1;} 
    #main h2{margin-top: 1.5em;}
}

@media screen and ( max-width:560px) {
    #top{background: url(../images/top_img_sp.jpg) no-repeat center 40px; background-size: cover;}
    #top.zh{background: url(../images/top_img_sp_zh.jpg) no-repeat center 40px; background-size: cover;}
    #main .top_img_main,#top .top_img_bg01,#top .top_img_bg02{display: none;}
    #main .txt_area{width: 95%; margin: 0 auto;background: none;}
    #main h3{width: 25%;}
    #main h2{margin-top: 56%;}
}

/*-----------
content
-----------*/
article{background: url(../images/bg_item.png) no-repeat top center; background-size: contain; padding-bottom: 200px;}
article.zh{background: url(../images/bg_item_zh.png) no-repeat top center; background-size: contain; }
article.en{background: url(../images/bg_item_en.png) no-repeat top center; background-size: contain; }
section{width: 100%; max-width: 1200px;margin: 200px auto 0; padding-top: 100px; /* overflow: hidden; */}
section#hiden,section#shitukan,section#taizyutu,section#kansyu{width: 98%;}
section.flex{display: flex;}

section .inner{margin-left: 28px;}
section.en .inner{margin-left: 0;}

section .img_wrap{display: flex; margin-top: 5%;}
section .img_box{position: relative;margin-left:10px;}
section .img_box::after{display: block; position: absolute; background: url(../images/icon.png) no-repeat center center; width: 66px; height: 66px; content: ""; right: 0; top: 0;}
section .img_box.mg0{margin-left:0;}

section h3{flex-shrink: 0; position: relative;}
section h3::after{content: ""; display: block; background: url(../images/ttl_momiji.png) no-repeat; width: 89px; height: 95px; top: -97px; left: 30px; position: absolute;}
section.en h3{position: relative;padding-left: 80px;box-sizing: border-box;}
section.en h3::after{content: ""; position: absolute;top: -42px;left: -2px; display: block;background: url(../images/ttl_momiji_item.png) no-repeat;width: 73px;height: 98px;background-size: contain;}
section h4{background: url(../images/bg_ttl_h4.png) no-repeat center center; line-height: 1em; padding: 45px 0 15px;text-align: center;background-size: contain;}
section.en h4{padding-bottom: 9px;}
section .img_box:hover h4,section .img_box h4:hover{background-image: url(../images/ttl_h4_bass_hover.png);}

section p{font-size: 1.3em;}
section p.mg1em{margin-top: 1em;}

@media screen and ( max-width:1200px) {
    article{overflow: hidden;}
}

@media screen and (max-width: 960px){
    section{margin-top: 15em;}
    section#hiden.en,section#shitukan.en,section#kansyu.en{width: 95%;margin: 0 auto;}
    section .img_box::after{width: 55px; height: 55px;background-size: cover;}
}

@media screen and (max-width: 768px){
    section.en h3{width: auto; padding-left: 40px;}
    section.en h3::after{content: ""; position: absolute;top: -9px;left: -2px; display: block;background: url(../images/ttl_momiji_item.png) no-repeat;width: 40px;height: 54px;background-size: contain;}
    section .inner{margin-left: 1em;}
}

@media screen and (max-width: 560px){
    section .img_box.mg0{margin-left:auto;}
    section{margin-top: 100px}
   
    section h3{width: 48px; padding-left: 0.5em;}
    /* section.en h3{width: auto; padding-left: 35px;} */
    section h3::after{width: 50px; height: 53px; top: -50px; left: 30px; background-size: cover;}
    /* section.en h3::after{content: ""; position: absolute;top: -11px;left: -2px; display: block;background: url(../images/ttl_momiji_item.png) no-repeat;width: 40px;height: 54px;background-size: contain;}
    section .inner{margin-left: 1em;} */
    section .img_wrap{flex-wrap: wrap; flex-direction: column;margin-top: 5%;}
    section .img_box{width: 95%;}
    section .img_box::after{width: 35px; height: 35px;background-size: cover; top: 2px; right: 2px;} 
}

.bg_hiden{background: url(../images/bg_hiden.png) no-repeat; background-position: 80% top;}
.bg_shitukan{background: url(../images/bg_shitsu.png) no-repeat; background-position: 70% top;}
.bg_taizyutu{background: url(../images/bg_taizyutu.png) no-repeat; background-position: 75% top;}
.bg_kansyu{background: url(../images/bg_kanshu.png) no-repeat; background-position: 75% top;}

.bg_hiden.zh{background: url(../images/bg_hiden_zh.png) no-repeat; background-position: 80% top;background-size: 70% auto;}
.bg_shitukan.zh{background: url(../images/bg_shitsu_zh.png) no-repeat; background-position: 70% top;background-size: 65% auto;}
.bg_taizyutu.zh{background: url(../images/bg_taizyutu_zh.png) no-repeat; background-position: 75% top;background-size: 50% auto;}
.bg_kansyu.zh{background: url(../images/bg_kanshu_zh.png) no-repeat; background-position: 75% top;background-size: 50% auto;}


.bg_hiden.en,.bg_shitukan.en,.bg_taizyutu.en,.bg_kansyu.en{background: none;}

@media screen and (max-width: 560px){
    .bg_hiden,.bg_shitukan,.bg_taizyutu,.bg_kansyu,.bg_hiden.zh,.bg_shitukan.zh,.bg_taizyutu.z,.bg_kansyu.zh{background: none;}
}

hr{border: none; background: url(../images/hr.png) no-repeat;width: 90%; max-width: 900px; height: 2px; margin: 15% auto 0;background-size: 100% 2px;}

/*item*/
#item{margin-top: 0; padding-top: 5em;}
#item h3{width: 624px;margin: 0 auto;position: relative;z-index: 0;}
#item.zh h3{width: 519px;}
#item.en h3{max-width: 1200px; padding-left: 80px; width: 98%; margin: 0;}
#item h3::before{content: ""; position: absolute;top: -48px;left: -92px; display: block;background: url(../images/ttl_momiji_item.png) no-repeat;width: 91px;height: 122px;}
#item.en h3::before{content: ""; position: absolute;top: -31px;left: -2px; display: block;background: url(../images/ttl_momiji_item.png) no-repeat;width: 73px;height: 98px;background-size: contain;}
#item h3::after{content: ""; position: absolute;top: 0;left: -270px; display: block;background: url(../images/ttl_h2_item_bg.png) no-repeat;width: 1034px;height: 146px;z-index: -1;}

#item .inner{display: flex; margin-top: 5em; margin-left: 0; position: relative;z-index: 10;}
#item .left_block{display: flex;width: 49%; flex-wrap: wrap;}
#item .right_block{width: 49%;margin: 2em 0 0 1%;}
#item .btn_item{background: url(../images/bg_item_thum.png) no-repeat center center; background-size: contain; line-height: 1em; width: calc((100% / 3) - 0.3em); /* width: 189px; height: 176px; */cursor: pointer;margin-left: 0.3em; position: relative;}

#item .btn_item img.img_ac{display: none;}
#item .btn_item.active img.img_ac,#item .btn_item:hover img.img_ac{display: block;position: absolute;left: 0;top: 0 ;} 
#item .right_block .img_item{display: none;}
#item .right_block .img_item.show{display: block;}
#item .right_block .img_item00{width: 80%; margin: 40% auto 0;display: block;}

@media screen and ( max-width:1200px) {
    article{overflow: hidden;}
}

@media screen and (max-width: 1034px){
	#item h3::after{width: 200%; height: 200px;}
}

@media screen and (max-width: 960px){
    #item .inner{flex-direction: column; margin-top: 3em;}
    #item h3,#item.zh h3{width: 76%;}
    #item h3::before{width: 60px;height: 60px;background-size: contain;top: -10px;left: -50px;}
    #item h3::after{top: -23%; left: -65%;}
    #item h3.zh::after{top: -23%; left: -65%;}
    #item.en h3{width: auto; padding-left: 40px; width: 95%; margin: 0 auto; box-sizing: border-box;}
    #item.en h3::before{content: ""; position: absolute;top: -9px;left: -2px; display: block;background: url(../images/ttl_momiji_item.png) no-repeat;width: 40px;height: 54px;background-size: contain;}
    #item .left_block,#item .right_block{width: 98%; margin: 0.5em auto 0;}
    #item .btn_item{width: calc((100% / 5) - 0.3em); height: auto;}
    #item .right_block .img_item00{width: 70%; margin: 10% auto 0;}
}

@media screen and (max-width: 560px){
    #item{padding-top: 10%;}
    /* #item.en h3{width: auto; padding-left: 35px; width: 95%; margin: 0 auto; box-sizing: border-box;}
    #item.en h3::before{content: ""; position: absolute;top: -11px;left: -2px; display: block;background: url(../images/ttl_momiji_item.png) no-repeat;width: 40px;height: 54px;background-size: contain;} */
    section .inner{margin-left: 1em;}
}


/*#秘伝・3D彩色・三連*/
#hiden h4{ margin-top: -45px;}
#hiden .img_wrap{flex-wrap: wrap;}
#hiden .img_box{width: calc((100% - 10px) / 2);}

@media screen and ( max-width: 960px){
    #hiden.en h3 img{ width: 80%;}
}
@media screen and (max-width: 560px){
    #hiden .img_box{width: 95%;} 
    #hiden.en h3 img{ width: 100%;}
}
/*#質感再現の塗装術*/
#shitukan .img_wrap{flex-wrap: wrap;}
#shitukan .img_box{width: calc((100% - 10px) / 2);}
#shitukan h4{ margin-top: -35px;}

@media screen and ( max-width: 960px){
    #shitukan.en h3 img{ width: 85%;}
}

@media screen and (max-width: 560px){
    #shitukan.en h3 img{ width: 100%;}
    #shitukan .img_box{width: 95%;} 
    #shitukan.en .img_box{margin: 0 auto;} 
}

/*#figmaの体術*/
/* #taizyutu.en h3{ width: 586px; margin: 0 auto;} */
#taizyutu .img_warap.free{margin-top: -10%;}
#taizyutu .img_pc{display: block;}
#taizyutu .img_sp{display: none;}

@media screen and (max-width: 960px){
    #taizyutu.en{width: 100%;}
    #taizyutu.en h3,#taizyutu.en .inner p{width: 95%;margin: 0 auto;}
    #taizyutu.en h3 img{ width: 50%;}
}

@media screen and (max-width: 800px){
    #taizyutu .img_warap.free{margin-top: 0;}
    #taizyutu .img_pc{display: none;}
    #taizyutu .img_sp{display: block;}
}

@media screen and (max-width: 560px){
    #taizyutu.en h3 img{ width: 100%;}
}

/*#監修の記憶*/
#kansyu h4{background-size:100% auto; margin-top: -35px;}

@media screen and (max-width: 960px){
    #kansyu.en h3{width: 75%;}
}

@media screen and (max-width: 560px){
    #kansyu.en{width: 100%;}
}


/*オンライン*/
#online{background: url(../images/bg_ol.png);max-width: 100%; background-position: top center;background-repeat: no-repeat; padding: 40px 0 50px; background-size: 1500px auto;}
#online.en{padding-bottom: 75px;}
#online .inner{max-width: 1200px; width: 98%;margin: 0 auto; display: flex;padding: 5em 0; flex-direction: row-reverse;}
#online.en .inner{padding: 3em 0 4em;}
#online h3{max-width: 690px; width: 98%;}
#online.en h3{padding-left:0;}
#online h3::after{display: none;}
#online .left_block{width: 57%;}
#online .left_block .btn_ol a{display:block;border: 1px solid #fff;background: rgba(0,0,0,0.5);padding: 1em 2em; text-align: center;margin: 0.5em auto 0;transition: all 0.2s linear;}
#online .left_block .btn_ol a:hover{background: rgba(0,0,0,0.3);}
#online .left_block .btn_ol.dx a{width: 80%; line-height: 1em;}
#online .left_block .btn_ol.normal a{width: 50%; line-height: 1em;}
#online .left_block p{text-align: center;margin-top: 0.5em;}
#online .left_block p a{color:#ff6d6d;}
#online .left_block p a:hover{text-decoration: none;}
#online .right_block{margin-left: 2%; display: flex;align-items: flex-start;}
#online .right_block img{align-self: center;} 

@media screen and (max-width: 1200px){
    #online{ background-size: cover;background-repeat: no-repeat; padding: 0 0 50px; }
}
@media screen and (max-width: 960px){
    #online{background-size:cover;}
    #online .inner{flex-direction: column;}
    #online .right_block{width: 70%; margin: 5% auto 0;}
    #online .right_block img{width: 100%;}
    #online .left_block{width: 90%; margin: 5% auto 0;}
    #online .left_block h3{width: 80%; margin: 0 auto;}

    /* #online .right_block img{width: 100%; height: auto;} */
}

@media screen and (max-width: 560px){
    #online .right_block{width: 90%; margin: 5% auto 0;}
   
}

/*-----------
footer
-----------*/
footer{background-color: #000;padding: 1em 1% 3em;}
footer .inner{display: flex;box-sizing: border-box;justify-content: space-between;align-items: flex-start; }
footer .left_block{display: flex; font-size: 0.8em;} 
footer .left_block a{width: 25%; }

footer .left_block p{margin-left: 0.5em; width: 100%;} 
footer .right_block{width: 25%; text-align: right;}
footer .right_block .sns_box{display: flex; margin-top: 1em; justify-content: flex-end;}
footer .right_block a{color: #fff; text-decoration: none;}
footer .right_block a:hover{text-decoration: underline;}
footer .small{font-size: 0.8em; text-align: right; margin-top: 1em;}

footer .btn_sns a{margin-left: 0.5em;}
footer .btn_sns a:hover{filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;}
footer .btn_sns a{ width: 28px; height: 28px; line-height: 1; display: block;}
footer .btn_sns a img{ width: 28px; height: 28px; }

@media screen and (max-width: 960px){
    footer .left_block a{width: 20%;}
    footer .left_block p br{display: none;} 
    footer .inner/* ,footer .left_block */{flex-direction: column;}
    footer .right_block{width: 100%; text-align: left; margin-top: 2em;}
    footer .right_block .sns_box{justify-content: flex-start;}
    footer .small{text-align: left;}
}