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

html, 
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

header {
	padding: 15px;
}

img {
	width: 100%;
	max-width: 1408px;
	height: auto;
	vertical-align: middle;
}

footer {
	padding: 20px 30px;
	/*background-color: #FFFFFF;*/
}

body {
	font-family: Oswald,Britannic Bold,YuGothicM, HiraKakuProN-W6, Helvetica Neue, Helvetica," sans-serif";
	margin-left: auto;
	margin-right: auto;
	/*background: #e6f4f8;*/
}

.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 200px;
}

.play-logo {
	/*margin-left: auto;
	margin-right: auto;*/
	display:inline-block;
	width: 20px;
}

.style-nav ul {
	list-style-type: none;
}

.style-nav ul li a {
	text-decoration: none;
	color: #2F322A;
	text-align: center;
	display: block;
	/*text-transform: uppercase;*/
	padding: 8px;
}

.hero {
	position:	relative;
	/*background-image: url(images/hero.jpg);*/ 
	/*background-position: left top;
	background-repeat: no-repeat;*/
	/*background-size: cover;*/
	/*background-size: 100% auto;
	/*background-repeat: no-repeat;*/
	/*padding*/
	margin: 20px 20px 30px 20px;
	color: #FFFFFF;
	text-align: center;
}
.hero img {
  max-width: 100%;
  height: 	auto;
  }

.style-cd {
    margin-left: auto;
	margin-right: auto;
	max-width:1024px;
  }

.style-forsale {
    margin-left: auto;
	margin-right: auto;
    display: block;
	min-width:100px;
	width:30%;
}

.text {
	font-size:	57px;
	font-weight: 200;
	text-align:	center;
	top:		0px;
	left:		0px;
	/*right:		20px;*/
	/*margin: 20px 20px 30px 20px;*/
	/*padding: 20px 20px 30px 20px;*/
	/*padding:	0;*/
	color: #F00;
	background:	rgba(0,0,0,0.1); /* 帯の透明度 */
	position:	absolute; /* 絶対位置指定 */
}
.absolute {
	width: 100%;
	font-size: 57px;
	top: 0px;
	text-align: center;
	color: #F00;
	background: rgba(0,0,0,0.2); /* 帯の透明度 */
	position: absolute;
	left: 1px;
	}

h1 {
	/*font-family: Britannic Bold;*/
	font-family: Patua One, Britannic Bold," sans-serif";
	font-size: 35px;
	/*text-transform: uppercase;*/
	font-weight: 600;
	text-align: center;
	margin-bottom: 20px;
	margin-top: 10px;
	color: #2F322A;
}

h2 {
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 200;
	margin-bottom: 23px;
}

h3 {
	font-size: 20px;
	/*text-transform: uppercase;*/
	font-weight: 200;
	margin-bottom: 20px;
}

h4 {
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 20px;
}

p {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 10px;
}

.button {
	border: 2px #FFFFFF solid;
	padding: 8px 30px;
	border-radius: 30px;
	color: #FFFFFF;
	text-decoration: none;
}

.play_button {
	background-color:rgba(255,255,255,0.2);
	padding: 4px 15px;
	border-radius: 5px;
	color: #FFFFFF;
	text-decoration: none;
	cursor :pointer;
}
.play_button:hover {
    background-color: #efefef;
	color:#FFFFFF;
}


/*隠れている文章の表示*/
.hidden_box {
	margin: 16px 0;/*前後の余白*/
    padding: 0;
}
.hidden_box_bk {
	margin: 16px 10px;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
	border: 2px #FFFFFF solid;
	padding: 8px 30px;
	border-radius: 30px;
	color: #FFFFFF;
	text-decoration: none;
    cursor :pointer;
}

.hidden_box_bk label {
	border: 2px #000000 solid;
	padding: 8px 30px;
	border-radius: 30px;
	color: #000000;
	text-decoration: none;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}
.hidden_box_bk label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}
.hidden_box_bk input {
    display: none;
}


/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    /*transition: 0.8s;*/
}
.hidden_box_bk .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    /*transition: 0.8s;*/
}


/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
.hidden_box_bk input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}


.info-box-london {
	min-height:400px;
	background-color: #000040;
	color: #FFFFFF;
	padding: 30px 20px 30px;
	text-align: center;
}

.info-box-geranium {
	min-height:250px;
	background-color: #7A0000;
	color: #FFFFFF;
	padding: 30px 20px 30px;
	text-align: center;
}

