/*==============================================================

	for all
	
===============================================================*/

/*--------------------------------------------------------------
	General Settings
--------------------------------------------------------------*/

#wrapper {
    position: relative;
	width: 100%;
    height: 100%;
}
#wrapper:after {
	clear: both;
	content: '';
	display: block;
	height: 0;
}


/*==============================================================

	Header
	
===============================================================*/


header {
	position:relative;
	border-top: 3px solid #dab10f;
    background-color: #fff;
	z-index: 10000;
}

.header_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 90%;
	margin: 0px auto;
}

/*	 Logo
---------------------------------------------------------------*/
header .header_inner h1 {
    display: flex;
	align-items: flex-start;
	width:auto;
	margin: 0;
	padding: 0;
}
header .header_inner h1 a {
    display: inline-block;
	padding: 0;
	margin: 0;
}
header .header_inner h1 a img {
	max-width: 130px;
}

@media only screen and (max-width: 979px) {
header .header_inner h1 a {
    display: flex;
	align-items: flex-start;
	padding: 0;
	margin: 0;
}
header .header_inner h1 a img {
	max-width: 90px;
}

}

/*	 Groval Menu
---------------------------------------------------------------*/
.navDrawr {
	display: flex;
	flex-direction: column;
}

/*	 Language
---------------------------------*/
header .Langage {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0 0 20px auto;
}

header .Langage button {
	position:relative;
	display: flex;
	width: 100%;
	height: 100%;
	padding: 5px 30px 5px 20px;
	margin: 0;
	color: #fff;
	font-size: 0.85em;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #dab10f;
	cursor: pointer;
}

header .Langage button.btn_a i::before {
	position: absolute;
	top: 50%;
	right: 10px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 100%;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0d7";
}
header .Langage button.btn_b i::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0d8";
}


@media only screen and (min-width: 979px) {

header .Langage button:hover {
	text-decoration: none;

}
}

@media only screen and (max-width: 979px) {
header .Langage {
	display: flex;
	
	margin: 0px 60px 0px 0px;
	z-index: 10;
}
header .Langage button {
	position:relative;
	display: flex;
	width: 45px;
	height: 45px;
	padding: 0;
	margin: 0;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	background: none;
}

header .Langage button:after,
header .Langage button.btn_b:after {
	width: 40px;
	height: 40px;
	line-height: 40px;
}
header .Langage button:after,
header .Langage button.btn_b:after {
	display:block;
	position: absolute;
	top: 50%;
	left: 50%;
	
	padding: 0;
	margin: auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-weight: 900;
	color: #000;
	font-size: 40px;
	font-family:"Line Awesome Free","Line Awesome Brands";
	content: "\f1ab";
}

header .Langage button span,
header .Langage button i,
header .Langage button.btn_a i::before,
header .Langage button.btn_b i::before {
	display: none;
}

}

/*	 クリック時のポッポアップ
--------------------------------------*/
.dropdown {
  margin: 0 0 0 auto;
  position: relative;
}
.dropdown__btn {
  display: block;
  background: none;
  border: 0;
}
.dropdown__btn.is-open::after {
  content: "";
  width: 100%;
  height: 100%;
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
.dropdown__btn.is-open + .dropdown__body {
  display: block;
  z-index: 5;
}
.dropdown__body {
  display: none;
  width: 120px;
  background: #fff;
  box-shadow: 0 2px 6px 2px rgba(60,64,67,0.149), 0 1px 2px 0 rgba(60,64,67,0.302);
  border-radius: 4px;
  overflow: hidden;
  position: absolute;
  top: 50px;
  right: 0;
}
.dropdown__list {
  margin: 0;
  padding: 0;
}
.dropdown__item {
  display: block;
  margin: 0;
  padding: 0;
}
.dropdown__item-link {
	position:relative;
	display: block;
	padding: 10px;
	font-size: 0.95em;
	text-decoration: none;
	color: #444;
}
.dropdown__item-link:before {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 10px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 0.9em;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f105";
}
.dropdown__item-link:hover {
	background: #f3e9ea;
	text-decoration:none;
}

/*	 Menu List
---------------------------------*/
.navDrawr > ul {
	display: flex;
	margin: 0 0 0 auto;
}
.navDrawr > ul > li {
    position: relative;
	align-items: center;
	
	padding: 0;
	margin: 0;
	list-style: none;
}
.navDrawr a {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	width: 100%;
	height: 100%;
    padding: 10px 15px;
	
    color: #000;
    text-decoration: none;
}
.navDrawr > ul > li > a {
    text-align: center;
	font-size: 0.9em;
	font-weight: 400;
}
.navDrawr > ul > li > a:hover {
    background: rgba(218,177,15,0.4);
}
.navDrawr > ul > li > a small {
	margin-top:auto;
	font-size: 70%;
	font-weight: 100;
	color: #ccc;
	letter-spacing: 1px;
    text-align: center;
}
.navDrawr > ul > li > a:hover small {
	color: #fff;
}

@media only screen and (min-width: 979px) {
.navDrawr > ul > li.SPdisplay {
	display: none;
}
.navDrawr > ul > li > a {
	justify-content: center;
	min-height: 61px;/* 多言語と高さを合わせるため */
}

}

 
@media only screen and (max-width: 979px) {
	
header {
	position:relative;
	height: 80px; /* headerの高さそろえる */
	padding:0;
	z-index: 10000;
}

.header_inner {
	height: 100%;
}

body.menuOpen #wrapper{
	margin-top: 80px; /* headerの高さそろえる paddingだと下のコンテンツがずれる事があるのでmarginで指定 */
	position: fixed;/* メニュー開いたときコンテンツをスクロールさせない */
}

/*----- オープン時のレイヤー -----*/
.overlay {
	display: none;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10000;
}

body.menuOpen header{
	position: fixed;
	top:0;
	width: 100%;
}

/*	 Button
---------------------------------*/
.navDrawrBtn {
	position:relative;
	text-align: right;
}
.navDrawrBtn span {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: auto;
	display: block;
	width: 45px;
	height: 45px;
	cursor: pointer;
}
.navDrawrBtn span::before {
	position: absolute;
	top: 0px;
	right: 0;
	width: 100%;
	
	font-family:"Line Awesome Free","Line Awesome Brands";
	content: "\f0c9";
	font-size: 40px;
	font-weight: 900;
	color: #000;
	text-align: center;
	line-height: 45px;
}
body.menuOpen .navDrawrBtn span::before {
	content: "\f00d";
}

/*	 Main Link
---------------------------------------------------------------*/
.navDrawr {
	position: fixed;
	width: 100%;
	max-width: 100%;
	right: -100%;
	top: 80px; /* headerの高さそろえる */
	bottom: 0;
	/*bottom: 0;*/
	/*
	width: 100vw; //ie,firefoxで効かない
	right: -100vw;
	*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: rgba(0,0,0,0.5);
}
.navDrawr > ul {
    display: flex;
	flex-direction:column;
    justify-content: flex-start;
		
	width: 100%;
	max-width: 100%;
	margin: 0;
	text-align:left;
}
.navDrawr > ul > li {
	align-items: flex-start;
	
	float: none;
	width: 100%;
}
.navDrawr > ul > li > a {
	position:relative;
	align-items: flex-start;


	height: auto;
	padding: 15px 20px;
	color: #FFF;
	text-align:left;
	font-size: 1em;
	border-right: none;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	background:;
}
.navDrawr > ul > li > a:after {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 1em;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f105";
}
.navDrawr > ul > li > a small {
	display: none;
}

}

/*==============================================================

	Main Visual
	
===============================================================*/

#mainvisual {
	position:relative;
	width: 100%;
	height: 50%;
	min-height: 400px;
	max-height: 400px;
	overflow:hidden;
}
#mvinner {
	position:relative;
	width: 100%;
	height: 100%;
}

