@import url('https://fonts.googleapis.com/css2?family=Splash&display=swap');



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

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #33ccff} /* メインカラー */
.bg_color2{background-color: #A5E8FF} /* サブカラー */
.bg_color3{background-color: #DFA340} /* アクセントカラー1 */
.bg_color4{background-color: #33ccff} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #33ccff}
.border_color2{border-color: #A5E8FF}
.border_color3{border-color: #DFA340}
.border_color4{border-color: #33ccff}


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

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

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #33ccff}
.hvr_border_color2:hover{border-color: #A5E8FF}
.hvr_border_color3:hover{border-color: #DFA340}
.hvr_border_color4:hover{border-color: #33ccff}


#fakeloader{
    background-color: white;
}

.top header{
    opacity: 1!important;
    z-index: 5;
    background-color: #007aff36;
}

#pc_nav{
    display: block!important;
}

.menu {
    display: none;
} 


#logo{
    width: 100%;
    max-width: 117px;
}

header {
     background-color: #007aff36;
}

header .scr_header {
     background-color: none;
}

.bg_color1 {
    background-color: #4ae;
}

#fakeloader .fl {
    position: absolute!important;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%,-50%)!important;
    width: 50%!important;
    max-width: 500px;
}

.more_btn img{
    vertical-align: bottom;
    width: 50%;
    height: auto;
}




body,a{cursor: none}
.cursor{
    width: 8px;
	height: 8px;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 999;
	transition: 0.3s;
	transition-property: opacity,background,width,height,transform
}
.cursor::before {
    content: " ";
    display: block;
    width: 65px;
    height: 65px;
    position: relative;
    top: -22px;
    left: -18px;
    opacity: 1;
    transition: 0.3s;
    background-image: url("../dup/img/cursor.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.cursor.is-active{
	opacity: 1;
	background-color: transparent;
	transform: scale(1.8);
}

/*main{
background: rgb(250,250,250);
background: linear-gradient(129deg, rgba(250,250,250,1) 68%, rgba(0,191,246,1) 100%);
}*/


@media screen and (max-width: 667px){
#pc_nav ul{display: none;}
    
.width_200-max_sp {
    width: 32%;
}    
  
  
.button_container {
    position: absolute;
    top: 66%;
    right: 5%;
    -ms-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    height: 40px;
    width: 35px;
    padding: 10px;
    cursor: pointer;
    z-index: 12;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
}  

.cursor{display:none;}  
    
}


#form_area{display:none;}

.mail_box a{
    font-size: 21px;
}

/*.num {
    
    font-family: 'Splash', cursive;}*/
    
#intro {color: #56383a;
}

main{
    background-image: url(dup/img/back5.png);
   
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 30px;
}


#main_img:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 50%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


.cms_5-a .box_wrap {
    background-color: white;
}
.txt{
    color: #33ccff;
     z-index: 2;
   padding-top: 200px;  
   font-family: 'Hannari';
   font-size: 29px;
} 


.sample  {
    vertical-align: bottom;
    width:auto;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 2;
    
    background-attachment: center;
    background-position: right; 
background-position: bottom;
background-position: center;
}



.sample2  {
    vertical-align: bottom;
    width:auto;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 2;
    background-repeat: none;
    background-attachment: center;
    background-position: right; 
    background-position: bottom;
    background-position: center;
    bottom:169px;
}

header.scr_header #logo {
    max-width: 91px;
}

#foot_banner {
    z-index: 99;
    width: 280px;
    right: 90px;
    bottom: 10px;
}


/* foot_banner */
#foot_banner{
    z-index: 99;
    width: 280px;
    right: 90px;
    bottom: 10px;
}
#foot_banner a {
    font-size: 16px;
    text-align: center;
    padding: 21px 70px 21px 102px;
    box-sizing: border-box;
    border-radius: 45px;
}
#foot_banner .foot_icon{
    width: 63px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 667px){
.tel_box a {
    font-size: 18px;
}
    
.mail_box a{
    font-size: 15px;
}
    
    
}



#fix_bnr{
    bottom: 10px;
    right: 10px;
    z-index: 4;
    width: 260px;
}
#fix_bnr .fix_bnr_btn{
    line-height: 1;
    top: -10px;
    left: -8px;
    cursor: pointer;
}
@media screen and (max-width: 768px){
    #fix_bnr {
        width: 260px;
    }
}
@media screen and (max-width: 667px){
    #fix_bnr {
        bottom: 7px;
        right: 72px;
        width: 65%;
    }
    

#logo img  {
    vertical-align: bottom;
    width: 100%;
    height: auto;
}   
}

.letter_3 {
    letter-spacing: 0px;
}


@media screen and (max-width: 667px){

    .txt {
    color: #33ccff;
    z-index: 2;
    padding-top: 20px;
    font-family: 'Hannari';
    font-size: 17px;
}}

@media screen and (max-width: 667px){
.tel_box a {
    font-size: 16px;
}}

.column a{
    color: #3c2d2d;
}

.column i{
    color: #3c2d2d;
}


/* CMSバナー */
.btn_container a{padding: 8px 30px;}

.nav_menu_more mg_t-10px a{display:none;}