@charset "utf-8";

/* ################################################################################################ */
/* ## 共通スタイル ################################################################################ */
/* ################################################################################################ */
body
{
	font-size:14px;
	font-size:1.4rem;
	background-color:#FFF;
	color:#4F4F4F;
	text-align: center;
	line-height: 1.75;
	letter-spacing: 0.08;
	font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Century Gothic",Verdana,Arial,sans-serif;
}

/*
************************************************************************
* レスポンシブ別表示切り替え
************************************************************************
*/
@media screen and (max-width:780px)
{
	.pc-visible  {display:none !important;}
	.pc-tab-visible  {display:none !important;}
	.tab-visible {display:none !important;}
	.sp-hide     {display:none !important;}
}
@media screen and (min-width:781px) and (max-width:1000px)
{
	.pc-visible  {display:none !important;}
	.tab-hide    {display:none !important;}
	.sp-visible  {display:none !important;}
}
@media screen and (min-width:1000px)
{
	.pc-hide     {display:none !important;}
	.tab-visible {display:none !important;}
	.sp-visible  {display:none !important;}
}



/* -- レイアウト -------------------------------------------------------------------------------- */
#wrapper
{
	-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;
	position:relative;
	width: 100%;
	margin: 0 auto;
}

.box-sizing {
	webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;
}

.inner-content {
	max-width: 900px;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	/* margin: 0 auto; */
	box-sizing: border-box;
}
#contents {
	width: 100%;
	margin: 0 auto;
}
.wrap-brand {
	-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
}
.wrap-brand-wedding {
	-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;
	width: 100%;
}

.wrap-brand-detail {
	-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;
	position:relative;
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
}

/* -- パネル -------------------------------------------------------------------------------- */


.panel
{
    position:absolute;
    margin:auto;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    overflow:hidden;
}
.panel-wrap
{
    overflow: hidden;
    position:relative;
    padding: 0;
    padding-top:100%; /*横幅を100%とした時の縦*/
}
.panel-wrap-2
{
    overflow: hidden;
    position:relative;
    padding: 0;
    padding-top:150%; /*横幅を100%とした時の縦*/
}
.panel-wrap-3
{
    overflow: hidden;
    position:relative;
    padding: 0;
    padding-top:125%; /*横幅を100%とした時の縦*/
}
.panel-wrap-4
{
    overflow: hidden;
    position:relative;
    padding: 0;
    padding-top:200%; /*横幅を100%とした時の縦*/
}
.panel-wrap-5
{
    overflow: hidden;
    position:relative;
    padding: 0;
    padding-top:50%; /*横幅を100%とした時の縦*/
}

.panel-wrap-ex
{
    overflow: hidden;
    position:relative;
    padding: 0;
    padding-top:62.5%;
}

.panel img:hover {
	transform: scale(1.04, 1.04);
    transition: all 0.3s ease-out 0s;
}

.panel .brand-logo img:hover {
	transform: none;
}




/* -- ヘッダー -------------------------------------------------------------------------------- */

header {
	z-index: 1;
}

#wrap-mv {
	position: relative;
	/*
	background-image: url(../_img/mv/mv-arc-20th.jpg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 700px;
	border-bottom: 1px solid #000077;
	*/
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
#wrap-header {
	width: 100%;
	position: absolute;
	top: 0;
}

header {
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

#logo {
	padding-top: 30px;
	margin: 0 auto;
	text-align: center;
}
.header-button {
	position: absolute;
	right: 10px;
	top: 38px;
}
.btn-web {
	float: left;
	border: 1px solid #000077;
	color: #000077;
	display: block;
	height: 30px;
	line-height: 2;
	z-index: 100;
	margin-right: 1em;
	background-color: #fff;

}
.btn-mail {
	float: left;
	border: 1px solid #000077;
	color: #000077;
	display: block;
	height: 30px;
	line-height: 2;
	z-index: 100;
	background-color: #fff;
}

/* -- メインビジュアル -------------------------------------------------------------------------------- */

.mv-overlay {
	width: 100%;
	height: 70%;
	z-index: 10;
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
}
.mv-overlay img {
	display: inline-block;
}

.btn-overlay {
	display: inline-block;
	margin: 0 auto;
	padding: 10px 0;
	width: 30%;
	max-width: 300px;
	min-width: 130px;
}
.btn-overlay-arc {
	border: 1px solid #000077;
	color: #000077;
}
.btn-overlay-nachu {
	border: 1px solid #41250F;
	color: #41250F;
	font-weight: bold;
}