@media print, screen and (min-width: 850px){
#mainvisual {
	min-height: 480px;
	max-height: 480px;
}
#mvinner {
	min-height: 400px;
	max-height: 400px;
}

}

.mvBox {
	position:relative;
	width: 100%;
	height: 100%;
	overflow:hidden;
}
.swiper-container {
	position:relative;
	width: 100%;
	height: 100%;
	/*
	height: 50%;
	min-height: 400px;
	*/
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

@media print, screen and (min-width: 980px){

.swiper-container {
	left: -15%;/*左寄せ　(100％-小さくした％)÷2*/
	width: 70%;
}

}

/*	 Background
---------------------------------------------------------------*/

.MV .swiper-slide span {
	display:block;
	width: 100%;
	height: 100%;
	background-repeat:no-repeat;
	background-size: cover;
}

/*	 Animation Image
---------------------------------------------------------------*/

/*----- BG -----*/
.whiteBG {
	position:absolute;
	top: 0px;
	right: 0px;
	width: auto;
	height: 100%;
	z-index: 500;
}

@media only screen and (min-width: 1400px) {
.whiteBG {
	right: 10%;
}
}

/*----- Tittle -----*/
.tittle {
	position:absolute;
	top: 45%;
	left: 10%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	
	width: 100%;
	max-width: 400px;
	z-index: 1000;
}

.tittle img {
	width: 100%;
	filter: blur(100px);
	animation: tittle-anim 1s linear forwards;
}

@keyframes tittle-anim {
	100% {	filter: blur(0); }
}


/*----- Gosamaru -----*/
.gosamaru {
	position:absolute;
	bottom: -100px;
	right: 0px;
	width: 100%;
	max-width: 650px;
	z-index: 1000;
	filter: drop-shadow( 0px -5px 10px rgba(255,255,255,0.5));
}

.gosamaru img {
	display: inline-block;
	position:absolute;
	bottom: -80px;
	left: 0px;
	width: 100%;
	filter: blur(200px);
	animation: gosamaru-anim 1s linear forwards;
}

@keyframes gosamaru-anim {
  0% {
	  transform: translateY(400px);
  }

  100% {
	  transform: translateY(-100px);
	  filter: blur(0);
  }
}

/*----- cloud1 -----*/
.cloud1 {
	display: inline-block;
	position:absolute;
	bottom: -80px;
	left: 0px;
	width: 100%;
	max-width: 400px;
	animation: cloud1-anim 2s forwards;
	z-index: 1200;
}

@keyframes cloud1-anim {
  0% {
  transform: translateX(-400px);
  }

  100% {
  transform: translateX(0px);
  }
}

/*----- cloud2 -----*/
.cloud2 {
	display: inline-block;
	position:absolute;
	top: -40px;
	right: 0px;
	width: 100%;
	max-width: 400px;
	animation: cloud2-anim 2s forwards;
	z-index: 500;
}

@keyframes cloud2-anim {
  0% {
  transform: translateX(400px);
  }

  100% {
  transform: translateX(0px);
  }
}

/*----- cloud3 -----*/
.cloud3 {
	display: inline-block;
	position:absolute;
	bottom: -50px;
	right: 0px;
	width: 100%;
	max-width: 200px;
	animation: cloud3-anim 1s forwards;
	z-index: 1100;
}

@keyframes cloud3-anim {
  0% {
  transform: translateX(200px);
  }

  100% {
  transform: translateX(0px);
  }
}

/*	 Images
---------------------------------------------------------------*/
.MV .swiper-slide span {
	display:block;
	width: 100%;
	height: 100%;
	background-repeat:no-repeat;
	background-size: 100% auto;
}

.swiper-slide span.slide-img01 span {
	background-position: 100% 50%;
}
.swiper-slide span.slide-img02 span {
	background-position: 100% 100%;
}
.swiper-slide span.slide-img03 span {
	background-position: 100% 100%;
}
.swiper-slide span.slide-img04 span {
	background-position: 100% 50%;
}
.swiper-slide span.slide-img05 span {
	background-position: 100% 50%;
}

@media only screen and (max-width: 979px) {
/*----- BG -----*/
.whiteBG {
	display: none;
}

}
@media only screen and (max-width: 850px) {
	
/*----- Tittle -----*/
.tittle {
	top: 45%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/*----- Gosamaru -----*/
.gosamaru {
	max-width: 450px;
}

@keyframes gosamaru-anim {
  0% {
	  transform: translateY(400px);
  }

  100% {
	  transform: translateY(-100px);
	  filter: blur(0);
  }
}

	
/*----- cloud1 -----*/
.cloud1,
.cloud2,
.cloud3 {
	display: none;
}

}

@media only screen and (max-width: 767px) {
.swiper-container {
	min-height: auto;
	height: 100%;
}

	
#mainvisual {
	position:relative;
	width: 100%;
	height: 50%;
	min-height: 50%;
	max-height: 50%;
}

	
/*----- Tittle -----*/
.tittle {
	max-width: 300px;
}


/*	 Images
---------------------------------------------------------------*/
.MV .swiper-slide span {
	background-size: cover;
}


	
/*----- Gosamaru -----*/
.gosamaru {
	max-width: 350px;
}

}
@media only screen and (max-width: 479px) {
    .swiper-container {
		min-height: auto;
        height: 100%;
    }

	
#mainvisual {
	position:relative;
	width: 100%;
	height: 100%;
	min-height: 40%;
	max-height: 40%;
}

/*----- Tittle -----*/
.tittle {
	display: none;
}


/*	 Images
---------------------------------------------------------------*/
.MV .swiper-slide span {
	background-size: cover;
}

.gosamaru {
	bottom: -50px;
	max-width: 200px;
}
}



/*	 Zoom Effect Animation
---------------------------------------------------------------*/
/*
*/
@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.2);
      transform: scale(1.1);
  }
}

@keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.2);
      transform: scale(1.1);
  }
}

.MV .swiper-slide-active [class*="slide-img"],
.MV .swiper-slide-duplicate-active [class*="slide-img"],
.MV .swiper-slide-prev [class*="slide-img"] {
    -webkit-animation: zoomUp 10s linear 0s;
    animation: zoomUp 10s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*　IEは動きが悪いのでアニメーションさせない　*/
/* IE10〜11 */
/*
*/
_:-ms-input-placeholder, :root .MV .swiper-slide-active [class*="slide-img"],
_:-ms-input-placeholder, :root .MV .swiper-slide-duplicate-active [class*="slide-img"],
_:-ms-input-placeholder, :root .MV .swiper-slide-prev [class*="slide-img"] {
	-webkit-animation: none;
	animation: none;
	-webkit-animation-fill-mode: none;
	animation-fill-mode: none;
}
/* Edge12～14 */
/*
*/
@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
	.MV .swiper-slide-active [class*="slide-img"],
	.MV .swiper-slide-duplicate-active [class*="slide-img"],
	.MV .swiper-slide-prev [class*="slide-img"] {
		-webkit-animation: none;
		animation: none;
		-webkit-animation-fill-mode: none;
		animation-fill-mode: none;
	}
}


