@charset "utf-8";
/* CSS Document */
/* Ver.2.0.0: 2016.10.18 */
/* Ver.2.1.0: 2021.9.9 */

/*Style for all pages*/

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
	/* padding-bottom: 40px; */
	color: #5a5a5a;
	background-color:#f5f5f5; /* ★20151008 背景色を.containerからbodyに変更（拡大） */
	/* フッターはみ出しを制御 */
	overflow-x: hidden;
	/* 追加 */
	overflow-y: scroll;
}


	
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */


/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 25;  
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
  padding-right: 0;
  padding-left: 0;  
}

.navbar-wrapper .navbar {
  background-color:	#FFFFFF;
  border-bottom-color: #10218b;
  border-bottom-width: 2px;		
}

.corporate_brand {
  padding-top: 15px;
  padding-bottom: auto;
  position: absolute;
}

.corporate_logo {
  height: 22px;
  margin-left: 15px;
}

.navber-header {
	width: 100%;
	}

.navbar-toggle{
	background-color:#6491C7;
	margin-top: 8px;
	margin-bottom: auto;
}

.navbar-toggle .icon-bar{
	background-color:#FFFFFF;
}


/*toggle open*/

.navbar .nav .active > a, .navbar .nav .active > a:hover, .navbar .nav .active > a:focus{	
	background: #6491C7;
	color: black !important;
	text-shadow: none;
}

.navbar .nav .active > a{	
	background: #6491C7;
	color: white !important;
	text-shadow: none;	
}

.navbar .navbar-collapse .nav > li > a:hover, .navbar .navbar-collapse .nav > li > a:focus, .navbar .navbar-collapse .dropdown-menu a:hover, .navbar .navbar-collapse .dropdown-menu a:focus{	
	background: #CCE1F5;
	color: black !important;
	text-shadow: none;	
}

/*If there is a blandlogo, following message is unnecessary.*/
.navbar .navbar-brand, .navbar .nav > li > a{	
	color: #10218B !important;
	text-shadow: none !important;
	font-weight: 400;
	font-size: 16px;
}

/*Add OS tab*/
li select{
	margin-top:12px;
	margin-left:15px;
	margin-bottom:12px;
}

/*OS_right margin*/
.navbar-nav.navbar-right:last-child {
	margin-right: 15px;
}




/* MARKETING CONTENT
-------------------------------------------------- */


.qr {
	width:85px;
	height:85px;
}


/* font
-------------------------------------------------- */
body{	
	font-family: Meiryo, メイリオ, sans-serif;
	font-weight: 400 !important;
	letter-spacing: 0.1em;
}

.nav{	
	font-family: Meiryo, メイリオ, sans-serif;
	font-weight: 400 !important;
	letter-spacing: 0.1em;
}

p.Announcemenu{
	font-size:16px;
}

h2 .kakko{
	font-size:20px;
}

h2.titlesupport,h2.titlemenu{
	font-size:20px;
}

h2.titlesupport_s{
	font-size:22px;
}

h2.titlesupport_vs{
	font-size:18px;
}

h3.titlesetup{
	font-size:22px;
}

code.cudj{
	color:#ff7800;
	font-weight:bold;
}

p#error_message{
	background-color:transparent;
	color:#afeeee;	
	font-family: Meiryo, メイリオ, sans-serif;
	font-weight: 400 !important;
	letter-spacing: 0.1em;
	font-size:14px;
}

code.oshirase{
	color:#ff7800;
	font-weight:bold;
	font-family: Meiryo, メイリオ, sans-serif;
}


/*/////////////////////ここからFY15トップページ改修用スタイル///////////////////////*/

/*page-topスクロール用スタイル指定*/
.page-top{
	margin:0;
	padding:0;
	display:none;
}

.page-top p{
	margin:0;
	padding:0;
	position:fixed;
	right:16px;
	bottom:16px;
}

.move-page-top{
	display:block;
	background:#428bca;/*■20160106修正*/
	border-color:#357ebd;
	width:50px;
	height:50px;
	border-radius:10px;
	color:#fff;
	line-height:50px;
	text-decoration:none;
	text-align:center;
	/*-webkit-transition:all 0.3s;*/
	/*-moz-transition:all 0.3s;*/
	/*transition:all 0.3s;*/
}

.move-page-top:hover{
	/*opacity:0.80;*/
	color:#fff;
	background-color:#3276b1;
	border-color:#285e8e;
	text-decoration:none;
	cursor:pointer;
}
	

/*page-topスクロール用スタイル指定おわり*/


	
/*/////////////////////ここまでFY15トップページ改修用スタイル///////////////////////*/