.bx-wrapper {
	max-width: 1920px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
    margin-bottom: 0px;
}
.bx-wrapper img {
	text-align: center;
}
.bx-controls {
	display: none;
}
.bx-pager {
	display: none;
}
.bx-slider {
	height:200px;
}


.slider-wrapper {
  overflow: hidden;
}

.slider {
  position: relative;
  left: 15vw; /* (100vw - SlideWidth) / 2 */
  overflow: visible !important;
}

.slide {
  width: 70vw !important;
}

/* bxSlider */
.bx-wrapper {
  box-shadow: none;
  border: none;
  margin: 0;
}
@media screen and (max-width: 640px) {
	.slider {
		left: 10vw;
	}
	.slide {
  	width: 80vw !important;
	}
}




/* -- フッター -------------------------------------------------------------------------------- */

footer {
	position: relative;
	border-top: 2px solid #000077;
	border-bottom: 10px solid #000077;
	background-color: #FFF;
	color: #272727;
	text-align: left;
	padding-top: 30px;
	margin-top: 45px;
}

#footer-sns ul {
	text-align: center;
}
#footer-sns li {
	display: inline-block;
}
#footer-sns img {
	width: 50%;
}

.footer-navi li {
	display: inline-block;
}
.block-recruit {
	width: 1080px;
	margin: 0 auto;
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: right;
}
.btn-recruit {
	position: static;
	right: 0;
	top: 20px;
	display: inline-block;
}


/* -- 見出し -------------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6
{
	padding-top:0em;
	padding-bottom:0em;
	text-align: center;
	font-weight: bold;
}

/* -- 回り込み -------------------------------------------------------------------------------- */



/* -- 文字色 -------------------------------------------------------------------------------- */

.tel {
	color: #134827;
	text-decoration: underline;
}
a.tel {
	color: #134827;
	text-decoration: underline;
	padding: 5px 0 0 30px;
	background-image: url(../_img/icon/ic-tel.png);
	background-position: 0 50%;
	background-repeat: no-repeat;
	display: inline-block;
}
.fc-black {
	color: #272727;
}

.fc-red {
	color: #C0262C;
}

/* -- リンク配色パターン -------------------------------------------------------------------------------- */
a
{
	color:#272727;
}
a.white
{
	color:#FFF;
}
a:hover {
	opacity: 0.6;
}


/* -- 画像 -------------------------------------------------------------------------------- */


/* -- アイコン -------------------------------------------------------------------------------- */
.icon
{
	vertical-align:middle;
	margin-right:0.5em;
}

.ic-th {
	padding-top: 36px;
	background-image: url(../_img/icon/ic-th.svg);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: 28px;
}
.ic-camera {
	background-image: url(../_img/icon/ic-camera.png);
	background-position: 5px 50%;
	background-repeat: no-repeat;
	padding: 0 1em 0 2.5em;
	vertical-align: middle;
}
.ic-mail {
	background-image: url(../_img/icon/ic-mail.png);
	background-position: 5px 50%;
	background-repeat: no-repeat;
	padding: 0 1em 0 2.5em;
	vertical-align: middle;
}


/* -- ボタン -------------------------------------------------------------------------------- */

.btn {
	border-radius: 20px;
	text-align: center;
	display: inline-block;
}
.btn-brand {
	color: #FFF;
	background-color: #313131;
	padding: 4px 15px 4px 35px;
	background-image: url(../_img/icon/ic-linksite.png);
	background-position: 12px 50%;
	background-repeat: no-repeat;
}






/* -- フォントサイズ -------------------------------------------------------------------------------- */
.f-size-LLLLL
{
	font-size:26px;
	font-size:2.6rem;
}
.f-size-LLLL
{
	font-size:22px;
	font-size:2.2rem;
}
.f-size-LLL
{
	font-size:20px;
	font-size:2.0rem;
}
.f-size-LL
{
	font-size:18px;
	font-size:1.8rem;
}
.f-size-L
{
	font-size:16px;
	font-size:1.6rem;
}
.f-size-M
{
	font-size:13px;
	font-size:1.3rem;
}
.f-size-S
{
	font-size:12px;
	font-size:1.2rem;
}
/* -- 行間 -------------------------------------------------------------------------------- */

