@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

* {box-sizing: border-box;}

html {
  height: 100%;
  scroll-snap-type:y mandatory;
  scroll-behavior: smooth;
}


body{
  height: 100%;
	color:#DCDCDC;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	font-weight: 400;
	font-style: normal;
-webkit-text-size-adjust: none;
background:#302d2d;
  margin: 0;
}



/* リンク設定
------------------------------------------------------------*/
a{color:#302d2d;text-decoration:none;}
a:hover{color:#DCDCDC;}
a:active, a:focus{outline:0;}



/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0 auto;
padding:0;
width:88%;
position:relative;
}


/*************
/* ヘッダー
*************/
#header{
  display: flex;
  align-items: center;
padding:20px 0 20px 20px;
overflow:hidden;
}
#header h1{display:none;}
#header h2 {
  margin: 0;
  font-size: 3vw;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/*************
/* ロゴ
*************/
#header .logo{
padding:20px 0 0;
}

/*************
/* 大ブロック
*************/
.onepage {
  display: flex;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  scroll-snap-stop: always;
}

/*************
/* メイン画像
*************/
.mainvisual {
  flex: 1;
  height: 100vh;
  position: relative; /* クレジット配置の基準点 */
  overflow: hidden;    /* はみ出し防止 */
}

.mainvisual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

	/* 撮影者クレジットのスタイル */
	.photo-credit {
	  position: absolute;
	  left: 15px;      /* 左端からの距離 */
	  bottom: 15px;    /* 下端からの距離 */
	  margin: 0;
	  padding: 0;
	  font-size: 11px; /* 小さめでさりげなく */
	  color: #ffffff;
	  letter-spacing: 0.05em;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

	  /* 視認性確保のための工夫 */
	  opacity: 0.8;
	  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 
				   0px 0px 5px rgba(0, 0, 0, 0.5);
	  pointer-events: none; /* クリックを邪魔しない */
	  z-index: 10;
	}

	/* スマホ対応（縦並びになった時） */
	@media screen and (max-width: 767px) {
	  .photo-credit {
		left: 10px;
		bottom: 10px;
		font-size: 10px; /* スマホではさらに少し小さく */
	  }
	}


/*************
/* コンテンツ
*************/
.contents {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;   /* ← これ追加 */
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;       /* thin / auto / none */
  scrollbar-color: #32adc9 #302d2d; /* つまみ色 背景色 */
}
/* スクロールバー全体 */
.contents::-webkit-scrollbar {
  width: 8px;       /* 横幅 */
}

/* スクロールバーのつまみ */
.contents::-webkit-scrollbar-thumb {
  background-color: #32adc9;
  border-radius: 5px;
}

/* スクロールバーの背景 */
.contents::-webkit-scrollbar-track {
  background-color: #302d2d;
  border-radius: 5px;
}


h3 {
  margin: 0;
  font-size: 3em;
  line-height: inherit;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-weight: 700;
  font-style: normal;
}