/*jumbotoron size except for pc*/
.jumbotron{
    padding:24px;
}/*20160107追加 30->24*/


/* button
-------------------------------------------------- */
img.abutton,img.gbutton{
	margin:5px 10px 10px 0px;
}


/*index.cssより、共通スタイル移行20160616*/
/* Add design section */

.jumbotron h1 {
	margin-top: 10px;
	color: #fff}            /* ジャンボトロン行間調整　文字を白に　*/

.jumbotron h2 {
	color: #fff}
	
.jumbotron {
	margin-top: 62px}             /* ジャンボトロンをヘッダー下にに　6/23ヘッダー幅縮小のため68→62へ変更　*/

.jumbotron p{
	color: #fff}                 /* ジャンボトロン文字を白に　*/


.text-muted{
	color: #303030;      						/* 手順タイトル文字を濃色に　*/
	line-height: 30px;							/*0624 add design*/
	}               
	
.navbar-nav li a{
	padding-top: 17px;							/* 「セットアップ」「サポート」位置を下方に修正　*//*0624 18->17 design*/
	padding-bottom: 13px;					/*0624 add design*/
	}

.navbar-nav {
	margin-left: 0px}                        /* 6/24追加　*/

	
.btn-lg {
	margin-bottom: 5px}                      /* AppAtore/Googleplayボタンがモバイル時接するので修正　*/

hr {
	border-color: #dcdcdc}
	/* 背景色グレイに合わせて罫線色も濃く修正　*/

.row {
	padding-left: 15px;
	padding-right: 15px}

img {
	max-width: 100%}										/* 6/24追加　*/
	
.h2title h2{
	color: #fff}												/* 6/24追加　*/

/*bij setup ps*/
.bijli{
	list-style-type:none;
	padding-left:0px;
	font-weight:bold;
}

.thum{
	margin:15px auto;
}

.jtop h1,.jtop p,div.inputmodel .input-group{
	text-align:center;
}

p#error_message{
	float:left;
}

.modal-content{
	background-color:#f5f5f5;
}

/*index.cssより、共通スタイル移行20160616おわり*/

/* 2021.06.1 language list style */

div#languageModal .LanguageList{
	padding: 20px;
}

div#languageModal .rtl .LanguageList{
	padding: 20px;
}

div#languageModal li{
	font-size: 14px;
	margin-bottom: 15px;
}

div#languageModal li.selected::before {
	content: "";
	position: absolute;
	top: 0;
	left: -3px;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 9px;
	height: 14px;
	border-right: 2px solid #228b22;
	border-bottom: 2px solid #228b22;
}

div#languageModal li>a:hover {
	opacity: 0.7;
}

/* 2021.6.2 modal-open style */
body.modal-open{
	height: 100vh;
	/* overflow-y: hidden; */
	overflow-y: scroll;
	/* 変更 */
	padding-right: 0px !important;
}

div.modal-backdrop{
	height: 100vh;
	pointer-events: none;
}

/* 言語リスト 2021 scroll文字 */

.scrolldown{
    position: absolute;
    top: 50%;
    right: 10%;
    height: 150px;
}

.rtl .scrolldown{
    position: absolute;
    top: 50%;
    left: 20%;
    height: 150px;
}

.scrolldown span{
    position: absolute;
    right: -15px;
    top: -20px;
    background-color: #ddd;
    border: 1px solid #f5f5f5;
    border-radius: 5px;
    padding: 5px 10px;
    color: #5a5a5a;
    font-size: 18px;
    letter-spacing :0.05em;
    animation: float 1.2s ease-in-out 3;
    opacity: 0;
}

.rtl .scrolldown span{
	left:-20px;
	right: auto;
}


.scrolldown::after{
    content: "";
    position: absolute;
    top: 0;
    width: 5px;
    height: 120px;
    background-color: #666;
    animation: pathmove 1.2s ease-in-out 3;
    opacity: 0;
}

/*footer_style.cssより、共通スタイル移行20240226*/
/* footer style */
footer {
    background-color: transparent;
    margin-top: 60px;
    padding: 20px 0 40px;
    width: 100vw;
	margin-left: calc(-50vw + 50%);
    /* border-top: 1px solid #cdcdcd; */
}

footer ul{
	list-style: none;
}

footer a{
    color: #10218b;
}

/* 2022 Footer-Style */
footer ul.footer_link{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    /* 追加 */
    flex-wrap: wrap;
    /* row-gap: 10px; */
}

footer ul.footer_link li{
    margin-bottom: 10px;
    font-size: 14px;
}

