@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
body{font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}

h1, h2, h3, h4, h5, h6 {font-weight: bold;}


/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #1D2087;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: #1D2087} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #333} /* アクセントカラー1 */
.txt_color4{color: #c9baa9} /* アクセントカラー2 */

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

/* border-color ※!important */
.border_color1{border-color: #1D2087}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #E50012}
.border_color4{border-color: #c9baa9}

/* hover_color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #1D2087} /* メインカラー */
.hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #E50012} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #c9baa9} /* アクセントカラー2 */

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

.hvr_border_color1:hover{border-color: #1D2087}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #E50012}
.hvr_border_color4:hover{border-color: #c9baa9}


/* all ---------------------------------------------------------------------------------------------*/
#wrap{overflow: hidden}
#con_fix {
    bottom: 204px;
    right: 25px;
    z-index: 1;
    width: 185px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .8s .6s
}
#con_fix.animStart{opacity: 1}
#con_fix::before{
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
    background: url(../dup/img/con_btn02.png) center / contain no-repeat;
	z-index: -1;
	animation: 6s linear infinite rotation1;
}
@keyframes rotation1{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
}
#logo {
    box-shadow: 5px 5px 30px rgb(0 0 0 / 10%);
    background-color: #ffffff;
    border-left: 5px solid #0f142b;
}
#logo span{background-color: #fff;}
header .trans_logo{background-color: #fff;}
header .trans_logo img{max-width: 185px;}
.under_page #logo {
    border-left: none!important;
    padding-bottom: 17px;
    padding-top: 17px;
    margin-bottom: 20px;
}
.under_page #logo img{width: 100px!important;}
.under_page #header{background: none!important}


/* top ---------------------------------------------------------------------------------------------*/
#header, .contents_wrap .contents_bg{background: url( "../dup/img/bg01.jpg" ) left top / 1500px repeat;}
#main_img{position: relative;overflow: hidden}
#main_img::before {
    content: '';
    display: inline-block;
    width: 89%;
    max-width: 1000px;
    height: 100%;
    background-image: url(../dup/img/main_txt.png);
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    position: absolute;
    right: 16px;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
	opacity: 0
}
#main_img.animStart::before{animation: puyon 1.0s linear 0s 1;animation-fill-mode: forwards}
@keyframes puyon {
  0%   { opacity: 0; transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { opacity: 1;transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { opacity: 1;transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { opacity: 1;transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { opacity: 1;transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { opacity: 1;transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { opacity: 1;transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes puyonIe {
  0%   { opacity: 0;}
  100% { opacity: 1;}
}

#contents1 .con1_right{padding-bottom: 237px;}
.con1_title, .con2_title, .con3_title{position: relative;padding-top: 41px;}
.con1_title::before, .con2_title::before, .con3_title::before {
    content: '';
    display: inline-block;
    width: 65px;
    height: 65px;
    background-image: url(../dup/img/no1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin: auto;
}
.con2_title::before{background-image: url(../dup/img/no2.png);right: auto;}
.con3_title::before{background-image: url(../dup/img/no3.png);right: auto;}
.item01{
	bottom: -116px;
    right: -77px;
    width: 50%;
    max-width: 382px;
    z-index: -1;
}
#contents3 .txt_white{color: #333333;}
#contents2 .con2_wrap{background: url( "../dup/img/item02.png" ) bottom 36px left 37px / 30% no-repeat #fff}
#top_cms .top_cms_bg{background-color: #eff5fb;}

.tel_bt{color: #333;}
#logo2 img{max-width: 133px;}




/* IE */
@media all and (-ms-high-contrast: none){
body{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}
#contact_tel a{padding-bottom: 22px;}
#main_img.animStart::before{animation: puyonIe 0.7s linear 0s 1;animation-fill-mode: forwards}
}


@media screen and (max-width: 1300px){
#con_fix{width: 153px;bottom: 153px;}
#contents2 .con2_wrap {background: url(../dup/img/item02.png) bottom 25px left 20px / 38% no-repeat #fff;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#con_fix{display: block;right: 10px;width: 19%;max-width: 153px;}
#main_img::before{width: 95%;right: 0;left: 0;margin: auto;}
#contents1 .con1_right{padding-top: 64px;}
.con1_title::before, .con2_title::before, .con3_title::before{width: 56px;top: -15px;}
.item01 {bottom: -125px;right: -38px;width: 73%;}
#contents2 .con2_wrap{background-size: 73%;}
}
	
/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#con_fix{bottom: 83px;width: 22%;right: 4px;}
#main_img::before{width: 99%;}
#contents1 .con1_right{ padding-bottom: 116px;}
.item01 {bottom: auto;right: -26px;width: 81%;}
#header, .contents_wrap .contents_bg{background: url(../dup/img/bg01.jpg) left top / 1000px repeat;}
#logo2 img{max-width: 94px;}
}