/*	 SP Mainvisual
---------------------------------------------------------------*/
.MVText {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto;
	max-width: 90%;
	margin: 0 auto 50px;
	
	text-align:center;
	font-size: 1.7em;
	font-family: "Sawarabi Mincho","Yu Mincho","游明朝";
	font-weight: 500;
	z-index: 1000;
}

#SPmainvisual {
	position:relative;
	display: flex;
	flex-direction: column;
	
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}


@media print, screen and (max-width: 850px){
#mainvisual {
	display: none;
}

#SPmainvisual .MVText {
	position:absolute;
	bottom: 10px;
	left: 10px;

	width: auto;
	max-width: 100%;
	margin: 0 auto 0px;
	
	text-align:left;
	font-size: 1.2em;
	text-shadow: 
	rgba(255,255,255,1) 1px 1px 0, rgba(255,255,255,1) -1px -1px 0,/*右下、左上*/
	rgba(255,255,255,1) -1px 1px 0, rgba(255,255,255,1) 1px -1px 0,/*右上、左下*/
	rgba(255,255,255,1) 0px 1px 0, rgba(255,255,255,1)  0-1px 0,/*右、左*/
	rgba(255,255,255,1) -1px 0 0, rgba(255,255,255,1) 1px 0 0;/*上、下*/
}

}

@media only screen and (min-width: 850px) {
#SPmainvisual .img {
	display: none;
}

}

@media print, screen and (max-width: 479px){
#mainvisual {
	display: none;
}

#SPmainvisual .MVText {
	font-size: 1.1em;
}

}


/*==============================================================

	Contents
	
===============================================================*/
#contents {
	position: relative;
	width: 100%;
	max-width: 100%;
	/*margin: 50px auto 0px;*/
	margin: 0px auto;
	/*padding-bottom: 60px;*/
	overflow: hidden;
	zoom: 1;
}

.container {
	position: relative;
	width:100%;
	max-width: 1000px;
	padding: 0px;
	margin: 60px auto 0;
}

#contents .BG {
	padding: 50px 0px;
	background-color: #efefef;
}

@media only screen and (max-width: 1010px) {
#contents {
	margin: 0px auto;
}

.container {
	max-width: 90%;
}

}

@media only screen and (max-width: 767px) {
.container {
	margin: 50px auto 0;
}

}


/*--------------------------------------------------------------
	all common contents
---------------------------------------------------------------*/
#contents section {
	padding: 0px;
}

.Mt30 {
	margin-top: 30px;
}
.Mt60 {
	margin-top: 60px;
}
.Mt80 {
	margin-top: 80px;
}
.Mt120 {
	margin-top: 120px;
}
.Mt150 {
	margin-top: 150px;
}

.Mb30 {
	margin-bottom: 30px;
}
.Mb60 {
	margin-bottom: 60px;
}
.Mb80 {
	margin-bottom: 80px;
}
.Mb120 {
	margin-bottom: 120px;
}
.Mb150 {
	margin-bottom: 150px;
}


#contents h1 + p:last-of-type,
#contents > section > p:first-of-type,
#contents > p:first-of-type,
.container > p:first-of-type,
.container > section > p:first-of-type {
	margin-bottom: 40px;
}

#left-column p {
	padding: 0px 10px;
}

#contents section p {
	padding: 0px 10px;
}

@media only screen and (max-width: 767px) {
	
.Mt30 {
	margin-top: 20px;
}
.Mt60 {
	margin-top: 30px;
}
.Mt80 {
	margin-top: 40px;
}
.Mt120 {
	margin-top: 50px;
}
.Mt150 {
	margin-top: 60px;
}
	
.Mb30 {
	margin-bottom: 20px;
}
.Mb60 {
	margin-bottom: 30px;
}
.Mb80 {
	margin-bottom: 40px;
}
.Mb120 {
	margin-bottom: 60px;
}
.Mb150 {
	margin-bottom: 60px;
}

#contents h1 + p:last-of-type,
#contents > section > p:first-of-type,
#contents > p:first-of-type,
.container > p:first-of-type,
.container > section > p:first-of-type {
	margin-bottom: 20px;
}
	

}
@media only screen and (max-width: 479px) {

.Mt30 {
	margin-top: 15px;
}
.Mt60 {
	margin-top: 30px;
}
.Mt80 {
	margin-top: 30px;
}
.Mt120 {
	margin-top: 50px;
}
.Mt150 {
	margin-top: 50px;
}
	
.Mb30 {
	margin-bottom: 15px;
}
.Mb60 {
	margin-bottom: 30px;
}
.Mb80 {
	margin-bottom: 30px;
}
.Mb120 {
	margin-bottom: 50px;
}
.Mb150 {
	margin-bottom: 50px;
}
	
}

/*--------------------------------------------------------------
	h,1,2,3 common contents
---------------------------------------------------------------*/

#contents > h1,
#contents .container > h1 {
	display: block;
	width: 100%;
	margin-bottom: 30px;
	font-size: 2em;
	font-weight: 700;
	color:#000;
	text-align:center;
	-webkit-text-shadow: 1px 1px 0px #FFF;
	text-shadow: 1px 1px 0px #FFF;
}

/*	 h1 article
--------------------------------------*/
#contents .Border {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-bottom: 70px;
}
#contents .Border h1 {
	font-size: 1.7em;
	text-align: left;
}
#contents .Border h1 span {
	display:inline-block;
	padding: 0px 10px;
}
#contents .Border h1:after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	margin-top: 5px;
	border-left: 10em #dab10f solid;
	background-color: #ddd;
	box-sizing:border-box;
}
#contents .Border time {
	position: absolute;
	bottom: -30px;
	right: 0px;
}

/*	 h2
--------------------------------------*/
h2 {
	margin: 20px auto;
	padding: 0px 7px;
	
	font-size: 1.7em;
	font-weight: 500;
}

h3 {
	margin: 0px auto 10px auto;
	padding: 0px 10px;
	
	font-size: calc( 1em + 2px);
	font-weight:bold;
}

h4 {
	padding: 0px 10px;
	margin: 0px;
	
	font-size: calc( 1em + 2px);
	font-weight:bold;
}
h5 {
	font-size: 1em;
	font-weight:bold;
}
@media only screen and (max-width: 767px) {
#contents > h1,
#contents .container > h1 {
	line-height: 1.5;
	font-size: calc( 1em + 5px);
}
h2 {
	font-size: 1.4em;
}

}

/*--------------------------------------------------------------
	Bread [ pankuzu ]
---------------------------------------------------------------*/

#bread {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0px;
	margin: 0px auto;
	background:#f5f5f5;
	z-index: 10;
}