footer ul.footer_link li+li{
    position: relative;
}

/* リスト間区切り線 */
footer ul.footer_link li+li::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    border-left: 1px solid #10218b;
    /* border-left: 1px solid #f5f5f5; */
}

/* RTL beforeスタイル打ち消し */
html[dir="rtl"] footer ul.footer_link li+li::before{
    display: none;
}

html[dir="rtl"] footer ul.footer_link li+li::after{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    border-right: 1px solid #10218b;
}

footer ul.footer_link li a{
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
    color: #10218b;
    /* color: #f5f5f5; */
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
}

footer ul.footer_link li a:hover{
    color: #23527c;
    /* color: #fff; */
    /* opacity: 0.7; */
    text-decoration: underline;
}

/* Copyright領域 */
footer ul.footer_copyright{
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    list-style: none;
    padding: 0;
}

footer ul.footer_copyright div#copyright{
    color: #5a5a5a;
    /* color: #f5f5f5; */
    font-size: 12px;
}

/* end */


@keyframes pathmove{
    0%{
        height: 0;
        top: 0;
        opacity: 0;
    }

    30%{
        height: 50px;
        opacity: 1;
    }

    100%{
        height: 0;
        top: 120px;
        opacity: 0;
    }
}

@keyframes float{
    0%{
        opacity: 0;
    }

    30%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}



/* end */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 992px) {
}

@media (min-width:1200px)	{
}


/* width 768px以上 */
@media (min-width: 768px) {

	/* Navbar positioning foo */
	.navbar-wrapper {
	margin-top: 0px;
	}

	.navbar-wrapper .container {
	padding-right: 0px;
	padding-left:  0px;
		margin-right:　0px;
		margin-left:   0px;
	}

	.navbar-wrapper .navbar {
	padding-right: 0;
	padding-left:  0;
		background-color:#FFFFFF;
	}

	/* The navbar becomes detached from the top, so we round the corners */

	/*jumbotoron size for pc */
	.jumbotron h1{
		font-size:50px;
	}/*■20151228追加 63->50*/

	.jumbotron{
		padding-top:38px;
		padding-bottom:38px;
	}/*■20160105追加 48->38*/

	/* 2021.6.1追加 */
	div#languageModal>.language-modal {
		width: 680px;
		margin: 30px auto;
	}

	.scrolldown{
		display: none;
	}

	.scrolldown span{
		display: none;
	}

	.scrolldown::after{
		display: none;
	}
	/* end */

}


@media (max-width: 991px) {
	h2.titlesupport{
		font-size:16px;
	}
}



/*Detail of smartphone*/

@media (max-width: 767px) {/*2016.7.19 768->767*/

	/* font
	-------------------------------------------------- */
	p.Announcesetup,p.Announcesupport,p.AnnounceAS{
		font-size:15px;
	}

	p.Announcemenu,p.Announcetop{
		font-size:14px;/*■20160112p.Announcetop追加 21->14*/
	}

	h2.Announcesetup,h2.Announcesupport,h2.AnnounceAS,h2.Announcemenu{
		font-size:20px;
	}

	h2.titlesupport,h2.titlemenu,h2.titlesupport_s{
		font-size:22px;
	}

	h2.titlesupport_vs{
		font-size:20px;
	}

	.jumbotron h1{
		font-size:32px;/*■20160112追加 36->32*/
	}


	/*OS margin at toggleopen*/
	.navbar-nav.navbar-right:last-child {
		margin-right: 0px;
		margin-left:0px;
	}

	/* 2021.05.27 add style */
	div#languageModal>.language-modal {
		width: 420px;
		margin: 30px auto;
	}

	div#languageModal>.language-modal .modal-content {
		max-height: 480px;
	}

	div#languageModal>.language-modal .modal-body {
		/* max-height: 400px; */
		max-height: 380px;
		overflow-y: scroll;
	}

	div#languageModal li{
		font-size: 18px;
		margin-top: 6px;
	}

	div#languageModal li.selected::before {
		top: -1px;
		left: -7px;
		width: 12px;
		height: 17px;
	}

	/* end */

}

@media (max-width: 480px) { 

	/*/////////////////////ここからFY15トップページ改修用スタイル///////////////////////*/

	.jumbotron h1{
		font-size:26px;/*■20160112追加 36->26*/
	}

	/*/////////////////////ここまでFY15トップページ改修用スタイル///////////////////////*/

	/* 2021.05.27 add style */
	div#languageModal>.language-modal {
		width: 360px;
		margin: 40px auto;
	}

	div#languageModal li.selected::before {
		left: -16px;
	}
	/* end */


}