article.first	{
				
}
	.catch		{
				font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size:2em;
				display:block;
				margin-bottom:50px;
				}
	.catch2		{
				padding:10px 0 10px 0;
				font-size:1.3em;
				line-height:2em;
				border-top:dashed 1px #DCDCDC;
				}
	.menu		{}
	.menu ul	{
				display: flex;
				flex-wrap: wrap;        /* ← これが回り込みスイッチ */
				padding: 20px 0;
  				margin: 0;
 				justify-content: space-between; /* 均等配置 */
				list-style: none;
				gap: 20px;
				width:100%;
				}
	.menu li	{
  				flex: 0 0 auto; /* 中身サイズに */
				font-size: 1.5em;
				font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
				font-weight: 400;
				font-style: normal;
				background-color:#DCDCDC;
				}
	.menu li a {
				  display: block;
				  padding: 5px 30px; /* 横余白で調整 */
				  text-align: center;
				}
	.menu li:hover	{background-color:#32adc9;}

	ul.concertmenu	{width:100%; padding: 5px 0; text-align: center;}
	li.concertmenu	{background-color:#32adc9; display: block; flex: 0 0 100%; text-align: center;}
	li.concertmenu a {padding: 5px 30px; /* 横余白で調整 */}
	li.concertmenu:hover	{background-color:#0B728A;}

article.profile {
				font-size:1.1em;
				line-height:1.5em;
				}
article.member {
				font-size:0.9em;
				}
	.tag		{font-size:0.8em; background-color:#DCDCDC; color:#302d2d; padding:2px 5px; margin-left:10px;}
	h4 			{
				display:inline;
				font-size:1.5em;
				font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
				font-weight: 700;
				font-style: normal;
				}
	.quate 		{
				font-size:0.9em;
				background-color:#606060;
				padding:3px;
				}
	.quatetitle	{
				padding-right:10px;
				font-size:1.1em;
				font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
				font-weight: 700;
				font-style:italic;
				}
	.member p	{
				margin-top:10px;
				}
	.member hr	{
				height:0px;
				border:solid 1px #606060;
				margin:10px 0;
				}
article.discography {
				
				}
	/* ディスコグラフィー用グリッド */
	.discography ul {
	  display: grid;
	  grid-template-columns: repeat(7, 1fr); /* 4列固定 */
	  gap: 20px;
	  padding: 0;
	  list-style: none;
	}
	.discography li {
	  text-align: center;
	}
	.discography img {
	  width: 100%;
	  border-radius: 8px;
	  transition: transform 0.3s, box-shadow 0.3s;
	}
	.discography img:hover {
	  transform: scale(1.05);
	  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
	}
	.discography .title {
	  margin-top: 5px;
	  font-weight: bold;
	  color: #DCDCDC;
	}
	.discography .year {
	  font-size: 0.9em;
	  color: #aaa;
	}
	/* レスポンシブ対応 */
	@media screen and (max-width: 991px) {
	  .discography ul {
		grid-template-columns: repeat(7, 1fr); /* 1列 */
	  }
	}

	@media screen and (max-width: 767px) {
	  .discography ul {
		grid-template-columns: repeat(4, 1fr); /* 4列 */
	  }
	}

	@media screen and (max-width: 575px) {
	  .discography ul {
		grid-template-columns: repeat(2, 1fr); /* 2列 */
	  }
	}

article.awards {
				}
	.award-list {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	}

	.award-list li {
	  display: flex;
	  gap: 10px;
	  margin-bottom: 6px;
	}

	.award-year {
	  font-weight: bold;
	  width: 80px;
	  flex-shrink: 0;
	}

	.award-text {
	  flex: 1;
	}



article.concert {
				
				}
	/* ===== TOUR 2列 ===== */

	.tour {
	  margin: 50px 0;
	}

	.tour h3 {
	  margin-bottom: 20px;
	}

	/* 2列グリッド */
	.tour-grid {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  gap: 30px 30px;
	}

	/* 各公演 */
	.tour-item h3 {
	  font-size: 20px;
	  color: #32adc9;
	  margin-bottom: 15px;
	}

	.note {
	  font-size: 13px;
	  color: #B3B3B3;
	  margin-top: 8px;
	  line-height: 1.6;
	}

	.contact {
	  margin-top: 18px;
	}

	.contact a {
	  display: inline-block;
	  margin-top: 8px;
	  padding: 6px 16px;
	  background-color: #32adc9;
	  color: #302d2d;
	  border-radius: 6px;
	  text-decoration: none;
	  font-size: 14px;
	  transition: 0.3s;
	}

	.contact a:hover {
	  background-color: #0B728A;
	  color: #DCDCDC;
	}

	.organizer {
	  margin-top: 12px;
	  font-size: 13px;
	  color: #B3B3B3;
	}

	/* 総合問い合わせ用の調整 */
	.full-width {
	  grid-column: 1 / -1; /* 横いっぱいに広げる */
	  text-align: center;
	  margin-top: 30px;
	  padding-top: 30px;
	  border-top: dashed 1px #606060;
	}
	.full-width h3 {
	  font-size: 20px;
	  color: #32adc9;
	  margin-bottom: 15px;
	}
	.full-width .contact p {
	  font-size: 16px;
	  color: #DCDCDC;
	}

	/* スマホ */
	@media screen and (max-width: 768px) {
	  .tour-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	  }
	}

	/* 来日公演チラシ用：縦並びフル幅レイアウト（完全版） */
	.tour-item {
	  display: flex;
	  flex-direction: column;
	  background: rgba(255, 255, 255, 0.05);
	  padding: 20px;
	  border-radius: 10px;
	  height: 100%; /* 高さを揃える */
	}

	.tour-flyer-box {
	  width: 100%;
	  margin-bottom: 20px;
	}

	.tour-flyer-box a {
	  display: block;
	  text-decoration: none;
	}

	.tour-flyer-box img {
	  width: 100%;
	  height: auto;
	  border: 1px solid #444;
	  border-radius: 5px;
	  transition: transform 0.3s ease, border-color 0.3s;
	}

	.zoom-btn {
	  display: block;
	  margin-top: 10px;
	  text-align: center;
	  font-size: 13px;
	  color: #32adc9;
	  border: 1px solid #32adc9;
	  padding: 5px;
	  border-radius: 4px;
	  transition: 0.3s;
	}

	.tour-flyer-box a:hover img {
	  border-color: #32adc9;
	  transform: scale(1.02);
	}

	.tour-flyer-box a:hover .zoom-btn {
	  background: #32adc9;
	  color: #302d2d;
	}

	.tour-info-box {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	}

	/* もともとのCSSクラスとの整合性を維持 */
	.tour-info-box h3 {
	  font-size: 24px !important;
	  color: #32adc9 !important;
	  margin-bottom: 12px !important;
	}

	.tour-info-box p {
	  margin-bottom: 5px;
	  line-height: 1.6;
	}

	.tour-info-box .note {
	  font-size: 12px;
	  color: #B3B3B3;
	  margin-top: 10px;
	}

	.tour-info-box .organizer {
	  margin-top: auto; /* 主催を一番下に配置 */
	  padding-top: 15px;
	  font-size: 12px;
	  color: #B3B3B3;
	}

article.videos {
				}
		.caption h5 {
			display: inline;
			font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
		  font-weight: 700;
		  font-style: normal;
		}
		/* 動画カード風グリッド（丸角＋余白統一） */
		.video-grid {
		  display: grid;
		  grid-template-columns: repeat(4, 1fr); /* 横4列固定 */
		  gap: 20px;
		  margin-top: 20px;
		}

		.video-card {
		  border-radius: 8px; /* 丸角 */
		  overflow: hidden;
		  display: flex;
		  flex-direction: column;
		  background: #DCDCDC;
		  padding: 0; /* カード内の余白はiframeとcaptionで調整 */
		}

		.video-wrapper {
		  position: relative;
		  width: 100%;
		  padding-top: 56.25%; /* 16:9 */
		}

		.video-wrapper iframe {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  border: none;
		}

		.video-card .caption {
		  padding: 12px;
		  font-size: 14px;
		  line-height: 1.4;
		  text-align: center;
		  color: #333;
		}

		/* レスポンシブ調整 */
		@media (max-width: 900px) {
		  .video-grid {
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		  }
		}

		@media (max-width: 600px) {
		  .video-grid {
			grid-template-columns: 1fr;
		  }
		}



/* ===================================
   スマホ縦対応（.mainvisual + .contents）
   max-width: 767px
=================================== */
@media screen and (max-width: 767px) {

  /* メインビジュアルとコンテンツを縦並びに */
  .onepage {
    flex-direction: column;  /* 横並び→縦並び */
    height: auto;            /* 高さは自動 */
  }

  /* mainvisualは画面幅いっぱい、高さは50〜60vhに調整 */
  .mainvisual {
    width: 100%;
    height: 50vh;
    min-height: 250px;
  }
  .mainvisual img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
  }
	img.profilejpg {
    width: 100%;          /* 横幅は80%に調整 */
    height: auto;        /* 自動で高さ調整（縦長になるよう比率維持） */
    height: 80vh;
    max-height: 800px;   /* 好きな最大高さを指定できる */
    object-fit: cover;   /* 縦長に見せつつ画像切れを防ぐ */
	}

  /* contentsは幅100%、高さ自動 */
  .contents {
    width: 100%;
    height: auto;
    padding: 15px;
    overflow: visible;       /* スクロールバー非表示 */
  }

  /* スクロールバーカスタムはスマホでは非表示 */
  .contents::-webkit-scrollbar {
    display: none;
  }

  /* flexやグリッドの列も縦並びに変更 */
  .flex-col2 .flex-child,
  .flex-col3 .flex-child,
  .flex-col4 .flex-child {
    width: 100%;
    margin-bottom: 15px;
  }

  /* ディスコグラフィーグリッドも2列または1列 */
  .discography ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* 動画グリッドも1列 */
  .video-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* 各種画像サイズ調整 */
  img.flex2, img.flex3, img.flex4, img.flex5, img.flex60, img.flex80 {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
  }

  /* フッター・ヘッダー調整 */
  #header, #footer {
    padding: 15px 10px;
    text-align: center;
  }
  #header h2 {
    font-size: 6vw;
  }

}


