@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(../fonts/NotoSerifCJKjp/load.css);

body {
	min-width: 1080px;
	color: #341c04;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: 0.08em;

	/* ゴシック体セット */
	font-family: "游ゴシック体", "Yu Gothic", YuGothic;
}

/* ==================================================
タグ
================================================== */
/* リンク
-------------------------------------------------- */
a,
a img {
	text-decoration: none;
	color: inherit;
	transition: all .3s;
}

a:hover img {
	opacity: .8;
}

a[href^="tel:"] {
	color: inherit;
}

@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/* 端末別表示非表示設定
-------------------------------------------------- */
@media screen and (max-width: 768px) {
	.pc-only { /* PCでの閲覧時にのみ表示したいコンテンツにつける */
		display: none !important;
	}
}

@media screen and (min-width: 768px) {
	.sp-only { /* スマホでの閲覧時にのみ表示したいコンテンツにつける */
		display: none !important;
	}
}

/* 改行
-------------------------------------------------- */
.app-br {
	display: block;
}

/* box-sizing
-------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


/* ==================================================
テーブル
================================================== */
.styled-table01 {
	width: 100%;
	margin: 1em 0;
	line-height: 1.7;
}

.styled-table01:first-child {
	margin-top: 0;
}

.styled-table01 th,
.styled-table01 td {
	padding: 12px;
	vertical-align: top;
	text-align: left;
	border: 1px solid #ddd;
	background: #fff;
}

.styled-table01 th {
	width: 35%;
	font-weight: normal;
	background: #f7f7f7;
}

.styled-table01 thead th {
	background: #e6e6e6;
}

.styled-table01 caption {
	text-align: center;
	font-size: 20px;
}

/* ==================================================
ヘッダー
================================================== */
.global-header {
}

