@charset "utf-8";
/* CSS Document */

body {
    /*font-family: Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, "Noto Sans Japanese", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
    font-family: 'Noto Sans JP', "游ゴシック", "Yu Gothic", YuGothic, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    font-weight: normal;
    /*font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;*/
    /*font-family: "Noto Serif Japanese", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", メイリオ, Meiryo, serif;*/
    padding: 0px;
	margin: 0px;
    font-size: 16px;
}
* {
	padding: 0px;
	margin: 0px;
	-webkit-text-size-adjust: 100%;
}
img {
	border:none;
	max-width:100%;
}
a {
    text-decoration: none;
}
ul, ol {
    list-style: none;
}
article {
    margin: 0;
    padding: 0;
    
}
.bg_blue {
    background: #e8eff7;
}
.bg_white {
    background: #fff;
}
.inner {
    max-width: 1200px;
    min-width: 1100px;
    margin: 0 auto;
	padding: 2rem 0;
}
.flex_box {
    display: flex;
    flex-wrap: wrap;
}
.common_btn {
    width: 600px;
    margin: 0 auto;
    padding: 5rem 0;
    justify-content: space-between;
}
.common_btn li {
    width: 45%;
}
.inner_concept .common_btn {
	padding: 1.5rem 0;
}
h2.ttl,
h2.ttl02 {
    color: #de585f;
    font-size: 2.3rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}
h2.ttl02,
h2.ttl03 {
	margin: 3rem 0;
}
h2 > b {
	color: #535353;
	display: block;
	text-align: center;
	font-size: 1.1rem;
	letter-spacing: 1px;
	padding-bottom: 0.2rem;
}
.txt02 {
    text-align: center;
    font-size: 1.1rem;
    padding: 2rem 0 2rem 0;
}
/* header
-------------------------------------------------------------------------*/
/* main以下
-------------------------------------------------------------------------*/
#main {
	position: relative;
    background: url("../images/main_bg.jpg") no-repeat;
	background-size: cover;
    padding-bottom: 18rem;
}
#main h1 {
	position: absolute;
	top: 2%;
	left: 1%;
	width: 20%;
}
.main_box {
    max-width: 1200px;
    min-width: 1100px;
    margin: 0 auto;
    padding-top: 17rem;
    justify-content: space-between;
    align-items: center;
}
.main_box .main_left {
    width: 70%;
}
.main_left h2 {
    color: #000;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.3;
}
.main_left h2 span {
	color: #de585f;
}
.main_left > p {
    width: 85%;
    color: #000;
    font-size: 1.1rem;
    line-height: 1.7;
    padding: 1.5rem 0 3.5rem 0;
}
.main_left > ul {
    width: 70%;
    justify-content: space-between;
}
.main_left > ul li {
    width: 45%;
}
.btn01,
.btn02:hover {
    display: block;
    background: #afc734;
    border: 1px solid #afc734;
	box-sizing: border-box;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    transition: all .5s;
	font-weight: bold;
	box-shadow: 2px 2px 4px gray;
}
.btn02,
.btn01:hover {
    display: block;
    border: 1px solid #afc734;
    box-sizing: border-box;
    color: #afc734;
    text-align: center;
    padding: 15px 0;
    background: none;
    transition: all .5s;
	font-weight: bold;
	box-shadow: 2px 2px 4px gray;
}
.inner_concept .btn01,
#salary .btn01 {
	/*background: #857b85;
	border: 1px solid #857b85;*/
}
.inner_concept .btn01:hover,
#salary .btn01:hover {
	/*background: none;
	color: #857b85;
	border: 1px solid #857b85;*/
}
.main_box figure {
    width: 45%;
}
/* concept
-----------------------------------------------------------------------------------*/
#concept {
	background: url("../images/bg01.jpg") ;
	background-size: cover;
	padding: 7rem 0;
}
.inner_concept {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	/*border: 5px solid #d1c0a5;*/
	box-sizing: border-box;
	background: #fff;
	padding: 0 10.5rem;
}
.txt_concept {
	padding: 3rem 0;
	text-align: center;
}
.txt_concept span {
	font-size: 1.45rem;
}
/* reason
-----------------------------------------------------------------------------------*/
#reason {
	background: url("../images/bg_repeat01.jpg") repeat;
	/*background-color:rgba(255,255,255,0.4);
	background-blend-mode:lighten;*/
	padding: 7rem 0;
}
.reason_area {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin: 1rem auto 2rem auto;
}
.reason_area dt {
	width: 52%;
}
.reason_area dd {
	width: 48%;
}
.reason_area:nth-of-type(2) dt {
	width: 48%;
}
.reason_area:nth-of-type(2) dd {
	width: 52%;
}
.reason_area:last-of-type {
	margin-bottom: 0;
}
.reason_area dt img,
.reason_area dd img {
	width: 100%;
}
.reason_box {
	width: 48%;
	/*background: #fff;*/
	background: rgba(255,255,255,0.97);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0%, -50%);
	padding: 3.5rem 2.1rem;
	box-shadow: 0 0 12px #ccc;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box;
	border: 10px solid rgba(153,153,153,0.2);
}
.reason_area:nth-of-type(2) .reason_box,
.reason_area:nth-of-type(4) .reason_box {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%, -50%);
}
.reason_box p {
	text-align: justify;
}
h5 {
	color: #de585f;
    font-size: 1.6rem;
    font-weight: bold;
	padding-bottom: 1rem;
}
.txt01 {
    color: #186aa5;
    font-size: 1.2rem;
    padding: 1.5rem 0 0 0;
}
/* voice
-----------------------------------------------------------------------------------*/
#voice {
	/*background: url("../images/bg01.jpg") no-repeat;
	background-size: cover;*/
	background: url("../images/bg_repeat02.jpg") repeat;
	padding: 4rem 0;
}