/* ===================================
   タブレット対応（768px～991px）
   横並び2カラム維持
=================================== */
@media screen and (min-width: 768px) and (max-width: 991px) {

  /* 横並び2カラムは維持 */
  .onepage {
    flex-direction: row;
    height: 100vh;  /* 画面高さに合わせる */
  }

  /* mainvisualは幅50%前後、高さ100% */
  .mainvisual {
    width: 50%;
    height: 100%;
  }
  .mainvisual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* contentsは幅50%、高さ100%、縦スクロール可能 */
  .contents {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    padding: 15px;
    scrollbar-width: thin;
    scrollbar-color: #32adc9 #302d2d;
  }

  /* スクロールバー全体（Webkit対応） */
  .contents::-webkit-scrollbar {
    width: 6px;
  }
  .contents::-webkit-scrollbar-thumb {
    background-color: #32adc9;
    border-radius: 3px;
  }
  .contents::-webkit-scrollbar-track {
    background-color: #302d2d;
    border-radius: 3px;
  }

  /* flex/grid列調整（必要に応じて） */
  .flex-col2 .flex-child {
    width: calc( (100% - 10px) / 2 );
  }
  .flex-col3 .flex-child,
  .flex-col4 .flex-child {
    width: calc( (100% - 20px) / 3 );
  }

  /* ディスコグラフィーグリッドは3列 */
  .discography ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  /* 動画グリッドは2列 */
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  /* 画像サイズも微調整 */
  img.flex2, img.flex3, img.flex4, img.flex5, img.flex60, img.flex80 {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
  }

  /* ヘッダー文字サイズ微調整 */
  #header h2 {
    font-size: 4.5vw;
  }

}


























