/*毎回いる*/
.f_contact_box h4 {
    font-size: 33px;
    padding-bottom: 10px;}

.menu_btn.stick_trans span:last-child { margin-top: -3px;}

/*font--------------------------------------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6,a span,.l-menu ul li a,.f_sitemap_inner li a,.copy,.topTxt1,.f_contact_btn a,.jp,.more a,#con2 .font_22,.con1_inner,.f_contact_box p,.tel,#page10 .sitemap li a,.contact_tel a,.contact_mail a{
    font-family:'Zen Old Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
        transform: rotate(0.03deg);
}

body{font-family:'Zen Kaku Gothic Antique', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}

.contact_tel a i {font-weight: normal;}

.opacity07,.opacity08 {opacity: 0.9 !important;}

.font_14 {font-size: 15px;}

ul.f_sitemap_inner li a {
    font-size: 15px;
    letter-spacing: 1px;}

/*font--------------------------------------------------------------------------------------------------------------*/

/* -----------------------------　ボディ　------------------------------------- */
body{
    overflow: hidden;
}



.pagetop {
    z-index: 1;
}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#main_img,#con1,#con2 > div,#con2 .topimg3,#con3,#con3 .box_wrap,#con4,#topCms,
.cmstitle,.footer_contact,.pagetitle{position: relative;}
/*リピートなし*/
#main_img:before,#main_img:after,#main_img .catch,#con2 > div:before,#con2 .topimg3:before,#con3 .box_wrap:before,#con3 .box_wrap:after,
#con1:before,#con1:after,#con2:before,#con2:after,#con3:before,#con3:after,#con4:before,#con4:after,#topCms:before,#topCms:after,
.cmstitle:before,.footer_contact:before,.footer_contact:after,.pagetitle:before,.pagetitle:after{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

/* color -----------------------------------------------------------------------------*/
:root {
    --color1: #18244a;
    --color2: #aab8e3;
    --color3: #aab8e3;
    --color4: #18244a;
    --color5: #18244a;
    --color6: #aab8e3;
    --color7: #eceff8;
    --white: #ffffff;
    --black: #010e38;
    --gray: #ccc;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.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 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.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_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.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);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}

/* ----------　linkStyle　---------- */
.linkStyle{
    color: var(--color1);
    border-bottom:solid 1px;
}

.linkStyle:hover{
	color: var(--color7);
	opacity: 0.7;
	transition: all 0.5s;
}

body#body {
    background: var(--white);
}

.txt_title{
	color: var(--color4);
}



#sp_nav .sp_nav_inner .l-menu li a {
    color: var(--color1);
}

/* color -----------------------------------------------------------------------------*/
#main_img {
    height: 100vh;
}
/* ----------　custom_box　---------- */
/* CSS Document */
/*フェードインcss*/
.fadein_up{
    opacity : 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
	transition:transform 1.5s ease,opacity 2s ease; 
}