#bread ul {
	position: relative;
	width: 100%;
	max-width: 90%;
	top: 0;
	left: 0;
	right: 0;
	margin: 0px auto;
	padding: 0px;
	list-style-type: none;
	font-size: 85%;
}
#bread ul li {
	position:relative;
	display: inline-block;
	margin: 0px 15px 0px 3px;
	color: #666;
}
	#bread ul li:after {
		display: inline-block;
		position: absolute;
		top: 60%;
		right: -25px;
		-webkit-transform: translateY(-50%);/* Safari用 */
		transform: translateY(-50%);
		font-size: 1em;
		font-family:"Line Awesome Free","Line Awesome Brands";
		font-weight: 900;
		content: "\f105";
	}
	#bread ul li:last-child:after {
		display:none;
	}
		
@media only screen and (max-width: 1100px) {
#bread {
	top: 0px;
}

#bread ul {
	max-width: 95%;
}

#bread ul {
	display:block;
	
/*-- テキストが長いときスライドさせる --*/
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	overflow: auto;
	white-space: nowrap;
}
#bread li {
	display:inline;
	flex: 0 0 40%;
}
}

@media only screen and (max-width: 479px) {
#bread {
	background: rgba(201,201,201,0.3);
}
#bread ul {
	padding: 5px 10px;
	max-width: 100%;
}
}


/*--------------------------------------------------------------
	Billboard
---------------------------------------------------------------*/

.Billboard {
	display: flex;
	display:-ms-flexbox;
	width: 100%;
	max-width: 100%;
	min-height: 400px;
	background:#000;
	overflow:hidden;
}
.Billboard.movie {
	background:#fff45c;
}

/*	 Left Text
----------------------------------------*/
.Billboard .txt {
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	width: 60%;
	min-height: 400px;
	padding: 5%;
	color: #fff;
	background: rgba(46,184,184, 1);
	z-index: 100;
}

.Billboard .txt::before {
  content: '';
  position: absolute;
  top: 0;
  right: -7vw;
  border-left: 7vw solid rgba(46,184,184, 1);
  border-bottom: 500px solid transparent;
}


/*--- Safari hack ---*/
_::-webkit-full-page-media, _:future, :root .Billboard .txt::before {
	right: -6.9vw;
	border-left: 7vw solid rgba(46,184,184, 1);
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
.Billboard .txt::before {
  right: -6.9vw;
  border-left: 7vw solid rgba(46,184,184, 1);
}
}

.Billboard .txt h1,
.Billboard .txt h3 {
	display:block;
	font-size: 1.7em;
	font-family: "Sawarabi Mincho";
	font-weight:normal;
	margin-bottom: 20px;
}
.Billboard .txt p {
	max-width: 100%;
	margin: 0;
	padding: 0;
}


/*	 Right Image
----------------------------------------*/
.Billboard .img {
	display: flex;
	width: 40%;
	background-repeat: no-repeat;
}
.Billboard.about .img {
	background-position: 100% 100%;
	background-size: auto 400px;
}
.Billboard.nakagusuku .img {
	background-position: 50% 100%;
	background-size: cover;
}
.Billboard.joshi .img {
	background-position: 50% 100%;
	background-size: cover;
}
.Billboard.movie .img {
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	background-position: 50% 100%;
	background-size: auto 100%;
}
.Billboard.movie .img span {
	color: #fff;
	text-shadow: 
    black 2px 0px 0px, black -2px 0px 0px,
    black 0px -2px 0px, black 0px 2px 0px,
    black 2px 2px 0px, black -2px 2px 0px,
    black 2px -2px 0px, black -2px -2px 0px,
    black 1px 2px 0px, black -1px 2px 0px,
    black 1px -2px 0px, black -1px -2px 0px,
    black 2px 1px 0px, black -2px 1px 0px,
    black 2px -1px 0px, black -2px -1px 0px,
    black 1px 1px 0px, black -1px 1px 0px,
    black 1px -1px 0px, black -1px -1px 0px;
}



@media only screen and (max-width: 979px) {
.Billboard.about .img {
	background-size: auto 350px;
}
}

@media only screen and (max-width: 800px) {
.Billboard {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: auto;
}
.Billboard .txt::before {
	display: none;
}


.Billboard .txt,
.Billboard .img {
	width: 100%;
}

/*	 Left Text
----------------------------------------*/
.Billboard .txt {
	font-size: 0.9em;
	min-height: auto;
}

/*	 Right Image
----------------------------------------*/
.Billboard .img {
    height: 0;
    padding-top: 50%;
	background-position: 50% 100%;
}

.Billboard.about .img {
	background-position: 50% 100%;
	background-size: auto 90%;
}
.Billboard.nakagusuku .img {
	background-position: 50% 50%;
	background-size: cover;
}
.Billboard.joshi .img {
	background-position: 50% 50%;
	background-size: cover;
}
.Billboard.movie .img {
	background-position: 50% 100%;
	background-size: contain;
}

}

/*--------------------------------------------------------------
	Billboard Category
---------------------------------------------------------------*/
.Category {
	display: flex;
	display:-ms-flexbox;
	width: 100%;
	max-width: 100%;
	background: rgba(46,184,184, 1);
	overflow:hidden;
}

/*	Text
----------------------------------------*/
.Category .txt {
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	width: 100%;
	min-height: 150px;
	padding: 0% 5%;
	color: #fff;
	z-index: 100;
}

.Category .txt h3 {
	font-size: 1.7em;
	font-family: "Sawarabi Mincho";
	font-weight:normal;
}
.Category .txt p {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

@media only screen and (max-width: 767px) {

.Category .txt {
	padding: 20px 5%;
	min-height: 80px;
}

.Category .txt h3 {
	font-size: 1.3em;
}


}


/*--------------------------------------------------------------
	TOP News
---------------------------------------------------------------*/
.news {
	display:flex;
	width: 100%;
	max-width: 1000px;
	margin: 0px auto 50px;
}

/*	 h2
--------------------------------------*/
#contents .news h2 {
	padding-right: 50px;
	font-size: 2.3em;
	text-align:center;
	line-height: 1.5;
	border: none;
	border-right: 1px solid #000;
}
#contents .news h2 small {
	display:block;
	font-size: 60%;
	font-weight: 300;
}


/*	 List
--------------------------------------*/
.news dl {
	position:relative;
	display: flex;
	flex-wrap: wrap;
	
	width: 100%;
	max-width: 800px;
	padding: 0px 0px 0px 50px;
	margin: 0px auto 30px;
}

.news dt,
.news dd {
	display: flex;
	flex-wrap: wrap;
}

.news dt,
.news dd {
	margin-bottom: 10px;
}
.news dt {
	align-items: flex-start;
	justify-content: space-between;
	width: 20%;
	min-width: 150px;
	padding: 15px 0px 15px 0px;
}

.news dd {
	width: 80%;
	padding: 15px 0px 15px 30px;
}


@media only screen and (max-width: 1000px) {
.news {
	flex-wrap: wrap;
}

/*	 h2
--------------------------------------*/
#contents .news h2 {
	display:block;
	width: 100%;
	padding: 0px;
	margin-bottom: 30px;
	font-size: 2em;
	text-align:center;
	line-height: 1.5;
	border-right: none;
}

/*	 List
--------------------------------------*/
.news dl {
	max-width: 100%;
	padding: 0px;
}