img.flex2 {
width: 48%;
	height: auto;
}

img.flex3 {
width: 32%;
	height: auto;
}

img.flex4 {
	width: 15%;
}

img.flex5 {
width: 100px;
	height: auto;
	display:block;
	float:left;
	margin:0 10px 10px 10px;
	border-radius: 8px;
}

img.flex60 {
width: 60%;
	height: auto;
}

img.flex80 {
width: 80%;
	height: auto;
}



/* SNSボタン・facebookの位置調整
------------------------------------------------------------*/

.btn-flat-border {
	font-size: 18px;
  display: inline-block;
  margin: 5px;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #50852f;
  border: solid 2px #50852f;
  border-radius: 2px;
  transition: .1s;
}

.btn-flat-border:hover {
	font-size: 18px;
  background: #50852f;
  color: #fff;
}

.fb_iframe_widget > span {
  vertical-align: baseline !important;
}


/* Google Map
------------------------------------------------------------*/

.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
}

/* Google Map iframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Youtube 2個並べ
------------------------------------------------------------*/

.wrap_youtube2{
  margin-bottom: 1.5rem;
}
.youtube2 {
  position: relative;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.wrap_youtube2 img{
  width: 100%;
}

/* ココから下がPC表示（600px以上）のレイアウト */
@media screen and (min-width: 600px) {
  .float-right{
    float: right;
    width: 49.5%;
  }
  .float-left{
    float:left;
    width: 49.5%;
  }
  .wrap_youtube2:after{
    display: block;
    clear: both;
    content: "";
  }
}


/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.flex-child h4 { margin: 0 0 20px; }

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 10px; }

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 30px) / 4 ); }
	
