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

/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
	*:not(h1){
		font-size: 14px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	*:not(h1){
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	*:not(h1){
		font-size: 18px;
	}
}

body {font-size: 16px;}

/* 基本設定： ページ全体 */
body {
	margin: 0;
	padding: 0;
	font-family: 'Squada One', cursive,'メイリオ',
		'Hiragino Kaku Gothic Pro', sans-serif;
}

ul li {
    list-style-type: none;
}

a:linK {
	text-decoration: none;
}

/* PC・SP表示切替 */
.pc-none {
  @include media(md) {
    display: none;
  }
}

.sp-none {
  @include media(sm) {
    display: none;
  }
}

@media (min-width: 767px) {
/* ヘッダー: PC */
.headA {
	position:absolute;
	display: inline-block;
	top:0;
	left:10%;
	height:7rem;
	padding-left: 2%;
	padding-right: 2%;
	padding-top:4.2rem;
	letter-spacing: 0.2rem;
	margin-left: 0.2rem;
	text-align: center;
	background-color: #FEC734;
	line-height: 1.5rem;
	color:#684731;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
}
.headA .title{
		margin:0;
		font-size: 4rem;
	}
	
.headA span{
	font-size:1rem;
	font-weight: bold;
	color:#684731;
	margin:0;
	}
		
.headC {
		display: none;
	}

.headB {
		display: block !important;
	}
	
.headB ul {
	margin: 0;
	padding-right: 0;
	list-style: none;
	font-size:1rem;
	display: flex;
}

.headB a {
	display: block;
	padding: 1rem;
	color: #fff;
	text-decoration: none;
}

.headB a {
	position: relative; 
}

.headB a::after {
position: absolute;
        bottom: 0;
        left: 0;
        content: ' ';
        width: 100%;
        height: 2px;
        background: #FEC734;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: transform .3s;
}

.headB a:hover::after {
transform: scale(1, 1);
}

header {
	width: 100%;
	background-color: #212121;
}

header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
	    max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ヘッダー： スマホ*/
@media (max-width: 767px) {
	
header{
   background-color: #212121;
   width: 100%;
}
	
.headA .title{
	display: inline-block;
	background-color: #FEC734;
    line-height: 60px;
	padding:0 20px;
	color:  #684731;
	font-size: 32px;
	letter-spacing: 0.1em;
}

.headA span{
    display: none;
}
	
header .container-small {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.headC {
   margin-right: 20px;
   padding: 0;
   border: none;
   outline: none;
   background: none;
   opacity: 0.5;
   color:#fff;
}

.headC:hover {
   opacity: 0.3;
}
.headB ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.headB a {
   display: block;
   padding: 12px;
   color: #fff;
   font-size: 12px;
   text-decoration: none;
}
	
.headB {
   display: none;
}
}

/*メイン画像*/
.index h3,
.index p{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 
		"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.index .conA{
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 80vh;
	background-image: url(img/main.png);
	background-position: center;
	background-size: cover;
	text-align: right;
	color: #fff;
}

.conA .catch{
	font-family: 'Squada One', cursive,'メイリオ',
		'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 2.2rem;
	color:#FEC734;
	letter-spacing: 0.1rem;
	margin:0;
}

.conA .textC{
	width:90%;
	max-width: 1280px;
	display: inline-block;
	line-height: 2rem;
}

.conA .textC .topC{
	margin: 0;
	margin-right: 0.4rem;
}

/*conB*/
.index .conB{
	width: 90%;
	max-width: 1280px;
	margin:0 auto 2rem;
}
.con-title{
	line-height: 2rem;
	text-align: center;
	padding-top:2.5rem;
}

h2{
	font-size: 3rem;
	margin:0;
	color:#FEC734;
}
@media (min-width: 768px) {
	h2{
		letter-spacing: 0.1rem;
	}
	.p-title h1{
	letter-spacing: 0.1rem;
}
.index .conB{
	width: 90%;
	max-width: 1280px;
	margin:0 auto 2rem;
	text-align:center;
}
}

.con-title span{
	margin:0;
	font-size:1rem;
	color:#684731;
	letter-spacing: 0.2rem;
	font-weight: bold;
}

/*conC*/
.index .conC{
	background-color: #212121;
}
.index .inboxC{
	overflow: auto;
	width: 90%;
	max-width: 1280px;
	margin-right: auto;
	margin-left:auto;
	padding-bottom:3rem;
	padding-top:0.5rem;
}
.index .conC span{
	margin:0;
	font-size:1rem;
	color:#fff;
	letter-spacing: 0.2rem;
	font-weight: bold;
}
.conC .container2 {
	display: flex;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
	padding-top:2rem;
}

.index .conC article {
	flex: 1 1 50%;
	display: flex;
}

@media (max-width: 767px){
.conC .container2 {
	display: flex;
	flex-wrap: wrap;
	max-width: none;
}

.index .conC article {
	flex: 1 1 100%;
	display: flex;
	height: 280px;
	background-position: center;
	background-size: cover;
}
.index .conC .photo {
	min-height: 300px;
	background-position: center;
	background-size: cover;
	opacity: 0.8;
}
	.index .conC p {
	font-weight: bold;
}
}

.index .conC a {
	position: relative;
	flex: 1;
	margin: 0;
	display: block;
	background-color: currentColor;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	float: left;
}

.index .conC a::after {
position: absolute;
        bottom: 0;
        left: 0;
        content: ' ';
        width: 100%;
        height: 2px;
        background: #FEC734;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: transform .3s;
}

.index .conC a:hover::after {
transform: scale(1, 1);
}

.index .conC .photo {
	min-height: 350px;
	background-position: center;
	background-size: cover;
	opacity:0.8;
}

.index .conC .text {
	position: absolute;
	bottom: 1%;
	left: 1%;
	margin: 1%;
	color: #fff;
	line-height: 2rem;
}

.index .conC .main2{
	text-shadow: 1px 1px 1px #000000;
}

.index .conC h3 {
	margin: 0;
	font-size: 1.4rem;
}

.index .conC p {
	margin: 0;
}

/*conD*/
.index .conD{
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(img/recruit.png);
	background-position: center;
	background-size: cover;
	text-align: center;
}

.conD .inboxD{
	display: block;
	width:90%;
	max-width: 1280px;
	background-color: rgba(255,255,255,0.7);
	margin:3rem auto;
	padding-bottom:2.5rem;
}

.conD h2{
	text-shadow: 1px 1px 1px #787878;
}

.conD .conDtext{
	width:80%;
	margin-left: auto;
	margin-right: auto;
}
.conD a,
.conE a{
	display: inline-block;
	margin-top: 1.5%;
	padding: 10px 30px;
	border: solid 2px currentColor;
	border-radius: 6px;
	background-color: #FEC734;
	color: #684731;
	font-weight: bold;
}

.conD a:hover,
.conE a:hover{
	background-image: linear-gradient(
		rgba(255,255,255,0.2),
		rgba(255,255,255,0.2)
	);
}

/*conE*/
.index .conE{
	text-align: center;
	margin-bottom:3rem;
	width:80%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/*フッター*/
footer {
padding : 20px 0;
color : #fff;
text-align : center;
background-color: #212121;
}

/*会社情報ページ*/
.company .conA{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50vh;
	background-image: url(img/company.png);
	background-position: center;
	background-size: cover;
	letter-spacing: 0.05rem;
	color: #fff;
}

.company .conB{
	margin:2rem auto 3rem;
	text-align: center;
	width:90%;
	max-width:1280px;
}

.company table{
	border-collapse: collapse;
	display: inline-block;
	text-align: left;
}

.company th,
.company td{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 
		"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	border-bottom: dashed 1px #8B8A8A;
	padding-top:1.8rem;
	padding-bottom: 1.8rem;
}

.company th{
	padding-right: 5rem;
	word-break: keep-all;
}


/*お問い合わせページ*/
.contact .conA{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50vh;
	background-image: url(img/contact.png);
	background-position: center;
	background-size: cover;
	letter-spacing: 0.05rem;
	color: #fff;
}

.contact .conB{
	margin:3rem auto;
	text-align: center;
	max-width: 1280px;
	width:90%;
}

.contact th,
.contact td{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 
		"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	padding-top:1rem;
	padding-bottom: 1rem;
}

.contact table{
	display: inline-block;
}

.contact .heading{
	word-break: keep-all;
	text-align: right;
	vertical-align: middle;
	width:20%;
}

table input,
table select{
	height:2rem;
}

.contact input,textarea,select{
	width: 80%;
	box-sizing: border-box;
	border:solid 1px #aaaaaa;
	border-radius: 0.2rem;
}
input[type="submit"]{
	display: inline-block;
	text-align: center;
	margin-top: 1.5%;
	padding: 10px 30px;
	border: solid 2px currentColor;
	border-radius: 6px;
	background-color: #FEC734;
	color: #684731;
	font-weight: bold;
	font-size: 1rem;
	width: 10rem;
}

/*採用情報ページ*/
.recruit .conA{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50vh;
	background-image: url(img/recruitP.png);
	background-position: center;
	background-size: cover;
	letter-spacing: 0.05rem;
	color: #fff;
}

.recruit .conB{
	width:90%;
	margin:3rem auto;
	text-align: center;
	max-width: 1280px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 
		"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.recruit table{
	border-collapse: collapse;
	border-top:dashed 1px #8B8A8A;
	display: inline-block;
	text-align: left;
	margin:2rem auto;
}

.recruit th,
.recruit td{
	padding-top:1.8rem;
	padding-bottom: 1.8rem;
	border-bottom:dashed 1px #8B8A8A;
}

.recruit th{
	padding-right: 4rem;
	padding-left: 2rem;
	word-break: keep-all;
}

.recruit td{
	width:80%;
}

.recruit h2{
	font-size: 1.4rem;
	line-height: 1.6rem;
}

.recruit .qa{
	display: inline-block;
	margin-top: 1%;
	padding: 10px 30px;
	border: solid 2px currentColor;
	border-radius: 6px;
	background-color: #FEC734;
	color: #684731;
	font-weight: bold;
}

/*事業紹介ページ*/
.business h3,
.business #conB,
.business #conC,
.business #conD,
.business #conE,
.business .conF{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 
		"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.business h2{
	font-size: 1.8rem;
	color: #684731;
	letter-spacing: 0.1rem;
	text-align: center;
	
}
.business .conA{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50vh;
	background-image: url(img/business.png);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.p-title{
	line-height: 2.8rem;
	text-align: center;
}

.p-title h1{
	margin:0;
	font-size: 4rem;
}

.p-title span{
	margin:0;
	font-size:1rem;
	letter-spacing: 0.3rem;
	text-align: center;
}

.business #conB{
	width: 90%;
	max-width: 1280px;
	margin-right: auto;
	margin-left:auto;
	padding-top:3rem;
	padding-bottom: 2rem;
}

.business #conC,
.business #conD,
.business #conE,
.business .inboxD{
	width: 90%;
	max-width: 1280px;
	margin-right: auto;
	margin-left:auto;
	padding-top:2rem;
	padding-bottom: 2rem;
}

.business section p{
	padding:0.2rem 0;
}

.business .container2{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
.business .container2 article:nth-child(1),
.business .container2 article:nth-child(2){
	margin-right: 1rem;
}

.business article{
	flex: 1 1 auto;
	display: flex;
	display: block;
	margin-bottom: 1rem;
}

.business .photo{
	min-height: 300px;
	background-position: center;
	background-size: cover;
}

.business .backC{
	background-color: rgba(218,218,218,0.30);
}

@media (max-width: 700px) {
	.business article {
        flex: 1 1 100%;
        display: flex;
        display: block;
        margin:1rem;
}
	.business .photo{
		min-height: 300px;
		background-position: center;
        background-size: cover;
	}
}

.business .conF{
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(img/backB.png);
	background-position: center;
	background-size: cover;
}

.business .inboxD{
	display: block;
	width:90%;
	max-width: 1280px;
	background-color: rgba(255,255,255,0.7);
	margin:3rem auto;
	padding-bottom:2.5rem;
}

.business .conDtext{
	width:80%;
	margin-left: auto;
	margin-right: auto;
}

.business h3{
	font-size: 1.4rem;
	padding-left:0.5rem;
	border-left: solid 0.75rem #FEC734;
}

.business .conDtext span{
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 0;
}

/*TOPへ戻るボタン*/
#page-top {
	clear:both;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}
#page-top a {
    background: #FEC734;
    text-decoration: none;
    color: #684731;
    width: 4rem;
    padding: 1.2rem 0;
    text-align: center;
    display: block;
    border-radius: 0.4rem;
	font-size: 1.2rem;
	letter-spacing: 0.1rem;
}
#page-top a:hover {
    background-image: linear-gradient(
		rgba(255,255,255,0.2),
		rgba(255,255,255,0.2)
	);
}