/* CSS Document */
/* color */
body,.txt_color_nomal{color: #1a1a1a;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #1a1a1a} /* メインカラー */
.txt_color2{color: #eaeaea} /* サブカラー */
.txt_color3{color: #999999} /* アクセントカラー1 */
.txt_color4{color: #c9c9c9} /* アクセントカラー2 */

/* background-color */
#wrap{background-color: white;} /* 全体背景 */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #1a1a1a} /* メインカラー */
.bg_color2{background-color: #ffffff} /* サブカラー */
.bg_color3{background-color: #999999} /* アクセントカラー1 */
.bg_color4{background-color: #c9c9c9} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #ddd}
.border_color2{border-color: #eaeaea}
.border_color3{border-color: #999999}
.border_color4{border-color: #c9c9c9}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #1a1a1a;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #1a1a1a} /* メインカラー */
.hvr_txt_color2:hover{color: white} /* サブカラー */
.hvr_txt_color3:hover{color: #999999} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #c9c9c9} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #1a1a1a} /* メインカラー */
.hvr_bg_color2:hover{background-color: #eaeaea} /* サブカラー */
.hvr_bg_color3:hover{background-color: #999999} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #c9c9c9} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #1a1a1a}
.hvr_border_color2:hover{border-color: #eaeaea}
.hvr_border_color3:hover{border-color: #999999}
.hvr_border_color4:hover{border-color: #c9c9c9}



.txt2{
    z-index: 5;
    padding-top: 28%;
   padding-left:44%;
} 

#contents{
    background-image: url(dup/img/back.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.sample{
       vertical-align: bottom;
      z-index: 5;
    background-position: center;
     LEFT: 8%;
    BOTTOM: -60%;
    top: 10%;
    position: fixed;
}

.intro_txt p{
    font-weight: bold;}
    
.con_txt_wrap p{
    font-weight: bold;
    
}
    
    
.con_txt_wrap {
    background-color: hwb(0deg 100% 0% / 50%);
}

.bnr {
       position: absolute;
    
    padding-top: 3px;
    box-sizing: border-box;
    max-width: 302px;
    z-index: 2;
    bottom: 4px;
  right: 36%;
}


#foot_banner{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 302px;
    z-index: 2;
    bottom: 5px;
    right: 100px;
}


.bur{
    vertical-align: bottom;
    width: 22%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 96%;
    left: 40%;
}

.bur2 {
    vertical-align: bottom;
    width: 20%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 70%;
    left: 42%;
}


main{
    background-image: url(dup/img/back.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}


.haikei2{
    vertical-align: bottom;
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 0;
    top:29%;
    left: 0%;
    background-repeat: repeat;
}

#intro{
    z-index: 3;
}




/*----スマフォロゴ------*/
@media screen and (max-width: 667px){
#logo{display: none;}
 }
 
 /*----------*/
 
 
      
#fakeloader {
    background-color: #4ae;
}



.drawer-hamburger-icon  {
    background-color: #9cffa4;
}


/*----スマフォ------*/
@media screen and (max-width: 414px){
.txt1 {
    padding-top: 59%;
    padding-left: 20%;
    z-index: 5;
    font-size: 26px;
}
    
    
.txt2  {
    z-index: 5;
    padding-top: 68%;
    padding-left: 21%;
    color: #e7e013;
        font-size: 20px;
}

.bur {
    vertical-align: bottom;
    width: 57%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 98%;
    left: 23%;
}

.bur2 {
    vertical-align: bottom;
    width: 57%;
    height: auto;
    position: absolute;
    z-index: 3;
   top: 60%;
    left: 37%;
}
#foot_banner {
    font-size: 16px;
    text-align: center;
    padding-top: 33px;
    box-sizing: border-box;
    max-width: 287px;
    z-index: 2;
    bottom: 5px;
    right: 3px;
    width: 29%;
    top: 73%;
}

.haikei2 {
    vertical-align: bottom;
    width: 115%;
    height: auto;
    position: absolute;
    z-index: 0;
    top: 28%;
    left: -7%;
}
.sample2 {
    vertical-align: bottom;
    width: 120px;
    height: auto;
    position: relative;
    position: absolute;
    /* bottom: 8%; */
    left: 1%;
    padding-top: 50%;
    background-repeat: no-repeat;
}

.drawer-hamburger-icon::before {
    height: 4px!important;
}
.drawer-hamburger-icon {
    height: 4px!important;
}

.drawer-hamburger-icon:after{
    height: 4px!important;
}

}

@media screen and (max-width: 375px){
.txt1 {
    padding-top: 59%;
    padding-left: 20%;
    z-index: 5;
    font-size: 26px;
}
  
    
.txt2  {
    z-index: 5;
    padding-top: 68%;
    padding-left: 21%;
    color: #e7e013;
        font-size: 20px;
}

.bur {
    vertical-align: bottom;
    width: 57%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 95%;
    left: 23%;
}

.bur2  {
    vertical-align: bottom;
    width: 57%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 58%;
    left: 39%;
}


/*.menu_bt {
    background-color: white;
    padding: 7px;
    padding-top: 5px;
    margin: 7px;
    padding-right: -7px;
    left: 8px;
}*/

#foot_banner {
    font-size: 16px;
    text-align: center;
    padding-top: 33px;
    box-sizing: border-box;
    max-width: 287px;
    z-index: 2;
    bottom: 5px;
    right: 3px;
    width: 29%;
    top: 61%;
}

.sample2 {
    vertical-align: bottom;
    width: 104px;
    height: auto;
    position: relative;
    position: absolute;
    /* bottom: 8%; */
    left: 4%;
    padding-top: 76%;
    background-repeat: no-repeat;
}

.drawer-hamburger-icon::before {
    height: 4px!important;
}
.drawer-hamburger-icon {
    height: 4px!important;
}

.drawer-hamburger-icon:after{
    height: 4px!important;
}

}
 /*----------*/
 
 
 
 
 
.cate_box  {
    background-color: rgb(255 255 255 / 55%);
}

.cate_txt1  {
    background-color: rgb(255 255 255 / 55%);
        padding: 20px;
}


.rogo3
 {
    width: 100%;
    max-width: 154px;
}
.cate_title  {
    background-color: #f39b09;
}

/*.menu_bt {
    background-color: white;
    padding: 10px;
    padding-top: 2px;
    margin: 9px;
}*/

footer .bg_color2  {
    background-color: #8fcccc;
}

.cate h3{
    color: white;
}


#header_menu li{
    background-color: #fffc9c;
    padding: 7px;
}

#header_menu p{
    padding-top: 0px;
  
    padding-left: 15px;
        
}

.sample2 {
    vertical-align: bottom;
    width: 156px;
    height: auto;
    position: relative;
    position: absolute;
    left: 4%;
    padding-top: 20%;
    background-repeat: no-repeat;
}





/*----スマフォ------*/

@media screen and (max-width: 375px){
.sample2 {
    vertical-align: bottom;
    width: 104px;
    height: auto;
    position: relative;
    position: absolute;
    /* bottom: 8%; */
    left: 4%;
    padding-top: 76%;
    background-repeat: no-repeat;
}}



@media screen and (max-width: 414px){
.sample2 {
    vertical-align: bottom;
    width: 104px;
    height: auto;
    position: relative;
    position: absolute;
    /* bottom: 8%; */
    left: 4%;
    padding-top: 76%;
    background-repeat: no-repeat;
}}

 /*----------*/

#header_menu p span{
    padding-top: 6px;
    padding-left: 15px;
        padding: 12px;
}

header #header #header_menu li {
    width: auto!important;
    letter-spacing: 3px;
    padding: 8px 1%;
}


@media screen and (max-width: 375px){
header .menu_bt {
    margin-left: 6px;
    left: -6px;
    padding-left: 6px;
}}


#cms_4-a .cate_title{
padding: 10px;
}


@media screen and (max-width: 146px){
#foot_banner {
    font-size: 16px;
    text-align: center;
    padding-top: 33px;
    box-sizing: border-box;
    max-width: 287px;
    z-index: 2;
    bottom: 5px;
    right: 3px;
    width: 29%;
    top: 54%;
}


.bur2 {
    vertical-align: bottom;
    width: 57%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 59%;
    left: 37%;
}


}

.drawer-hamburger-icon::before{
    background-color: #9cffa4!important;
}

.drawer-hamburger-icon:after{
       background-color: #9cffa4!important;
}


@media screen and (max-width: 390px){
#foot_banner {
    font-size: 16px;
    text-align: center;
    padding-top: 33px;
    box-sizing: border-box;
    max-width: 287px;
    z-index: 2;
    bottom: 5px;
    right: 3px;
    width: 29%;
    top: 70%;
}
    
.bur2 {
    vertical-align: bottom;
    width: 51%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 59%;
    left: 43%;
}
#logo2 {
    width: auto;
}
}


@media screen and (max-width: 393px){
.bur2 {
    vertical-align: bottom;
    width: 53%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 59%;
    left: 40%;
}
#logo2 {
    width: auto;
}
}


@media screen and (max-width:375px){
#foot_banner {
    font-size: 16px;
    text-align: center;
    padding-top: 33px;
    box-sizing: border-box;
    max-width: 287px;
    z-index: 2;
    bottom: 5px;
    right: 3px;
    width: 29%;
    top: 66%;
}
    
.bur2 {
    vertical-align: bottom;
    width: 51%;
    height: auto;
    position: absolute;
    z-index: 3;
    top: 59%;
    left: 43%;
}

#logo2 {
    width: auto;
}
}

#cate1 .cate_box h3{
    color: #007aff;
}


#intro{
    background-image: url(dup/img/back2.png);
    background-attachment:absolute;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

header #logo .logo {
    width: 184%;
}

