﻿@import url('https://fonts.googleapis.com/css2?family=Sarpanch:wght@400;500;600;700;800;900&family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

#pc_nav ul li a, #intro .intro_title, #contents1 .con1_title span, #contents2 .con2_title, #contents3 .con3_title, #top_cms .cms_title, .top_cms_box .more_box .more div, .footer_nav li a, footer .footer_txt, footer .footer_h1, footer #copyright, #page_title, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, .box_title, .box_title1, a[href^="tel:"], .pager li a  {font-family: 'Sawarabi Gothic', "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;}
.en, .more a span, #page_top a, #top_cms .cms_sub_title, .contact_bt a, .tel_bt a{
    font-family: 'Roboto Condensed', sans-serif;
}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#main_img,#con1 li,#con2,.triangle,#con3{position: relative;}
.bg_gra,#main_img:before,#main_img:after,.man,.frame1,.frame2,.frame3,.frame4,#con1 li:before,#con2:before,.triangle:before,.obj1,.obj2{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

/* -----------------------------　body------------------------------------- */
body{
    overflow:hidden!important;}

/* ----------　font　---------- */

/* color -----------------------------------------------------------------------------*/
:root {
    --color1: #095482;
    --color2: #f3f6f7;
    --color3: #efc733;
    --color4: #f3f6f7;
    --color5: #ff0000;
    --white: #ffffff;
    --black: #333333;
    --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) !important;} /* アクセントカラー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{
    color: var(--color1);
    border-bottom:solid 1px;
}

.linkStyle:hover{
	color: var(--color3);
	opacity: 0.7;
	transition: all 0.5s;
}

body#body {
    background: var(--white);
}

/* ----------　all　---------- */
#wrap{overflow: hidden;}

/*#logo a, #header.headtrans #logo a {*/
/*    filter: drop-shadow(77px 28px 50px rgba(255,255,255,0.8));*/
/*    background: none;*/
/*}*/

/*    width: 350px;*/
/*}*/

/*#header.headtrans #logo a {*/
/*    width: 350px;*/
/*}*/

/* ----------　vido　---------- */
#video{ height: 100vh; }


#video video{
width: 100%!important;
height: 100% !important;
object-fit: cover;
}
/*#video video{*/
/*width: 100%!important;*/
/*height: auto;*/
/*top: 50%;*/
/*left: 50%;*/
/*    -ms-transform: translate(-50%,-50%);*/
/*    -webkit-transform: translate(-50%,-50%);*/
/*    transform: translate(-50%,-50%);*/
/*}*/

/*@media  screen and (max-width: 1600px){*/

/*}*/

/* タブレット用 */
@media  screen and (max-width: 768px){
#video {
    height: 50vh;
}

#video video{
width: 100%!important;
height: auto;
}

}

#loader .loader_logo{
    width: 400px;
}

#pc_nav ul li a {
    color: var(--black);
    font-size: 18px;
    /* filter: drop-shadow(0px 0px 50px rgba(0,175,209,0.2)); */
    text-shadow: var(--white) 1px 1px 0, var(--white) -1px -1px 0,/*右下、左上*/ var(--white) -1px 1px 0, var(--white) 1px -1px 0,/*右上、左下*/ var(--white) 0px 1px 0, var(--white) 0-1px 0,/*右、左*/ var(--white) -1px 0 0, var(--white) 1px 0 0;
}

/* ----------　custom　---------- */
.catch {
    position: absolute;
    max-width: 800px;
    width: 70%;
    bottom: 0%;
    left: 0%;
    z-index: 1;
}

.catch2 {
    position: absolute;
    max-width: 630px;
    width: 15%;
    top: 0%;
    right: 0%;
    z-index: 1;
}
/* ----------　header　---------- */

/* ---------------------------------------------　TOP　---------------------------------------- */
#main_img .main_bg, #contents1 .con1_bg {
    background: linear-gradient(to bottom right, rgb(9, 84, 130) 80%, rgb(239, 199, 51))!important;
}

#intro .intro_title {
    font-size: 40px;
    margin-top: -30px;
    z-index: 2;
    font-weight: bold;
}

.intro_wrap {
    background-color: var(--color4);
}

.intro_top {
    font-size: 80px;
    z-index: 0;
    opacity: 0.8 !important;
}

.TopTxt04 {
    font-size: 26px;
}

.con2_title{
    font-size: 26px;
}

.cms_title {
    font-size: 40px;
}

