@charset "UTF-8";

/* ================================================== *
 *
 *    base style
 *
 * ================================================== */

.clear
{
	clear:both;	
}
body
{
	background: #fff;
	color: #333333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}



.img-responsive-overwrite
{
	margin: 0 auto;
}

.tab-content.bg
{
	background: #fff;
}

.panel
{
	margin-bottom: 5px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-default > .panel-heading
{
	color: #FBD287;
	background-color: #402625;
	border-color: #ddd;
}

.clear
{
	clear: both;
}

/*==================================
　背景固定スクロール
==================================*/

.web-dtp
{
	display:table;
	height:800px;
	width:100%;
	position:relative;
	background:url(../images/index/web-dtp-bg2.jpg) no-repeat center center fixed;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-backgroun-size:cover;

}

.other
{
	display:table;
	height:800px;
	width:100%;
	position:relative;
	background:url(../images/index/other-bg.jpg) no-repeat center center fixed;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-backgroun-size:cover;

}

.company
{
	display:table;
	height:500px;
	width:100%;
	position:relative;
	background:url(../images/index/company.jpg) no-repeat center center fixed;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-backgroun-size:cover;

}

.outdoor
{
	display:table;
	height:500px;
	width:100%;
	position:relative;
	background:url("../images/index/outdoor.jpg") no-repeat center center fixed;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-backgroun-size:cover;

}

.c--page-layout-primary{
padding-right: 2.5%;
padding-right: calc(constant(safe-area-inset-right) + 2.5%);/* iPhone X向け記述 */
padding-left: 2.5%;
padding-left: calc(constant(safe-area-inset-right) + 2.5%);/* iPhone X向け記述 */
}

/*==================================
　テキストエリア背景白
==================================*/
.opacity
{
	background:#ffffff;
	color:#000000;
	background-color: rgba(255,255,255,0.9);
	border-radius:10px;
	-moz-box-shadow: 0 0 5px #999999;
	-webkit-box-shadow: 0 0 5px #999999;
	box-shadow: 0 0 5px #999999;
}

.pattern {
  width: 100%;
  height: 100%;
  background: url(http://www.webcreatorbox.com/sample/images/yokojima.png);
  /*position: fixed;*/
  top: 0;
  left: 0;
  z-index: 2;
}

.video-wrap{
    position: relative;
}

video {
  position: relative;
  right: 0;
  top: 0;
  z-index: 1;
    
}



@media(max-width:768px) {

.sm-border
{
	/*border-bottom:1px dotted #C9C8C8;*/
	padding-bottom: 10px;
}

.navbar-brand img
{
	width: 100px;
}

.nav-header.navbar-default .navbar-header .mobile-logo
{
	margin-top: 0px;
	margin-bottom: 0px;
	float: left;
}

.navbar-toggle.collapsed.tgl-color
{
	color: #4F0304;
}

#head-title .jumbotron
{
	background: url(../images/index/main-image.jpg);
	background-position: center center;
	
	background-size: cover;
	text-align: center;
	color: #fff;
	height: 400px;
	margin: 0;
}

#sub-head-title .jumbotron
{
	background: url(../images/common/title.jpg);
	background-position: center center;
	background-size: cover;
	text-align: center;
	color: #fff;
	height: 100%;
	margin: 0;
}


.logo-position
{
	text-align:left;
	height:60px;
	margin-top:10px;
}

.logo-size
{
	width:35%;	
}

/*==================================
　ページ下部トップへ戻るボタン
==================================*/

a#pagetopBtn img
{
	position: fixed;
	bottom: 10px;
	right: 10px;
	width:50px;
	height:50px;
}
    




}

@media(min-width:768px) {

.logo-position
{
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}
    
.video-wrap{
    position: relative;
}



.logo-size
{
	width:28%;	
}

/*==================================
　ページ下部トップへ戻るボタン
==================================*/

a#pagetopBtn img
{
	position: fixed;
	bottom: 30px;
	right: 50px;
}
    
.video-wrap{
    position: relative;
}


}

@media(min-width:992px) {


.logo-position
{
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}

.logo-size
{
	width:20%;	
}

}

body a:hover img, a:hover img, a:hover img
{
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	/*background: #fff;*/
}

.index-title-message
{
	background: #402625; /* Old browsers */
	color: #fff;
	padding-bottom: 10px;
	padding-top: 20px;
}

.index-title-message h3
{
	font-size: 95%;
}

.index-title-message p
{
	font-size: 80%;
	color: #E2DFDF;
}

/* ================================================== *
 *
 *    block modules
 *
 * ================================================== */

/* ------------------------------------------------- *
 *        header　モバイル
 * ------------------------------------------------- */
.nav-header
{
	padding: 10px 0 0;
}

/*ヘッダー枠*/
.nav-header.navbar-default
{
	border: none;
	margin-bottom: 0;
	background: #fff;
	
}

/*ヘッダー内リンク*/
.nav-header.navbar-default .nav.navbar-nav>li>a
{
	color: #333;
}

/*ヘッダー内リンク（マウスオーバー時）*/
.nav-header.navbar-default .nav.navbar-nav>li>a:hover
{
	color: #999;
}

.nav-header.navbar-default .navbar-header
{
	margin-top: 0px;
	margin-bottom: 0px;
}

/*ナビゲーションテキストの位置*/
.nav-header.navbar-default .navbar-brand
{
	height: auto;
	margin-top: -9px;
	margin-right: 0px;
}

.nav-header.navbar-default .navbar-collapse .navbar-nav
{
	float: none;
}

.nav-header.navbar-default .navbar-collapse .navbar-form
{
	clear: right;
	float: right;
}

.nav-header.navbar-default .navbar-toggle
{
	margin-right: 0;
}


.navbar-header
{
	padding:0 35% 0;
}


/*タブレット*/
@media(min-width:768px) {

.nav-header
{
	padding: 0;
	
}

.navbar-header
{
	padding:0 40% 0;
}


.nav-header.navbar-default .navbar-header
{
	margin-bottom: 11px;
}

.nav-header.navbar-default .navbar-brand
{
	padding-top: 24px;
	margin-top: 0;
}

.nav-header.navbar-default .navbar-collapse .navbar-nav
{
	float: right;
	margin-right: -20px;
	padding-top: 30px;
}

.nav-header.navbar-default .navbar-collapse .navbar-form
{
	float: right;
	clear: right;
	margin-right: -30px;
}

.index-title-message h3
{
	font-size: 97%;
}

.index-title-message p
{
	font-size: 90%;
	color: #E2DFDF;
}

.mobile-only-menu
{
	display: none;
}
}

/*PC*/
@media(min-width:992px) {

.nav-header
{
	padding: 15px 0 0px;
}

.nav-header.navbar-default .navbar-brand
{
	margin-top: -17px;
}

.nav-header.navbar-default .navbar-collapse .navbar-nav
{
	float: left;
	padding-top: 10px;
}

.carousel-inner, .item.active img
{
	height: 20%;
	width: 100%;
}

}

/* ------------------------------------------------- *
 *        footer
 * ------------------------------------------------- */
.footer
{
	color: #333333;
	padding: 0px 0;
	font-size:x-small;
	background:#333333;
}

.footer .list-group-item
{
	
	color: #cccccc;
	border-left: none;
	border-right: none;
	border-radius: 0;
	border-color: #444;
	background:#333333;
}

.footer a:hover
{
	color: #999999;
	border-left: none;
	border-right: none;
	border-radius: 0;
	border-color: #444;
	background:#333333;
}

.footer .text-center
{
	margin-top: 15px;
}


@media(min-width:768px) {

.footer
{
	float:left;
	width:22%;
	color: #333333;
	padding: 30px 0;
	font-size:x-small;
	background:#333333;
}


.footer .list-group-item
{
	color: #cccccc;
	border-left: none;
	border-right: none;
	border-radius: 0;
	border-color: #444;
	background:#333333;
}

.footer .text-center
{
	margin-top: 30px;
}

}

@media(min-width:992px) {

.footer
{
	float:left;
	width:18%;
	color: #333333;
	padding: 30px 0;
	font-size:x-small;
	background:#333333;
}


.footer .list-group-item
{
	color: #cccccc;
	border-left: none;
	border-right: none;
	border-radius: 0;
	border-color: #444;
	background:#333333;
}

.footer .text-center
{
	margin-top: 30px;
}


}


@media(min-width:1200px) {

.footer
{
	float:left;
	width:15%;
	color: #333333;
	padding: 30px 0;
	font-size:x-small;
	background:#333333;
}


.footer .list-group-item
{
	color: #cccccc;
	border-left: none;
	border-right: none;
	border-radius: 0;
	border-color: #444;
	background:#333333;
}



.footer .text-center
{
	margin-top: 30px;
}


}

/* ================================================== *
 *
 *    title modules
 *
 * ================================================== */

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

.headline
{
	vertical-align: middle;
	font-weight: normal;
	padding-bottom: 15px;
	border-bottom: 1px dotted #ccc;
	margin: 0;
	font-size: 16px;
}

.headline-img
{
	width: 40px;
	margin-right: 5px;
}
}

@media(min-width:768px) {

.headline
{
	vertical-align: middle;
	font-weight: normal;
	padding-bottom: 15px;
	border-bottom: 1px dotted #ccc;
	margin: 0;
	font-size: 18px;
}

.headline-img
{
	width: 50px;
	margin-right: 5px;
}
}

@media(min-width:1200px) {

.headline
{
	vertical-align: middle;
	font-weight: normal;
	padding-bottom: 15px;
	border-bottom: 1px dotted #ccc;
	margin: 0;
	font-size: 20px;
}

.headline-img
{
	width: 50px;
	margin-right: 5px;
}
}

/* ================================================== *
 *
 *    nav modules
 *
 * ================================================== */

/* ------------------------------------------------- *
 *        sideNav
 * ------------------------------------------------- */
  
.left-sideNav.list-group .list-group-item
{
	border-radius: 0;
	border-color: #ddd;
	border-left: none;
	border-right: none;
}

.left-sideNav.list-group .list-group-item:first-child
{
	border-top: none;
}

.left-sideNav .glyphicon
{
	position: absolute;
	right: 15px;
	top: 14px;
	font-size: 10px;
}


/* ------------------------------------------------- *
 *        margin
 * ------------------------------------------------- */





/* ------------------------------------------------- *
 *        padding
 * ------------------------------------------------- */
.padding-top-lg
{
	padding-top: 60px;
}

.padding-top-md
{
	padding-top: 30px;
}

.padding-top-sm
{
	padding-top: 15px;
}

.padding-bottom-lg
{
	padding-bottom: 60px;
}

.padding-bottom-md
{
	padding-bottom: 30px;
}

.padding-bottom-sm
{
	padding-bottom: 15px;
}

/* ================================================== *
 *
 *    Custom Bootstrap Class
 *
 * ================================================== */

/* ------------------------------------------------- *
 *        grid
 * ------------------------------------------------- */
.row .colPadding
{
	padding-top: 15px;
	padding-bottom: 15px;
}