.news dt {
	width: 30%;

}
.news dd {
	width: 70%;
}
.news dt,
.news dd {
	padding: 0px 20px 10px;
	margin-bottom: 25px;
	border-bottom: 1px solid #ccc;
}

}
@media only screen and (max-width: 767px) {
.news {
	margin: 0px auto 0px;
}
	
.news dl {
	display: block;
	margin: 30px auto;
	padding: 0px;
}
.news dt,
.news dd {
	width: 100%;
	padding: 0px 10px;
}
.news dt {
	justify-content: flex-start;
	margin-bottom: 5px;
	font-weight:bold;
	border-bottom: none;
}
.news dt time {
	margin-right: 10px;
}

.news dd {
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
}

}

/*	 time
--------------------------------------*/
.NewsTime {
	position:relative;
	width: 100%;
	margin: 0px auto;
	text-align:right;
}
.NewsTime time {
	position: absolute;
	top: -20px;
	right: 0;
	width: auto;
	margin:0px auto;
	font-size: 80%;
}

@media only screen and (max-width: 479px) {
  .NewsTime {
	  position:relative;
	  margin: 0px auto 10px;
  }
  .NewsTime time {
	  position: relative;
	  top: -10px;
  }
}

/*--------------------------------------------------------------
	News Article
--------------------------------------------------------------*/

.newsArticle {
	display: table;
	width: 100%;
	max-width: 100%;
	padding: 0px 10px;
}
.newsArticle .txt,
.newsArticle .img {
	display: table-cell;
	vertical-align:top;
}
.newsArticle .txt {
	width:65%;
}
.newsArticle .img {
	width:35%;
	padding: 0px 0px 0px 40px;
}
.newsArticle .img img {
	width: 100%;
	max-width: 100%;
	margin: 0px auto;
	text-align:center;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

@media only screen and (max-width: 767px) {
.newsArticle {
	display: block;
}
.newsArticle .txt,
.newsArticle .img {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0px;
}
.newsArticle .txt {
	margin-bottom: 20px;
}

.newsArticle .img {
	margin: 0px auto;
	text-align:center;
}
.newsArticle .img img {
	width: auto;
	max-width: 100%;
}
}


/*--------------------------------------------------------------
	Social Button List [ News etc ]
---------------------------------------------------------------*/
.socialBtnList {
	display:block;
}
.socialBtnList ul {
	position:relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	
	width: 100%;
	max-width: 500px;
	margin: 0px auto 20px;
}
.socialBtnList ul li {
	list-style: none;
}
.socialBtnList ul li a {
	display:block;
	padding: 10px 15px 10px 45px;
	color: #fff;
	text-decoration: none;
}
.socialBtnList ul li.fb a {
	background: url(../images/common/fb.gif) no-repeat 5px 45% #3B5998;
	background-size: 30px;
}
.socialBtnList ul li.twitter a {

	background: url(../images/common/twitter.gif) no-repeat 5px 50% #1DA1F2;
	background-size: 35px;
}
.socialBtnList ul li.line a {
	background:url(../images/common/line.gif) no-repeat 5px 55% #00b900;
	background-size: 30px;
}

@media screen and (min-width: 479px) {
.socialBtnList ul li a:hover {
	outline: 2px solid #003388;
}

}

@media only screen and (max-width: 767px) {
.socialBtnList ul li a {
	display:block;
	padding: 10px 15px 10px 45px;
	font-size: 0.9em;
}
}

@media only screen and (max-width: 479px) {
.socialBtnList ul li a {
	padding: 5px 7px 5px 27px;
	font-size: 0.8em;
}
.socialBtnList ul li.fb a {
	background-size: 20px;
}
.socialBtnList ul li.twitter a {
	background-size: 25px;
}
.socialBtnList ul li.line a {
	background-size: 20px;
}
}

@media only screen and (max-width: 370px) {
.socialBtnList ul li a {
	font-size: 0.6em;
}
}

/*--------------------------------------------------------------
	Another News
--------------------------------------------------------------*/
.anotherNews {
	position:relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1000px;
	margin: 0px auto;
}
#contents .anotherNews h2 {
	position:relative;
	display: inline-block;
	margin-bottom: 30px;
	text-align:center;
	font-size: 1.3em;
	border: none;
}
#contents .anotherNews h2:before {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: -35px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 120%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	color: #57914e;
	content: "\f15c";
}

.anotherNews .news dl {
	width: 100%;
	max-width: 1000px;
	padding: 0;
	margin: 0;
}

.anotherNews .news dt,
.anotherNews .news dd {
	border: none;
}


@media screen and (min-width: 1000px) {
.anotherNews .news dt,
.anotherNews .news dd {
	padding: 20px;
	margin-bottom: 10px;
}

}

@media only screen and (max-width: 1000px) {
.anotherNews .news dt,
.anotherNews .news dd {
	margin: 0;
}
}

.anotherNews .news dl dt:nth-of-type(2n+1),
.anotherNews .news dl dd:nth-of-type(2n+1),
.anotherNews .news dl dt:nth-of-type(2n+1),
.anotherNews .news dl dd:nth-of-type(2n+1) {
	background:#e5f0cb;
}

@media only screen and (max-width: 979px) {
.anotherNews {
	max-width: 100%;
	margin: 0px auto;
}
.anotherNews .news dl,
.anotherNews .news dl {
	max-width: 100%;
	padding: 0px;
	margin: 0px auto;
}

}

@media only screen and (max-width: 767px) {
#contents .anotherNews h2:before {
	left: -30px;
}
}


/*--------------------------------------------------------------
	Another List
--------------------------------------------------------------*/
.anotherList {
	position:relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1000px;
	margin: 0px auto;
}
#contents .anotherList h2 {
	position:relative;
	display: inline-block;
	margin-bottom: 30px;
	text-align:center;
	font-size: 1.3em;
	border: none;
}
#contents .anotherList h2:before {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: -35px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 120%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	color: #57914e;
	content: "\f46d";
}

.anotherList ul {
	width: 100%;
	max-width: 1000px;
	padding: 0;
	margin: 0;
}
.anotherList ul li{
	padding: 20px 30px 20px 40px;
	list-style: none outside;
}
.anotherList ul li a {
	position:relative;
}
.anotherList ul li a:before {
	position: absolute;
	display: inline-block;
	width: auto;
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #000;
	top: 0px;
	left: -10px;
	content: "\f0da";
}

.anotherList ul li:nth-child(2n+1) {
	background:#e5f0cb;
}


@media only screen and (max-width: 767px) {
#contents .anotherList h2:before {
	left: -30px;
}
}


/*--------------------------------------------------------------
	Movie Banner
---------------------------------------------------------------*/
.movieBnr {
	position:relative;
	display: flex;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background-image: 
	url(../images/common/frame_top.png),
	url(../images/common/frame_bottom.png),
	url(../images/common/frame_left.png),
	url(../images/common/frame_right.png);
	background-position:
	0% 0%,
	100% 100%,
	0% 0%,
	100% 100%;
	background-repeat:
	repeat-x,
	repeat-x,
	repeat-y,
	repeat-y;
	background-size: auto;
	background-color:#e5e5e5;
	overflow:hidden;
}