.lh-10 {line-height: 1.0;}
.lh-11{line-height: 1.1;}
.lh-12 {line-height: 1.2;}
.lh-13 {line-height: 1.3;}
.lh-14 {line-height: 1.4;}
.lh-15 {line-height: 1.5;}
.lh-16 {line-height: 1.6;}
.lh-17 {line-height: 1.7;}
.lh-18 {line-height: 1.8;}
.lh-19 {line-height: 1.9;}
.lh-20 {line-height: 2.0;}
.lh-21 {line-height: 2.1;}
.lh-22 {line-height: 2.2;}
.lh-23 {line-height: 2.3;}
.lh-24 {line-height: 2.4;}
.lh-25 {line-height: 2.5;}
.lh-26 {line-height: 2.6;}
.lh-27 {line-height: 2.7;}
.lh-28 {line-height: 2.8;}
.lh-29 {line-height: 2.9;}
.lh-30 {line-height: 3.0;}


/* -- トラッキング -------------------------------------------------------------------------------- */
.ls-01 {letter-spacing: 0.01em;}
.ls-02 {letter-spacing: 0.02em;}
.ls-03 {letter-spacing: 0.03em;}
.ls-04 {letter-spacing: 0.04em;}
.ls-05 {letter-spacing: 0.05em;}
.ls-06 {letter-spacing: 0.06em;}
.ls-07 {letter-spacing: 0.07em;}
.ls-08 {letter-spacing: 0.08em;}
.ls-09 {letter-spacing: 0.09em;}
.ls-10 {letter-spacing: 0.10em;}
.ls-11 {letter-spacing: 0.11em;}
.ls-12 {letter-spacing: 0.12em;}
.ls-13 {letter-spacing: 0.13em;}
.ls-14 {letter-spacing: 0.14em;}
.ls-15 {letter-spacing: 0.15em;}
.ls-16 {letter-spacing: 0.16em;}
.ls-17 {letter-spacing: 0.17em;}
.ls-18 {letter-spacing: 0.18em;}
.ls-19 {letter-spacing: 0.19em;}
.ls-20 {letter-spacing: 0.20em;}
.ls-21 {letter-spacing: 0.21em;}
.ls-22 {letter-spacing: 0.22em;}
.ls-23 {letter-spacing: 0.23em;}
.ls-24 {letter-spacing: 0.24em;}
.ls-25 {letter-spacing: 0.25em;}
.ls-26 {letter-spacing: 0.26em;}
.ls-27 {letter-spacing: 0.27em;}
.ls-28 {letter-spacing: 0.28em;}
.ls-29 {letter-spacing: 0.29em;}
.ls-30 {letter-spacing: 0.30em;}

/* -- テーブル -------------------------------------------------------------------------------- */




/* ################################################################################################ */
/* ## タブレットサイト用スタイル ################################################################## */
/* ################################################################################################ */
@media screen and (max-width: 1000px) {


}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width: 640px) {

	/* -- レイアウト -------------------------------------------------------------------------------- */


	/* -- ヘッダー -------------------------------------------------------------------------------- */

	#wrap-header {
		position: relative;
	}
	#logo {
		margin-bottom: 2em;
		padding-top: 2em;
		text-align: center;
	}
	#logo img {
		width: 50%;
	}
	.header-button {
		margin-bottom: 2em;
		position: relative;
		right: auto;
		left: auto;
		top: auto;
		display: inline-block;
	}
	.btn-web,
	.btn-mail {
		float: none;
		display: inline-block;
	}

	.mv-overlay {
		top: 40%;
	}
	/* -- メニューページ -------------------------------------------------------------------------------- */


	/* -- スマホメニュー -------------------------------------------------------------------------------- */


}

@media screen and (max-width: 330px) {
	.ss-none {
		display: none;
	}
	.ss-block {
		display: block;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 継承されないスタイル
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ################################################################################################ */
/* ## パソコンサイト用スタイル(大画面) ############################################################ */
/* ################################################################################################ */
@media screen and (min-width:1201px) and (max-width:9999px) {
}

/* ################################################################################################ */
/* ## パソコンサイト用スタイル #################################################################### */
/* ################################################################################################ */
@media screen and (min-width:961px) and (max-width: 1200px) {
}

/* ################################################################################################ */
/* ## タブレットサイト用スタイル ################################################################## */
/* ################################################################################################ */
@media screen and (min-width:781px) and (max-width: 960px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width: 780px) {

}