.header-inner {
	max-width: 1080px;
	margin: 15px auto 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* 固定設定　（ヘッダーを固定しない場合はこの項目ごと消せば固定しなくなる）
-------------------------------------------------- */
.header-fix-area-wrap {
	height: 180px; /* .header-fix-area の高さの実数地をデベロッパーツールで調べてここに入力する */
}

.header-fix-area {
	width: 100%;
	background: url(../img/line_bot.png) repeat-x bottom ;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	padding: 0 0 40px 0;
}

.header-fix-area02 {
    width: 100%;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
    padding: 0px 0 15px 0;
}


@media screen and (max-width: 768px) {
	.header-fix-area-wrap {
		height: auto;
	}

	.header-fix-area {
		position: static;
	}
}

/* h1
-------------------------------------------------- */
.header-description {
	width: 100%;
	padding: 0;
	line-height: 1.2;
	font-size: 15px;
	font-weight: 500;
	background: #341c04;
	text-align: center;
	color: white;
}

/* 問い合わせ
-------------------------------------------------- */
.header-contacts {
	display: flex;
}

.header-contacts li {
	margin: 0 0 0 15px;
	font-size: 22px;
	font-weight: 700;
}

/* 電話番号 */
.header-contacts .tel a {
	text-decoration: none;
}

/* メール */
.header-contacts .mail a {
	padding: 0 20px;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	background: #c7c7c7;
	display: block;
}

/* グローバルナビ
-------------------------------------------------- */
.header-logo{
	margin: 17px 0 0 0;
}

.header-nav {
	background: url(../img/line-top.png)repeat-x center top;
	position: relative;
	margin-top: -17px;
}


.header-nav > ul {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.header-nav > ul > li {
	flex-grow: 1;
	position: relative;
}

.header-nav a {
	padding: 50px 20px;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	display: inline-block;
	font-weight: 600;
	transition: all 0.3s ease 0s;
	
}

.header-nav a:hover{
	background-position: center center;
	color: #ffc600;
}

.header-nav02 {
    position: relative;
    z-index: 9999999999;
    background: url(../img/pattern02.png)repeat;
    padding: 15px 0;
    margin-top: 99px;
	color: white;
}

.header-nav02 a:hover{
	color: #341c04;
}

.header-nav02 > ul {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.header-nav02 > ul > li {
	flex-grow: 1;
	position: relative;
}

.header-nav02 a {
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	display: inline-block;
	font-weight: 600;
	transition: all 0.3s ease 0s;
	
}

.h_tel {
    background: #a7d87c;
    font-size: 16px;
    padding: 5px 10px;
    font-weight: 700;
    color: white;
	border-radius: 7px;
}

.h_tel02 {
    background: #ffc600;
    font-size: 16px;
    padding: 5px 10px;
    font-weight: 700;
    color: white;
	border-radius: 7px;
}

.h_txt {
    text-align: right;
    display: inline-block;
    float: right;
    font-size: 14px;
	margin-top: -14px;
}

#pagetop {
    transform: none;
    position: fixed;
    top: 0;
    z-index: 99999999;
    width: 100%;
}

/* ドロップダウンメニュー
------------------------- */
/*.header-nav li ul {
	width: 100%;
	background: #cfcfcf;
	opacity: 0;
	transition: all .3s;
	position: absolute;
	top: 80%;
	z-index: 100;
	pointer-events: none;
}

.header-nav li:hover ul {
	top: 100%;
	opacity: 1;
	pointer-events: auto;
}*/


/* メインビジュアル
-------------------------------------------------- */
.catch {
	width: 100%;
	padding: 39px 0 44px 0;
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 50px;
	background: url(../img/catch_bg.png)repeat-x center center;
}

.header-main-visual {
	position: relative;
}

.mv-wrapper{
	width: 100%;
	height: 78vh;
	display: flex;
	margin-top: 114px;
	background: url(../img/line_bot.png) repeat-x top ;
}

.mv{
	height: 78vh;
	/* width: 50%; */
	width: 100%;
}

.mv-ttl {
    width: 355px;
    height: 196px;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
	z-index: 9999;
}

.left_area {
	background: url(../img/mv-of_bg_off.png)no-repeat top center / cover;
	position: relative;
	transition: all 0.3s ease 0s;
}

.left_area:hover {
	background: url(../img/mv-of_bg_on.png)no-repeat top center / cover;
	position: relative;
}

.right_area {
	background: url(../img/mv-cloth_bg_off.png)no-repeat top center / cover;
	position: relative;
}
.right_area:hover {
	background: url(../img/mv-cloth_bg_on.png)no-repeat top center / cover;
	position: relative;
}

.mv_bg {
	background: url(../img/bg_visual01.jpg)no-repeat top center / cover;
}


/*--- ↓ JSありの場合は、ここに記述する ↓ ---*/	


/* スマホ
-------------------------------------------------- */
@media screen and (max-width: 768px) {
	.header-inner {
		margin: 0;
		padding: 10px;
		display: block;
	}

	.header-description,
	.header-contacts,
	.header-nav {
		display: none;
	}

	/* ロゴ */
	.header-logo {
		text-align: center;
	}
}



/* ==================================================
フッター
================================================== */
.global-footer {
	background: url(../img/pattern01.png)repeat;
}

.footer-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 0 5px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media screen and (max-width: 768px) {
	.footer-inner {
		padding: 20px;
		flex-direction: column;
		justify-content: center;
	}
}

/* ロゴ
-------------------------------------------------- */
.footer-logo {
	margin: 0 0 20px;
}

/* 会社概要
-------------------------------------------------- */
.footer-about {
	display: flex;
}

.footer-about li {
	margin: 0 0 0 15px;
	line-height: 1.2;
}

/* 電話番号 */
.footer-about .tel {
	font-size: 22px;
}

.footer-about .tel a {
	color: inherit;
	font-weight: bold;
	letter-spacing: .1em;
	text-decoration: none;
}

/* 所在地 */
.footer-about .address {
}

/* コピーライト
-------------------------------------------------- */
.footer-copyright {
	padding: 8px;
	line-height: 1.3;
	text-align: center;
	font-size: 14px;
	display: block;
	margin: 50px auto 0;
	background: url(../img/pattern03.png)repeat;
	color: white;
}

.footer-copyright a {
	color: inherit;
}

/* ==================================================
セクション
================================================== */

.section-inner {
	max-width: 1080px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
.section-inner {
		padding: 8px;
	}
}

/* ==================================================
ライン
================================================== */

#sec01{
	background: 
		url(../img/con01top_bg.png)no-repeat top center,
		url(../img/con01bot_bg.png)no-repeat bottom center,
		url(../img/con01_bg.png)no-repeat top center/cover fixed;
	width: 100%;
	height: 791px;
}


/* ==================================================
greeting
================================================== */

#sec02 {
    background: url(../img/pattern01.png)repeat;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    margin-top: -250px;
    padding: 60px 0;
    border: dashed 2px #7a6959;
    box-shadow: 0px 0px 0px 10px #f2efe8;
	position: relative;
}