p.cms_sub_title {
    font-size: 50px;
    text-shadow: var(--white) 3px 3px 0, var(--white) -1px -1px 0,/*右下、左上*/ var(--white) -1px 1px 0, var(--white) 1px -1px 0,/*右上、左下*/ var(--white) 0px 1px 0, var(--white) 0-1px 0,/*右、左*/ var(--white) -1px 0 0, var(--white) 5px 0 0;
}

.footer_wrap {
    background: rgb(239,199,51);
    background: linear-gradient(154deg, rgba(239,199,51,0.6) 0%, rgba(9,84,130,0.6) 47%)!important;
}

.tel_bt,.contact_bt {
    font-size: 25px;
}

.cate {
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}

/* ----------　fix_banner　---------- */
.top .fix_banner {
    width: 350px;
    height: 250px;
}

.fix_banner {
    transition: width 0.3s,height 0.3s;
    width: 200px;
    height: 140px;
    position: fixed;
    bottom: 30px;
    right: 0;
    z-index: 4;
}

.fix_banner.scroll {
    width: 180px;
    height: 140px;
    bottom: 0;
}








/* -------------------　BLOG　----------------- */
#cms_1-g .cate_box,#cms_1-g .date_box,#cms_1-g .box_item{
    border-color: var(--color3);
}


/* ----------　pager　---------- */


/* ---------------------------------　下層ページ　--------------------------------- */
#page_title .page_title_gradient {
    background: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(9, 84, 130) 100%)!important;
}

#page_title .page_title_bg {
    top: 0;
    left: 0;
    background-color: #ffffff00;
}

.page_title {
    color: var(--color3);
    font-size: 50px;
}

.page_subtitle {
    color: var(--color3);
    font-size: 25px;
}

.page_title,.page_subtitle {
    text-shadow: var(--white) 1px 1px 0, var(--white) -1px -1px 0,/*右下、左上*/ var(--white) -1px 1px 0, var(--white) 1px -1px 0,/*右上、左下*/ var(--white) 0px 1px 0, var(--white) 0-1px 0,/*右、左*/ var(--white) -1px 0 0, var(--white) 1px 0 0;
}

/* ----------　会社情報　---------- */

/* ----------　お問い合わせ　---------- */


/* ----------　プライバシーポリシー ---------- */


/* ----------　サイトマップ　---------- */

/*-------------------------------------------------------タブレット-------------------------------------------------------*/
@media screen and (max-width: 768px){
#main_img {height: 53vw!important;}

/*#logo a,#header.headtrans #logo a{*/
/*    width: 450px;*/
/*}*/

/*#header.headtrans #logo a {*/
/*    width: 450px;*/
/*}*/

.intro_top {
    font-size: 80px;
}

#intro .intro_title {
    font-size: 30px;
    margin-top: -10px;
}

#top_cms .cms_sub_title{
    top: -150px;
}

.TopTxt04 {
    font-size: 20px;
    letter-spacing: 0;
}

.catch {
    width: 50%;
}

.catch2 {
    width: 35%;
}

.page_title {
    color: var(--color3);
    font-size: 30px;
}

.page_subtitle {
    color: var(--color3);
    font-size: 15px;
}

}

/*-------------------------------------------------------スマホ-------------------------------------------------------*/
@media screen and (max-width: 667px){
#loader .loader_logo{
    width: 250px;
}

#intro .intro_title {
    text-align: center;
    letter-spacing: 0;
    font-size: 18px;
    margin-top: -10px;
}



.fix_banner {
    width: 130px;
    bottom: -25px;
}

.fix_banner.scroll{
    width: 126px;
    bottom: -27px;
}

#page_top .scroll_block {
    right: 325px;
    width: 50px;
    height: 50px;
}

#top_cms .cms_sub_title {
    text-align: center;
    font-size: 38px;
    left: 3px!important;
    top: -280px!important;
}

.intro_top {
    font-size: 50px;
}

.TopTxt04 {
    letter-spacing: 0;
    font-size: 19px;
}

.con2_title {
    font-size: 27px;
}

.catch {
    width: 50%;
}

.catch2 {
    width: 30%;
}

}

@media screen and (max-width: 300px){
    #top_cms .cms_sub_title {
    text-align: center;
    font-size: 30px;
    top: -280px;
}

.intro_top {
    font-size: 30px;
}

#intro .intro_title {
    text-align: center;
    letter-spacing: 0;
    font-size: 18px;
    margin-top: -10px;
}

.con2_title {
    font-size: 20px;
}

#footer #logo2 a{
    width: 200px;
}

}
