@charset "UTF-8";
/* CSS Document */
@import url("keyframes.css");

:root{
    --primary-color:#103A71;
    --secondary-color:#2D7FF9;
	--accent-color:#00C2B8;

    --h2-line:#446699;
    --h3-line:#6B86A8;
    --h4-line:#6B86A8;

    --heading-color:#103A71;
}
html{ font-size:16px;}
body{
	font-size: 1.2rem;
	line-height: 1.9;
	font-family: "ヒラギノ角ゴ ProN W3","Meiryo","游ゴシック Medium", "Yu Gothic Medium","游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
	font-weight: normal;
	color: #666666;
	-webkit-text-size-adjust: 100%;
}
em{display:none;}
p {margin: 12px; }
.txt_noW{white-space: nowrap;}

/* TITLE
----------------------------------------------------------- */
h0, h1, h2, h3, h4, h5, h6, h7, h8 {padding: 1rem ;margin: 10px 0;font-weight: normal;line-height: 120%;}
h1 {font-size: 2.6rem; line-height: 100%;}
/*h2, h2#spine_merit {font-size: 2.4rem; line-height: 100%; border-bottom: 1px dashed #446699;border-left:24px solid #446699;}
h3 {font-size: 2rem;border-left:12px solid #5E94B1;}
h4 {font-size: 1.6rem;border-left:8px solid #96B9CC;}*/
h5 {font-size: 1.2rem;text-transform: uppercase;}
h6 {font-size: 1rem;}
h7,h8 {font-size: 0.7rem;}
h9 {font-size: 0.7rem;font-family: "Meiryo Bold Italic", "Myriad Pro Bold Italic"}

.colms_border h4, .bg_blue_line h4, .bg_blue_line h3, .s_menu_card h3, .picos_06 h2{ border: none!important;}

.more{font-size: .8rem;}

/* TITLE H1
----------------------------- */
section h1{
    margin:0 0 50px;
    padding: 20px;
    font-size:3.2rem;
    font-weight:700;
    line-height:1.2;
    color:var(--heading-color);
    border-bottom:4px solid var(--h2-line);
}

/* TITLE H2
----------------------------- */
h2{
    position:relative;
    margin:0 0 40px;
    padding:0 0 16px 22px;
    font-size:2.4rem;
    font-weight:700;
    line-height:1.3;
    color:var(--heading-color);
}

h2::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    border-radius:10px;
    background:var(--h2-line);
}

h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:120px;
    height:3px;
    background:var(--h2-line);
}
/* TITLE H3
----------------------------- */
h3{
    position:relative;
    margin:50px 0 25px;
    padding:0 0 12px 18px;
    font-size:1.8rem;
    font-weight:600;
    color:var(--heading-color);
}

h3::before{
    content:"";
    position:absolute;
    left:0;
    top:4px;
    width:4px;
    height:80%;
    border-radius:10px;
    background:var(--h3-line);
}

/* TITLE H4
----------------------------- */
h4{
    position:relative;
    margin:35px 0 15px;
    padding-left:14px;
    font-size:1.3rem;
    font-weight:600;
    color:var(--heading-color);
}

h4::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    width:3px;
    height:70%;
    border-radius:10px;
    background:var(--h4-line);
}
.stat-card h4::before{background: none;}

/* TEXT SHADOW
--------------------------- */
.s_menu_title h2, h2.contents_menu {
	border-bottom: none!important;
	border-left: none;
	font-weight:700; 
	position: relative;
	top:2rem;
	color: #666666!important;
	font-size: 4.2rem!important;
	margin: 0 0 60px 10px;
}

h2.contents_menu, h2.contents_menu .txt_b_shadow{text-align: left;}
.home .txt_b_shadow{ font-size: 180%!important;}

.txt_b_shadow{
	position: absolute; 
	top: 0px; 
	left: 20px;
	opacity: 0.2;
	font-size: 120%!important;
	font-weight: 900;
	z-index: 2;
	width: 100%;
	line-height: 120%;
}
h2.contents_menu .txt_b_shadow{
	position: absolute;
	top: 0px;
	left: 20px;
}
.swiper-slide span:first-child,
.careers .s_menu_title h2 span{
	position: absolute; 
	top: 0px; 
	left: 0px;
	opacity: 0.2;
	font-size: 180%!important;
	font-weight: 900;
	z-index: 2;
}

