@charset "UTF-8";

/* ########### 767px以下 スマホ ########### */
@media screen and (max-width: 767px) {
.pc {
	display: none
}
}
/* ########### 768px以上 PC ########### */
@media screen and (min-width: 768px) {
.sp {
	display: none
}
}

header {
	padding: 10px;
	background-color: #000;
}
article {
}	
.text {
	text-align: justify;
	padding-top: 1em;
	padding-right: 2em;
	padding-bottom: 1em;
	padding-left: 2em;
}
.text02 {  /* .textのコピー 左右のみ余白 */
	text-align: justify;
	padding-right: 1.5em;
	padding-left: 1.5em;
}

.bg-black {
	background-color: #000;
	color: #ffffff;
}

.header, .footer, .box {
	width: 100%;
	max-width: 1080px; /* コンテンツ最大幅1080px */
	margin: 0 auto;
	display: block; /* HTML5の要素をブロック化 */
}
.header-logo {
	float: left;
}
.header-logo img {
	width: 400px; 
	height: 100px;
}
@media screen and (max-width: 767px) {
.header-logo img {
	width: 300px; 
	height: 75px;
}
}
@media screen and (max-width: 480px) {
.header-logo img {
	width: 260px; 
	height: 65px;
}
}
@media screen and (max-width: 375px) {
.header-logo img {
	width: 180px;
	height: 45px;
	margin-top: 10px;
	margin-bottom: 10px;
}
}
@media screen and (max-width: 280px) { /*最小サイズ一応*/
.header-logo img {
	width: 120px;
	height: 30px;
	margin-top: 17px;
	margin-bottom: 18px;
}
}

footer {
	background-color: #000;
	color: #FFF;
	text-align: center;
}
.footer-logo {
	text-align: center;
	padding-right: 180px;
	padding-left: 180px;
}

.footernavi-center {
	text-align: center;
	margin-bottom: 0em;
}
@media screen and (max-width: 319px) {
/*フッターナビの文字があふれる件微調整*/
.footernavi-center {
  font-size: clamp(0.45rem, 2.111vw, 1.6rem); /* フォントサイズ指定：clamp (最小値, 基準値, 最大値) の順*/
}
}
.footernavi {
	display: inline-block;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000;
	padding-right: 0.5em;
	padding-left: 0.75em;
}
.footernavi-none {
	display: inline-block;
	padding-right: 0.5em;
	padding-left: 0.75em;
}

@media screen and (max-width: 767px) {
.footer-logo {
	text-align: center;
	padding-right: 65px;
	padding-left: 65px;
}
}
@media screen and (max-width: 480px) {
.footer-logo {
	text-align: center;
	padding-right: 45px;
	padding-left: 45px;
}
}
.footer-copyright {
	color: #aaaaaa;
	margin-top: 0em;
	margin-bottom: 3.5em;
	text-align: center;
	font-size: clamp(0.45rem, 1.765vw, 1.7rem); /* フォントサイズ指定：clamp (最小値, 基準値, 最大値) の順*/
}

.sns-center {
     text-align:  center; 
}
.sns {
    display:  inline-block;
}
.sns img {
	height: 60px;
	width: 60px;
	margin-right: 0.5em;
	margin-left: 0.5em;
}

.footbt-1 {
	float: left;
	width: 28%;
}
.footbt-2 {
	float: left;
	width: 44%;
}
.half {
	float: left;
	width: 50%;
}
.border-left-white {
	width: 100%;
	box-sizing: border-box;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #fff;
}

@media screen and (max-width: 767px) {
.sns img {
	height: 44px;
	width: 44px;
}
}
@media screen and (max-width: 480px) {
.sns img {
	height: 30px;
	width: 30px;
}
}
/*余白*/
.pad-top05em {
	margin-top: 0.5em;
}
.pad-top1em {
	margin-top: 1em;
}
.pad-top2em {
	margin-top: 2em;
}
.pad-top--1em {
	margin-top: -1em;
}
.pad-top--05em {
	margin-top: -0.5em;
}
.pad-bottom05em {
	margin-bottom: 0.5em;
}
.pad-bottom1em {
	margin-bottom: 1em;
}
.pad-bottom2em {
	margin-bottom: 2em;
}
.pad-left1em {
	margin-left: 1em;
}
.pad-right1em {
	margin-right: 1em;
}
.pad-left05em-right05em {
	margin-left: 0.5em;
	margin-right: 0.5em;
}
/* 改行 テキスト2行目以降を字下げ */
.indent1 {
  text-indent: -1em;
  padding-left: 1em;
}

/*テーブル関連 表組み*/
.hyo table {
	border-collapse: collapse;	/* 表組み */
}
.hyo th, .hyo td {
	font-weight: normal;
	border: 1px solid #222222;  /* 枠線指定 */
	padding: 12px;      /* 余白指定 */
}
table.hyo td table td {
	border: none !important ;  /* テーブルの中のテーブルは無しで */
	padding: 0 !important ;      /* 余白指定 */
}

.td6em{
	width: 6.1em;
	font-weight: 600;
}

