@charset "UTF-8";

/* ========== COMMON ========== */

html { font-size: 62.5%; }

body
{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #333333;
line-height: 1.75;
word-wrap: break-word;
}

a, a:visited { color: #000000; font-weight: bold;text-decoration: underline; }
a:hover { color: #000000; text-decoration: none; }

/*Safariでヒラギノ角ゴシックをきれいに表示させるCSS*/
@font-face {
font-family: sans-serif;
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: sans-serif;
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'Hiragino Kaku Gothic Pro W3';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'Hiragino Kaku Gothic Pro W3';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'ヒラギノ角ゴ Pro W3';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'ヒラギノ角ゴ Pro W3';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'ヒラギノ角ゴ ProN W3';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'ヒラギノ角ゴ ProN W3';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'ＭＳ Ｐゴシック';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'ＭＳ Ｐゴシック';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'MS P Gothic';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'MS P Gothic';
src: local(HiraginoSans-W6);
font-weight: bold;
}
@font-face {
font-family: 'MS PGothic';
src: local(HiraginoSans-W3);
font-weight: normal;
}
@font-face {
font-family: 'MS PGothic';
src: local(HiraginoSans-W6);
font-weight: bold;
}

/* clearfix */
.clearfix:after {
display:block;
clear:both;
visibility:hidden;
height:0;
content:".";
}
.clearfix { display:inline-block; }
.clearfix { display:block; }
* html .clearfix { height:1%; }

br.clear-both, div.clear-both { clear:both; font: 1px/1px monospace; display: block; }

/* ========== CONTENTS ========== */
/* ----- COMMON ----- */
.inner { display: block; position: relative; }
h1,h2,h3,h4,h5 { font-weight: bold; }

a:hover img { opacity:0.6; filter:alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; background:none!important; }

header a, footer a { text-decoration: none; }
header a:hover, footer a:hover { opacity:0.6; filter:alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }

.strong { font-weight: bold; }
.small { font-size: 90%; }

/* ========== HEADER ========== */
header { background: #ffffff; }

/* ----- GLOBAL MENU ----- */
header { width: 100%; z-index: 100; }
header.is-fixed { position: fixed; }
.pNav > ul { position: relative; }
.pNav .sub-menu { width: 100%; visibility: hidden; opacity: 0; z-index: 1; position: absolute; }
.pNav li:hover ul.sub-menu { visibility: visible; opacity: 1; z-index: 9999; }

/* ========== FOOTER ========== */
.btn_pagetop a { background: url(../images/btn_pagetop.png) no-repeat; display: block; text-indent: -9999px; width: 16px; height: 121px; position: fixed; bottom: 10px; right: 10px; z-index: 9999; }

/* ----- DOWNLOAD ----- */
#btn_download .inner { background: #004098; text-align: center; }

/* ----- BANNER ----- */
#banner ul { display: -webkit-flex; isplay: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
/*#banner ul .break { width: 100%; }*/
#banner ul img { width: 100%; height: auto; }

/* ----- FOOTER MENU ----- */
#ft_menu { color: #004098; background: #f2f2f2; }
#ft_menu li.nolink, #ft_menu a { color: #3c3c3c; font-weight: bold; }
#ft_menu p { font-weight: bold; }
#ft_menu .fnav ul li { line-height: 2; }
#ft_menu .fbn ul { width: 100%; display: -webkit-flex; display: flex; }
#ft_menu .fbn ul li a { color: #ffffff; background: #004098; display: block; text-align: center; text-decoration: none; }
#ft_menu .fbn ul li:nth-of-type(n+3) a { background: #11ba87; }
#ft_menu .fbn ul li a:hover { opacity:0.6; filter:alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }

/* ----- FOOTER COPYRIGHTS ----- */
#ft_copy { text-align: center; }

/* MOVIE */
.mov { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 2em; }
.mov iframe { width: 100%; height: 100%; }


/* ========== RESPONSIVE ========== */
/* ----- 769px Under : Mobile ----- */
@media screen and (max-width:769px) {
	
	/* ========== COMMON ========== */
	body { font-size: 1.4em; }
	
	/* ========== CONTENTS ========== */
	/* ----- COMMON ----- */
	.pc { display: none !important; }
	.inner { width: 100%; padding: 10px; }
	.blk_1000, .blk_1200, .blk_1500 { width: 100%; padding: 0; }
	
	/* ----- ANCHOR ----- */
	.anchor { display: block; width: 100%; position: absolute; left: 0; z-index: -1; height: 100px; top: -100px; }
	.offMov, .onMov { display: block; width: 100%; position: absolute; left: 0; z-index: -1; }
	.offMov { height: 100px; top: -100px; }
	.onMov { height: 50px; top: -50px; }
	_:-ms-lang(x), .anchor { display: block; width: 100%; position: absolute; left: 0; z-index: -1; height: 100px; top: -100px; }
	
	.anchor.ank100 { height: 100px; top: -100px; }
	
	/* ========== HEADER ========== */
	header .inner { padding: 0 10px 10px; margin-top: 10px; }
	header h1, header .logo { display: block; height: 45px; }
	header h1 img, header .logo img { height: 100%; }
	header .tagline, header .submenu { display: none; }
	
	header .s_nav {  z-index: 100; }
	header .logo { position: relative; z-index: 110; aspect-ratio: 229 / 60; }
	
	/* ========== FOOTER ========== */
	
	/* DOWNLOAD */
	#btn_download .inner { padding: 0; }
	#btn_download .btn img { width: 60%; height: auto;}
	
	/* BANNER */
	#banner .inner { padding: 20px 10px; }
	#banner ul li { width: calc((100%/2) - 10px); margin: 5px; }
	
	/* ----- FOOTER MENU ----- */
	#ft_menu .blk_1200 { padding: 20px 10px 0; }
	#ft_menu .fnav p { margin-bottom: 10px; padding: 0 5px; }
	#ft_menu .fnav ul { display: none; }
	#ft_menu .fbn { padding-bottom: 20px; }
	#ft_menu .fbn ul { -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
	#ft_menu .fbn ul li { width: calc(100%/2); padding: 0 5px 10px; }
	#ft_menu .fbn ul li:nth-of-type(n+3) { width: calc(100%/3); }
	#ft_menu .fbn ul li a { font-size: 1.2rem; padding: 7px 0; }
	
	/* ----- FOOTER COPYRIGHTS ----- */
	#ft_copy { padding: 30px 0; }
	#ft_copy p { font-size: 1.2rem; }
	#ft_copy .com { margin-bottom: 10px; }
	#ft_copy .com img { width: 30%; }
	#ft_copy .address { margin-bottom: 20px; }
	
}

/* ----- 769px Over- : PC/Tablet ----- */
@media print, screen and (min-width:769px) {
	
	/* ========== CONTENTS ========== */
	/* ----- COMMON ----- */
	.sp { display: none !important; }
	.left { float: left; }
	.right { float: right; }
	
	/* ----- ANCHOR ----- */
	.anchor { display: block; width: 100%; position: absolute; left: 0; z-index: -1; height: 170px; top: -170px; }
	.offMov, .onMov { display: block; width: 100%; position: absolute; left: 0; z-index: -1; }
	.offMov { height: 170px; top: -170px; }
	.onMov { height: 85px; top: -85px; }
	_:-ms-lang(x), .anchor { display: block; width: 100%; position: absolute; left: 0; z-index: -1; height: 170px; top: -170px; }
	
	/* ========== HEADER ========== */
	header .inner { margin: 10px auto; }
	header.is-fixed .tagline, header.is-fixed .submenu { display: none; }
	
	/* ----- SUB MENU ----- */
	header .submenu { line-height: 1; }
	header .submenu .contact, header .submenu .sm { position: absolute; }
	header .submenu, header .submenu .contact, header .submenu .contact ul, header .submenu .sm ul { display: -webkit-flex; display: flex; }
	header .submenu .contact { border: 1px solid #004098; }
	header .submenu .contact ul { position: relative; }
	header .submenu .contact, header .submenu .contact a { color: #004098; }
	header .submenu .contact .tel a { background: url("../images/icn_hd_phone.png") no-repeat left center; }
	header .submenu .contact .form a { background: url("../images/icn_hd_mail.png") no-repeat left center; text-indent: -9999px; display: block; position: absolute; aspect-ratio: 26 / 20; }
	header .submenu .sm li a { display: block; }
	header .submenu .sm li.ac a { background: url("../images/icn_hd_access.png") no-repeat; }
	header .submenu .sm li.dl a { background: url("../images/icn_hd_download.png") no-repeat; }
	header .submenu .sm li.en a { background: url("../images/icn_hd_langage.png") no-repeat; }
	
	.ytb-bnr {
    text-align: left;
    position: absolute;
    top: 10px;
    left: 20%;
    z-index: 100;
    width: 8%;
}
	
	.ytb-bnr ul{
		display: flex;
		justify-content: space-between;
		align-items:baseline;
	}

	.ytb-bnr li{
		width: 37%;
	}
	
	.ytb-bnr li:first-child{
		width: 55%;
	}
	
	.ytb-bnr li img{
		width: 100%;
	}
	
	/* ----- GLOBAL MENU ----- */
	.pNav { position: absolute; }
	.pNav > ul { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; }
	.pNav .sub-menu { background: #f7f7f7; display: -webkit-flex; display: flex; align-items: stretch; }
	.pNav .sub-menu > li { display: -webkit-flex; display: flex; align-items: center; width: 30%; }
	.pNav .sub-menu > li.clm1 { width: calc(60% - 20%); }
	.pNav .sub-menu > li ul { align-self: stretch; padding: 10%; line-height: 2; }
	.pNav .sub-menu .title { color: #ffffff; font-weight: bold; letter-spacing: 0.5em; background: #004098; width: 40%; justify-content: center; }
	.pNav .sub-menu .btn { position: absolute;  width: 55%; left: 40%; right: 0; margin: 0 auto; bottom: 10%; }
	.pNav .sub-menu .btn a { background: #ffffff; text-align: center; width: 100%; padding: 5px 0; border: 1px solid #004098; }
	
	/* ========== FOOTER ========== */
	/* ----- FOOTER MENU ----- */
	#ft_menu .blk_1200 { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
	#ft_menu .fnav p { border-bottom: 1px solid #494949; }
	#ft_menu .fbn ul { -webkit-justify-content: space-between; justify-content: space-between; }
	
	
	/* ----- 768px Over - 1366px Under : Note PC/Tablet ----- */
	@media print, screen and (min-width: 768px) and (max-width: 1366px) {
		
		/* ========== COMMON ========== */
		body { font-size: 1.6em; }

		/* ========== CONTENTS ========== */
		/* ----- COMMON ----- */
		.inner { width: 100%; padding: 0 10px; }

		.blk_1500,.blk_1200 { width: 95%; margin: 0 auto; }
		.blk_1000 { width: 80%; margin: 0 auto; }

		/* ========== HEADER ========== */
		header .tagline { font-size: 1.5rem; margin-bottom: 7px; }

		/* ----- SUB MENU ----- */		
		header .submenu .contact { padding: 8px 20px 8px 10px; top: 5px; right: 450px; }
		header .submenu .contact li { margin-left: 10px; }
		header .submenu .contact .tel a { background-size: auto 1.8rem; padding-left: 16px; }
		header .submenu .contact .form a { background-size: 20px auto; width: 20px; top: -2px; right: -12px; }
		header .submenu .sm { padding: 9px 0; top: 5px; right: 10px; }
		header .submenu .sm li.ac a, header .submenu .sm li.dl a, header .submenu .sm li.en a, header .submenu .contact .tel a { background-size: auto 1.8rem; background-position: left center; }
		header .submenu .sm li a { padding-left: 20px; margin-left: 20px; }

		/* ----- GLOBAL MENU ----- */
		.pNav { width: calc(100% - 20px); }
		.pNav { bottom: -0.5vw; }
		.pNav .sub-menu { left: 0; }
		.pNav .sub-menu .title { font-size: 2.2rem; }
		.pNav .nav > li { margin-left: 20px; }
		.pNav .sub-menu > li ul { font-size: 1.4rem; }
		.pNav .sub-menu.btn_bm > li ul { padding: 10% 10% 80px; }

		/* ========== FOOTER ========== */
		/* ----- DOWNLOAD ----- */
		#btn_download .btn img { max-width: 500px; width: 100%; height: auto; }

		/* ----- BANNER ----- */
		#banner .inner { padding: 30px 0 20px; }
		#banner ul li { /*max-width: 500px;*/ width: calc((100%/4) - 20px); margin: 0 10px 10px; }
		#banner ul li img {}

		/* ----- FOOTER MENU ----- */
		#ft_menu .blk_1200 { padding: 50px 0 0; }
		#ft_menu .blk_1200 div { width: calc((100%/4) - 0.8vw); padding: 0 0.4vw; }
		#ft_menu .fnav p { font-size: 1.4rem;  margin-bottom: 10px; }
		#ft_menu .fnav li { font-size: 1.2rem; }
		#ft_menu .fnav ul { margin-bottom: 1.5em; }
		#ft_menu .fbn { padding-bottom: 20px; }
		#ft_menu .fbn ul li { width: calc((100%/5) - 0.8vw); padding: 0 0.4vw; }
		#ft_menu .fbn ul li a { font-size: 1.5rem; padding: 10px 0; }

		/* ----- FOOTER COPYRIGHTS ----- */
		#ft_copy { padding: 20px 0; }
		#ft_copy p { font-size: 1.2rem; }
		#ft_copy .com { margin-bottom: 10px; }
		#ft_copy .com img { width: 200px; }
		#ft_copy .address { margin-bottom: 20px; }
		
		/* ----- 1200px Under ----- */
		@media screen and (max-width: 1200px) {
			
			/* ========== HEADER ========== */			
			header h1, header .logo { display: block; width: 18%; }
			header h1 img, header .logo img { width: 100%; }
			header .submenu .contact { padding: 8px 20px 8px 5px; }
			header .submenu .contact p { display: none; }

		}
		
		/* ----- 1000px Under ----- */
		@media screen and (max-width: 1000px) {
			
			/* ========== CONTENTS ========== */
			/* ----- COMMON ----- */
			.blk_1000 { width: 95%; margin: 0 auto; }
			
			/* ========== HEADER ========== */
			header .tagline { font-size: 1.2rem; margin-bottom: 5px; }
			header h1, header .logo { display: block; width: 20%; }
			header h1 img, header .logo img { width: 100%; }
			
			/* ----- SUB MENU ----- */
			header .submenu .contact { right: 400px; }
			header .submenu .contact, header .submenu .sm { font-size: 1.4rem; }
			header .submenu .contact .tel a { background-size: auto 1.5rem; }
			header .submenu .contact .form a { background-size: 20px auto; }
			header .submenu .sm li.ac a, header .submenu .sm li.dl a, header .submenu .sm li.en a, header .submenu .contact .tel a { background-size: auto 1.5rem; }
			
			/* ----- GLOBAL MENU ----- */
			.pNav { font-size: 1.4rem; }
			
		}
	}
	
	/* ----- 1366px Over : Note PC/Desk Top PC ----- */
	@media screen and (min-width: 1367px) {
		
		/* ========== COMMON ========== */
		body { font-size: 1.8em; }
		
		/* ========== HEADER ========== */
		header { height: 105px; }
		header .tagline { font-size: 1.5rem; margin-bottom: 7px; }
		header.is-fixed { height: 80px; }

		/* ----- SUB MENU ----- */
		header .submenu .contact { padding: 10px 30px 10px 20px; top: 10px; right: 500px; }
		header .submenu .contact li { margin-left: 20px; }
		header .submenu .contact .tel a { padding-left: 25px; }
		header .submenu .contact .form a { width: 26px; top: -2px; right: -15px; }
		header .submenu .sm { padding: 11px 0 11px 30px; top: 10px; right: 10px; }
		header .submenu .sm li a { padding-left: 25px; margin-left: 15px; }
		header .submenu .sm li.ac a, header .submenu .sm li.dl a, header .submenu .sm li.en a, header .submenu .contact .tel a { background-position: left -2px; }

		/* ----- GLOBAL MENU ----- */
		.pNav { width: 100%; }
		.pNav { font-size: 1.9rem; bottom: -10px; }
		.pNav .sub-menu { left: 0; }
		.pNav .sub-menu .title { font-size: 3.6rem; }
		.pNav .nav > li { margin-left: 35px; }
		.pNav .sub-menu > li ul { font-size: 2.0rem; }
		.pNav .sub-menu.btn_bm > li ul { padding: 10% 10% 16%; }

		/* ========== FOOTER ========== */
		/* ----- BANNER ----- */
		#banner .inner { padding: 70px 0; }
		#banner ul li { margin: 0 12.5px 25px; }

		/* ----- FOOTER MENU ----- */
		#ft_menu .blk_1200 { padding: 50px 0 0; }
		#ft_menu .blk_1200 div { width: calc((100%/4) - 15px); padding: 0 7.5px; }
		#ft_menu .fnav p { font-size: 1.7rem; margin-bottom: 10px; }
		#ft_menu .fnav ul { margin-bottom: 2rem; }
		#ft_menu .fnav li { font-size: 1.5rem; }
		#ft_menu .fbn { padding-bottom: 70px; }
		#ft_menu .fbn ul li { width: calc((100%/5) - 15px); padding: 0 7.5px; }
		#ft_menu .fbn ul li a { font-size: 1.9rem; padding: 10px 0; }

		/* ----- FOOTER COPYRIGHTS ----- */
		#ft_copy { padding: 50px 0; }
		#ft_copy .com { margin-bottom: 25px; }
		#ft_copy .address { margin-bottom: 70px; }
		
		/* ----- 1367px Over - 1920 Under : Note PC ----- */
		@media screen and (min-width: 1367px) and (max-width: 1920px) {
			
			/* ========== CONTENTS ========== */
			/* ----- COMMON ----- */
			.inner { width: 100%; padding: 0 10px; }
			
			.blk_1500 { width: 90%; margin: 0 auto; }
			.blk_1200 { width: 80%; margin: 0 auto; }
			.blk_1000 { width: 70%; margin: 0 auto; }
			
			/* ========== HEADER ========== */
			/* ----- GLOBAL MENU ----- */
			.pNav { width: calc(100% - 20px); }
			.pNav .sub-menu > li ul { font-size: 1.8rem; }
			.pNav .sub-menu.btn_bm > li ul { padding: 10% 0 18% 10%; }
		}
		
		/* ----- 1921px Over : Desk Top PC ----- */
		@media screen and (min-width: 1921px) {

			/* ========== CONTENTS ========== */
			/* ----- COMMON ----- */
			.inner { width: 1920px; margin: 0 auto; }

			.blk_1000 { width: 1000px; margin: 0 auto; }
			.blk_1200 { width: 1200px; margin: 0 auto; }
			.blk_1500 { width: 1500px; margin: 0 auto; }
			
		}
		
	}
	
}

@media print, screen and (min-width: 769px) {
    @media print, screen and (min-width: 768px) and (max-width: 1366px) {
        @media screen and (max-width: 1200px) {
           .ytb-bnr {
			   top: 20px;
   				 left: 25%;
			}
		}
	}
}
@media screen and (max-width: 769px) {
    .ytb-bnr {
		top: 0px;
        left: 50%;
        width: 20%;
		position: absolute;
		z-index: 300;
	}
	
	
    .ytb-bnr ul{
		display: flex;
		justify-content: space-between;
		align-items:baseline;
	}

	.ytb-bnr li{
		width: 37%;
	}
	
	.ytb-bnr li:first-child{
		width: 55%;
	}
	
	.ytb-bnr li img{
		width: 100%;
	}


}