.con02_fix-img{
	background: url(../img/con02_img.png) no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
	width: 90%;
	height: 300px;
	text-align: center;
	margin: 0 auto;
}

/* ==================================================
bussines
================================================== */
#sec03{
	background: 
		url(../img/con01top_bg.png)no-repeat top center,
		url(../img/con01bot_bg.png)no-repeat bottom center,
		url(../img/con03_bg.png)no-repeat top center/cover fixed;
	width: 100%;
	height: 2151px;
	margin-top: -400px;
}

.con03_txtbox {
    background: white;
    padding: 50px 30px 30px;
	height: 160px;
    width: 96%;
    text-align: center;
    margin: 0 auto;
    margin-top: -30px;
    border-radius: 0 0 20px 20px;
    display: inline-block;
    position: relative;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(52, 28, 4, 0.2);
	box-shadow: 0px 4px 10px 0px rgba(52, 28, 4, 0.2);
}

/* ==================================================
Information
================================================== */
#sec04{
	margin-top: -500px;
}
.con04_bg {
    background: url(../img/con04_bg.png) no-repeat top center /cover fixed;
    width: 90%;
    height: 500px;
    margin: -410px auto 0;
}

/* ==================================================
Information
================================================== */
#sec05{
	padding: 100px 0;
	background: url(../img/line-top02.png) repeat-x bottom ;
}
/* 見出し
-------------------------------------------------- */
.styled-title01 {
	margin: 0 0 30px;
	text-align: center;
	font-size: 35px;
	font-weight: bold;
}

.styled-title02 {
	margin: 0 0 15px;
	padding: 8px;
	line-height: 1.3;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	background: #ffb400;
}

/* レイアウト
-------------------------------------------------- */
.flex{
	display: flex;
}

.center{
	text-align: center;
	margin: 0 auto;
}

.lh40{
	line-height: 40px;
}

.mat50{
	margin-top: 50px;
}

.mat-500{
	margin-top: -500px;
}
/* カラー
-------------------------------------------------- */
.brown{
	color: #9f824f;
}

/* タイトル
-------------------------------------------------- */

.ls0{
	letter-spacing: 0;
}

.ttl01{
	letter-spacing: 0.15em;
	font-size: 36px;
	font-weight: 700;
}

.ttl02{
	letter-spacing: 0.1em;
	font-size: 40px;
	font-weight: 700;
}
.ttl02-mat{
	letter-spacing: 0.1em;
	font-size: 40px;
	font-weight: 700;
	padding-top: 500px;
}

.ttl03{
	
}

.minttl01{
	color: white;
	padding: 3px 15px;
	background: url(../img/pattern02.png)repeat;
	display: inline-block;
	font-size: 18px;
	letter-spacing: 0;
	border-radius: 10px;
}

.marcer {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 0%, #fff5b2 0%) repeat scroll 0 0;
    font-size: 17px;
    font-weight: 600;
}



/* ==================================================
要素の横並び（2つパターン）
================================================== */
.gallery-list03 {
	display: flex;
	flex-wrap: wrap;
}

.gallery-list03 li {
	width: calc((100% - 45px) / 2);
	margin: 0 45px 40px 0;
}

.gallery-list03 li:nth-child(2n) {
	margin-right: 0;
}

@media screen and (max-width: 768px) {
	.gallery-list03 li {
		width: calc((100% - 5px) / 2);
		margin: 0 5px 5px 0;
	}

	.gallery-list03 li:nth-child(2n) {
		margin-right: 0;
	}
}

.gallery-list03 img{
	z-index: 999;
	position: relative;
}


/* ==================================================
テーブル
================================================== */
.styled-table02 {
	width: 100%;
	margin: 0 0 40px;
	border-collapse: separate;
	border-spacing: 5px;
	padding: 50px;
	background: url(../img/pattern01.png)repeat;
	position: relative;
	z-index: 999;
}

.styled-table02 th,
.styled-table02 td {
	padding: 15px;
	line-height: 1.3;
}

.styled-table02 th {
	width: 30%;
	text-align: center;
	color: #fff;
	background: url(../img/pattern03.png)repeat;
	box-sizing: border-box;
}

.styled-table02 td {
	background: white;
}