.fadein_up.scrollin{
    opacity : 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.fadein_up2{
    opacity : 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
	transition:transform 2s ease,opacity 2s ease; 
}

.fadein_up2.scrollin{
    opacity : 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


/*@keyframes fadeout-anim {*/
/*	100% {*/
/*		opacity: 0;*/
/*	}*/
/*}*/

.catch {
    animation: fadeout-anim 10s linear forwards;
    max-width: 1000px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 14Vw;
    z-index: 1;
    left: 50%;
    bottom: auto;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
}
/* ----------　custom　---------- */


/* ----------　背景画像　▼---------- */
#sp_nav {
    background-color: var(--color3);
    background-image: url(./Dup/img/bgimg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#con1 {
    background-image: url(./Dup/img/con3_bgimg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#con2 {
    padding-top: 60px;
    padding-bottom: 35px;
    background-image: url(./Dup/img/con2_bg_img.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#con2 .con2_txt {
    background-color: var(--white);
    padding: 20px 36.5px;
    border-radius: 10px;
    border: solid 0.5px var(--color1);
}

#con2 .topimg2 img, #con2 .topimg3 img {
    border-radius: 10px;
}

#con3 {
    background-image: url(./Dup/img/con3_bgimg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#topCms {
    padding-top: 60px;
    padding-bottom: 35px;
    background-image: url(./Dup/img/con2_bg_img.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.footer {
    background-color: var(--color7);
    background-image: url(./Dup/img/con3_bgimg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#fakeloader {
    background-color: var(--color1);
    background-image: url(./Dup/img/bgimg.png);
    background-repeat: no-repeat;
    background-size: cover;
    /*background-position: left 5% bottom 0;*/
}

/* ----------　背景画像　▲---------- */

/* ---------------------------------------------　TOP　---------------------------------------- */



.header-in {
    border-radius: 10px;
}

.menu_btn {
    border-radius: 10px;
    background-color: var(--black) ! IMPORTANT;
}

.menu_btn span {
    background-color: var(--white) !important;
}

.pc_nav li a span {
    color: var(--color1);
}

.cate_list li a {
    border-radius: 10px;
}

.c-btn {
    transition: 0.3s;
    border-radius: 10px;
    border-color: var(--color1);
    background-color: var(--color7);
}

.c-btn i{
    border-radius: 10px;
    color: var(--color1);
}

.c-btn:hover {
    background-color: var(--white);
}

.c-btn i:hover{
    color: var(--color3);
}

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

h3.cate_title {
        text-align: center;
        font-size: 19px;
}

#bnr {
    width: 80%;
    z-index: 1;
    transform: translate(22%,50%);
    bottom: 8%;
}


.pagetop {
    border-radius: 10px;
}
/* ----------　toptxt　▼---------- */
.topTxt1 .arrow{
    margin-left: 0;
    transform: translate(-50%, 0);
}

.topTxt1 {
    border-radius: 10px;
    padding: 12px 25px 14px;
    font-size: 20px;
}



.TopTxt03 {
    left: 0;
    right: 0;
    margin: auto;
}

.TopTxt04 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--color1);
}

.TopTxt06 {
    color: var(--black);
}

.TopTxt08, .TopTxt10, .TopTxt12 {
    font-weight: 500;
}

.TopTxt02, .TopTxt03, .TopTxt06,.TopTxt08, .TopTxt10, .TopTxt12{
    color: var(--black);
}

.TopTxt02 {
    font-size: 40px;
    font-weight: 800;
}
/* ----------　toptxt　▲---------- */
#con1 {
    background-color: var(--color7);
}

.con1_squ {
    display: none;
    z-index: 1;
    bottom: -10px;
}

/*#con2 {*/
/*    padding-top: 140px;*/
/*    padding-bottom: 130px;*/
/*}*/


.kumo1{
    top: 5%;
    right: 0%;
    z-index: 2;
    max-width: 350px;
}
.kumo2{
    bottom: 11%;
    left: 0%;
    z-index: 2;
    max-width: 380px;
}


#con3 .title{position: relative;}

#con3 {
    padding: 100px 0;
    background-color: var(--color7);
}

#con3 .title .en {
    font-size: 30px;
    font-weight: 700;
    color: var(--color1);
}

#con3 .box_wrap .box h4 {
    font-weight: 900;
    color: var(--color1);
}

#con3 .box .img{
    border-radius: 10px;
}

#con4 {
    background-color: var(--color6);
}

.topCms .cmstitle .jp span {
    padding-top: 5px;
    color: var(--color6);
}

.cmstitle .jp {
    color: var(--color2);
}

.topCms .cms_5-e .cate_box .box_item .box_title1 {
    background-color: #fff;
}

/* ----------　footer　▼---------- */
.f_sitemap_inner {
    margin-top: 20px;
}

.fa-envelope:before {
    content: "\f086";
}

.footer {
    padding: 110px 0px 10px;
}

.f_contact_box {
    border-radius: 10px;
    z-index: 1;
}

.footer a {
    font-size: 15px;
    font-weight: bold;
    color: var(--black);
}


.footertxt {
    font-weight: bold;
    color: var(--black);
}

.PageFooter {
    font-size: 13px;
}

.copy {
    color: var(--white);
}

.f_sitemap_inner i {
    color: var(--color1);
}

.f_contact_btn a {
    margin: 0 auto;
    font-size: 24px;
    padding: 20px 0px 20px 30px;
    background-color: var(--color5);
    border-radius: 10px;
}

.f_contact_btn i{
    margin-left: -35px;
    line-height: 2;
    
}



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

.fix_banner {
    width: 300px;
    position: fixed;
    bottom: 5px;
    right: 100px;
    z-index: 5;
}