/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after { content: ""; }

.flex-col4::before { order: 1; }

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列 */
@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 767px) {
	.flex-col3 .flex-child,	
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 575px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: 100%; }
}


/**************************
/* グリッド
**************************/
.gridWrapper{
padding-bottom:20px;
overflow: hidden;
}

* html .gridWrapper{height:1%;}

.grid{
float:left;
border-radius:5px;
background:#fff;
}

.grid h1{
padding:10px 5px;
text-align:center;
color:#fff;
border-radius:5px 5px 0 0;
font-weight: bold;
font-size: 14px;
background:#54a9b6;
}

.grid h2{
padding:10px 5px;
text-align:center;
color:#fff;
border-radius:5px 5px 0 0;
font-weight: bold;
font-size: 14px;
background:#89659e;
}

.grid h3{
padding:10px 5px;
text-align:center;
color:#000;
border-radius:5px 5px 0 0;
font-weight: bold;
font-size: 14px;
background:#fff;
}

.grid h4{
text-align:center;
color:#000;
border-radius:5px 5px 0 0;
background:#f1ffc8;
font-size: 18px;
font-weight: bold; 
font-style: normal;
}

.grid h5{
text-align:center;
color:#000;
border-radius:5px 5px 0 0;
background:#f1ffc8;
font-size: 14px;
font-weight: normal; 
font-style: normal;
font-family: "Times New Roman" ;
}

.grid h6{
padding:2px 2px;
font-weight:bold;
font-size:14px;
}

.grid p{
padding:5px 10px;
}

.gridWrapper img{
max-width:100%;
height:auto;
}

/* フッター内のグリッド(3カラム) */
#footer .grid{
color:#000;
background:transparent;
}

#footer .grid p{padding:0;}


/*************
メイン コンテンツ
*************/
section.content{
	color:#DCDCDC;
	padding:20px;
margin:auto 0;
font-size:14px;
}

* html section.content{height:1%;}

section.content p{margin-bottom:5px;}

h1.heading {
  font-size:16px;
color:#000;
font-weight: bold;
font-family: "Times New Roman" ;
}

h2.heading{
padding-left:7px;
margin-bottom:10px;
font-size:28px;
font-weight:bold;
border-left:5px solid #8ba944;
color:#8ba944;
}

h3.heading{
padding-left:7px;
margin-bottom:10px;
font-size:16px;
border-left:5px solid #8ba944;
color:#8ba944;
}

h4.heading{
padding-left:7px;
font-size:32px;
border-left:5px solid #8ba944;
color:#8ba944;
font-weight: bold;
font-family: "Times New Roman" ;
}

h5.heading{
padding-left:7px;
margin-bottom:10px;
font-size:24px;
border-left:5px solid #8ba944;
color:#8ba944;
font-size: 16px;
font-weight: normal; 
font-style: normal;
font-family: "Times New Roman" ;
}

h6.heading {
  font-size:20px;
color:#000;
font-weight: bold;
font-family: "Times New Roman" ;
}

h7.heading {
  font-size:28px;
color:#CC0000;
font-weight: bold;
font-family: "Times New Roman" ;
}

h8.heading {
  font-size:32px;
color:#000;
font-weight: bold;
font-family: "Times New Roman" ;
}

h9.heading {
  font-size:24px;
color:#000;
font-weight: bold;
font-family: "Times New Roman" ;
}
    
section.content img{
max-width:100%;
height:auto;
}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}

