@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap');


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

.l-menu,.pc_nav,.en_font,.TopTxt04, h1, h2, h3, h4, h5, h6,.pager a, .cate_list li a, .sns_title, .con_no, .tel, .copyright{
    font-family: 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* -----------------------------　ボディ　------------------------------------- */
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: #28ABB9;
    --color2: #bde1e5;
    --color3: #2D6187;
    --color4: #ceedd0;
    --color5: #d3f1e2;
    --color6: #e9fdd1;
    --color7: #398b95;
    --white: #ffffff;
    --black: #022533;
    --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(--color3);
    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);
}

/* color -----------------------------------------------------------------------------*/

/* ----------　custom_box　---------- */
#main_img {
    width: 100%;
    height: 100vh;
    background-image: url(./Dup/img/bg_main.jpg);
    background-repeat: no-repeat;
}

#main_img {background-size: cover;}

#main_img .catch {
    position: absolute;
    content: "";
    background-image: url(./Dup/img/catch.png);
    background-size: 100%;
    bottom: -49%;
    left: 3%;
    width: 33vw;
    height: 34vw;
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.4));
    z-index: 2;
}
/* ----------　custom　---------- */


/* ----------　背景画像　▼---------- */
/*#con1:before {*/
/*    background-image: url(./Dup/img/bg_img.png);*/
/*    position: absolute;*/
/*    content: "";*/
/*    background-size: cover;*/
/*    width: 100%;*/
/*    height: 127px;*/
/*    top: -10%;*/
/*    left: 0;*/
/*}*/

#con2:before {
    background-image: url(./Dup/img/bg_img1.png);
    position: absolute;
    content: "";
    background-size: cover;
    width: 100%;
    height: 121px;
    top: -1%;
    left: 0;
}

#con3:before {
    background-image: url(./Dup/img/bg_img2.png);
    position: absolute;
    content: "";
    background-size: cover;
    width: 100%;
    height: 113px;
    top: -112px;
    left: 0px;
}

#con3:after {
    background-image: url(./Dup/img/bg_img3.png);
    position: absolute;
    content: "";
    background-size: cover;
    width: 100%;
    height: 121px;
    bottom: -8%;
    left: 0;
    z-index: 1;
}

#topCms:after {
    background-image: url(./Dup/img/bg_img4.png);
    position: absolute;
    content: "";
    background-size: cover;
    width: 100%;
    height: 121px;
    top: -1%;
    left: 0;
}

.footer_contact:before {
    background-image: url(./Dup/img/bg_img5.png);
    position: absolute;
    content: "";
    background-size: cover;
    width: 100%;
    height: 121px;
    top: -17%;
    left: 0;
}

.footer_contact:after {
    background-image: url(./Dup/img/bg_img6.png);
    position: absolute;
    content: "";
    background-size: cover;
    width: 100%;
    height: 121px;
    bottom: 0px;
    left: 0;
}
/* ----------　背景画像　▲---------- */

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

#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;
}

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

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

.topTxt1 {
    border-radius: 67px;
    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);
}

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

.TopTxt02 {
    font-size: 40px;
    font-weight: 800;
}
/* ----------　toptxt　▲---------- */

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

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

.menu_btn span {
    background-color: var(--color1);
}

#con3 .title{position: relative;}

#con3 {
    padding: 100px 0;
}

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

#con3 .box_wrap .box h4 {
    color: var(--color3);
}

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

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

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

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

.footer {
    padding: 75px 0px 60px;
}

.f_contact_box {
    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;
}

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

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



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

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

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

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

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

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

.f_contact_box p{
    font-size:16px;
}


.cate_list li:hover {
    opacity: 0.5;
    transition: all 0.3s;
}

.cate_list li a {
    font-size: 15px;
    transition: all 0.3s;
}

.pagetxt{
    font-size: 20px;
}

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

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

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

#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;
}

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



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

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

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


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

/* ----------　プライバシーポリシー ---------- */

#page9 .box .no {
    color: var(--black);
}

.privacy .box h3 {
    color: var(--black);
}

a.d_inline_b.pd_r-10px.pd_l-10px.bg_color1.border_rad5.txt_white.motion05s.mg_r-5px.mg_l-5px.hvr_bg_color4 {
    color: var(--black);
}

/* ----------　サイトマップ　---------- */
/*#page10 .sitemap li a{*/
/*    color: var(--black);*/
/*}*/


@media  screen and (max-width: 1536px){
#con2 .img_wrap:before {
    top: 14%;
    left: 61%;
}

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

#con2 .img_wrap:before {
    left: 60%;
}

#con2:after {
    width: 20vw;
    bottom: -15%;
    left: 17%;
}

/*#con3:before {*/
/*    top: -1%;*/
/*    left: 0;*/
/*}*/

/*#con3:after {*/
/*    bottom: -11%;*/
/*    right: 5%;*/
/*}*/

}

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


.loopSlider_wrap{right: 40px;}

}

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

  }
}


/*-------------------------------------------------------タブレット-------------------------------------------------------*/
@media  screen and (max-width: 768px){
#main_img {height: 100vh;}

#main_img .catch {
    width: 89vw;
    bottom: -5%;
    height: 35vw;
}

.logo1 {max-width: 90px;}

.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-right: 20px 5px;
}

.TopTxt09 {font-size: 19px;}

#main_img:before{left: 3vw;}


/* ----------　con1　▼---------- */
#con1 {
    padding-top: 50px;
    padding-bottom: 50px;
}

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

/* ----------　con2　▼---------- */
#con2{padding-top: 150px;}

#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: 300px;
    margin: 0 auto;
    border-radius: 20px;
}

#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: 75vh;}

#main_img .catch{
    width: 94vw;
    height: 40vw;
}

.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%;}


#main_img:before{
width: 22vw;
height: 26vw;
bottom: -21vw;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
display: none;
}

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

#con2{padding-top: 100px;}

#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: 75px 0px 25px;
}

.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;
}

}