/*写真キャプション 黒半透明に白文字*/
figure {
	position: relative;
	display: inline-block;
	width: 100%; /* 一応指定 */
}
figure img {
		max-width: 100%;
		vertical-align: top;
}
figure figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	width: 100%;
	box-sizing: border-box; /* paddingとborderを要素のwidthとheightに含む */
	background-color: rgba(0,0,0,.5);
	color: #fff;
  font-size: clamp(0.55rem, 4.475vw, 3.5rem); /* フォントサイズ指定：clamp (最小値, 基準値, 最大値) の順*/
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}
.cap-left {
	padding-top: 0.3em;
	padding-right: 1em;
	padding-bottom: 0.3em;
	padding-left: 1em;
	text-align: left;
}
.cap-right {
	padding-top: 0.3em;
	padding-right: 1em;
	padding-bottom: 0.3em;
	padding-left: 1em;
	text-align: right;
}
.cap-center {
	padding-top: 0.3em;
	padding-right: 1em;
	padding-bottom: 0.3em;
	padding-left: 1em;
	text-align: center;
}
/*NEWS 新着情報*/
.news {
	padding-top: 1em;
	padding-bottom: 1em;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #ffffff;
	border-bottom-color: #ffffff;
	margin-bottom: 1em;
}
.news a:link {
	color: #ffffff;
}
.news a:visited {
	color: #ffffff;
}
.news a:hover {
	color: #cccccc;
}
.news a:active {
	color: #ffffff;
}
.flex-right {
  display: flex;
  justify-content: flex-end; /*要素を右寄せ*/
}
/*ページトップボタン*/
.pagetop { /*下に固定・追従タイプ*/
	position: fixed; 
	bottom: 5%;
	right: 5%;
	width: 72px;
	height: 72px;
	color: #FFF;
	background-image: url(img/pagetop.png);
	background-repeat: no-repeat;
	background-position: center center;
    background-size: cover;
}
@media screen and (max-width: 767px) {
.pagetop {
	width: 36px;
	height: 36px;
	bottom: 15%;
}
}
.pagetop2 { /*シンプルにfooter最下部に配置型タイプ*/
	width: 72px;
	height: 72px;
	color: #FFF;
	background-image: url(img/pagetop.png);
	background-repeat: no-repeat;
	background-position: center center;
    background-size: cover;
}
@media screen and (max-width: 767px) {
.pagetop2 {
	width: 36px;
	height: 36px;
	bottom: 15%;
}
}
.info-title {
	background-color: #888888;
	color: #ffffff;
	text-align: center;
	padding-top: 0.3em;
	padding-right: 0.1em;
	padding-bottom: 0.3em;
	padding-left: 0.1em;
	font-family: "Yuji Syuku", serif; /* google web フォント Yuji Syuku 無料 */
	font-weight: 400;
	font-style: normal;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
  font-size: clamp(0.55rem, 4.575vw, 3.6rem); /* フォントサイズ指定：clamp (最小値, 基準値, 最大値) の順*/
}
.info-title2 {
	text-align: center;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.season-title {
	background-color: #000000;
	color: #ffffff;
	text-align: center;
	padding-top: 0.3em;
	padding-right: 0.1em;
	padding-bottom: 0.3em;
	padding-left: 0.1em;
	font-family: "Yuji Syuku", serif; /* google web フォント Yuji Syuku 無料 */
	font-weight: 400;
	font-style: normal;
	margin-bottom: 0.5em;
  font-size: clamp(0.55rem, 4.575vw, 3.6rem); /* フォントサイズ指定：clamp (最小値, 基準値, 最大値) の順*/
}

/* ボックス横並び2列 */
.box50-container {
  display: flex; /* flexbox */
  flex-wrap: wrap; /* 折返し指定 */
}
.box50 {
  width: calc(50%); 
  margin: 0px;
}
.box50-in {
  padding: 0.5em; /* 余白のみ設定 */
}
/* ページ内 スムーススクロール（ページトップ時） */
main {
  overflow: scroll;
  scroll-behavior: smooth; /* 古いsafariは非対応 */
}

/*ヘッダーとフッターを固定;*/
header{/* ここに指定 */
  position: sticky;
  position: -webkit-sticky; /* Safari */
  top:0;
  margin-top: 0;
  z-index: 999; /* 最前面で（スマホナビ含む） */
  }
footer {/* ここに指定 */
  position: sticky;
  position: -webkit-sticky; /* Safari */
  bottom:0
}
main {
  /* display: flex; ここを指定すると2分割される*/
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
-webkit-overflow-scrolling: touch; /* スマホでタップスクロールしたらもっさり途中で止まってしまう件 */
overflow-scrolling: touch; /* スマホでタップスクロールしたらもっさり途中で止まってしまう件 */
}
html {
overflow: visible; /* スマホでタップスクロールしたらもっさり途中で止まってしまう件? */
}

/*ヘッダーとフッターを固定した時、ページ内リンクがずれる件;*/
.height_fix {
  content:'';
  display: block;
  padding-top: 20vh; 
  margin-top: -20vh;
}
.height_fix2 {
  content:'';
  display: block;
  padding-top: 25vh; 
  margin-top: -25vh;
}

/* =======================================
	TOPページ フェードアウト イメージ
======================================= */
.slide{
  position:relative;
}
.slide img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  opacity:0;
}
/* レスポンシブ対応処置 */
.slide:before{
  content:"";
  display:block;
  padding-top:125%; /* 画像の高さを横幅に対する比率で設定 */
}

/* =======================================
	ページトップへ↑
======================================= */
.footer-toppage {/* ここに指定 */
  position: sticky;
  position: -webkit-sticky; /* Safari */
  bottom:0;
  display:none;
}
.footer-toppage-in {
  padding-bottom: 2.5%; 
  padding-right: 2.5%; 
}
.footer-toppage {/* ここに指定 */
  display:block;
}

@media screen and (max-width: 767px) {
.footer-toppage-in {
  padding-bottom: 12.5%; 
}
}