/* ---------------------------------　下層ページ　--------------------------------- */
.pagetitle_img {
    background-size: cover;
    opacity: 0.75;
    mix-blend-mode: normal;
}

.pagetitle h2 {
    color: var(--color2);
    font-weight: bold;
}

.pagetitle .jp {
    color: var(--white);
}

.pagetitle .jp span {
    color: var(--white);
    padding-top: 9px;
}


.f_contact_box h4{
    font-size: 30px;
}

.f_contact_box p {
    font-size: 16px;
    color: var(--color3);
}


.cate_list li:hover {
    /*opacity: 0.5;*/
    transition: all 0.3s;
    /*transition: transform 0.3s ease-in-out;*/
}

.cate_list li a {
    background-color: var(--color1);
    color: var(--white);
    font-size: 15px;
    transition: all 0.3s;
    border: none;
}

.cate_list li a:hover{
    background-color: var(--white);
    border: solid 1px var(--color1);
    color: var(--color1);
}

.pagetxt{
    font-size: 20px;
}

.all_contents {
    background-color: var(--white);
}

/* -------------------　BLOG　----------------- */
ul.pager a {
    padding: 0 10px;
    font-size: 25px;
    background-color: var(--color6);
    color: var(--white) !important;
}

ul.pager a:hover {
    background-color: var(--color1);
}

#cms_1-d .title_box::before {
    border-right: solid 20px var(--color7);
}

#cms_1-d .title_box::after {
    border-left: solid 20px var(--color7);
}

#cms_1-d .box_wrap {
    background-color: #ffffff;
}

#cms_5-e .cate_box .box_item .box_title1 {
    background-color: #fff;
}


/* ----------　よくある質問　▼---------- */
.qa_type5 .faq_no {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 25%;
    top: -10px;
    left: 0;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}
.qa_type5 .box_title1, .qa_type5 .box_txt1 {padding-left: 70px;line-height: 1.7;}

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

/* ----------　会社情報　---------- */
#page7 .info .info__row .title {
    color: var(--color1);
}



/* ----------　お問い合わせ　---------- */
h3.width_30per.pd_5px.pd_l-20px.font_2dw_tb.txt_color2.width_100per_sp.pd_clear_sp{
    color: var(--color1);
}

#page8 .contact_mail a {
    /*color: var(--black);*/
    padding: 14px 97px;
    border-radius: 10px;
    transition: .3s;
}

#page8 .contact_tel a {
    background-color: var(--color1);
    /*color: var(--black);*/
    padding: 18px 40px;
    border-radius: 10px;
    transition: .3s;
}


#page8 .contact_mail a:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}

/* ----------　プライバシーポリシー ---------- */
#page9 .privacy .box:first-of-type {
    border-radius: 10px 10px 0px 0px;
}

#page9 .privacy .box:last-of-type {
    border-radius: 0px 0px 10px 10px;
}

/* ----------　サイトマップ　---------- */
#page10 .sitemap li a {
    border-radius: 10px;
}

/*-------------------------------------------------------1536-------------------------------------------------------*/
@media  screen and (max-width: 1536px){
.kumo1, .kumo2 {
    max-width: 350px;
}
}

/*-------------------------------------------------------1530 × 735-------------------------------------------------------*/
@media screen and (max-width: 1530px){}


/*-------------------------------------------------------1366-------------------------------------------------------*/
@media screen and (max-width: 1366px){

.kumo1, .kumo2 {
        max-width: 250px;
    }


}

/*1280px以下*/
@media  screen and (max-width: 1280px){



}

/*1000px以下）*/
@media  screen and (max-width: 1000px){
#main_img {
    height: 78vh;
}

    .kumo1, .kumo2 {
        max-width: 200px;
    }

.kumo2 {
    bottom: 80%;
}

}

@media all and (-ms-high-contrast: none){
  .sample{

  }
}