/*	 Base
--------------------------------------*/
.movieBnr a {
	display: flex;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 7%;
	color: #000;
}
.movieBnr a:hover {
	text-decoration: none;
}
.movieBnr .txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	order: 2;
	
	width: 60%;
}
.movieBnr .txt h3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.7em;
	font-family: "Sawarabi Mincho";
	font-weight:normal;
}
.movieBnr .txt .btn {
	position:relative;
	display: inline-block;
	margin: auto 0 20px 0;
	padding: 10px 50px 10px 30px;
	text-decoration: none;
	color: #000;
	border-radius: 50px;
	border: 1px solid #000;
	
}
.movieBnr .txt .btn:after {
	position: absolute;
	top: 50%;
	right: 20px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 100%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f061";
}

.movieBnr .img {
	order: 1;
	width: 40%;
}

/*	 Kakazu
--------------------------------------*/
.movieBnr .kakazu {
	position: absolute;
	bottom: 0;
	right: 0;
	
	display:block;
	width: 100%;
	max-width: 100%;
}
.movieBnr .kakazu img {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 100%;
}
.movieBnr .kakazu small {
	position: absolute;
	bottom: 0;
	right: 0px;
	
	display:block;
	width: 100%;
	padding-right: 20px;
	color: #fff;
	text-align:right;
	text-shadow: 
    black 2px 0px 0px, black -2px 0px 0px,
    black 0px -2px 0px, black 0px 2px 0px,
    black 2px 2px 0px, black -2px 2px 0px,
    black 2px -2px 0px, black -2px -2px 0px,
    black 1px 2px 0px, black -1px 2px 0px,
    black 1px -2px 0px, black -1px -2px 0px,
    black 2px 1px 0px, black -2px 1px 0px,
    black 2px -1px 0px, black -2px -1px 0px,
    black 1px 1px 0px, black -1px 1px 0px,
    black 1px -1px 0px, black -1px -1px 0px;
}


@media only screen and (max-width: 850px) {
	
/*	 Base
--------------------------------------*/
.movieBnr a {
	flex-direction: column;
	padding: 50px 20px;
}

.movieBnr .txt {
	width: 100%;
}
.movieBnr .img {
	display: none;
}

.movieBnr .kakazu img {
	max-width: 150px;
}

}

@media only screen and (max-width: 767px) {
	
/*	 Base
--------------------------------------*/
.movieBnr a {
	flex-direction: column;
	padding: 50px 20px;
}

.movieBnr .txt {
	font-size: 0.9em;
}

}


@media only screen and (max-width: 479px) {
	
.movieBnr {
	background-size:
	500px auto,
	500px auto,
	auto 300px,
	auto 300px;
}

/*	 Base
--------------------------------------*/
.movieBnr a {
	flex-direction: column;
	padding: 40px 20px 50px 20px;
}

.movieBnr .txt {
	font-size: 0.8em;
}
.movieBnr .txt .btn {
	padding: 5px 30px 5px 20px;
	
}
.movieBnr .txt .btn:after {
	right: 10px;
}


/*	 Kakazu
--------------------------------------*/
.movieBnr .kakazu {
	right: -10px;
}
.movieBnr .kakazu img {
	max-width: 120px;
}
.movieBnr .kakazu small {
	display:block;
	min-width: 120px;
}
}

/*--------------------------------------------------------------
	Movie
---------------------------------------------------------------*/

/*	 Movie List
---------------------------------------------------------------*/

.movieList h2 {
	display:block;
	margin-bottom: 30px;
	font-size: 2em;
	text-align:center;
	
}
.movieList .List {
	display: flex;
	justify-content: center;
}


.movieList .List > ul > li  {
	position: relative;
	padding-left:1.25em;
	list-style: none;
	list-style-position: inside;
	line-height: 1.5;
	font-weight: 400;
}
.movieList .List > ul > li:before {
	position:absolute;
	top: 7px;
	left: 0px;
	display: inline-block;
	margin:0;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 10px;
	color: #f5b2aa;
	content:"\f111";
}
	
.movieList h2 {
	line-height: 1.5;
	margin-bottom: 50px;
}
.movieList h2 small {
	display:block;
	font-size: 70%;
}
.movieList .List > ul > li h3 {
	font-weight: 400;
}


@media only screen and (min-width: 800px) {
.movieList .List ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
}

.movieList .List ul li {
	width: 50%;
	margin-bottom: 15px;
}
/*----- Left -----*/
.movieList .List ul li:first-child {
	order: 1;
}
.movieList .List ul li:nth-child(2) {
	order: 3;
}
.movieList .List ul li:nth-child(3) {
	order: 5;
}
.movieList .List ul li:nth-child(4) {
	order: 7;
}
.movieList .List ul li:nth-child(5) {
	order: 9;
}
.movieList .List ul li:nth-child(6) {
	order: 11;
}
.movieList .List ul li:nth-child(7) {
	order: 13;
}
.movieList .List ul li:nth-child(8) {
	order: 15;
}
.movieList .List ul li:nth-child(9) {
	order: 17;
}
.movieList .List ul li:nth-child(10) {
	order: 19;
}

/*----- Right -----*/
.movieList .List ul li:nth-child(11) {
	order: 2;
}
.movieList .List ul li:nth-child(12) {
	order: 4;
}
.movieList .List ul li:nth-child(13) {
	order: 6;
}
.movieList .List ul li:nth-child(14) {
	order: 8;
}
.movieList .List ul li:nth-child(15) {
	order: 10;
}
.movieList .List ul li:nth-child(16) {
	order: 12;
}
.movieList .List ul li:nth-child(17) {
	order: 14;
}
.movieList .List ul li:nth-child(18) {
	order: 16;
}
.movieList .List ul li:nth-child(19) {
	order: 18;
}
.movieList .List ul li:last-child {
	order: 20;
}
}

@media only screen and (max-width: 800px) {
	
.movieList h2 {
	font-size: 1.5em;
	margin-bottom: 20px;
}
	
.movieList .List ul {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}
.movieList .List ul li {
	width: auto;
	margin-bottom: 15px;
}
}

/*	 Profile
---------------------------------------------------------------*/
.profile {
	display: flex;
	width: 100%;
	max-width: 800px;
	margin: 0px auto;
}

/*	 Left Text
----------------------------------------*/
.profile .txt {
	display: flex;
	flex-direction: column;
	
	width: 70%;
	padding: 20px;
}
.profile .txt h3  {
	display: flex;
	flex-direction: column;
	line-height: 1.5;
}
.profile .txt h3 small {
	display: block;
	font-weight: 400;
}
.profile .txt h3,
.profile .txt p {
	max-width:100%;
}

/*	 Right Image
----------------------------------------*/
.profile .img {
	display: block;
	width: 30%;
	max-width: 100%;
	min-height: 0%;
}
.profile .img span {
	position:relative;
	display: block;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: #699;
	overflow:hidden;
}
.profile .img span img {
	position: absolute;
	top: 60%;
	left: 50%;
	width: auto;
	padding: 0;
	margin: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px) {
	
.profile {
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}
.profile .txt {
	width: 100%;
	padding: 0px;
	margin-bottom: 20px;
}
.profile .img {
	width: auto;
}


}

