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

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
:root{
    --color1: #1876e8; 
    --color2: #eaf2f9; 
    --color3: #19468e; 
    --color4: #f2e75a; 
    --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
}

.font_en {
    font-family: "Rubik","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, " メイリオ", Meiryo, Osaka, " ＭＳ Ｐゴシック", MS PGothic, " sans-serif";
}
body {
    font-size: 16px;
}

.flex_box{
    min-width: 1280px;
}

header{
    min-width: 281.594px;
}

@media screen and (max-width: 768px) {
   .flex_box {
    min-width: auto;
}
header{
    min-width: auto;
}
}


/*------------- header -------------*/

header .button:hover::after {
    box-shadow: inset 0 0 0 15em #fff;
}
.button:hover::after {
    box-shadow: inset 0 0 0 15em var(--color1);
}

.link_box .flex_space-between{
    justify-content: center;
}

.link_box .flex_space-between li{
    margin: 0 20px;
}
@media screen and (max-width: 768px) {
header{
    height: 75px;
    padding: 17px 0 !important;
}
}

@media screen and (max-width: 667px) {
header{
    height: 60px;
}
}

/*------------- nav -------------*/

#sp_nav li a.border_so1{
    color: var(--color1);
}

#sp_nav .txt_color_nomal{
    color: var(--color1);
}

.fat-nav li a {
    font-weight: 600;
}

.fat-nav li {
    font-size: 16px;
}

@media screen and (max-width: 667px) {
    .hamburger {
        top: 11px;
    }
    
}

/*------------- FV -------------*/

.slides{
    opacity: 0.9;
}
.main_txt{
    z-index: 2;
    bottom: 0;
    right: 0;
    mix-blend-mode: hard-light;
    width: 102%;
}

.sub_txt{
    z-index: 2;
    right: 0;
    width: 40%;
    max-width: 500px;
}

.scroll_bt{
    display: none;
}
@media screen and (max-width: 768px) {
    #main_img img.object_fit_img {
    max-height: 70vh;
    min-height: 70vh;
    }
    .sub_txt{
    width: 60%;
    }
    .main_txt{
    width: 100%;
}
}
@media screen and (max-width: 667px) {
    #main_img img.object_fit_img {
    max-height: 50vh;
    min-height: 50vh;
    }
}


/*------------- top -------------*/

.more .txt_color_nomal{
    color: var(--color1);
}
.more .txt_color_nomal:hover{
    color: #fff;
}

#contents2 h2::first-letter,#contents3 h3::first-letter,#contents4 h3::first-letter{
    font-size: 100%;
    color: var(--color4);
}
  #contents2 .txt_box , #contents4 .txt_box {
     font-size: 16px;
    font-weight: bold;
    line-height: 2;
}


@media screen and (max-width: 768px) {
    #contents1,#contents2,#contents3,#contents4 {
        padding-left: 50px;
        padding-right: 50px;
    }
    
}
@media screen and (max-width: 667px) {
    #contents1,#contents2,#contents3,#contents4 {
        padding-left: 30px;
        padding-right: 30px;
    }
   #contents2 .txt_box , #contents4 .txt_box {
        font-size: 14px;
}   
}


#contents1 .top_car{
    right: 0;
    bottom: -5%;
    width: 35%;
    max-width: 500px;
}


#contents1 h2{
    border: none;
    transform: none;
    -webkit-transform:none;
}

#contents1 h2:before {
    display: none;
}
#contents1 h2 span{
    transform: none;
    -webkit-transform:none;
    padding: 0;
}


#contents2 h2, #contents3 h3,#contents4 h3 {
    padding-bottom: 5px;
}

#contents4 h3  {
    font-size: 30px;
    border-bottom: 1px solid;
}

.blur {
    background-color: rgba(24, 111, 212, 0.2);
    
}


@media screen and (max-width: 768px) {
    #contents2 h2, #contents3 h3 ,#contents4 h3 {
        font-size: 20px;
        
        
    }
    #contents1{
        padding-bottom: 38%;
    }
    #contents1 .top_car{
    width: 80%;
    right: 50%;
    transform: translateX(50%);
}

}


/*-------------footer -------------*/
.foot_tel_bt .txt_color_nomal{
    color: var(--color1);
}
.foot_tel_bt .txt_color_nomal:hover{
    color: #fff;
}


/*------------- 下層 -------------*/

#page_title .page_box::before{
    display: none;
}
#page_title .page_box {
    padding-left: 20px;
}
.cate_list a{
    color: var(--color1);
}

@media screen and (max-width: 768px) {
        .page_box{
            margin-bottom: 20px;
        }
.cate_list .grid_4{
    width: 100% !important;
}

}

@media screen and (max-width: 667px) {
    .all article section:first-of-type {
                padding: 0px 10px 30px;
    }
}

/*------------- プライバシーポリシー -------------*/
#google_privacy{
    background-color: var(--color2) !important;
}

/*------------- よくある質問 -------------*/

@media screen and (max-width: 667px) {
    .faq_title{
    padding:0 20%;
    }
    .faq_title-s{
    padding:0 36%;
    }
    
}


/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 30px;
    right: 0;
    left: 0;
    z-index: 10;
    width: 70%;
    max-width: 450px;
    transition: 0.5s;
    opacity: 1;
    margin: auto;
}
#fix_bnr.scroll{
    opacity: 1;
}
#fix_bnr.close{
    opacity: 0;
    z-index: -1;
}
@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: 80% !important;
    margin: auto;
    bottom: 10px;
    opacity: 0;
}
}

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

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