/*-------------------------------------------------------タブレット-------------------------------------------------------*/
@media  screen and (max-width: 768px){
#main_img {height: 50vh;}
.kumo1, .kumo2 {
        max-width: 150px;
    }

.kumo1  {
        max-width: 190px;
    }

.kumo2{
    bottom: 84%
}

.logo1 {max-width: 145px;}

.menu_btn{border: none;box-shadow: none;}

.pagetitle .jp span {
    padding-top: 6px;
}

.header-in {
    height: 94px;
    background: none;
    background-color: #ffffff00 !important;
    padding: 0px;
}

.header .logo1 {
    background-color: var(--white);
    padding: 10px 5px 5px;
}

.TopTxt05 {
    letter-spacing: 0;
}

.TopTxt09 {font-size: 19px;}

#main_img:before{left: 3vw;}

.catch {
    width: 23Vw;
}
/* ----------　con1　▼---------- */
#con1 {
    padding-top: 50px;
    padding-bottom: 50px;
}

#con1:after{
    width: 15vw;
    height: 22vw;
    bottom: -20vw;
}
/* ----------　con1　▲---------- */

/* ----------　con2　▼---------- */

#con2 {
    padding-top: 70px;
    padding-bottom: 70px;
}

#con2:before {top: -3%;}
/* ----------　con2　▲---------- */

/* ----------　con3　▼---------- */
#con3 {padding: 50px 0 55px;}

#con3:before {
    width: 100%;
    height: 55px;
    top: -3%;
}

#con3:after {
    width: 100%;
    height: 70px;
    bottom: -1%;
}

#con3 .box .img {
        max-width: 400px;
        margin: 0 auto;
        border-radius: 10px;
    }

#con3 .txt br{display:none;}
/* ----------　con3　▲---------- */

/* ----------　con4　▼---------- */
#con4{padding-top: 0px;}

/* ----------　con4　▲---------- */

/* ----------　footer　▼---------- */
.f_sitemap_inner{
    justify-content: left;
}

.f_sitemap_inner li{
    width: 33.3%;
}
/* ----------　footer　▲---------- */
}
/*-------------------------------------------------------スマホ-------------------------------------------------------*/
@media  screen and (max-width: 667px){
#main_img {height:37vh;}



    .kumo1, .kumo2 {
        max-width: 100px;
    }

    .kumo1 {
        max-width: 120px;
    }

    .kumo2 {
        bottom: 1%;
    }

.header .logo1{
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

.logo1:hover, .pc_nav li:hover {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

.menu_btn {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

.logo1 {max-width: 65px;}

.TopTxt02 {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -1px;
}

.TopTxt04 {
    font-size: 21px;
    letter-spacing: 0;
}

.fix_banner {
    width: 270px;
    right: 70px;
}

.footertxt{max-width: 100%;}

.footer_sns .box a {
    padding: 5px 10px 10px;
}



#con1 {
    padding-top: 20px;
    padding-bottom: 91px;
}

#con2 {
    padding-top: 80px;
}

#con2:before {
    top: -1%;
    height: 57px;
}

#con2 .topimg3:before{
width: 14vw;
height: 20vw;
top: 0;
}

#con3 .title .en {
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0;
}

#con3 {
    padding: 50px 0 50px;
}

#con3:before {
    height: 63px;
    top: -3%;
}

#con3:after {
    height: 27px;
    bottom: -19px;
}

#con4 {
    padding-top: 30px;
}

#con4 .con_box{
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}

#topCms {
    padding: 70px 0;
}

#topCms:after {
    height: 42px;
    top: 0%;
}

.footer_contact:before{
    height: 59px;
    top: -7%;
}

.cate_list li a {
    letter-spacing: 0;
    font-size: 13px;
}

.cmstitle:before{
width: 50px;
height: 50px;
top: -60px;
}


.pagetitle{
padding-top: 150px;
padding-bottom: 80px;
}

.pagetitle:after{
width: 80px;
height: 145px;
top: 175px;
}

.topTxt1 {
    letter-spacing: 0;
    font-size: 12px;
    max-width: 100%;
}

.footer {
    padding: 100px 0px 10px;
}

.footer_sns {
    margin-bottom: 0px;
}

.pagetop {
    right: 10px;
    bottom: 60px;
}

}

#page2,#page3,#page4,#page5,#page6,#page7,#page8,#page9,#page10{
    font-size: 18px!important;
}


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


#page2,#page3,#page4,#page5,#page6,#page7,#page8,#page9,#page10{
    font-size: 14px!important;
}
#page8 .contact_tel a {
    padding: 18px 20px;
}
#page9 .privacy h3,
#page9 .privacy p {
    color:#333;
}
}