.bg_blue > .flex_box,
.bg_white > .flex_box {
	justify-content: space-between;
	align-items: center;
}
#cont03 figure {
	width: 35%;
}
.reason {
	width: 50%;
}
.reason h4 {
	color: #186aa5;
	font-size: 2.1rem;
	margin-bottom: 1.5rem;
}
.reason > p {
	color: #186aa5;
	font-size: 1.4rem;
	line-height: 1.6;
}

.voice > li.flex_box {
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3rem;
	background: #fff;
    padding: 2rem 4rem;
    border: 1px solid #ccc;
	box-shadow: 0 0 15px #ccc;
}
.voice > li.flex_box:last-child {
	margin-bottom: 0;
}
.figure {
	width: 25%;
}
.figure img {
	width: 100%;
}
.figure .name {
	text-align: center;
	font-size: 1.05rem;
	font-weight: bold;
	padding: 0.8rem 0 0 0;
}
.figure span {
	display: block;
	text-align: center;
	font-size: 0.9rem;
}
.message {
	width: 67%;
	font-size: 1.2rem;
	line-height: 1.8;
}
/* salary
-----------------------------------------------------------------------------------*/
#salary {
	background: url("../images/bg_repeat01.jpg") repeat;
	padding: 4rem 0;
}

#salary h2.ttl b,
#salary .txt02 {
	/*color: #fff*/
}
#salary .salary {
	justify-content: space-between;
	margin-top: 3.5rem;
}
#salary .salary li {
	width: 32%;
	background: #fff;
	border: 10px solid #ececec;
	box-sizing: border-box;
	padding: 4rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.salary li img {
	display: block;
	width: 40%;
	margin: 0 auto;
}
.work {
	background: #fff100;
	color: #000;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	/*padding: 0.7rem 0;*/
	padding: 0.4rem 0;
	margin: 0 auto 0.5rem auto;
	width: 70%;
}
.price {
	color: #996c33;
	font-size: 2.5rem;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	padding: 1rem 0;
	line-height: 1.15;
}
.price span {
	font-size: 2.5rem;
}
.price span.moji {
	display: block;
	font-size: 2.5rem;
	text-align: center;
}
.time {
	color: #e1a0a9;
	font-size: 3rem;
	font-weight: bold;;
	text-align: center;
	margin: 0 auto;
	line-height: 1.15;
	padding-top: 1.2rem;
}
/* flow
-----------------------------------------------------------------------------------*/
#flow {
	background: url("../images/bg_repeat02.jpg") repeat;
	padding: 4rem 0;
}
.inner02 {
	width: 1000px;
	margin: 0 auto;
}

.flow {
	align-items: center;
	margin-bottom: 3rem;
}
.flow_box01 {
	width: 17%;
}
.flow_box01 figure:nth-child(2) {
	margin: 2.5rem 0;
}
.flow_box02 {
	width: 20%;
}
.number {
	background: #ef9ea3;
	color: #fff;
	width: 90px;
	height: 90px;
	line-height: 90px;
	text-align: center;
	border-radius: 50%;
	margin: 0 auto;
	font-size: 3rem;
	font-weight: bold;
}
.flow_box03 {
	width: 80%;
}
.flow_box03 dt {
	/*color: #186aa5;*/
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 0.4rem;
}
.flow_box03 dd {
	/*color: #186aa5;*/
	font-size: 1.05rem;
	font-weight: normal;
	margin-bottom: 4.5rem;
}
.flow_box03 dd:last-child {
	margin-bottom: 0;
}
.d_line {
	width: 5px;
	/*height: 29vh;*/
	height: 6.6rem;
	background: #bfbfbf;
	margin: 0 auto;
}