/* 2021.05.27 スマホ縦長端末向け Style */
@media (max-width: 480px) and (min-height: 560px){
	div#languageModal>.language-modal .modal-content {
		max-height: 550px;
	}

	div#languageModal>.language-modal .modal-body {
		max-height: 450px;
	}

}


/* デバイス横向き時の設定 */
@media screen and (orientation: landscape) {

    div#languageModal > .language-modal{
        /* width: 680px; */
        width: 750px;
        margin: 10px auto;
    }

    /* div#languageModal>.language-modal .modal-content {
		max-height: 670px;
	} */
}


@media screen and (orientation: landscape) and (max-width: 991px) and (max-height: 600px){

    div#languageModal > .language-modal{
        width: 680px;
        /* max-height: 400px; */
        /* margin: 30px auto; */
    }

}

@media screen and (orientation: landscape) and (max-width: 991px) and (max-height: 420px){
    
    div#languageModal > .language-modal{
        /* width: 700px; */
        width: 520px;
        max-height: 380px;
        margin: 10px auto;
    }

    div#languageModal>.language-modal .modal-content {
		max-height: 360px;
	}

    div#languageModal>.language-modal .modal-body{
        max-height: 300px;
        overflow-y: scroll;
    }
    /* 横向きの時、Bootstrapサイズを100%に拡張 */
    div#languageModal .col-sm-3{
        width: 100%;
    }

    .scrolldown {
        display: block;
        position: absolute;
        top: 50%;
        right: 15%;
        height: 150px;
    }

    .scrolldown span {
        display: block;
        position: absolute;
        right: -15px;
        top: -20px;
        background-color: #ddd;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        padding: 5px 10px;
        color: #5a5a5a;
        font-size: 18px;
        letter-spacing: 0.05em;
        animation: float 1.2s ease-in-out 3;
        opacity: 0;
    }

    .scrolldown::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 5px;
        height: 120px;
        background-color: #666;
        animation: pathmove 1.2s ease-in-out 3;
        opacity: 0;
    }
}

@media screen and (orientation: landscape) and (max-width: 767px) and (max-height: 380px){
    div#languageModal > .language-modal{
        /* width: 700px; */
        width: 520px;
        max-height: 360px;
        /* margin: 30px auto; */
    }

    div#languageModal>.language-modal .modal-content {
		max-height: 320px;
	}

    div#languageModal>.language-modal .modal-body{
        max-height: 260px;
        overflow-y: scroll;
    }
    /* 横向きの時、Bootstrapサイズを100%に拡張 */
    div#languageModal .col-sm-3{
        width: 100%;
    }

    .scrolldown {
        display: block;
        position: absolute;
        top: 50%;
        right: 15%;
        height: 150px;
    }

    .scrolldown span {
        display: block;
        position: absolute;
        right: -15px;
        top: -20px;
        background-color: #ddd;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        padding: 5px 10px;
        color: #5a5a5a;
        font-size: 18px;
        letter-spacing: 0.05em;
        animation: float 1.2s ease-in-out 3;
        opacity: 0;
    }

    .scrolldown::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 5px;
        height: 120px;
        background-color: #666;
        animation: pathmove 1.2s ease-in-out 3;
        opacity: 0;
    }
}

@media screen and (orientation: landscape) and (max-width: 767px) and (max-height: 320px){
    div#languageModal > .language-modal{
        /* width: 520px; */
        max-height: 300px;
        margin: 10px auto;
        overflow-y: hidden;
    }

    div#languageModal>.language-modal .modal-content {
		max-height: 260px;
	}

    div#languageModal>.language-modal div.modal-header{
        padding: 10px;
    }

    div.modal-header h3.modal-title{
        font-size: 20px;
    }

    div#languageModal>.language-modal .modal-body{
        max-height: 240px;
        overflow-y: scroll;
    }
    /* 横向きの時、Bootstrapサイズを100%に拡張 */
    div#languageModal .col-sm-3{
        width: 100%;
    }

    .scrolldown {
        display: block;
        position: absolute;
        top: 50%;
        right: 15%;
        height: 150px;
    }

    .scrolldown span {
        display: block;
        position: absolute;
        right: -15px;
        top: -20px;
        background-color: #ddd;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        padding: 5px 10px;
        color: #5a5a5a;
        font-size: 18px;
        letter-spacing: 0.05em;
        animation: float 1.2s ease-in-out 3;
        opacity: 0;
    }

    .scrolldown::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        width: 5px;
        height: 120px;
        background-color: #666;
        animation: pathmove 1.2s ease-in-out 3;
        opacity: 0;
    }
}