/*--------------------------------------------------------------
	Movie Kobetsu
---------------------------------------------------------------*/
.movieBox {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/*----- Text -----*/
.movieBox .txt {
	order: 2;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	margin: 50px 0px 0px;
}
.movieBox .txt h1,
.movieBox .txt h2 {
	margin: 0;
	padding: 0;
	font-size: 1.3em;
}
.movieBox .txt p {
	max-width: 100%;
	margin: 20px 0px;
	padding: 0;
}

/*----- Youtube -----*/
.movieBox .youtube {
	order: 1;
}


/*----- Button -----*/
.movieBox .btn {
	order: 3;
	margin: 80px auto 0px;
	font-size: 0.9em;
	text-align:center;
}
.movieBox .btn a {
	position:relative;
	display: inline-block;
	padding: 10px 80px 10px 50px;
	font-size: 110%;
	text-decoration: none;
	color: #000;
	border-radius: 50px;
	border: 1px solid #000;
}

.movieBox .btn a:after {
	position: absolute;
	top: 50%;
	right: 20px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 150%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f061";
}
.movieBox .btn a small {
	display:block;
	text-align:left;
}

.movieBox .btn a:hover {
	color: #fff;
	border: 1px solid #000;
	background: #000;
}

@media only screen and (max-width: 767px) {
	
.movieBox .txt {
	order: 1;
	
	margin: 0px 0px 20px;
}
.movieBox .youtube {
	order: 2;
}
.movieBox .btn {
	order: 3;
	margin: 20px auto 0px;
}

.movieBox .btn a {
	padding: 5px 30px 5px 25px;
}

.movieBox .btn a:after {
	right: 10px;
	font-size: 100%;
}

}


/*--------------------------------------------------------------
	TOP Box 3column
---------------------------------------------------------------*/
.top3col {
    display: flex;
    justify-content: center;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}
.top3col .box {
	position:relative;
    display: flex;
	width: 100%;
	max-width: 300px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
.top3col .box:first-child {
	margin: 0px 5% 0px 0px;
}
.top3col .box:last-child {
	margin: 0px 0px 0px 5%;
}
.top3col .box a {
	position:relative;
	display: flex;
	width: 100%;
	height: 100%;
	min-height: 270px;
	max-height: 270px;
}

/*	 Text
--------------------------------------*/
.top3col .txt {
	position:absolute;
	bottom: 0;
	left: -20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	
	width: 85%;
	min-height: 10vh;
	font-size: 0.9em;
	background-color: rgba(0,0,0,0.5);
}
.top3col .txt h3::after {
	content: '';
	position: absolute;
	top: 0;
	right: -30px;
	border-left: 30px solid rgba(0,0,0,0.5);
	border-top: 10vh solid transparent;
}


.top3col .txt h3 {
	display: flex;
	align-items: center;
	width: 100%;
	position:relative;
	padding: 0px 0px 0px 50px;
	margin: 0;
	color: #fff;
	font-size: 1em;
	font-weight: 400;
}
.top3col .txt h3:before {
	position: absolute;
	top: 50%;
	left: 20px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 150%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f061";
}

/*	 Images
--------------------------------------*/
.top3col .box .img {
	position: relative;
	overflow: hidden;
	display: flex;
	width: 100%;
	height: 100%;
}

.top3col .box .img span {
	display: flex;
	width: 100%;
	height: 100%;
	background-position: 50% 0%;
	background-repeat:no-repeat;
	background-size: cover;
}


@media print, screen and (min-width: 979px) {

/*	 Hover
--------------------------------------*/
.top3col .box .img span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 1.5s;
}
.top3col .box a:hover .img span {
	transform: translate(-50%, -50%) scale(1.1);
}

}

@media only screen and (max-width: 979px) {

.top3col {
	flex-direction: column;
	align-items: center;
}

.top3col .box:first-child {
	margin: 0px 0% 30px 0px;
}
.top3col .box:last-child {
	margin: 0px 0px 30px 0%;
}
.top3col .box {
	max-width: 300px;
	margin: 0px 0px 30px 0%;
}

.top3col .box a {
	min-height: 170px;
	max-height: auto;
}
.top3col .box .img span {
	min-height: 170px;
	background-position: 50% 50%;
}

}


@media only screen and (max-width: 479px) {

/*	 Text
--------------------------------------*/
.top3col .txt {
	left: 0px;
	width: 100%;
	min-height: 5vh;
	padding: 0px;
}


.top3col .txt h3 {
	display: flex;
	align-items: center;
	width: 100%;
	position:relative;
	padding: 0px 0px 0px 40px;
	margin: 0;
	color: #fff;
	font-size: 1em;
	font-weight: 400;
}
.top3col .txt h3 br {
	display: none;
}
.top3col .txt h3:before {
	position: absolute;
	top: 50%;
	left: 10px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 150%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f061";
}
.top3col .txt h3::after {
	display: none;
}


}


/*--------------------------------------------------------------
	TOP Box 2column
---------------------------------------------------------------*/
.top2col {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
}
.top2col .box {
	display: flex;
	width: 47%;
	padding:0px;
	margin: 0;
	background:url(../images/common/nakagusuku_bg.png) repeat;
}
.top2col .box .inner{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0;
	color: #000;
	text-decoration: none;
}
/*
.top2col .box .inner:before {
	position:absolute;
	bottom: 0;
	right: 0;
	content: "";
	border-right: 50px solid rgba(0,0,0, 0.9);
	border-top: 50px solid transparent;
}
.top2col .box .inner:after {
	position:absolute;
	bottom: 0;
	right: 5px;
	
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f105";
	color: #fff;
}

.top2col .box a:hover:before {
	border-right: 50px solid #dab10f;
}
*/

/*	 Text
--------------------------------------*/
.top2col .box .txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight:400;
	
	width: 55%;
}
.top2col .box .txt h3 {
	font-size: 1.3em;
}

/*	 Images
--------------------------------------*/
.top2col .box .img {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 45%;
	padding: 20px 0px 20px 20px;
}
.top2col .box .img img {
	width: 100%;
	max-width: 150px;
}

/*	 Button
--------------------------------------*/
.top2col .box .btn {

	margin: 15px auto;

}
.top2col .box .btn + .btn {
	margin: 0px auto 15px;

}
.top2col .box .btn a {
	position:relative;
	display: flex;
	align-items: center;
	justify-content: cemter;
	padding: 0px 30px 0px 15px;
	text-decoration: none;
	color: #000;
	border-radius: 50px;
	border: 1px solid #000;
}
.top2col .box .btn a:after {
	position: absolute;
	top: 50%;
	right: 10px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 100%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f061";
}
.top2col .box .btn a:hover {
	color: #fff;
	border: 1px solid #000;
	background: #000;
}



@media only screen and (max-width: 800px) {
.top2col {
	flex-direction: column;
	justify-content: center;
}
.top2col .box {
	display: flex;
	width: 100%;
	margin-bottom: 30px;
}

}

@media only screen and (max-width: 479px) {
	
.top2col .box .inner{
	padding: 20px;
	flex-direction: column;
}

/*	 Text
--------------------------------------*/
.top2col .box .txt {
	order: 1;
	width: auto;
}

/*	 Images
--------------------------------------*/
.top2col .box .img {
	order: 2;
	width: auto;
	padding: 0px;
}
/*
.top2col .box .inner:before {
	position:absolute;
	bottom: 0;
	right: 0;
	content: "";
	border-right: 40px solid rgba(0,0,0, 0.9);
	border-top: 40px solid transparent;
}
.top2col .box .inner:after {
	font-size: 14px;
}
*/

.top2col .box .txt h3 {
	font-size: 1.1em;
}
}