/* application
-----------------------------------------------------------------------------------*/
#application {
	position: relative;
	background: url("../images/bg02.jpg") no-repeat;
	background-position: right bottom;
	/*background-size: 30% auto;*/
	background-size: cover;
	overflow: hidden;
}
.entry_box {
	width: 55%;
	margin: 0;
}
h2.ttl03 {
	color: #186aa5;
    font-size: 3.1rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}
.entry_box > .flex_box {
	justify-content: space-between;
	/*align-items: center;*/
	padding-top: 2rem;
}
.entry_box > .flex_box dt {
	width: 14%;
}
.entry_box > .flex_box dd {
	width: 80%;
}
.entry_box > .flex_box dd p {
	font-size: 1.7rem;
	font-weight: bold;
	margin-bottom: 0.2rem;
}
.entry_box > .flex_box dd p:last-child {
	font-size: 1rem;
	font-weight: normal;
	margin-bottom: 2.5rem;
}
.entry_box > .flex_box dd p span {
	display: inline-block;
	color: #fff;
	background: #de585f;
	font-size: 1rem;
	font-weight: normal;
	padding: 3px 0;
	margin-right: 15px;
	vertical-align: middle;
	text-align: center;
	width: 7.1rem;
}
.entry_box > .flex_box dd p a {
    color: #000;
}
/* recruit
-----------------------------------------------------------------------------------*/
#recruit {
	background: url("../images/bg_repeat01.jpg") repeat;
	padding: 4rem 0;
}
dl.tbl_box {
	margin: 2rem auto;
}
dl.tbl_box dt {
	width: 30%;
	background: #f1ede6;
	font-size: 1.1rem;
	font-weight: bold;
	padding: 1.2rem 0;
	border: 1px solid #bbbbbb;
	border-top: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
dl.tbl_box dt p {
	text-align: center;
	margin: 0 auto;
}
dl.tbl_box dd {
	width: 70%;
	background: #fff;
	border: 1px solid #bbbbbb;
	border-top: none;
	border-left: none;
	box-sizing: border-box;
	padding: 1.2rem 2.2rem;
	line-height: 1.7;
}
dl.tbl_box dd span {
	color: #de585f;
	font-size: 1.1rem;
	font-weight: bold;
}
dl.tbl_box dt:first-child,
dl.tbl_box dd:first-of-type {
	border-top: 1px solid #bbbbbb;
}
/* company
-----------------------------------------------------------------------------------*/
#company {
	background: url("../images/bg03.jpg") no-repeat;
	background-size: cover;
	padding: 7rem 0 5.5rem 0;
}
.shop_name {
	color: #fff;
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
}
.address {
	color: #fff;
	text-align: center;
	font-size: 1.1rem;
}
.center {
	text-align: center;
	margin-top: 1rem;
}
.center span {
}
.center span:nth-child(-n+2) {
	margin-right: 2.5rem;
}
.center span img {
	width: 3%;
	vertical-align: sub;
	margin-right: 10px;
}
.center span a {
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	letter-spacing: 1px;
}
/* contact
-----------------------------------------------------------------------------------*/
#contact {
	/*background: url(../images/bg04.jpg) no-repeat;
    background-size: cover;*/
    padding: 5rem 0 4rem 0;
}

#contact .tbl_box dt p {
	margin: 0;
	padding-left: 2rem;
}
/* form
-----------------------------------------------------------------------------------*/
input[type="text"],
input[type="tel"],
input[type="email"] {
    width: 96%;
    padding: 8px 0 8px 5px;
    font-size: 0.95rem;
}
textarea {
    width: 96%;
    padding: 8px 0 8px 5px;
    height: 150px;
    font-size: 0.95rem;
}
.hissu {
    background: #ec6941;
    text-align: center;
    color: #fff;
    font-size: 0.8vw;
    padding: 3px 5px;
    border-radius: 1px;
    margin-left: 5px;
}
button {
    -webkit-appearance : none;
    display: block;
    width: 45%;
    background: none;
    border: 1px solid #ec7281;
    text-align: center;
    color: #ec7281;
    font-size: 1.2vw;
    margin: 0 auto;
	padding: 15px 0;
	cursor: pointer;
}
button.send_ok {
	background: #ec7281;
	border: 1px solid #ec7281;
	color: #fff;
}
.gray_btn {
    -webkit-appearance : none;
    width: 45%;
    background: #ccc;
    text-align: center;
    color: #999;
    font-size: 1.2vw;
    font-weight: bold;
    border: none;
    margin: 0 auto;
    padding: 15px 0;
    border-radius: 40px;
}
#form input,#form textarea{
	box-sizing:border-box;
	width:100%;
	padding:0.5vw;
	font-size:16px;
}
#form button{
	-moz-appearance:none;
	appearance:none;
	width:60%;
	padding:15px 0;
	background:#e53081;
	border:none;
	border-radius:100px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
    display: block;
	margin: 0 auto;
}
#form button:disabled{
	background:#dcdcdc;
	color:#333;
}

