@charset "utf-8";
/* ------------------------------------------------------------ common */
body { font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; min-width: 1200px; }
a { transition: opacity 0.5s; }
a:link 		{ color: #111; text-decoration: none; }
a:visited 	{ color: #111; text-decoration: none; }
a:hover,
a:hover img,
input[type="submit"]:hover { color: #111; text-decoration: none;  filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
    
input[type="text"],
select,
textaera	{ border: 1px solid #b5b5b5; }

input[type="submit"] { -webkit-appearance: button; cursor: pointer; padding: 0; border: none; }
area{
border:none;
outline:none;
}
.inner 	{ width: 1100px; margin: 0 auto; }
.s_inner 	{ width: 1000px; margin: 0 auto; }

.sp { display: none; } 
.left { float: left; }
.right { float: right; }
/* ------------------------------------------------------------ header */
header { padding: 35px 30px; position: fixed; top: 0; width: 100%; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; z-index: 10; min-width: 1300px; }
header .logo { float: left; width: 322px; }
header p.recruit_link { position: absolute; right: 45px; bottom: -95px; }
header .nav { float: right; padding: 5px 0 0; }
header .nav ul li { position: relative; float: left; padding: 0 25px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; }

header .accordionChild{ transition: all 0.7s; visibility: hidden; opacity: 0; position: absolute; top: 30px; left: 50%; translate: -50% 0; padding: 10px 10px 0; width: 150px; background: #fff; }
header .accordionChild .accordionitem{ display: block; margin-bottom: 10px; padding: 5px 10px; line-height: 140%; font-size: 14px; color: #fff; background: #004699; }

header .accordionParent:hover .accordionChild{ transition: all 0.7s; visibility: visible; opacity: 1; }

h1 { font-size: 43px; background: #004699; color: #fff; padding: 45px 0; text-align: center; font-weight: bold; }

/* ------------------------------------------------------------ bread */
#bread { min-width: 1300px; background: #e3e3e3; padding: 5px 0; margin: 98px auto 0; }
#bread ol { margin: auto; max-width: 1300px; padding: 0 30px; }
#bread ol li { list-style-type: none; display: inline-block;* display: inline;* zoom: 1; }
#bread ol li a { background: url(../images/common/bread.png) right center no-repeat; padding: 0 20px 0 5px; font-size: 14px; background-size: 6px auto;}
#bread ol li strong { font-size: 14px; padding: 0 10px;}

/* ------------------------------------------------------------ footer */
footer #f_contact { border-top: 4px solid #ff0018; background: #0d2088; padding: 115px 0 25px; }
footer #f_contact .tel { width: 527px; float: left; color: #fff; margin: 7px 0 0; }
footer #f_contact .tel h5 { padding: 0 0 25px; font-size: 24px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 500; }
footer #f_contact .tel h5 span { letter-spacing: 5px; display: inline-block; *display: inline; *zoom: 1; font-size: 36px; font-family: Futura,Trebuchet MS,Arial,sans-serif; padding: 0 20px 0 0; }
footer #f_contact .tel .box { text-align: center; padding: 25px 0 20px; border-top: 1px solid #fff;  border-bottom: 1px solid #fff; }
footer #f_contact .tel p.text { font-size: 24px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 500; padding: 0 0 5px; }
footer #f_contact .tel p.num {  vertical-align: top;  padding: 10px 0; }
footer #f_contact .tel p.num a { color: #fff; font-size: 54px; font-family: Futura,Trebuchet MS,Arial,sans-serif; pointer-events: none; cursor: default; }
footer #f_contact .tel p.num a img { margin: 5px 15px 0 0; vertical-align: top; } 
footer #f_contact .mail { display: block; float: right; }
footer #f_contact ul.banners { margin: 0 0 0 -10px; padding: 45px 0 0; }
footer #f_contact ul.banners li { float: left; margin: 0 0 13px 10px; }
footer address { text-align: center; color: #6e6e6e; font-size: 18px; padding: 20px 0; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 500; }

/* ------------------------------------------------------------ btn */
.btn 	{ text-align: center; }
.btn a,
.btn input[type="submit"] { display: inline-block; *display: inline; *zoom: 1; color: #fff; width: 250px; height: 50px; font-size: 14px; line-height: 50px; vertical-align: top; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.btn .red { background: #dd0016; }
.btn .grey { background: #979797; }
.top_btn { text-align: center; padding: 150px 0 200px; }
.top_btn a { display: inline-block; *display: inline; *zoom: 1; font-size: 24px; color: #fff; text-align: center; background: #413f3e; padding: 30px 125px; }
.red_border_btn { text-align: center; }
.red_border_btn a { display: inline-block; *display: inline; *zoom: 1; font-size: 16px; color: #e51b1b; text-align: center; border: solid 1px #e51b1b; border-radius: 29px; -moz-border-radius: 29px; -webkit-border-radius: 29px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 500; padding: 20px 85px; }

/* ------------------------------------------------------------ title */
.border_title { text-align: center; position: relative; z-index: 1; }
.border_title::before { position: absolute; content: ""; width: 100%; height: 1px; background: #004699; left: 0; top: 0; bottom: 0; margin: auto 0; z-index: -1; }
.border_title span { display: inline-block; *display: inline; *zoom: 1; font-size: 28px; font-weight: bold; padding: 0 20px; color: #004699; }


/* ------------------------------------------------------------ exchange */
.example{ padding: 0 0 120px; }
.example h6{ font-size: 28px; }
.example li{ width: calc(100% / 3 - 1%); }
/*
.example .third-ttl { margin: 0 0 30px; }
.example .third-ttl span{ padding: 0 22%; }
.example .third-ttl span::before,
.example .third-ttl span::after{ width: 15%; }
*/

.example .third-ttl::before, .example .third-ttl::after{ width: 22%; }
.example p{ height: 115px; margin: 20px 0 40px; font-size: 18px; line-height: 180%; }
.example img{ width: 100%; height: auto; }



/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
/* ------------------------------------------------------------ common */
body { min-width: 100%; }
a { transition: opacity 0.5s; }
a:link 		{ color: #111; text-decoration: none; }
a:visited 	{ color: #111; text-decoration: none; }
a:hover,
a:hover img,
input[type="submit"]:hover { color: #111; text-decoration: none;  filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
    
input[type="text"],
select,
textaera	{ border: 1px solid #b5b5b5; }

input[type="submit"] { -webkit-appearance: button; cursor: pointer; padding: 0; border: none; }

.inner 	{ width: 90%; margin: 0 auto; }
.s_inner 	{ width: 90%; margin: 0 auto; }

.pc { display: none; }
.sp { display: block; } 
.left { float: none; }
.right { float: none; }
/* ------------------------------------------------------------ header */
header { padding: 10px 5%; min-width: 100%; }
header .logo { width: 180px; padding: 10px 0 0; }
header .logo img { width: 100%; height: auto; }
header p.recruit_link { position: absolute; right: 45px; bottom: -95px; }
header .nav { float: right; padding: 5px 180px 0 0; }
header .nav ul li { float: left; padding: 0 25px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; }

h1 { font-size: 24px; padding: 30px 0; }

/* ------------------------------------------------------------ bread */
#bread { min-width: 100%; margin: 59px auto 0; }
#bread ol { margin: auto; max-width: 100%; padding: 0 5%; }
#bread ol li { list-style-type: none; display: inline-block;* display: inline;* zoom: 1; }
#bread ol li a { padding: 0 20px 0 5px; font-size: 14px; }
#bread ol li strong { font-size: 13px; padding: 0 10px; }

/* ------------------------------------------------------------ footer */
footer #f_contact { padding: 50px 0; }
footer #f_contact .tel { width: 100%; float: none; color: #fff; }
footer #f_contact .tel h5 { padding: 0 0 25px; font-size: 22px; }
footer #f_contact .tel h5 span { letter-spacing: 3px; font-size: 30px; padding: 0 20px 0 0; }
footer #f_contact .tel .box { padding: 25px 0 15px; }
footer #f_contact .tel p.text { font-size: 18px; padding: 0 0 5px; }
footer #f_contact .tel p.num { padding: 10px 0; }
footer #f_contact .tel p.num a { font-size: 32px; }
footer #f_contact .tel p.num a img { width: 40px; height: auto; margin: 5px 15px 0 0; } 
footer #f_contact .mail { float: none; margin: 40px 0 0; }
footer #f_contact .mail img { width: 100%; height: auto; }
footer #f_contact ul.banners { margin: 0 auto; padding: 45px 0 0; }
footer #f_contact ul.banners li { float: none; margin: 0 0 13px; }
footer #f_contact ul.banners li img { width: 100%; height: auto; }
footer address { font-size: 12px; padding: 12px 0; }

/* ------------------------------------------------------------ btn */
.btn 	{ text-align: center; }
.btn a,
.btn input[type="submit"] { display: inline-block; *display: inline; *zoom: 1; color: #fff; width: 250px; height: 50px; font-size: 14px; line-height: 50px; vertical-align: top; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.btn .grey { background: #979797; display: block; margin: 0 auto 10px; }
.btn .red { background: #dd0016; display: block; margin: 0 auto; }
.top_btn { padding: 50px 0; }
.top_btn a { font-size: 16px; padding: 20px 70px; color: #fff; }
.red_border_btn { text-align: center; }
.red_border_btn a { display: inline-block; *display: inline; *zoom: 1; font-size: 16px; color: #e51b1b; text-align: center; border: solid 1px #e51b1b; border-radius: 29px; -moz-border-radius: 29px; -webkit-border-radius: 29px; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 500; padding: 20px 85px; }

/* ------------------------------------------------------------ title */
.border_title { }
.border_title span { font-size: 22px; padding: 0 15px; }

/* ------------------------------------------------------------ groval nav */
.fixed { position: fixed !important; top: 0 !important; width: 100%; }
#mask { background: #000; height: 100%; width: 100%; min-height: 100%; position: fixed; opacity: 0.7; filter: alpha(opacity=70); -moz-opacity:0.70; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; }
#open_modal { cursor: pointer; display: block; }

#menu-btn { width: 40px; height: auto; float: right; }
#menu-btn img { display: inline !important; width: 100%; height: auto; }

#navigation {  position: fixed; text-align: center; margin: 0; top: 0; right: 0; left: 0; z-index: 999; display: none; height: 100%; overflow-y: scroll; background: #fff; }
#menu-header { background: #fff; padding: 50px 0; position: fixed; z-index: 999; width: 100%; }
#menu-header .close_modal { position: absolute; right: 6%; top: 0; }
#menu-header .close_modal img { width: 25px; height: 25px; padding: 15px 0 0; }
#navigation #menu-header a { display: block; width: 200px; margin: 0 auto; }
#navigation #menu-header a img { width: 100%; height: auto; margin: 0 auto; padding: 0; }
#navigation ul { font-size: 14px; z-index: 999; width: 94%; background: #fff; padding: 120px 3% 50px; }
#navigation ul li { background: #fff; text-align: left; border-bottom: #000 solid 1px; }
#navigation ul li:first-child { border-top: #000 solid 1px; }
#navigation ul li .navbtn { font-size: 16px; color: #000; display: block; width: 100%; padding: 15px 3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: relative; }
#navigation ul li .arrow{ position: relative; }
#navigation ul li .arrow::before { position: absolute; top: 0; bottom: 0; margin: auto 0; right: 20px; display: block; width: 8px; height: 8px; border-top: solid 1px #000; border-right: solid 1px #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; }

#navigation ul li.accordionParent .navbtn::before{ -webkit-transform: rotate(135deg); transform: rotate(135deg); }

#navigation .accordionChild{ padding: 15px 3%; }
#navigation .accordionParent .accordionitem { display: block; margin: 0 0 20px; }

/* ------------------------------------------------------------ exchange */
	.example{ padding: 0 0 60px; }
	.example li{ width: 100%; padding: 0 0 30px; }
	.example .third-ttl{ margin: 0 0 15px; }
	.example h6{ font-size: 22px; }
	.example p{ height: auto; margin: 0 0 20px; font-size: 15px; text-align: center; }
	
	
}