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

.spBox{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.spBox article{ margin: 2.0em 0 0 0; flex: 0 0 48%; padding: 21.32% 0 0 0;  position: relative;}
.spBox article *{ margin-top: 0;}
.spBox article a{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  background: no-repeat center center / cover; color: #000000; text-decoration: none; box-shadow: 3px 3px 5px rgba(0,0,0,0.4);}
.spBox article a::after{ position: absolute; content: ""; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.spBox article a div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 2; padding: 0 1.5em; text-align: center; }
.spBox article a div h3{ font-size: 128%; font-weight: bold; color: #FFFFFF; line-height: 1.5;}
.spBox article a div p{ color: #FFFFFF; line-height: 1.5; margin: 1.0em 0 0 0;}

@media only screen and (max-width:480px){ /* sm pnly */
  .spBox{ display: block;}
  .spBox article{ display: block; margin: 1.0em 0 0 0; width: 100%; padding: 56.25% 0 0 0;}
}

/*
.specific { margin-top: 2.0em;}
.specific div{ 
	margin: 0;  padding:0.3em; 
	background: rgb(189,164,66);
	background: -moz-linear-gradient(left,  rgba(189,164,66,1) 0%, rgba(160,139,54,1) 50%, rgba(137,119,43,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(189,164,66,1) 0%,rgba(160,139,54,1) 50%,rgba(137,119,43,1) 100%);
	background: linear-gradient(to right,  rgba(189,164,66,1) 0%,rgba(160,139,54,1) 50%,rgba(137,119,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bda442', endColorstr='#89772b',GradientType=1 );
}
.specific div p{
	margin:0; padding: 0.5em; color: #FFFFFF; text-align: center; line-height: 1.5;
	background: rgb(137,119,43);
	background: -moz-linear-gradient(left,  rgba(137,119,43,1) 0%, rgba(160,139,54,1) 50%, rgba(189,164,66,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(137,119,43,1) 0%,rgba(160,139,54,1) 50%,rgba(189,164,66,1) 100%);
	background: linear-gradient(to right,  rgba(137,119,43,1) 0%,rgba(160,139,54,1) 50%,rgba(189,164,66,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89772b', endColorstr='#bda442',GradientType=1 );
}
*/
.specific{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.specific li{ flex: 0 0 19%;}
.specific li *{ margin-top: 0;}
.specific li div{ 
	margin: 0;  padding:0.3em; height: 100%;
	background: rgb(189,164,66);
	background: -moz-linear-gradient(left,  rgba(189,164,66,1) 0%, rgba(160,139,54,1) 50%, rgba(137,119,43,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(189,164,66,1) 0%,rgba(160,139,54,1) 50%,rgba(137,119,43,1) 100%);
	background: linear-gradient(to right,  rgba(189,164,66,1) 0%,rgba(160,139,54,1) 50%,rgba(137,119,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bda442', endColorstr='#89772b',GradientType=1 );
}
.specific div p{
	margin:0; padding: 0.5em; color: #FFFFFF; text-align: center; line-height: 1.5; height: 100%; display: flex; align-items: center; justify-content: center;
	background: rgb(137,119,43);
	background: -moz-linear-gradient(left,  rgba(137,119,43,1) 0%, rgba(160,139,54,1) 50%, rgba(189,164,66,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(137,119,43,1) 0%,rgba(160,139,54,1) 50%,rgba(189,164,66,1) 100%);
	background: linear-gradient(to right,  rgba(137,119,43,1) 0%,rgba(160,139,54,1) 50%,rgba(189,164,66,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89772b', endColorstr='#bda442',GradientType=1 );
}
@media only screen and (max-width:480px){ 
  .specific li{ flex: 0 0 49%;}
}


.scene{ position: relative;}
.scene img{ display: block; margin: 0; padding: 0; width:100%;}
.scene .text-copy{ width:1100px; color: #FFFFFF; margin: 0 auto; position: absolute; top: 1.5em; left: 0; right: 0;}

.view{ margin: 0; padding: 0; background: #072856; color: #FFFFFF;}

.location{ font-size:86%;}
.location li{ margin-top: 1.0em;}
.location p{ margin-top:0;}

.local-rwttl{ background: #E60012; color: #FFFFFF; padding: 0.3em 1.0em;}
.local-rwtext{ color: #E60012; border: solid 1px #E60012;}

.copy .aside01{ text-align: center;}
.copy .aside01 img{ width: 480px; height: auto;}
.copy .copy-title{ margin: 0 0 0 0; color: #A62126; font-weight: normal; text-align: center; font-size: 350%;}

.suga_bnr{width:64%;margin: 5% auto;}
.suga_h2{text-align: center;font-size: 200%;margin-bottom: 10%;font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka－等幅', 'Osaka-mono', 'monospace';}
.sponly{display: none;}
@media only screen and (min-width:480px){ /* pc pnly */
	.hp{ margin:0; padding: 0; position: relative;}
	.hp img{ diaplay: block; margin: 0; padding: 0;}
	.hp img.item01{ width: 100%; height: auto;}
	.hp img.item02{ position: absolute; right: 0; bottom: 0; max-height: 80%; max-width: 40%; width: auto; height: auto;}
}


@media only screen and (max-width:480px){ /* sm pnly */
	.hp{ margin:0; padding: 0; position: relative;}
	.hp *{ margin-top:0;}
	.hp img{ diaplay: block; margin: 0; padding: 0;}
	.hp img.item01{ width: 100%; height: auto;}
	.hp img.item02{ position: absolute; right: 0; bottom: 0; max-height: 80%; max-width: 40%; width: auto; height: auto;}
	
	.copy .mb{ padding-top:0;}
  .copy .copy-title{ font-size: 200%; line-height: 1.2;}
  
	
	.scene .text-copy{ width: 100%;  padding: 0 0 0 1.0em;}
	.suga_bnr{width:100%;margin: 5% auto;}
	.suga_h2{text-align: center;font-size: 160%;margin-bottom: 10%;font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka－等幅', 'Osaka-mono', 'monospace';}
	.sponly{display: block;}
}