.info-box-chartreuse_yellow {
	min-height:250px;
	background-color: #EADE5D;
	color: #E22838;
	padding: 30px 20px 30px;
	text-align: center;
	border: solid #FF0000;
}

.info-box-mimosa {
	min-height:400px;
	background-color: #AF7D00;
	color: #FFFFFF;
	padding: 30px 20px 30px;
	text-align: center;
}

.info-box-mint {
	min-height:400px;
	background-color: #004232;
	color: #FFFFFF;
	padding: 30px 20px 30px;
	text-align: center;
}

.info-box-white {
	min-height: 250px;
	background-color: #FFFFFF;
	color: #000000;
	padding: 30px 20px 30px;
	text-align: center;
	border: solid #FF0000;
}

.info-box-maroon {
	min-height: 400px;
	background-color: #670026;
	color: #FFFFFF;
	padding: 30px 20px 30px;
	text-align: center;
}

.info-box-hampshire {
	min-height: 250px;
	background-color: #023500;
	color: #FFFFFF;
	padding: 30px 20px 30px;
	text-align: center;
}

.info-box-scotland {
	min-height: 250px;
	background-color: #000057;
	color: #FFFFFF;
	padding: 30px 20px 30px;
	text-align: center;
}

.footer-text {
	font-size: 13px;
	margin-bottom: 20px;
}

.col {
	width: 100%;
}

.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

#slide_photo {
	z-index:1;
	width: 100%;
	min-width: 100px;
	max-width: 1200px;
    height: 300px;
	/*height: 	auto;*/
    margin:  auto;
	/*margin: 20px 20px 20px;*/
    text-align: center;
    overflow: auto;
    position: relative;
	object-fit: contain;
}

#slide_photo img {
		/*width: 1000px;*/
    /*max-width: 1000px;*/
	 /*max-width: 80%;*/
	 /*height: 	500px;*/

	z-index:1;
    top: 0;
    left: 0;
	
    position: absolute;
}

audio {
	max-width: 450px;
	width: 100%; 
  	height: 100px; }

/*Tablet View*/

@media  (orientation: landscape),(min-width: 600px){
	
	body {
		/*max-width: 778px;*/
		max-width: 900px;
	}
	
	.style-nav ul li {
		display: inline-block;
	}
	
	.style-nav ul {
		text-align: center;
	}
	
	.absolute {
		font-size: 40px;
	}
	
	h1 {
		font-size: 40px;
		margin-bottom: 10px;
	}
	
	h2 {
		margin-bottom: 16px;
	}

	p {
		font-size: 20px;
	}
	
	.col-md-one-half {
		width: 50%;
	}
	
	.col {
		float: left;
		padding: 0px 7px 14px;
	}
	
	#slide_photo {
		height: 500px;
	}
	
}

/*Desktop View*/

@media (min-width: 960px) {
	
	body {
		max-width: 1400px;
	}
	
	.style-logo {
		float: left;
	}
	
	.style-nav {
		float: right;
	}
	
	.style-nav ul li a {
		font-size: 20px
	}
	
	h1 {
		font-size: 50px;
	}
	
	h2 {
		clear:left;
		font-size: 40px;
	}
	
	h3 {
		font-size: 30px;
	}
			
	h4 {
		font-size: 20px;
		/*float: right;*/
	}
	
	.col-lg-one-fourth {
		width: 25%;
	}
	
	.col-lg-three-fourth {
		width: 75%;
	}
	
	#slide_photo {
		height: 600px;
	}
	
	}
}

.video{
  position:relative;
  max-width:1200px;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

tb-h{	
	font-size: 30px;
	/*text-transform: uppercase;*/
	font-weight: 200;
}
tb-d{	
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 200;
}

table {
	background-image: url(images/abbey_road_studio.jpg);
	background-size: cover;
	margin: 20px auto;
}
.tbl-r02 th {
  background: #EF8184;
  opacity: 0.8;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.tbl-r02 td {
　border: solid 1px #ccc;
  color: #000000;
  padding: 10px;
}
  .last td:last-child {
    border-bottom: solid 1px #ccc;
	display: inline-block;
    width: 100%;
  }
  .tbl-r02 {
    width: 90%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: inline-block;
    width: 100%;
  }
  
video {
	position: relative;
	width: 100%;
	}