img.frame,#gallery img{
border:4px solid #fff;
box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
}

#gallery .grid{padding:5px 0 0;}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}




/*************
/* フッター
*************/
#footer{
clear:both;
padding:20px 0;
overflow:hidden;
background:#e5dfdb;
border-top:1px solid #8ba944;
}

/* モニター幅940px以下 */
@media only screen and (max-width:940px){
	#header h1{padding:0 0 5px 10px;}
	#header .logo{padding-left:10px;}
	
		img.flex2 {
width: 80%;
	height: auto;
}

	img.flex3 {
width: 80%;
	height: auto;
}

	img.flex4 {
width: 80%;
	height: auto;
}
	.grid{
	float:left;
	width:48%;
	margin:10px 2% 0 0;
	}
	
	.grid img{
	float:left;
	margin-right:5px;
	}
	
	#gallery{padding-left:1px;}
	
	#gallery .grid{
	width:23%;
	margin:0 2% 0 0;
	padding:0;
	}
	
	#gallery .grid img{
	float:none;
	margin:0;
	}
	
	#sub .grid{
	width:32%;
	margin:10px 1%;
	}
	
	#sub .grid:first-child{
	margin-left:0;
	}
	
	#sub .grid:last-child{
	margin-right:0;
	}
	
	#footer .grid{
	float:none;
	width:100%;
	text-align:center;
	}
	
	#footer .grid:last-child{padding-top:20px;}
}


/* iPad 縦 */
@media only screen and (max-width:768px){
  #header{padding-bottom:0;}	

	#header h1{text-align:center;}
	
	#header .logo{
	float:none;
	text-align:center;
	padding:10px 5px 20px;
	}

	ul#topnav{
	clear:both;
	width:100%;
	}

	ul#topnav li{
	width:33%;
	margin:0;
	border-top:1px solid #8ba944;
	border-right:1px solid #8ba944;
	 box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
	}

	ul#topnav li:nth-child(4n){border-right:0;width:34%;}

	ul#topnav li.active a,ul#topnav a:hover{border-radius:0;}
	
	#sub ul.list{padding:5px 5px 11px;}
	
	#sub ul.list li{
	padding-bottom:5px;
	margin-bottom:4px;
	}
	
	.inner50{
margin:0 auto;
width:80%;
line-height:1.7;
}

}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	#footer .grid p{text-align:center;}
	
	img.flex5 {
width: 49%;
	height: auto;
}
	.grid img{
	float:none;
	margin:20px auto 10px;
	}
	
	.grid p,#sub .grid li{text-align:left;}
	
	img.frame,#gallery img{border-width:2px;}

  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}
	
	
h4.heading{
padding-left:7px;
font-size:20px;
border-left:5px solid #4482a9;
color:#4482a9;
font-weight: bold;
font-family: "Times New Roman" ;
}

}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	ul#topnav li{width:25%;}

	ul#topnav li:nth-child(2n){
	border-right:1px solid #8cbedb;
	width:25%;
	}
	

	ul#topnav li:nth-child(4n),ul#topnav li:nth-child(6n){border-right:0;}
	
	#mainBanner{margin-left:1px;}
	#mainBanner h2,#mainBanner h3{font-size:80%;}
	
	#sub .grid{
	float:none;
	width:98%;
	}
	
	ul#topnav a{
font-size:13px;
display:block;
padding:10px 2px;
color:#000;
}

ul#topnav span{
color:#fff;
font-size:8px;
}

	#sub .grid h3{padding:10px 5px;}
	
	#sub ul.list{padding:10px;}
	
	#sub ul.list li{
	padding-bottom:3px;
	margin-bottom:3px;
	}
	
	#sub ul.list li img{margin:0 5px 0 0;}
}



/* Facebook */
/* スマホ用 */
@media screen and (max-width: 767px) {
	.fb-container {
		width: 100%;
		max-width: 500px;
	}
}
 
/* PC用 */
@media screen and (min-width: 768px) {
	.fb-container {
		width: 100%;
	}
}