@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #022054} /* メインカラー */
.txt_color2{color: #f7f7f7} /* サブカラー */
.txt_color3{color: #4ae} /* アクセントカラー1 */
.txt_color4{color: #cccccc} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #022054} /* メインカラー */
.bg_color2{background-color: #f7f7f7} /* サブカラー */
.bg_color3{background-color: #4ae} /* アクセントカラー1 */
.bg_color4{background-color: #cccccc} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #022054}
.border_color2{border-color: #f7f7f7}
.border_color3{border-color: #4ae}
.border_color4{border-color: #cccccc}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #1a1a1a;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #022054} /* メインカラー */
.hvr_txt_color2:hover{color: #f7f7f7} /* サブカラー */
.hvr_txt_color3:hover{color: #4ae} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #cccccc} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #022054} /* メインカラー */
.hvr_bg_color2:hover{background-color: #f7f7f7} /* サブカラー */
.hvr_bg_color3:hover{background-color: #4ae} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #cccccc} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.hvr_border_color1:hover{border-color: #022054}
.hvr_border_color2:hover{border-color: #f7f7f7}
.hvr_border_color3:hover{border-color: #4ae}
.hvr_border_color4:hover{border-color: #cccccc}





/* all ---------------------------------------------------------------------------------------------*/
#wrap{overflow: hidden}
#pc_nav, #contents .con_bg{
	background: url( "../dup/img/bg1.png" ) right bottom / auto 100% no-repeat #022054 ;
}
.font_bar{font-weight: bold;}


/* top ---------------------------------------------------------------------------------------------*/
#video {overflow: hidden;max-height: 100vh;}
#video::before {
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(2,2,35,0.24);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
}
.custom_img1 {
    z-index: 2;
    width: 20%;
    max-width: 303px;
    left: 27px;
    top: 14px;
}
.custom_img2 {
    z-index: 2;
    width: 10%;
    max-width: 150px;
    top: 47%;
}
.custom_txt {
	box-sizing: border-box;
    z-index: 2;
    bottom: 0;
    left: 0;
    background-color: rgba(0,9,22,0.47);
    padding: 20px 40px;
    width: 100%;
    background: linear-gradient(86deg, rgba(0,9,22,0.52) 0%, rgba(8,66,151,0.41) 100%);
}
.custom_txt p{
	letter-spacing: 3px;
	font-size: 19px;
	position: relative;
	padding-left: 75px;
}
.custom_txt p::before {
    display: inline-block;
    content: "";
    width: 66px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 18px;
    left: -10px;
}
#pp-nav .active span {
    width: 19px;
    height: 19px;
}
#intro .intro_left {padding-top: 70px;}
.bgroop {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 249px;
    top: 52px;
    left: 0;
    background: url(../dup/img/loop_bg.png) repeat-x;
    background-size: 3000px;
    background-position: 0 100%;
    -webkit-animation: bgroop 40s linear infinite;
    animation: bgroop 40s linear infinite;
}
@-webkit-keyframes bgroop {
    from {background-position: 0  100%;}
    to {background-position: -1956px 100%;}
}
@keyframes bgroop {
    from {background-position: 0 100% ;}
    to {background-position: -1956px 100%;}
}
@keyframes bgroop_ie {
    from {background-position: 0 48% ;}
    to {background-position: -1956px 48%;}
}
#logo{margin-bottom: 40px;}
.intro_wrap p.font_bar{margin-bottom: 4px;font-weight: bold;}


.cms_title {background-color: #f7f7f7;padding-bottom: 42px;}
.cms_title h3 {font-size: 20px;margin-bottom: -10px;}
.cms_title p {font-size: -webkit-calc(1rem + 16px);font-size: calc(1rem + 16px);}


/* 他 ---------------------------------------------------------------------------------------------*/
#page_title .title_bg{background-position: bottom;}



/* cms ---------------------------------------------------------------------------------------------*/
#cms_6-c .circle, #cms_6-c .arrow, .cms_6-c .circle, .cms_6-c .arrow{display: none}
#cms_6-c, .cms_6-c {counter-reset: number 0;}
#cms_6-c .cate_box, .cms_6-c .cate_box {
    position: relative;
    padding-top: 50px;
	padding-bottom: 30px;
    padding-left: 20px;
}
#cms_6-c .cate_box:before, .cms_6-c .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -38px;
    left: -5px;
    z-index: 1;
    font-size: 80px;
    font-weight: 100;
    font-style: italic;
    color: #022054;
    font-family: 'Cinzel', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", 'Noto Serif JP', "serif";
    background-color: #fff;
    line-height: 1;
    padding: 0 25px 0 0;
}
#cms_6-c .cate_box .box_title, .cms_6-c .cate_box .box_title{font-weight: bold}



/* IE */
@media all and (-ms-high-contrast: none){
.bgroop{animation: bgroop_ie 40s linear infinite;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#custom {height: auto!important;}
#video::before{bottom: 8px;}
.custom_txt{margin-top: -9px;background: linear-gradient(23deg, #1a345d 0%, #4ae 100%);}
#intro .intro_left{padding-top: 51px;}
#logo img{width: 257px;}
.bgroop{z-index: 0;height: 160px;background-size: 2000px;top: 80px;}
	
#page07 h3.grid_3 {width: 28%!important;}
#page07 p.grid_9 {width: 71%!important;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.custom_img1 {
    width: 24%;
    left: 11px;
    top: 8px;
}
.custom_img2{width: 11%;}
.custom_txt{padding: 17px 15px;text-align: center;}
.custom_txt p{padding-left: 0;letter-spacing: 1px;font-size: 14px;}
.custom_txt p::before{display: none}
#intro .intro_left{padding-top: 53px;}
#logo {margin-bottom: 45px;}
#logo img{width: 169px;}
.bgroop{background-size: 1300px;height: 107px;top: 35px;}
#pc_nav {
    background: url(../dup/img/bg1.png) right bottom / auto 100% no-repeat #022054;
    background-image: url(../dup/img/bg1_sp.png);
    background-size: 100%;
}
#contents .con_bg {
	background-image: url(../dup/img/bg1_sp.png), url(../dup/img/bg1_sp_top.png);
    background-position: right bottom, right top;
    background-size: 100%;
}
.cms_title{margin-bottom: 67px;}
.cms_title h3{font-size: 17px;}
#cms_6-c .cate_box, .cms_6-c .cate_box{padding: 42px 25px 25px 25px;}
#cms_6-c .cate_box:before, .cms_6-c .cate_box:before{top: -14px;font-size: 48px;}
	
#page07 h3.grid_3,#page07 p.grid_9 {width: 100%!important;}
}