@charset "utf-8";
/*
Theme Name: 徳治会NEWリクルートサイトTheme
Theme URI: recruit.tokuji-kai.or.jp
Description: this is recruit.tokuji-kai.or.jp themes
Version: 2.0
Author: kobaishi
Author URI: e-f.co.jp
*/

/*------------------------------------------------------

   add font

-------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Montserrat');



/*------------------------------------------------------

   common

    main color: #0281C4

-------------------------------------------------------*/
:root {
    --base-color: #3d3d3d;
    --main-color: #004d9f;
    --sub-color:  #ff3e3c;

    --font-en: "Roboto", sans-serif;
}

body {
    font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
	color: var(--base-color);
	padding-top: 100px;
}

body.menu-fix {
	overflow: hidden;
}

input, select, textarea, radio, checkbox, button {
	font-family: "Noto Sans JP", sans-serif;
}

.inner {
	max-width: 1240px;
	padding: 0 20px;
	margin:auto;
	position: relative;
}
.inner-in {
	padding: 0 90px;
}

.sp {
	display: none;
}

/* off */
.link-off a {
    cursor: default !important;
    color: #ccc !important;
}

/* object-fit */
.object-fit{
  object-fit: cover;
  font-family: 'object-fit: cover;'
}

/*------------------------------------------------------

   header style

-------------------------------------------------------*/
#gb-header {
	width: 100%;
	background: #fff;
	position:fixed;
	left:0;
	top:0;
	z-index:9999;
	   -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#gb-header .header-in {
    height: 100px;
    position: relative;
}
.site-title {
    position: absolute;
    left: 20px;
    top: 20px;
}
.site-title a {
    display: flex;
    align-items: end;
    line-height: 1;
}
.site-title a img {
    width: 170px;
}
.site-title-en {
    color: var(--main-color);
    font-size: 20px;
    font-family: var(--font-en);
    font-weight: 500;
    margin-left: 20px;
}
.header-btn {
    position: absolute;
    right: 100px;
    top: 0;
}
.header-btn__list {
    display: flex;
}
.header-btn__list >li {
	font-size: 15px;
	width: 220px;
   -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.header-btn__list >li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	text-align: center;
	color: #fff;
	background: var(--base-color);
}
.header-btn__list .header-btn-entry a {
	background: var(--sub-color);
}
.header-btn__list .header-btn-about a {
	background: var(--main-color);
}

#menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}
.menu-btn-in {
	width: 34px;
	height: 24px;
	position: relative;
}
#menu-btn span {
    width: 100%;
    height: 4px;
    background: var(--main-color);
    position: absolute;
    left: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#menu-btn span.t {
    top: 0;    
}
#menu-btn span.m {
    top: 10px;    
}
#menu-btn span.b {
    bottom: 0;
}
#menu-btn.active span.t {
    transform: rotate(45deg);
    top: 11px;
}
#menu-btn.active span.m {
    width: 0;
}
#menu-btn.active span.b {
    transform: rotate(-45deg);
    bottom: 9px;
}



/* ----------------------
   mainNav
-----------------------------*/

/* mainNav */
#mainNavWrap {
	font-size: 16px;
	line-height: 2;
	visibility: hidden;
	opacity: 0;
	background: #fff;
    width: 100%;
    height: 100%;
    border-top: solid 8px #26539a;
	overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0;
}
#mainNavWrap.active {
	visibility: visible;
	opacity: 1;
    z-index: 999999;
}

.mainNav-in {
	padding: 50px;
}
.mainNav >li {
    border-bottom: dotted 1px #ccc;
}
.mainNav li a,
.mainNav li span {
	display:block;
    color: #000;
}
.mainNav >li > a,
.mainNav >li > span {
    padding: 10px;
    font-weight: 500;
}
.mainNav > li ul {
    padding: 10px;
}
.mainNav > li ul li a:before {
    content: '-';
    display: inline-block;
    margin-right: 10px;
}

.to-catchcopy__sp {
    margin-top: 30px;
}
.to-catchcopy__sp a {
    display: inline-block;
}



#sp-nav {
    visibility: hidden;
    opacity: 0;
    width: 540px;
    height: calc(100% - 100px);
    background: var(--main-color);
    overflow: auto;
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 1000;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#sp-nav.active {
    opacity: 1;
    visibility: visible;
}
.sp-nav__list {
    color: #fff;
    padding: 30px 0;
}
.sp-nav__list a {
    color: #fff;
}
.sp-nav__list >li {
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px;
}
.sp-subnav__list >li {
    font-weight: 400;
    margin: 5px 0 0 10px;
}
.sp-subnav__list >li:before {
    content: '-';
    margin-right: 10px;
}

/* ----------------------------
   contents
-------------------------------*/
#main-contents {
    overflow: hidden;
    min-height: 500px;
}
.conBox {
	padding: 100px 0;
    position: relative;
}

.cmn-title {
    text-align: center;
    margin-bottom: 60px;
	position: relative;
}
.cmn-title h2 {
    font-size: 46px;
    font-family: var(--font-en);
    font-weight: bold;
    line-height: 1;
}
.cmn-title p {
    font-size: 18px;
    margin-top: 15px;
}
.cmn-subtitle {
	font-size: 28px;
    text-align: center;
    margin-bottom: 50px;
}
.cmn-desc {
    font-size: 18px;
	font-weight: bold;
	line-height: 2.2;
	text-align:center;
    margin-bottom: 70px;
}


