/* ------------- my css ------------- */



/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
:root{
    --color1: #5cadea; 
    --color2: #eefdff; 
    --color3: #7dc1ea; 
    --color4: #ffc17d; 
    --black: #151a1e; 
}

.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}


/*自動リンク設定*/
.linkStyle{
    color:var(--color1);
}
.linkStyle:hover{
	opacity:0.7
}





/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 10px;
    right: 0;
    left: 0;
    z-index: 5;
    width: 70%;
    max-width: 350px;
    transition: 0.5s;
    opacity: 0;
    margin: auto;
}
#fix_bnr.scroll{
    opacity: 1;
}
#fix_bnr.close{
    opacity: 0;
    z-index: -1;
}

#fix_bnr:hover{
    scale: 1.2;
}
@media screen and (max-width: 768px){
#fix_bnr{
    max-width: 400px;
}
#fix_bnr.close{
    transform: translateX(200px);
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 77% !important;
    right: auto;
    left: 20px;
    margin: auto;
    bottom: 10px;
    opacity: 0;
}
}

.vibrate-realistic, #fix_bnr a:hover img {
  animation: realisticVibrate 2s infinite;
  display: inline-block;
}

/* fix_bnr end ---------------------------------------------------------------------------------------------*/


/*------------- header -------------*/
#pc_nav_fix .font_2dw{
    font-size: 16px;
}

#pc_nav_fix .width_150 {
    width: 170px;
}

@media screen and (max-width: 768px){
    #wrap{
        padding-top: 0 !important;
    }
    #header.top #pc_nav_fix {
    padding: 5px 0;
    }
    #pc_nav_fix {
    background-color: rgba(255, 255, 255, 0.7);
    }
    
}


/*------------- FV -------------*/
#head_logo{
    display: none;
}

.FV_btm{
    z-index: 2;
    bottom: -1px;
}

#main_img .scroll_bar {
    left: 80px;
    bottom: 80px;
}
#main_img .main_txt{
    width: 90%;
    z-index: 2;
    top: 40%;
    left: 5%;
    filter: drop-shadow(0px 0px 6px rgba(0,107,173,0.5));
}

#main_img .main_txt .img1{
    max-width: 700px;
    filter: drop-shadow(0px 0px 6px rgba(0,107,173,0.5));
}

#main_img .sub_txt{
    line-height: 1.1;
    color: #fff;
    font-size: 90px;
    font-weight: 600;
    filter: drop-shadow(0px 0px 4px rgba(0,107,173,0.5));
}

.txt_anim6 span{
	display: inline-block;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	opacity: 0;
}
.txt_anim6 span.start{
	-webkit-animation-name: slide-bs;
	animation-name: slide-bs;
	opacity: 1;
}
@keyframes slide-bs{
	0%{-webkit-transform: translateY(20px);transform: translateY(20px);}
	100%{-webkit-transform: translateY(0);transform: translateY(0);}
}

@media screen and (max-width: 768px){
    #main_img .main_txt{
    top: auto;
    bottom: 13%;
}

#main_img .main_txt .img1{
    max-width: 390px;
}
#main_img .sub_txt{
    font-size: 40px;
    
}
}
@media screen and (max-width: 667px){
    #main_img {
    height: 70vh !important;
}
    #main_img .main_txt .img1 {
        max-width: 270px;
    }
#main_img .sub_txt {
    font-size: 30px;
}
}

/*------------- TOP -------------*/
#intro .intro_txt_wrap{
    padding-right: 100px;
}

#top_contents .box_img{
    background-image: linear-gradient(109deg, #43b7ff, #94d7cc 36%, #ffc68f);
}

.more a{
    border-radius: 50px;
   background-image: linear-gradient(109deg, #43b7ff, #94d7cc 36%, #ffc68f);
}


#top_contents::before{
    background-color: #ebf4f7;
}
.item1{
    bottom: 0;
    left: 5%;
    width: 60%;
    max-width: 220px;
}
.illust1{
    bottom: 0;
    right: 5%;
    width: 60%;
    max-width: 130px;
    z-index: 3;
}

.illust2{
    bottom: 0;
    left: 45%;
    width: 60%;
    max-width: 70px;
}

.illust3{
    top: -5%;
    right: 10%;
    width: 60%;
    max-width: 130px;
}

.illust4{
    bottom: 0;
    right: 10%;
    width: 25%;
    max-width: 150px;
}

.illust5{
    bottom: 0;
    right: 10%;
    width: 20%;
    max-width: 150px;
}

@media screen and (max-width: 768px){
        #intro {
        padding-bottom: calc(60vw - 20px);
    }
#intro .intro_txt_wrap{
    padding-right: 20px;
}
.item1{
    max-width: 150px;
}
.illust1,.illust3{
    max-width: 100px;
}
.illust2{
    max-width: 60px;
}
.illust4,.illust5{
    max-width: 110px;
}
    #intro .intro_img {
        height: 60vw;
        top: auto;
        bottom: 0px;
    }

}

@media screen and (max-width: 667px){
    #top_info .info_box{
        padding-bottom: 150px;
    }
    .item1{
    max-width: 110px;
}
    .illust1,.illust3{
    max-width: 60px;
}
.illust2{
    max-width: 45px;
}
}

/*------------- 下層 -------------*/
@media screen and (max-width: 768px){
#page_title {
    margin-bottom: 75px;
}
}


/*------------- ブログ -------------*/
.blog_list .blogListPattern_1_item a{
    border-color: var(--color3);
}

/*------------- footer -------------*/

#top_info #footer_map, #info_map{
    display: none;
}
@media screen and (max-width: 768px){
footer .footer_img {
    height: 180px;
}
}