/*--------------------------------------------------------------
	Youtube Popup
---------------------------------------------------------------*/
.overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, .65);
}
.modal,
.modal2 {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	width: 90%;
    max-width: 100%;
    max-height: 90vh;
    padding: 10px;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 100000;
}
.modal p,
.modal2 p {
	font-size: 0.9em;
}
.active {
    display: block !important;
}
.closebtn {
	position:absolute;
	top: -30px;
	right: 0px;
    display: block;
	width: 25px;
	height: 25px;
	padding: 0;
	margin:0;
	font-size: 25px;
	background-color: #fff;
	z-index: 100000;
}
.closebtn:before {
	position:absolute;
	top: -10px;
	right: 0;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f00d";
}

/* Youtube　軽量化 間にサムネを挟んで読み込みを速くする*/
.modal .Youtube,
.modal2 .Youtube {
	max-width:60%;
	margin: 0 auto;
	/*padding-top:38%;*/
}

.YT {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-top:10px;
	margin-bottom:10px;
}
.YT iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.YT_video {
	position: absolute;
	width:100%;
	height:auto;
	top:0;
}
.YT_video img {
	width:100%;
	height:auto;
}
/* YouTubeアイコン */
.YT_video::before {
	position: absolute;
	content: "";
	width: 68px;
	height: 48px;
	top: 50%;
	left: 50%;
	transform : translate(-50%,-50%);
	opacity: .90;
	transition:.5s;
	background-image: url(../images/common/yt_icon_mono_light.png);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	-o-background-size: 100%;
	-moz-background-size: 100%;
	-webkit-background-size: 100%;
	background-size: 100%;
}

/* 画像マウスホバー時 */
.YT_video img:hover{
	cursor: pointer;/* リンクカーソル指定 */
	width:100%;
	height:auto;
	box-sizing: border-box;
}
/* YouTubeアイコンマウスホバー時 */
.YT_video:hover::before {
	cursor: pointer;
	transition:.5s;/* ゆっくり変化 */
	background-image:url(../images/common/yt_icon_rgb.png);
}



@media only screen and (max-width: 479px) {
	
.modal,
.modal2 {
	width: 95%;
}

.modal .Youtube,
.modal2 .Youtube {
	max-width:100%;
	/*padding-top:56.25%;*/
}


}

@media screen and (min-width: 800px) and (max-height: 750px) {
/* 横幅800px以下で、高さ500px以下の場合 */
/* 文字が長くて見切れるので幅を調整 */
.modal .Youtube,
.modal2 .Youtube {
	max-width:80%;
	/*padding-top:45%;*/
}
   
   
}



/*	 Library
---------------------------------------------------------------*/

.Library {
	display: flex;
	width: 100%;
	max-width: 100%;
	background:#f5f3f4;
}
.Library .box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	margin: 50px auto;
}
.Library .box .txt,
.Library .box .img {
	width: 48%;
	min-height: 0%;
}

#contents .Library .box .txt h3 {
	margin-bottom: 20px;
	font-size: 2em;
	font-weight: bold;
	font-family: "Sawarabi Mincho";
}
#contents .Library .box .txt .s_btn_l {
	margin-bottom: 30px;
}
#contents .Library .box .txt p {
	margin-bottom: 20px;
}

@media only screen and (max-width: 1000px) {
.Library .box {
	max-width: 90%;
}
}

@media only screen and (max-width: 767px) {
.Library .box {
	flex-direction: column;
	margin: 20px auto 50px;
}
.Library .box .txt,
.Library .box .img {
	width: 100%;
}

}


/*--------------------------------------------------------------
	Footer External Banner
---------------------------------------------------------------*/
.FooterExBnr ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px;
}
.FooterExBnr ul li {
	display: flex;
	align-content: center;
	padding: 0;
	margin: 0 0 20px;
	list-style: none;
}
.FooterExBnr ul li img {
	display: block;
	width: auto;
	max-width: 90%;
	margin: 0 auto;
	border: 1px solid #ccc;
}

@media only screen and (min-width: 979px) {
.FooterExBnr ul li {
	width: 25%;
}

}

@media only screen and (max-width: 979px) {
.FooterExBnr ul {
	max-width: 90%;
}

}

/*==============================================================

	Footer
	
===============================================================*/

footer {
	position:relative;
    width: 100%;
	margin: 0px auto;
	color: #fff;
	background: #362e2b;
}
footer .footer_inner {
	display: flex;
	width: 100%;
	max-width: 90%;
	padding: 30px 0px;
	margin: 0 auto;
}
footer .contact h3 {
	padding: 0;
	margin: 0;
}

footer .copyright {
	font-size: 0.8em;
}


@media only screen and (min-width: 979px) {
footer .footer_inner {
	justify-content: space-between;
	align-items: flex-end;
}
}

@media only screen and (max-width: 979px) {
footer .footer_inner {
	flex-direction: column;
}

footer .contact {
	margin: 0 0 20px;
}
footer .copyright {
	margin: 0 0 0 auto;
}
}

@media only screen and (max-width: 479px) {
footer .footer_inner {
	padding: 20px 0px 10px;
}
footer .copyright {
	margin: 0 auto;
}
}

/*--------------------------------------------------------------
	Page TOP
---------------------------------------------------------------*/

#pagetop {
	right: 2%;
}
@media only screen and (max-width: 1000px) {
#pagetop {
	right: 10px;
}
}

.pagetop {
	position: fixed;
	bottom: 10px;

	height: 0;
	opacity: 0;
	overflow: hidden;
	animation-duration: 1s;
	z-index: 1000;
}

.pagetop .top {
	position:relative;
	right: 0px;
	display: block;
	padding: 35px;
	text-decoration: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.7);
	cursor:pointer;
}
.pagetop .top:before {
	content: "";
	position: absolute;
	top: 40%;
	left: 50%;
	display: block;
	width: auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
	position: absolute;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	border: 0px;
	border-top: 2px solid rgba(255,255,255,1);
	border-right: 2px solid rgba(255,255,255,1);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.pagetop.show {
	height: auto;
	opacity: 1;
	animation-name: fadein;
}
.pagetop.hide {
	height: 0;
	opacity: 0;
	animation-name: fadeout;
}
.pagetop.static {
	position: absolute;
	bottom: auto;
	margin: -40px 0 0;
}

@media only screen and (max-width: 767px) {
.pagetop.static {
	margin: 15px 0 0;
}

.pagetop .top:before {
	width: 15px;
	height: 15px;
	margin-left: -8px;
}

}

@keyframes fadein {
  0% {
	height: 0;
	opacity: 0;
  }
  1% {
	height: auto;
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}
@keyframes fadeout {
  0% {
	height: auto;
	opacity: 1;
  }
  99% {
	height: auto;
	opacity: 0;
  }
  100% {
	height: 0;
  }
}


@media only screen and (max-width: 767px) {
.pagetop .top {
	padding: 20px;
}
}

@media print {
	
#pagetop {
	display: none;
}

}