/* footer
-----------------------------------------------------------------------------------*/
.link_bnr {
	padding-top: 50px;
	text-align: center;
}
footer {
	background: #000;
}
footer .foot_logo {
	text-align: center;
	margin: 0 auto;
	display: block;
	width: 23%;
	padding: 4rem 0 3rem 0;
}
footer .foot_logo img {
	width: 100%;
}
small {
	display: block;
	text-align: center;
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 1px;
	padding-bottom: 0.7rem;
}
/* ハンバーガーメニュー
-----------------------------------------------------------------------------------*/
nav.NavMenu{
	position: fixed; /*表示位置を固定*/
	z-index: 4; /*重ね順を変更*/
	top: 0; /*表示位置を指定*/
	left: 0; /*表示位置を指定*/
	/*background: #fff;*//*背景を白にする*/
	color: #fff; /*文字色を黒にする*/
	text-align: center; /*テキストを中央揃え*/
	width: 50%; /*全幅表示*/
	transform: translateX(200%); /*ナビを右に隠す*/
	transition: all 0.6s; /*アニメーションの時間を指定*/
}
nav.NavMenu ul{
	/*background: #ccc;*/ /*背景をグレーにする*/
	background: rgba(0,0,0,0.8);
	width: 100%;
	margin: 0 auto;
	padding: 0;
	height: 100vh;
	overflow-y: auto;
}
nav.NavMenu ul li{
	font-size: 1.1em;
	list-style-type: none;
	padding: 0;
	width: 94%;
	margin: 0 auto;
	border-bottom: 1px dotted #f5f5f5;
}
nav.NavMenu ul li:last-child{
	padding-bottom: 0;
	border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}
nav.NavMenu ul li a{
	display: block; /*クリックできる領域を広げる*/
	color: #fff;
	padding: 1em 0;
}
/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
	transform: translateX(100%);
}
/*トグルボタンのスタイルを指定*/
.Toggle {
	display: block;
	position: fixed;    /* bodyに対しての絶対位置指定 */
	right: 13px;
	top: 12px;
	width: 42px;
	height: 42px;
	cursor: pointer;
	z-index: 5;
} 
.Toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 3px #000;
	-webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
	-moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
	transition: .35s ease-in-out;			/*変化の速度を指定*/
	left: 6px;
} 
.Toggle span:nth-child(1) {
	top: 9px;
} 
.Toggle span:nth-child(2) {
	top: 18px;
} 
.Toggle span:nth-child(3) {
	top: 27px;
}
.Toggle.active span {
		border-bottom: solid 3px #fff;
}
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
} 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.menu_logo {
	width: 35%;
	margin: 0 auto;
	padding: 2rem 0 1rem 0;
}
/* モーダル
-----------------------------------------------------------------------------------*/
#thanks {
    z-index: 30;
    max-width: 100%;
}
.inner_thanks {
    padding: 3vw 20vw 0 20vw;
}
.inner_thanks p {
    text-align: center;
    font-size: 3vw;
    padding-bottom: 15px;
}
.inner_thanks .inner_thanks02 {
    text-align: left;
    font-size: 1.7vw;
    padding-bottom: 15px;
}
.inner_thanks .txt {
    text-align: left;
    font-size: 1.7vw;
}
.close_btn {
    width: 40%;
    margin: 20px auto 0 auto;
    color: #fff;
    font-size: 1.2vw !important;
    font-weight: bold;
    border: 2px solid #fff;
    border-radius: 30px;
    padding: 1rem 0;
}
.close_btn a {
    color: #fff;
    display: block;
}
.changed {
    display: none !important;
}
/* etc...
-----------------------------------------------------------------------------------*/
.g-map {
	width: 100%;
	height: 500px;
	overflow: hidden;
}
.js-rellax {
	position: absolute;
	/*top: 20%;*/
	top: 5rem;
    bottom: 0;
	right: 25.5%;
    width: 17%;
    margin: auto;
}
/* 
-----------------------------------------------------------------------------------*/
.sp {
    display: block;
}
.footer_fixed {
    display: none;
}