.cmn-btn {
	text-align: center;
}
.cmn-btn a {
    display: inline-block;
    font-size: 18px;
    width: 260px;
    text-align: center;
    line-height: 1;
    padding: 15px 0;
    color: #fff;
    background: #26539a;
	border-radius:100px;
	   -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.cmn-btn a:after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	vertical-align: middle;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	margin-left:10px;
	transform: rotate(45deg);
}
.cmn-btn a:hover {
	color: #fff;
	background: #26539a;
}


.more {
	font-size: 15px;
    text-align: center;
    margin-top: 70px;
}
.more a {
	color: var(--base-color);
}
.more a i {
	display: inline-block;
	width: 34px;
	height: 34px;
	vertical-align: -11px;
	margin-left: 10px;
	position: relative;
	border: solid 2px;
	border-radius: 1000px;
}
.more a i:after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: solid 2px;
    border-top: solid 2px;
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    left: 8px;
}

/*  */
.joblist-bnr {
	color: #fff;
	padding: 100px 0 60px;
	background: url("./assets/img/new/joblist_bg.jpg") no-repeat center top;
	background-size: cover;
}
.to-joblist {
	font-size: 15px;
	text-align: center;
}
.to-joblist a {
	display: inline-block;
	padding: 5px 30px;
	color: var(--base-color);
	background: #fff;
	border-radius: 1000px;
}
.to-joblist a i {
	display: inline-block;
	width: 34px;
	height: 34px;
	vertical-align: -11px;
	margin-left: 10px;
	position: relative;
	border: solid 2px;
	border-radius: 1000px;
}
.to-joblist a i:after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: solid 2px;
    border-top: solid 2px;
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    left: 8px;
}


/*------------------------------------------------
   footer style
--------------------------------------------------*/
#gb-footer {
    margin-top: 120px;
    padding: 80px 0;
    background: #f5f5f5;
}
.footer-main{
	display: flex;
	margin-bottom: 60px;
    justify-content: space-between;
}
.footer-main-left {
	width: 33%;
}
.footer-main-left .footer-logo {
    margin-bottom: 30px;
}
.footer-main-left h2 {
    font-size: 16px;
    margin-bottom: 10px;
}
.footer-main-left .footer-address {
    font-size: 13px;
    line-height: 1.5;
	margin-bottom: 15px;
}
.footer-main-left .footer-address:last-child {
	margin-bottom: 0;
}
.footer-main-right {
	display: flex;
	justify-content: space-between;
	width: 45%;/*67*/
    overflow: hidden;
}
.footer-nav >li {
    margin-bottom: 20px;
}
.footer-nav h3 {
    font-size: 16px;
}
.footer-nav a {
	color: var(--base-color);
}
.footer-nav ul {
	margin-top: 10px;
}
.footer-nav ul li {
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
}
.footer-nav ul li a:before {
    content: '-';
    margin-right: 5px;
}

.copyright {
	font-size: 12px;
	color: #555555;
	text-align:center;
}


/* backtotop */
#backtotop {
	color: #fff;
	font-size: 20px;
	font-weight:bold;
	width: 52px;
	line-height: 52px;
	text-align:center;
	cursor:pointer;
	background: #26539a;
	border-radius: 52px;
	visibility: hidden;
	opacity: 0;
	position:fixed;
	right: 10px;
	bottom: 40px;
	z-index: 10;
   -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#backtotop.show {
	visibility: visible;
	opacity: 1;
	bottom: 50px;
}



/* -----------------------------------

media query

------------------------------------- */
@media (max-width: 1000px) {

    .to-catchcopy__pc {
        display:none;
    }
	.inner-in {
		padding: 0;
	}
	.header-btn__list >li {
		width: 150px;
	}
	
	#sp-nav {
		width: 400px;
	}

}

/* 815px 以下 */
@media (max-width: 815px) {

	body {
		min-width: 320px;
		font-size: 14px;
		padding-top: 65px;
	}

	.sp { display: block !important; }
	.pc { display: none !important; }

	#gb-header .header-in {
		height: 65px;
	}
	.site-title {
		left: 10px;
	}
	.site-title a img {
		width: 110px;
	}
	.site-title-en {
		font-size: 12px;
		margin-left: 10px;
	}
	#menu-btn {
		width: 65px;
		height: 65px;
	}

	#sp-nav {
		width: 100%;
		height: calc(100% - 65px);
		top: 65px;
	}

	.conBox {
		padding: 70px 0;
	}
	.cmn-title {
		margin-bottom: 50px;
	}
	.cmn-title h2 {
		font-size: 24px;
	}
	.cmn-title p {
		font-size: 14px;
	}
	.cmn-subtitle {
		font-size: 16px;
		margin-bottom: 30px;
	}
	.cmn-desc {
		font-size: 14px;
		margin-bottom: 40px;
	}

	.joblist-bnr {
		padding: 50px 0 30px;
	}

    #gb-footer {
        margin-top: 40px;
    }
	.footer-main {
		display: block;
		margin-bottom: 30px;
	}
	.footer-main-left {
		display: block;
		width: 100%;
		margin-bottom: 50px;
	}
	.footer-main-right {
		display: block;
		width: 100%;
	}
	.footer-nav {
		width: 100%;
		float: none;
	}
	.footer-nav >li {
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: solid 1px #eee;
	}

}

/* 480px 以下 */
@media (max-width: 480px) {

    .mobile-off {
		display: none;
	}


}