.nas_pro h1{
	font-size: 4.6rem;
	color:#FFFFFF;
	font-weight:bold;
    text-shadow:
        1px 1px #999, /*文字の右下に影を追加*/
        1px -1px #999,/*文字の右上に影を追加*/
        -1px 1px #999,/*文字の左下に影を追加*/
        -1px -1px #999;/*文字の左上に影を追加*/}

/* １文字ずつ小さく　ANIME
--------------------------- */
.container {display: flex; justify-content: center; align-items: center;}
.animate	{font-size: 25px; font-family:"Times New Roman", 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", serif;}
.animate span {	display: inline-block;}
.animate span:nth-of-type(2) {  animation-delay: .05s;}
.animate span:nth-of-type(3) {  animation-delay: .1s;}
.animate span:nth-of-type(4) {  animation-delay: .15s;}
.animate span:nth-of-type(5) {  animation-delay: .2s;}
.animate span:nth-of-type(6) {  animation-delay: .25s;}
.animate span:nth-of-type(7) {  animation-delay: .3s;}
.animate span:nth-of-type(8) {  animation-delay: .35s;}
.animate span:nth-of-type(9) {  animation-delay: .4s;}
.animate span:nth-of-type(10) {  animation-delay: .45s;}
.animate span:nth-of-type(11) {  animation-delay: .5s;}
.animate span:nth-of-type(12) {  animation-delay: .55s;}

.top-wrapper-txt span {opacity: 0;transform: translate(-150px, 0) scale(.3);animation: leftRight .5s forwards;}


/*
<div class="container">
	<div class="animate top-wrapper-txt">
		<span>W</span><span>E</span><span>B</span><span>D</span><span>E</span><span>S</span><span>I</span><span>G</span>&nbsp;
		<span>N</span><span>O</span><span>T</span><span>E</span>
	</div>
</div>
*/

/* TYPING　ANIME
--------------------------- */
.effect-typing {opacity: 0;}
.effect-typing.active {opacity: 1;}

/* LEAD
--------------------------- */
.lead{
	margin:0 0 40px;
	font-size:1.125rem;
	line-height:1.9;
	color:#4b5563;
	font-weight:400;
}

/* COMMENT
--------------------------- */
.txt_dialogue {
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 30px;
    background-color: #82a2ba;
    color: white;
}

.txt_dialogue:before {
    position: absolute;
    top: 100%;
    left: 40px;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: #82a2ba;
    border-width: 8px;
    content: "";
}
/* RIGHT-SIDE */
.txt_dialogue_R {
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 30px;
    background-color: #82a2ba;
    color: white;
}

.txt_dialogue_R:before {
    position: absolute;
    top: 100%;
    right: 40px;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: #82a2ba;
    border-width: 8px;
    content: "";
}

/* SITEPOLICY
--------------------------- */
.sp_title01 {
	padding: 0.2em;
	background: linear-gradient(transparent 80%, #A2D3EF 80%);
	border-bottom: none;
	text-align: left;
}
.sp_title02 {
	position: relative;
	color: white;
	margin-top:3rem;
	padding:0.5em 0.5em 0.5em 1.4em;
	background-color: #446689;
	border-radius: 5px;
	font-size: 1.4rem;
}
 
.sp_title02::after {
	position: absolute;
	top: 50%;
	left:0.7em;
	transform:translateY(-50%);
	content: '';
	width: 5px;
	height:25px;
	background-color:white;
}
/* POSITION
----------------------------------------------------------- */
.center, .left, .right{display:block;}
.center{text-align:center!important;}
.left{text-align: left;}
.right{text-align: right;}

/* COLOR
----------------------------------------------------------- */
.txt_blue{color:#0071DD;}
.txt_d_blue{color: #64839b;}
.txt_white{ color:white;}
.txt_gray{ color:#666666;}

/* UNDER LINE COLOR
--------------------------- */
.txt_under_gr{background: linear-gradient(transparent 70%, #c9c9c9 70%);}
.txt_under_d_bl{background: linear-gradient(transparent 70%, #82a2ba 70%);}
.txt_under_bl{background:linear-gradient(transparent 70%, #BBDEFF 70%)}
.txt_orange{background: linear-gradient(transparent 70%, #FFB265 70%);}
.txt_under_green{background: linear-gradient(transparent 70%, #99cc66 70%);}

code{background-color:#C5C5C5;}


/* STYLE
----------------------------------------------------------- */
.bold{font-weight:bolder;}
.strong {font-weight:bold;}

.italic {font-style:italic;}
.underline{ text-decoration:underline;}
.txt_normal{ font-size:1rem; font-weight:normal;}
.new{ color:#fff; font-size:1.6rem; font-weight: 900; }

.m_product h3, .m_ser h3{font-size:1rem; border-bottom:2px solid #637391;}

.fuci {
  color: #000;
  -webkit-text-stroke: 1px #FFF;
  text-stroke: 1px #FFF;
}

/* SIZE
----------------------------------------------------------- */
.big1 {font-size: 1.2rem;}
.big2em{font-size: 2rem;}
.sml1em{font-size:.8rem;}

/* AWSOME FONT
----------------------------------------------------------- */
.warning_icon{
    width:72px;
    height:72px;
    margin:0 auto 18px;
    border-radius:50%;
    background:#fff5f2;
    display:flex;
    align-items:center;
    justify-content:center;
}

.warning_icon i{
    font-size:34px;
    color:#e56a2e;
}