@charset "utf-8";

/* CSS Document */


/* -------------------------------------------------

inview

------------------------------------------------- */
.mainArea{
	opacity: 0;
	transition:1s;
	transform: translate(0,-20px);
}
.mainAreaA{
	opacity: 1.0;
	transform: translate(0,0); 
}

/* -------------------------------------------------

header

------------------------------------------------- */
header > h1 {
	font-size: 0;
	line-height: 100%;
}
header > p{
	margin: 3px 0 0;
	font-weight: 500;
}
/* PC */
@media print, screen and (min-width:769px) {
header {
	width: 1060px;
	margin: 20px auto 30px;
}
header > h1 {
	margin: 0 0 30px;
}
header > p {
	text-align: center;
	font-size: 1.1em;
}
}
/* Tablet */
@media screen and (max-width:768px) {
header {
	margin: 0 0 20px;
}
header > h1 {
	margin: 0 0 20px;
}
header > p {
	text-align: center;
	padding:0 12px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
header > p{
	text-align: left;
}
}

/* -------------------------------------------------

nav

------------------------------------------------- */
nav > ul {
	height: auto;
}
nav > ul li a{
	display: block;
	background-color: #cf7b0e;
	color:#fff;
	font-weight: 700;
	text-align: center;
	width: calc(25% - 1px);
	float: left;
	line-height: 140%;
	padding: 13px 0;
	letter-spacing: 1px;
}
nav > ul li:nth-child(-n+4) a{
	margin-right: 1px;
}
nav > ul li a:after{
	content: "\f078";
	font-family: FontAwesome;
	display: block;
	font-weight: normal;
}
nav > ul li a:hover{
	background-color: #cc9e00;
	color:#fff;
}
/* PC */
@media print, screen and (min-width:769px) {
nav {
	width: 1000px;
	margin: 0 auto 50px;
}
nav > ul li a{
	font-size: 1.2em;
}
}
/* Tablet */
@media screen and (max-width:768px) {
nav {
	margin: 0 0 30px;
}
nav > ul li a{
	letter-spacing: 0px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
nav > ul li a{
	font-size: 0.95em;
	width: calc(50% - 1px);
	margin-bottom: 1px;
}
}

/* -------------------------------------------------

mainArea

------------------------------------------------- */
/* bg */
.mainArea:nth-of-type(2n+1){
	background-color: #fff9ef;
}
/* text*/
.boxText > p:first-child span:nth-child(1){
	margin: 0 0 10px;
	padding:5px 10px;
	font-weight: bold;
	color:#fff;
	display: inline-block;
	background-color: #cf7b0e;
	font-size: 1.15em;
}
.boxText > p:first-child span:nth-child(1) img{
	width: 17px!important;
	vertical-align: middle;
	margin-right: 8px;
}
.boxText h2 {
	margin: 0 0 10px;
	padding:0 0 8px;
	font-weight: 700;
	font-size: 1.25em;
	color:#cf7b0e;
	border-bottom: 2px solid #cf7b0e;
}
.boxText h2:before {
	content: "\f0da";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 0.8em;
}
.boxText h2 span{
	font-weight: 700;
	font-size: 0.75em;
	padding-right: 5px;
}
/* detailTable */
.detailTable {
	width: 100%;
}
.detailTable > tbody > tr > th,
.detailTable > tbody > tr > td {
	vertical-align: top;
	font-size: 0.95em;
	border-bottom: 1px dotted #9b8e89;
	word-break: break-all;
}
.detailTable > tbody > tr > th {
	font-weight: normal;
	text-align: left;
	width: 70px;
}
.detailTable > tbody > tr > th:before{
	content:"●";
	font-size: 0.9em;
	color: #ebe0cb;
	padding-right: 3px;
	vertical-align: top;
}
.detailTable > tbody > tr > td a:hover{
	opacity: 0.8;
}
.detailTable > tbody > tr > td table th,
.detailTable > tbody > tr > td table td{
	font-weight: normal;
	text-align: left;
	padding: 0 10px 0 0;
	vertical-align: top;
}
.detailTable > tbody > tr > td table th{
	white-space: nowrap;
}
.detailTable > tbody > tr > td table th span{
	font-size: 0.85em;
	padding-left: 5px;
}
.boxText > ol li{
	font-size: 0.9em;
	text-indent: -1em;
	padding-left: 1em;
}
/* btn */
.boxText ul li a{
	color: #fff;
	border-radius: 5px;
	text-align: center;
	display: inline-block;
}
.boxText ul li a:hover{
	transform: translate(0, -3px);
	opacity: 0.8;
}
.boxText ul li a:before{
	font-family: FontAwesome;
	padding-right: 5px;
}
.boxText ul li:nth-child(1) a{
	background-color: #cf7b0e;
}
.boxText ul li:nth-child(1) a:before{
	content: "\f054";
}
.boxText ul li.iconMap a{
	background-color: #cc9e00;
}
.boxText ul li.iconMap a:before {
	content: "\f041";
}
.mainArea p.notes2{
	color:#cf7b0e;
}
.mainArea p.notes{
	margin-top: 10px;
	padding: 10px;
	font-size: 0.85em;
}
.mainArea p.notes{
	background-color:rgba(209,122,36,0.1);
}
/* photo*/
.boxPhoto > p {
	font-size: 0;
	line-height: 100%;
	margin: 0 0 15px;
}
.boxPhoto > p img {
	width: 100%;
}
.boxPhoto > ul{
	height: auto;
	margin: 0 0 10px;
}
.boxPhoto > ul li{
	width:calc(50% - 7px);
}
.boxPhoto > ul li:nth-child(1){
	float: left;
}
.boxPhoto > ul li:nth-child(2){
	float: right;
}
.boxPhoto > ul li img{
	width: 100%;
}

/* PC */
@media print, screen and (min-width:769px) {
.mainArea {
	padding: 50px 0;
}
.mainArea > article {
	width: 1000px;
	height: auto;
	margin: 0 auto 20px;
}
.mainArea > article > div{
	width: 480px;
}
/* text*/
.boxText ul {
	width: 400px;
	height: auto;
	margin: 15px auto;
}
.boxText ul li a{
	display: inline-block;
	width: 180px;
	float: left;
	margin: 0 10px;
	padding: 5px 0;
}
.btn1{
	width: 180px;
	margin: 0 auto;
}
/* detailTable */
.detailTable {
	margin:5px 0 10px;
}
/* photo*/
.boxPhoto {
	margin: 0 0 10px;
}
/* float*/
.mainArea:nth-of-type(2n+1) > article > div:nth-child(1),
.mainArea:nth-of-type(2n) > article > div:nth-child(2) {
	float: right;
}
.mainArea:nth-of-type(2n+1) > article > div:nth-child(2),
.mainArea:nth-of-type(2n) > article > div:nth-child(1) {
	float: left;
}
}

/* Tablet */
@media screen and (max-width:768px) {
.mainArea {
	padding: 30px 20px;
}
/* text*/
.boxText h2 {
	margin: 10px 0 10px;
}
.boxText ul {
	margin-top: 10px;
	margin-bottom: 15px;
}
.boxText ul li a{
	display: block;
	margin: 0 0 10px;
	padding: 10px 0;
}
/* detailTable */
.detailTable {
	margin:0 0 10px;
}
/* photo*/
.boxPhoto {
	margin:10px 0 0;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.detailTable > tbody > tr > th{
	white-space: nowrap;
}
.detailTable > tbody > tr > td table th:before{
	content: "▼";
	font-size: 0.8em;
	padding-right: 3px;
}
.detailTable > tbody > tr > td table th,
.detailTable > tbody > tr > td table td{
	display: block;
}
}

/* -------------------------------------------------

subPhoto01

------------------------------------------------- */

 /*  PC */
@media print, screen and (min-width:769px) {
.subPhoto01{
	width: 300px;
	margin: 0 0 0 auto!important;
}
.subPhoto02{
	width: 300px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.subPhoto01{
	width: 50%;
}
.subPhoto02{
	width: 60%;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
	
}

/* -------------------------------------------------

beerArea

------------------------------------------------- */
.beerArea{
	background-color: #f7e7d5;
	padding: 0 0 50px;
}
.beerArea > p{
	margin: 0 auto;
}
.beerArea > section{
	height: auto;
	margin: 0 auto;
}
.beerArea > section > h4{
	width: 190px;
	float: left;
	margin-top: -50px;
}
.beerArea > section > h4 img{
	width: 100%;
}
.beerArea > section > p{
	width: calc(100% - 220px);
	float: right;
}
.beerArea table{
	margin: 10px auto;
}
.beerArea table th,
.beerArea table td{
	text-align: left;
	vertical-align: top;
}
.beerArea table tr td:last-child{
	text-align: right;
}
.beerArea table th{
	background-color: #fdf0e4;
	color:#cf7b0e;
}
.beerArea table th span{
	font-weight: bold;
	padding-right: 5px;
	font-size: 1.3em;
	color:#222;
}
.beerArea table td{
	background-color: #fff;	
}
/* PC */
@media print, screen and (min-width:769px) {
.beerArea > p{
	width: 1000px;
}
.beerArea > section{
	width: 1000px;
}
.beerArea > section > p{
	font-size: 1.2em;
	padding-top: 40px;
}
.beerArea table{
	width: 1000px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.beerArea{
	padding: 0 30px 40px;
	margin-top: 20px;
}
.beerArea > section > p{
	font-size: 1.1em;
	padding-top: 20px;
}
.beerArea > section{
	margin-bottom: 20px;
}
.beerArea table{
	width: 100%;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.beerArea > section > h4{
	float: none;
	width: 140px;
	margin: 0 auto;
}
.beerArea > section > h4 img{
	margin-top:-30px;
}
.beerArea > section > p{
	width: 100%;
	float: none;
}
.tableSP{
	width: 100%;
	overflow-x: scroll;
}
.beerArea table{
	width:580px;
}
}


/* -------------------------------------------------

gotop

------------------------------------------------- */
.gotop {
	bottom:0;
	position: fixed;
}
.gotop a {
	color: #fff;
	font-weight: bold;
	text-align: center;
	display: block;
	background-color: #cf7b0e;
	border-radius: 50%;
}
.gotop a:before{
	content: "\f077";
	font-family: FontAwesome;
}
.gotop a:hover {
	opacity: 0.8;
}

/* PC */
@media print, screen and (min-width:769px) {
.gotop {
	right: 20px;
	padding-bottom: 20px;
}			
.gotop a {
	width: 50px;
	padding-top: 15px;
	padding-bottom: 15px;
}
}

/* Tablet */
@media screen and (max-width:768px) {
.gotop {
	right: 10px;
	padding-bottom: 10px;
}
.gotop a {
	width: 40px;
	line-height: 40px;
}
}