#logo2 {
    width: 500px;
}

@media screen and (max-width:375px){
#logo2 {
    width: auto;
}
    
    
#intro{background-image: none;}
}

@media screen and (max-width:414px){
#logo2 {
    width: auto;
}
    
    
#intro{background-image: none;}
}

.con_txt_wrap  {
    z-index: 2;
}

#foot_banner11{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 302px;
    z-index: 2;
    bottom: 5px;
    right: 100px;
    top: 64%;
}

#foot_banner22{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 302px;
    z-index: 2;
    bottom: 5px;
    right: 100px;
    top: 76%;
}

#foot_banner33{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 302px;
    z-index: 2;
    bottom: 5px;
    right: 100px;
    top: 87%;
}




#foot_banner00 {
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 32px;
    box-sizing: border-box;
    max-width: 302px;
    z-index: 2;
    bottom: 5px;
    right: 100px;
    top: 51%;
}

@media screen and (max-width: 768px){
#foot_banner11{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 250px;
    z-index: 2;
    bottom: 5px;
    right: 46px;
    top: 62%;
}

#foot_banner22{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 250px;
    z-index: 2;
    bottom: 5px;
    right: 46px;
    top: 70%;
}

#foot_banner33{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 250px;
    z-index: 2;
    bottom: 5px;
    right: 46px;
    top: 80%;
}
#foot_banner00 {
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 32px;
    box-sizing: border-box;
    max-width: 250px;
    z-index: 2;
    bottom: 5px;
    right: 46px;
    top: 51%;
}
    
.rogo3{
    display: none;
}

#page-top {
    position: fixed;
    right: 50px;
    z-index: 99;
}

main {
    background-image: url(dup/img/back.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
}

}

@media screen and (max-width: 667px){
#foot_banner11{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 150px;
    z-index: 2;
    bottom: 5px;
    right: 26px;
    top: 61%;
}

#foot_banner22{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 150px;
    z-index: 2;
    bottom: 5px;
    right: 26px;
    top: 68%;
}

#foot_banner33{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 150px;
    z-index: 2;
    bottom: 5px;
    right: 26px;
    top: 76%;
}
#foot_banner00 {
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 32px;
    box-sizing: border-box;
    max-width: 156px;
    z-index: 2;
    bottom: 5px;
    right: 26px;
    top: 51%;
}
    
#page-top {
    position: fixed;
    right: 27px;
    z-index: 99;
}
}