@charset "UTF-8";

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

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

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

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


/*--------------------------------------------------------------
	フッターを画面下に固定
--------------------------------------------------------------*/
@media print, screen and (min-width: 767px) {
#wrapper {
    display: flex;
    flex-direction: column;
}
header, footer {
    flex: 0 0 auto;
}
#contents {
    flex: 1 0 auto;
}

}

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

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

header {
	position:relative;
    background-color: #ea5513;
	z-index: 10000;
}

.header_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1100px;
	margin: 10px auto;
	padding: 10px 0px;
}
.drawer-open .drawer-overlay {
	z-index: 1000;
}

.drawer-open header:before {
	position: absolute;
	top: 0;
	left: 0;
	display:block;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(0,0,0,0.2);
}

@media only screen and (max-width: 979px) {
.header_inner {
	max-width: 95%;
	margin: 0px auto;
	padding: 10px 0px;
}
}

/*	 Logo
---------------------------------------------------------------*/
header .header_inner h1 {
    display: flex;
	flex-direction: column;
	align-items: center;
	width:auto;
	margin: 0;
	padding: 0;
	color: #fff;
}
header .header_inner h1 a {
    display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
	text-decoration: none;
}
header .header_inner h1 a img {
	max-width: 250px;
}
@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: 200px;
}

}

/*	 Obi
---------------------------------------------------------------*/
.obi {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	
	width: 100%;
	max-width: 100%;
	padding: 3px 10px 5px;
	background-color: #111;
	z-index: 100;
}
.obi p {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	color: #fff;
	font-size: 1em;
	line-height: 1.2;
	text-align:left;
}

/*--------------------------------------------------------------
	Grobal Menu
--------------------------------------------------------------*/

/*	 PC/SP Menu
--------------------------------------*/
ul.drawer-menu {
	padding: 0;
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
}
ul.drawer-menu li {
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.drawer-menu li a {
	display: flex;
	width: auto;
	padding: 5px 15px;
	text-decoration: none;
}

/*	 PC Menu
--------------------------------------*/
@media print, screen and (min-width: 979px) {
.drawer-nav {
	width: 80%;
}
ul.drawer-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
ul.drawer-menu li:nth-child(2) {
	width: 20%;
}
ul.drawer-menu li:nth-child(3) {
	width: 30%;
}
ul.drawer-menu li:nth-child(4),
ul.drawer-menu li:nth-child(5) {
	width: 15%;
}
ul.drawer-menu li a {
	color: #fff;
	line-height: 1.2;
}
ul.drawer-menu li:first-child {
	display: none;
}
ul.drawer-menu li a:hover {
	color: #000;
	background-color: #fff;
}
}

/*	 SP Menu
--------------------------------------*/
@media only screen and (max-width: 979px) {
.drawer-hamburger {
	position: relative;
	top: 0px;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
	background-color: #fff;
}

.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before {
	background-color: #000;
}

ul.drawer-menu {
	margin-top: 120px;
}
ul.drawer-menu li {
	display: flex;
	width: 100%;
}
ul.drawer-menu li:first-child a {
	border-top: 1px solid #ccc;
}
ul.drawer-menu li a {
	position:relative;
	display: flex;
	width: 100%;
	padding: 15px 30px 15px 10px;
	color: #000;
	border-bottom: 1px solid #ccc;
}
ul.drawer-menu li 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: "\f105";
}
}

/*	 Button
--------------------------------------*/
@media print, screen and (min-width: 979px) {
/*----- PCの時ボタン非表示 -----*/
.drawer-hamburger {
	display: none;
}
}

/*--------------------------------------------------------------
	MainVisual
--------------------------------------------------------------*/
.MV {
	width: auto;
	max-width: 100%;
	padding:0px;
	margin: 50px auto;
	text-align:center;
}
.MV img {
	width: auto;
}

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

}

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

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

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

.W1100,
.W900,
.W800,
.W600 {
	position: relative;
	width:100%;
	padding: 0px;
	margin: 0px auto 0px;
}
.W1100 {
	max-width: 1100px;
}
.W900 {
	max-width: 900px;
}
.W800 {
	max-width: 800px;
}
.W600 {
	max-width: 600px;
}

/*----- #container / #left-column 共通 -----*/
#contents .inner {
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	width: 100%;
	margin: 0px auto 30px;
}

#left-column {
	width: 80%;
	max-width: 830px;
	padding-bottom: 20px;
}

#left-column .innerBox {
	width: 100%;
	max-width: 95%;
	margin: 0px auto;
}

#right-column {
	width: 20%;
	max-width: 210px;
}


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

.container {
	max-width: 90%;
	padding: 20px 0px 0px;
}

#contents .inner {
	max-width: 90%;
}

#left-column {
	width: 70%;
	max-width: 750px;
	padding-bottom: 20px;
}

#right-column {
	width: 30%;
	max-width: 210px;
}
}

@media only screen and (max-width: 1100px) {
#left-column,
#right-column {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

}

/*--------------------------------------------------------------
	all common contents
--------------------------------------------------------------*/

#contents section {
	padding: 0px;
}

#wrapper .Mt30 {
	margin-top: 30px !important;
}
#wrapper .Mt50 {
	margin-top: 50px !important;
}
#wrapper .Mt80 {
	margin-top: 80px !important;
}
#wrapper .Mt120 {
	margin-top: 120px !important;
}
#wrapper .Mb30 {
	margin-bottom: 30px !important;
}
#wrapper .Mb50 {
	margin-bottom: 50px !important;
}
#wrapper .Mb80 {
	margin-bottom: 80px !important;
}
#wrapper .Mb120 {
	margin-bottom: 120px !important;
}

#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;
}
#contents section p {
	padding-bottom: 10px;
}

@media only screen and (max-width: 767px) {
	
#wrapper .Mt50 {
	margin-top: 30px !important;
}
#wrapper .Mt80 {
	margin-top: 50px !important;
}
#wrapper .Mt120 {
	margin-top: 80px !important;
}
	
#wrapper .Mb50 {
	margin-bottom: 30px !important;
}
#wrapper .Mb80 {
	margin-bottom: 50px !important;
}
#wrapper .Mb120 {
	margin-bottom: 80px !important;
}

#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) {
	
#wrapper .Mt30 {
	margin-top: 15px !important;
}
#wrapper .Mt50 {
	margin-top: 30px !important;
}
#wrapper .Mt80 {
	margin-top: 30px !important;
}
#wrapper .Mt120 {
	margin-top: 50px !important;
}
	
#wrapper .Mb30 {
	margin-bottom: 15px !important;
}
#wrapper .Mb50 {
	margin-bottom: 30px !important;
}
#wrapper .Mb80 {
	margin-bottom: 30px !important;
}
#wrapper .Mb120 {
	margin-bottom: 50px !important;
}

#contents > section > p:first-of-type,
#contents > p:first-of-type,
.container > p:first-of-type,
.container > section > p:first-of-type {
	margin-bottom: 0px;
}
	
}

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

/*	 h1
--------------------------------------*/
/*----- Top-----*/
#contents h1 {
	font-size: 1.8em;
	text-align:center;
}
#contents h1 {
	display: flex;
	flex-wrap: wrap;

	align-items: center;
	justify-content: center;
	width: auto;
	padding: 0;
	margin: 0 0 50px;
	font-style: normal;
	font-weight: 500;
	border: none;
}


/*	 h2
--------------------------------------*/
#contents h2 {
	display: flex;
	margin: 0px auto 50px;
	font-size: 1.7em;
	font-weight: 500;
}

/*	 h3
--------------------------------------*/
h3 {
	position: relative;
	margin: 0px auto 20px;
	font-weight: 500;
	font-size: 1.3em;
}

/*	 h4 h5
--------------------------------------*/
h4 {
	margin: 0px auto 5px;
	font-size: 1.1em;
	font-weight: 500;
}
h5 {
	font-size: 1em;
	font-weight: 500;
}

@media only screen and (max-width: 767px) {
	
/*	 h1
--------------------------------------*/
#contents h1 {
	margin: 0 0 20px;
	font-size: calc( 1em + 7px);
}

/*	 h2
--------------------------------------*/
#contents h2 {
	font-size: calc( 1em + 5px);
	margin: 0px auto 20px;
	line-height: 1.5;
}

/*	 h3
--------------------------------------*/
#contents h3 {
	font-size: calc( 1em + 1px);
}

}

/*--------------------------------------------------------------
	Category Title
---------------------------------------------------------------*/
#wrapper .CategoryTitle {
	display: flex;
	width: 100%;
	height: 120px;
	min-height: 120px;
	margin: 0px;
	line-height: 1.2;
	background-image:url(../images/common/pt2.png);
	background-repeat:repeat;
	background-size:auto;
	background: #900983;
	background: -moz-linear-gradient(left,  #900983 0%, #611986 100%);
	background: -webkit-linear-gradient(left,  #900983 0%,#611986 100%);
	background: linear-gradient(to right,  #900983 0%,#611986 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#900983', endColorstr='#611986',GradientType=1 );
}

#wrapper .CategoryTitle div {
	display: flex;
	width: 100%;
	max-width: 1100px;
	margin: 0px auto;
}
#wrapper .CategoryTitle h1 {
	display: flex;
	align-items: center;
	padding: 0px;
	margin: 0px;
	
	color: #fff;
	font-weight: 400;
	font-size: 2em;
	text-align: left;
	text-shadow: 
	rgba(0,0,0,0.3) 1px 1px 0, rgba(0,0,0,0.3) -1px -1px 0,/*右下、左上*/
	rgba(0,0,0,0.3) -1px 1px 0, rgba(0,0,0,0.3) 1px -1px 0,/*右上、左下*/
	rgba(0,0,0,0.3) 0px 1px 0, rgba(0,0,0,0.3)  0-1px 0,/*右、左*/
	rgba(0,0,0,0.3) -1px 0 0, rgba(0,0,0,0.3) 1px 0 0;/*上、下*/
}

@media print, screen and (min-width: 767px) {
#wrapper .CategoryTitle.column {
	padding-top: 10px;
}
}

@media only screen and (max-width: 1100px) {
#wrapper .CategoryTitle div {
	max-width: 95%;
}
	
}

@media only screen and (max-width: 767px) {
#wrapper .CategoryTitle {
	height: 70px;
	min-height: 70px;
}
#wrapper .CategoryTitle h1 {
	font-size: 1.3em;
}

}

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

#bread {
	position: relative;
	/*top:  80px;*/
	width: 100%;
	max-width: 100%;
	padding: 0px;
	margin: 0px auto;
	background: #efefef;
	z-index: 10;
}

#bread ul {
	position: relative;
	width: 100%;
	max-width: 1100px;
	top: 0;
	left: 0;
	right: 0;
	margin: 0px auto;
	padding: 5px 0px;
	list-style-type: none;
	font-size: 13px;
}
#bread ul li {
	position:relative;
	display: inline-block;
	margin: 0px 15px 0px 3px;
	padding: 0;
	color: #666;
}
#bread ul li br {
	display: none;
}
	#bread ul li:after {
		display: inline-block;
		position: absolute;
		top: 55%;
		right: -5px;
		-webkit-transform: translate(100%, -50%);
		transform: translate(100%, -50%);
		font-size: 0.9em;
		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:1000px) {
#bread ul {
	display:block;
	max-width: 95%;
	
/*-- テキストが長いときスライドさせる --*/
	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%;
}
}

/*--------------------------------------------------------------
	Text Center
---------------------------------------------------------------*/
.Text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	padding: 0;
	margin: 0px;
}
.Text p {
	max-width: 100%;
	padding: 0;
	margin: 0;
}
.Text.ttl p {
	max-width: 850px;
	margin: 0 auto;
	font-size: 1.5em;
	font-family: 'Reggae One', cursive;
	text-align:center;
}
@media only screen and (max-width: 767px) {
.Text.ttl p {
	max-width: 90%;
	margin: 0 auto;
	font-size: 1.1em;
}
}

/*--------------------------------------------------------------
	Time
---------------------------------------------------------------*/
.time {
	position:relative;
	display: flex;
}
.time time {
	display:inline-block;
	margin: 0 0 0 auto;
}

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

.news dt time {
	font-size: 100%;
}

@media print, screen and (min-width: 767px) {
	
.news dl {
	position:relative;
	display:block;
	max-width: 900px;
	margin: 0px auto 30px;
	padding:0px;
}
.news dt,
.news dd {
	padding: 15px 30px;
	margin-bottom: 10px;
}
.news dt:first-of-type,
.news dd:first-of-type {
	padding: 0px 30px 15px;
}

.news dt {
	clear:both;
	float:left;
}
.news dd {
	width: 100%;
	border-bottom: 1px dashed #111;
}
}

@media only screen and (max-width: 1160px) {
.news dl {
	max-width: 95%;
}

}
@media only screen and (max-width: 767px) {
.news dl {
	margin: 0px auto 30px;
	max-width: 95%;
	padding: 0px;
}
.news dt,
.news dd {
	padding: 0px 10px;
}
.news dt {
	margin-bottom: 5px;
	font-weight:bold;
}
.news dd {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dashed #111;
}

}

/*	 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: 95%;
	margin: 50px auto 0px;
}
.newsArticle .txt,
.newsArticle .img {
	display: table-cell;
	vertical-align:top;
}
.newsArticle .txt {
	width:70%;
}
.newsArticle .img {
	width:30%;
	padding-left: 40px;
	text-align:right;
}
.newsArticle .img img {
	width: auto;
	max-width: 300px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

@media 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 print, 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;
	width: 100%;
	max-width: 1000px;
	margin: 0px auto;
}
#contents .anotherNews h1 {
	font-size: 1.5em;
}
.anotherNews .news dl dt, 
.anotherNews .news dl dd {
	margin-bottom: 0px;
}

.anotherNews .news dl dd {
	border: none;
}
.anotherNews .news dl dt:first-of-type,
.anotherNews .news dl dd:first-of-type {
	padding: 15px 30px;
}

.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: 767px) {
.anotherNews {
	max-width: 100%;
	margin: 0px auto;
}
.anotherNews .news dl {
	max-width: 100%;
	padding: 0px;
	margin: 0px auto;
}
.anotherNews .news dl dt:first-of-type {
	padding: 10px 10px 0px;
}
.anotherNews .news dl dd:first-of-type {
	padding: 0px 10px 10px;
}

.anotherNews .news dl dt {
	margin-bottom: 0px;
	padding-top: 10px;
}

}

/*--------------------------------------------------------------
	More Button
--------------------------------------------------------------*/
@media print, screen and (min-width: 767px) {
.grad-trigger,
.grad-btn {
	display: none;
}
}
@media only screen and (max-width: 767px) {
.grad-wrap {
	position: relative;
	margin-bottom: 15px;
}
.grad-wrap + .grad-wrap {
	margin-top: 40px;
}
.grad-btn {
	position: absolute;
	bottom: -50px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: auto;
	margin: 0 auto;
	padding:  5px 0;
	font-size: 0.9em;
	cursor: pointer;
	transition: .2s ease;
	z-index: 2;
}
.grad-btn:hover {
	background: #fff;
	color: #009e8f;
}
.grad-btn .fa {
	margin-right: .5em;
}
.grad-item {
	position: relative;
	overflow: hidden;
	height: 30vw;
}
.grad-item p + p {
	margin-top: 1em;
}
.grad-item::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 50px;
	/*
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
	*/
	z-index: 10;
}
.grad-trigger {
	display: none;
}
.grad-trigger:checked + .grad-btn {
	display: none;
}
.grad-trigger:checked ~ .grad-item {
	height: auto;
}
.grad-trigger:checked ~ .grad-item::before {
	display: none;
}

}

@media only screen and (max-width: 479px) {
.grad-item {
	height: 70vw;
}

}

/*--------------------------------------------------------------
	Loop Images
--------------------------------------------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

_:-ms-lang(x)::-ms-backdrop,
.LoopImg {
	display: -ms-grid;
	overflow: hidden;
}
.LoopImg ul {
	margin: 0;
	padding: 0;
}
.LoopImg ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.LoopImg__wrap {
	display: flex;
	overflow: hidden;
}

.LoopImg__list {
	display: flex;
	list-style: none;
}
.LoopImg__list--vertical  {
	flex-direction: column;
}

.LoopImg__list--left{
	animation :infinity-scroll-left 40s infinite linear 0.5s both;
}
.LoopImg__list--right{
	animation :infinity-scroll-right 40s infinite linear 0.5s both;
}

.LoopImg__item {
	width: calc(100vw / 6);

}
.LoopImg__list--vertical .LoopImg__item {
	min-height: 0%;
}
.LoopImg__item > img{
	width: 100%;
}

.LoopImg__wrap--hover:hover .LoopImg__list--left{
	animation-play-state: paused;
}

@media print, screen and (min-width: 1300px) {
.LoopImg__item {
	width: calc(100vw / 9);

}
}

@media screen and (max-width: 35em){
.LoopImg__item {
	width: calc(100vw / 3);

}
.LoopImg__list--left{
	animation :infinity-scroll-left 30s infinite linear 0.5s both;
}
.LoopImg__list--right{
	animation :infinity-scroll-right 30s infinite linear 0.5s both;
}
}

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

	Reki Tabi
	
===============================================================*/

/* ページリストを非表示 */
.p-keyvisual + .l-section {
	display: none;
}
.p-keyvisual__textbox {
	display: flex;
	justify-content: center;
	max-width: 960px;
	margin: 0 auto 30px;
	text-align:center;
	color: #ea5413;
	font-size: 2em;
	font-weight: bold;
}

@media only screen and (max-width: 767px) {
.p-keyvisual__textbox {
	margin: 20px auto;
	font-size: 1.5em;
}
}


/*--------------------------------------------------------------
	Common Settings
--------------------------------------------------------------*/
#Rekitabi {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-size: 16px;
}
#Rekitabi * {
	box-sizing:border-box;
}

/*	 TEL
--------------------------------------*/
@media print, screen and (min-width: 767px) {
#Rekitabi a[href*="tel:"] {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}
}


/*--------------------------------------------------------------
	Top Page
--------------------------------------------------------------*/
#Rekitabi .BnrGroupe {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	margin: 50px auto 0;
}
#Rekitabi .BnrGroupe > div {
	display: flex;
	width: 45%;
	max-width: 100%;
	margin: 0 auto;
}

/*	 Top Course Banner
--------------------------------------*/
#Rekitabi .TopCourseBnr {
	position:relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	padding: 2vw;
	background-color: #d5e6a8;
}
#Rekitabi .TopCourseBnr.A {
	background-color: #d5e6a8;
}
#Rekitabi .TopCourseBnr.B {
	background-color: #fce9e8;
}

@media only screen and (max-width: 767px) {
#Rekitabi .BnrGroupe {
	flex-direction: column;
	margin: 60px auto 0;
}
#Rekitabi .BnrGroupe > div {
	width: 100%;
}
#Rekitabi .BnrGroupe > div:first-child {
	margin: 0 auto 50px;
}
#Rekitabi .TopCourseBnr {
	padding: 2vw 2vw 5vw;
}

}

/*	 Illust
-------------------*/
/*
#Rekitabi .TopCourseBnr .ttl:before {
	content:"";
	position:absolute;
	bottom: 10px;
	right: 0px;
	width: 120px;
	height: 120px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}
#Rekitabi .TopCourseBnr.A .ttl:before {
	width: 100px;
	height: 100px;
}
#Rekitabi .TopCourseBnr.B .ttl:before {

}
*/

@media only screen and (max-width: 767px) {
#Rekitabi .TopCourseBnr .ttl:before {
	opacity: 0.5;
}
}

/*	 Course
-------------------*/
#Rekitabi .TopCourseBnr .course {
	position:relative;
	display: flex;
	align-items: flex-end;
	line-height: 1;
	margin-bottom: 20px;
	z-index: 10;
}
#Rekitabi .TopCourseBnr .course p {
	position:absolute;
	top: -10px;
	left: -50px;
	display: flex;
	padding: 5px 10px;
	color: #fff;
	line-height: 1;
	font-weight: 900;
	font-size: 1.2em;
}

#Rekitabi .TopCourseBnr.A .course p {
	background-color: #23ac38;
}

#Rekitabi .TopCourseBnr.B .course p {
	font-size: 0.8em;
	background-color: #e60012;
}
@media only screen and (max-width: 767px) {
#Rekitabi .TopCourseBnr .course {
	width: 100%;
}
#Rekitabi .TopCourseBnr .course p {
	position:absolute;
	top: -20px;
	left: 0px;
	justify-content: center;
	width: 100%;
	max-width: 100%;
}
}

/*	 Title
-------------------*/
#Rekitabi .TopCourseBnr .ttl {
	position:relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10px 0px;
	margin-bottom: 20px;
	border-bottom: 2px solid #23ac38;
	z-index: 10;
}
#Rekitabi .TopCourseBnr .ttl {
	line-height: 1.4;
	font-size: 2.1em;
}
#Rekitabi .TopCourseBnr .ttl p {
	display: flex;
	align-items: flex-end;
	font-family: 'Reggae One', cursive;
}

#Rekitabi .TopCourseBnr.A .ttl {
	color: #23ac38;
	text-shadow: 
    #d5e6a8 2px 0px 0px, #d5e6a8 -2px 0px 0px,
    #d5e6a8 0px -2px 0px, #d5e6a8 0px 2px 0px,
    #d5e6a8 2px 2px 0px, #d5e6a8 -2px 2px 0px,
    #d5e6a8 2px -2px 0px, #d5e6a8 -2px -2px 0px,
    #d5e6a8 1px 2px 0px, #d5e6a8 -1px 2px 0px,
    #d5e6a8 1px -2px 0px, #d5e6a8 -1px -2px 0px,
    #d5e6a8 2px 1px 0px, #d5e6a8 -2px 1px 0px,
    #d5e6a8 2px -1px 0px, #d5e6a8 -2px -1px 0px,
    #d5e6a8 1px 1px 0px, #d5e6a8 -1px 1px 0px,
    #d5e6a8 1px -1px 0px, #d5e6a8 -1px -1px 0px;
	
	border-bottom: 2px solid #23ac38;
}
#Rekitabi .TopCourseBnr.B .ttl {
	color: #e60012;
	font-size: 1.6em;
	text-shadow: 
    #fce9e8 2px 0px 0px, #fce9e8 -2px 0px 0px,
    #fce9e8 0px -2px 0px, #fce9e8 0px 2px 0px,
    #fce9e8 2px 2px 0px, #fce9e8 -2px 2px 0px,
    #fce9e8 2px -2px 0px, #fce9e8 -2px -2px 0px,
    #fce9e8 1px 2px 0px, #fce9e8 -1px 2px 0px,
    #fce9e8 1px -2px 0px, #fce9e8 -1px -2px 0px,
    #fce9e8 2px 1px 0px, #fce9e8 -2px 1px 0px,
    #fce9e8 2px -1px 0px, #fce9e8 -2px -1px 0px,
    #fce9e8 1px 1px 0px, #fce9e8 -1px 1px 0px,
    #fce9e8 1px -1px 0px, #fce9e8 -1px -1px 0px;
		
	border-bottom: 2px solid #e60012;
}
@media only screen and (max-width: 767px) {
#Rekitabi .TopCourseBnr .ttl {
	line-height: 1.2;
	font-size: 2em;
}
}

/*	 Text
-------------------*/
#Rekitabi .TopCourseBnr .txt {
	margin-bottom: 20px;
}

/*	 Route
-------------------*/
#Rekitabi .TopCourseBnr .route {
	width: 100%;
	margin: 0 0 30px;
	padding: 30px 2vw;
}
#Rekitabi .TopCourseBnr .route ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}
#Rekitabi .TopCourseBnr .route ul li {
	position:relative;
	display: flex;
	align-items: center;
	/*min-width: 200px;*/
	margin: 0 0 40px;
	padding: 5px 10px;
	list-style: none;
	color: #fff;
	font-weight: 600;
	border-radius: 50px;
}
#Rekitabi .TopCourseBnr .route ul li:after {
	position: absolute;
	bottom: -35px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	text-align:center;
	color: #000;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f309";
}
#Rekitabi .TopCourseBnr .route ul li:last-child {
	margin: 0 0 0px;
}
#Rekitabi .TopCourseBnr .route ul li:last-child:after {
	display: none;
}
#Rekitabi .TopCourseBnr .route ul li i {
	position:absolute;
	top: 50%;
	left: 5px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	display:inline-block;
	width: 25px;
	height: 25px;
	padding: 0;
	text-align:center;
	line-height: 25px;
	color: #23ac38;
	font-weight: bold;
	border-radius: 50px;
	background-color: #fff;
}
#Rekitabi .TopCourseBnr .route ul li span {
	display: inline-block;
	margin-left: 30px;
}

#Rekitabi .TopCourseBnr.A .route {
	border-top: 2px solid #23ac38;
}
#Rekitabi .TopCourseBnr.A .route ul li {
	background-color: #23ac38;
}
#Rekitabi .TopCourseBnr.A .route ul li i {
	color: #23ac38;
}


#Rekitabi .TopCourseBnr.B .route {
	border-top: 2px solid #e60012;
}
#Rekitabi .TopCourseBnr.B .route ul li {
	min-width: 270px;
	background-color: #e60012;
}
#Rekitabi .TopCourseBnr.B .route ul li i {
	color: #e60012;
}

#Rekitabi .TopCourseBnr .route ul li.stay {
	justify-content: center;
	color: #000;
	background-color: #fff;
}
#Rekitabi .TopCourseBnr.A .route ul li.stay,
#Rekitabi .TopCourseBnr.B .route ul li.stay {
	min-width: 190px;
	margin: 0 auto 40px;
}
#Rekitabi .TopCourseBnr .route ul li.stay span {
	margin: 0px;
}
#Rekitabi .TopCourseBnr.A .route ul li.stay {
	border: 2px solid #23ac38;
}
#Rekitabi .TopCourseBnr.B .route ul li.stay {
	border: 2px solid #e60012;
}

@media only screen and (max-width: 767px) {
#Rekitabi .TopCourseBnr.A .route {
	margin: 0px 0 30px;
}
#Rekitabi .TopCourseBnr.A .route .grad-item::before {
	background: -moz-linear-gradient(top,  rgba(213,230,168,0) 0%, rgba(213,230,168,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(213,230,168,0) 0%,rgba(213,230,168,1) 100%);
	background: linear-gradient(to bottom,  rgba(213,230,168,0) 0%,rgba(213,230,168,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d5e6a8', endColorstr='#d5e6a8',GradientType=0 );
}
#Rekitabi .TopCourseBnr.B .route .grad-item::before {
	background: -moz-linear-gradient(top,  rgba(252,233,232,0) 0%, rgba(252,233,232,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(252,233,232,0) 0%,rgba(252,233,232,1) 100%);
	background: linear-gradient(to bottom,  rgba(252,233,232,0) 0%,rgba(252,233,232,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fce9e8', endColorstr='#fce9e8',GradientType=0 );
}

}

/*	 Button
-------------------*/
#Rekitabi .TopCourseBnr .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	margin: auto 0 0 0;
}
#Rekitabi .TopCourseBnr .btn a {
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	padding: 5px 30px 5px 20px;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.2;
	text-decoration: none;
	background-color: #fff;
}
#Rekitabi .TopCourseBnr .btn a:after {
	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: "\f105";
}

#Rekitabi .TopCourseBnr.A .btn a {
	color: #23ac39;
	border: 2px solid #23ac39;
}
#Rekitabi .TopCourseBnr.A .btn a:hover {
	color: #fff;
	background-color: #23ac39;
}
#Rekitabi .TopCourseBnr.B .btn a {
	color: #e60012;
	border: 2px solid #e60012;
}
#Rekitabi .TopCourseBnr.B .btn a:hover {
	color: #fff;
	background-color: #e60012;
}

/*	 About City Uruma Okinawa
--------------------------------------*/
#Rekitabi .AboutCity {
	display: flex;
	width: 100%;
	max-width: 100%;
	margin: 100px auto 50px;
}
#Rekitabi .AboutCity .Box {
	position:relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	width: 45%;
	padding: 5vw 2vw 2vw;
	margin: 0px auto;
	border: 1px solid #ea5514;
}
#Rekitabi .AboutCity .Box h3 {
	position: absolute;
	top: -15px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	
	display: flex;
	justify-content: center;
	min-width: 250px;
	padding: 3px 30px;
	margin: 0 auto 30px;
	color: #fff;
	border-radius: 50px;
	background-color: #ea5514;
}
#Rekitabi .AboutCity .Box dl {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	
	width: 100%;
	max-width: 100%;
	margin: 0px auto;
}
#Rekitabi .AboutCity .Box dl dt,
#Rekitabi .AboutCity .Box dl dd {
	margin: 0 0 20px;
}

#Rekitabi .AboutCity .Box dl dt {
	display: flex;
	justify-content: center;
	width: 100%;
	color: #ea5514;
	font-weight: 500;
	border: 1px solid #ea5514;
}
#Rekitabi .AboutCity .Box dl dd {
	display: flex;
	width: 100%;
	padding-left: 10px;
}
#Rekitabi .AboutCity .Box dl dd:nth-of-type(3) {
	width: 100%;
	padding: 0;
}
#Rekitabi .AboutCity .Box dl dd > ul {
	margin-left: 30px;
}

@media only screen and (max-width: 767px) {
#Rekitabi .AboutCity {
	flex-direction: column;
	margin: 50px auto 30px;
}
	
#Rekitabi .AboutCity .Box {
	width: 100%;
	padding: 50px 2vw 2vw;
	margin-bottom: 30px;
}
#Rekitabi .AboutCity .Box:last-child {
	margin-bottom: 0;
}
#Rekitabi .AboutCity .Box dl {
	flex-direction: column;
	align-items: flex-start;
}
#Rekitabi .AboutCity .Box dl dt {
	margin: 0 auto 20px;
}
#Rekitabi .AboutCity .Box dl dd {
	width: 100%;
	padding-left: 0px;
}

}

/*--------------------------------------------------------------
	Page A / B
--------------------------------------------------------------*/

/*	 Title
--------------------------------------*/
#Rekitabi h2 {
	display: flex;
	justify-content: center;
	border: none;
}
#Rekitabi h2:not(#Rekitabi [class*=c-]):not(#Rekitabi [class*=p-]):after {
	display: none;
}

/*	 Background
--------------------------------------*/
#Rekitabi .BG {
	padding: 2vw;
	margin-bottom: 200px;
	overflow:hidden;
}
#Rekitabi .BG.A {
	background-color:#d5e6a8;
}
#Rekitabi .BG.B {
	background-color: #FCC;
}
@media only screen and (max-width: 767px) {
#Rekitabi .BG {
	padding: 4vw 4vw 2vw;
	margin-bottom: 50px;
}
}

/*	 Title
--------------------------------------*/
#Rekitabi .Title {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px auto;
}
#Rekitabi .Title p {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
	color: #fff;
}
#Rekitabi .Title p span:first-child {
	margin-bottom: 20px;
	font-weight: 900;
	padding: 0 10px;
	font-size: 1.3em;
}
#Rekitabi .Title p span:nth-child(2) {
	font-family: 'Reggae One', cursive;
}

/*
#Rekitabi .Title p span:nth-child(2) small {
	font-size: 70%;
}

*/
/*	 A
-------------------*/
#Rekitabi .A .Title p span:first-child {
	background-color: #22ac38;
}
#Rekitabi .A .Title p span:nth-child(2) {
	font-size: 2em;
	
	text-shadow:
	#22ac38 0px 3px,
	#22ac38 0px 3px,
	#22ac38 1px 3px,
	#22ac38 1px 1px 0, #22ac38 -1px -1px 0,
	#22ac38 -1px 1px 0, #22ac38 1px -1px 0,
	#22ac38 0px 1px 0, #22ac38  0-1px 0,
	#22ac38 -1px 0 0, #22ac38 1px 0 0;
}

#Rekitabi .A .Title span:first-child {
	max-width: 400px;
}

/*	 B
-------------------*/
#Rekitabi .B .Title p span:first-child {
	background-color: #e60012;
}
#Rekitabi .B .Title p span:nth-child(2) {
	font-size: 1.3em;

	text-shadow:
	#e60012 0px 3px,
	#e60012 0px 3px,
	#e60012 1px 3px,
	#e60012 1px 1px 0, #e60012 -1px -1px 0,
	#e60012 -1px 1px 0, #e60012 1px -1px 0,
	#e60012 0px 1px 0, #e60012  0-1px 0,
	#e60012 -1px 0 0, #e60012 1px 0 0;
}

@media only screen and (max-width: 767px) {
#Rekitabi .Title,
#Rekitabi .Title p {
	flex-direction: column;
	margin: 0px;
}
#Rekitabi .Title span:first-child,
#Rekitabi .A .Title span:first-child,
#Rekitabi .B .Title span:first-child {
	max-width: 100%;
	margin-right: 0px;
}
#Rekitabi .Title p span:first-child {
	margin: 0px 0px 15px;
	font-size: 1.2em;
	line-height: 1.5;
}
#Rekitabi .Title p span:nth-child(2) {
	min-width: auto;
	margin: 0px auto 10px;
	font-size: 2em;
	line-height: 1.3;
}
}

/*	 Route
--------------------------------------*/
#Rekitabi .Route {
	position:relative;
	margin: 5vw 0px;
	z-index: 1;
}

#Rekitabi .Route:after {
	position:absolute;
	top: 0;
	left: calc( 22% - 20px );
	content: "";
	display: flex;
	justify-content: center;
	width: 40px;
	height: calc( 100% - 200px );
	background-color: #fff;
	z-index: -2;
}

@media print, screen and (min-width: 1300px) {
#Rekitabi .Route:after {
	left: calc( 21% - 20px );
}
}

@media only screen and (max-width: 767px) {
#Rekitabi .Route:after {
	top: 50px;
	left: calc( 50% - 15px );
	width: 30px;
	height: calc( 100% - 600px );
	background-color: rgba(255,255,255,0.6);
}
}

/*	 Layout
-------------------*/
#Rekitabi .Route .Box,
#Rekitabi .Route .Box2 {
	margin: 50px auto 30px;
}
#Rekitabi .Route .Box:first-child,
#Rekitabi .Route .Box2:first-child {
	margin: 0px auto 20px;
}
#Rekitabi .Route .Box .ttl,
#Rekitabi .Route .Box2 .ttl {
	font-size: 1.5em;
	font-weight: bold;
}
#Rekitabi .A .Route .Box .ttl,
#Rekitabi .A .Route .Box2 .ttl {
	color: #23ac38;
}
#Rekitabi .B .Route .Box .ttl,
#Rekitabi .B .Route .Box2 .ttl {
	color: #e60013;
}

@media print, screen and (min-width: 767px) {
#Rekitabi .Route .Box,
#Rekitabi .Route .Box2 {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	
	/*IE*/
	display: -ms-grid;
	-ms-grid-columns: 1fr 1fr;
	-ms-grid-rows: 0.1fr 0.4fr;
}

#Rekitabi .Route .Box {
	grid-template-rows: 0.1fr 1fr;
}
#Rekitabi .Route .Box2 {
	grid-template-rows: 0.1fr;
}

#Rekitabi .Route .Box .ttl,
#Rekitabi .Route .Box2 .ttl {
	grid-area: 1 / 2 / 2 / 3;
	
	/*IE*/
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
}
#Rekitabi .Route .Box .img,
#Rekitabi .Route .Box2 .img {
	grid-area: 1 / 1 / 3 / 2;
	
	/*IE*/
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
}
#Rekitabi .Route .Box .detail,
#Rekitabi .Route .Box2 .detail {
	grid-area: 2 / 2 / 3 / 3;
	
	/*IE*/
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
}
#Rekitabi .Route .Box2 .column {
	grid-area: 3 / 2 / 4 / 3;
	
	/*IE*/
	-ms-grid-row: 3;
	-ms-grid-row-span: 1;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
}
#Rekitabi .Route .Box2 .time {
	grid-area: 3 / 1 / 4 / 2;
	
	/*IE*/
	-ms-grid-row: 3;
	-ms-grid-row-span: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
}

#Rekitabi .Route .Box .img,
#Rekitabi .Route .Box2 .img {
	margin-right: 4vw;
}
}

@media only screen and (max-width: 767px) {
#Rekitabi .Route .Box .img p,
#Rekitabi .Route .Box2 .img p {
	text-align:right;
	font-size: 0.85em;
	padding: 0px 0 20px;
	margin: 0px;
}
}

/*	 Detail
--------------------------------------*/
#Rekitabi .Route .Box .detail p,
#Rekitabi .Route .Box2 .detail p {
	margin-bottom: 20px;
}

/*	 Column
--------------------------------------*/
#Rekitabi .Route .Column {
	position: relative;
	padding: 2vw;
	margin: 50px auto 0px;
	border: 5px solid #c8a063;
	background-color: #f7ecdc;
}
#Rekitabi .Route .Column:before {
	position: absolute;
	top: -15px;
	left: 0;
	right: 0;
	margin: 0 auto;
	content: "Kolom";
	display: inline-block;
	width: 80px;
	padding: 0px 10px;
	color: #fff;
	text-align:center;
	font-weight:700;
	background-color: #c30e23;
}
#Rekitabi .Route .Column h4 {
	position:relative;
	display: block;
	text-align:center;
	padding: 0 0 20px;
	margin: 20px auto 15px;
	font-family: 'Noto Serif JP', serif;
	font-size: 1.5em;
}
#Rekitabi .Route .Column h4:after {
	content: "";
	position:absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15px;
	background-repeat:repeat-x;
	background-position: 0% 100%;
	background-size: 25px auto;
}
#Rekitabi .Route .Column h4 span {
	color: #c30e23;
}

@media only screen and (max-width: 767px) {
#Rekitabi .Route .Column h4 {
	font-size: 1.2em;
}
}


/*	 Time
--------------------------------------*/
#Rekitabi .Route .Time {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc( 50% - 4vw );
	height: 100%;
}
#Rekitabi .Route .Box2 .time .Time {
	width: calc( 100% - 4vw );
}

#Rekitabi .Route .Time span {
	position: relative;
	top: 0px;
	display: flex;
	justify-content: center;
	padding: 5px 20px;
	color: #fff;
	font-weight:bold;
	border-radius: 50px;
}

#Rekitabi .A .Route .Time span {
	background-color: #23ac38;
}

#Rekitabi .B .Route .Time span {
	background-color: #e60013;
}

#Rekitabi .Route .Time span:before {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: inline-block;
	width: 20px;
	height: 3px;
	font-family: "Font Awesome 5 Free";
	font-size: 30px;
	font-weight: 900;
	content: "\f107";
}

#Rekitabi .A .Route .Time span:before {
	color: #23ac38;
}

#Rekitabi .B .Route .Time span:before {
	color: #e60013;
}

@media only screen and (max-width: 767px) {
#Rekitabi .Route .Time {
	width: 100%;
	margin: 30px auto 10px;
}
#Rekitabi .Route .Time span {
	top: 0px;
}

}

/*	 Illust
--------------------------------------*/
#Rekitabi .Illust {
	position:relative;
}
#Rekitabi .Illust img {
	position:absolute;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 90px;
}
#Rekitabi .Illust .man01 img {
	top: -80px;
}
#Rekitabi .Illust .man02 img {
	top: -100px;
	max-width: 130px;
}
#Rekitabi .Illust .man03 img {
	top: -100px;
	right: 20px;
	max-height: 180px;
}
#Rekitabi .Illust .man04 img {
	top: -80px;
	right: 20px;
	max-height: 150px;
}
#Rekitabi .Illust .family01 img,
#Rekitabi .Illust .eisa01 img {
	top: -70px;
	max-width: 170px;
}

#Rekitabi .Illust .flower01 img {
	top: 0px;
}
#Rekitabi .Illust .hubby01 img {
	top: -70px;
}
#Rekitabi .Illust .flower01 img,
#Rekitabi .Illust .hubby01 img {
	max-width: 120px;
}

@media only screen and (max-width: 767px) {
#Rekitabi .Illust .man01 img {
	top: -60px;
	max-width: 60px;
}
#Rekitabi .Illust .man02 img {
	top: -50px;
	max-width: 90px;
}
#Rekitabi .Illust .man03 img {
	top: -70px;
	right: -20px;
	max-height: 120px;
}
#Rekitabi .Illust .man04 img {
	top: -50px;
	right: -20px;
	max-height: 110px;
}


#Rekitabi .Illust .family01 img,
#Rekitabi .Illust .eisa01 img {
	top: -20px;
	max-width: 100px;
}
#Rekitabi .Illust .flower01 img {
	max-width: 100px;
}
#Rekitabi .Illust .hubby01 img {
	top: -50px;
	max-width: 70px;
}

}

/*	 BtnGroupe
--------------------------------------*/
#Rekitabi .BtnGroupe {
	display: flex;
	justify-content: center;
}
#Rekitabi .BtnGroupe .btn {
	display: flex;
	margin: 0px 20px;
}
#Rekitabi .BtnGroupe .btn a {
	position: relative;
	display: flex;
	padding: 3px 40px 3px 15px;
	text-decoration: none;
	color: #ee858c;
	font-weight: 500;
	border: 2px solid #ee858c;
	background-color: #fff;
}
#Rekitabi .BtnGroupe .btn a:after {
	position: absolute;
	top: 50%;
	right: 10px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 120%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f061";
}
#Rekitabi .BtnGroupe.A .btn a {
	color: #8ec31f;
	border: 2px solid #8ec31f;
}
#Rekitabi .BtnGroupe.B .btn a {
	color: #ee858c;
	border: 2px solid #ee858c;
}
@media only screen and (max-width: 767px) {
#Rekitabi .BtnGroupe {
	flex-direction: column;
	align-items: center;
}
#Rekitabi .BtnGroupe .btn {
	margin: 0px auto 20px;
}
#Rekitabi .BtnGroupe .btn a {
	min-width: 200px;
}
}

/*	 Illust CMS
--------------------------------------*/
#Rekitabi .Route .Column h4:after {
	background-image: url(../images/line.svg);
}
.CourseBnr.A a:after {
	background-image:url(../images/i-hubby01.svg);
}
}


#Rekitabi .Route .Column h4:after {
	background-image: url(../images/line.svg);
}

.CourseBnr.B a:after {
	background-image:url(../images/i-family01.svg);
}
@media only screen and (max-width: 767px) {
.CourseBnr.B a:before {
	background-image:url(../images/i-family02.svg);
}
.CourseBnr.B a:after {
	background-image:url(../images/i-family03.svg);
}
	
}


.TopCourseBnr.A .ttl:before {
	background-image: url(../images/i-hubby01.svg);
}
.TopCourseBnr.B .ttl:before {
	background-image: url(../images/i-family01.svg);
}

@media only screen and (max-width: 767px) {
.CourseBnr.B a:before {
	background-image:url(../images/i-family02.svg);
}
.CourseBnr.B a:after {
	background-image:url(../images/i-family03.svg);
}
	
}


/*	 Map
--------------------------------------*/
#Rekitabi .Map {
	margin: 100px auto 30px;
}
#Rekitabi .Map .ttl {
	margin: 0px 0 30px;
}
#Rekitabi .Map .ttl {
	display: flex;
}
#Rekitabi .Map .ttl .ribon {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: calc( 100% - 40px );
	padding: 10px 70px 10px 30px;
	color: #FFF;
	background: #ea5514;
}
#Rekitabi .Map .ttl .ribon:after {
	position:absolute;
	top: 0;
	right: -40px;
	content: "";
	display: flex;
	width: 50px;
	height: 100%;
	background-image:url(../images/ribon.svg);
	background-position: 100% 0%;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

#Rekitabi .Map .ttl .ribon p {
	display: flex;
	width: auto;
	font-weight: 900;
	line-height: 1;
}
#Rekitabi .Map .ttl .ribon p:first-child {
	margin-bottom: 10px;
	font-size: 3em;
}
#Rekitabi .Map .ttl .ribon p:nth-child(2) {
	font-size: 1.3em;
}

/*	 Image
--------------------------------------*/
#Rekitabi .Map .img img {
	width: 100%;
	max-width: 100%;
	border: 1px solid #fff;
}

/*	 Route
--------------------------------------*/
#Rekitabi .Map .route {
	font-weight: 600;
}
#Rekitabi .Map .route span {
	position:relative;
	padding-left: 20px;
	margin-right: 30px;
}
#Rekitabi .Map .route span:before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0px;
	width: 15px;
	height: 5px;
}
#Rekitabi .Map .route span.A:before {
	background-color:#23ac38;
}
#Rekitabi .Map .route span.B:before {
	background-color:#e60012;
}

@media only screen and (max-width: 767px) {
#Rekitabi .Map {
	margin: 50px auto;
}
#Rekitabi .Map .route span {
	display: block;
}

#Rekitabi .Map .ttl .ribon {
	padding: 10px;
}
#Rekitabi .Map .ttl .ribon p:first-child {
	font-size: 1.7em;
}
#Rekitabi .Map .ttl .ribon p:nth-child(2) {
	font-size: 1em;
}

}

/*	 Course Banner
--------------------------------------*/
#Rekitabi .CourseBnr {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	margin: 100px auto 100px;
}
#Rekitabi .CourseBnr a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width: auto;
	min-width: 90%;
	padding: 0vw 1vw;
	text-decoration: none;
	background-color: #fff;
}
#Rekitabi .CourseBnr a:after {
	content:"";
	position:absolute;
	top: -80px;
	right: 0;
	width: 150px;
	height: 100px;
	background-position: 80% 100%;
	background-repeat: no-repeat;
	background-size: contain;
}
#Rekitabi .CourseBnr a .ttl {
	display: block;
	padding: 0px 15px;
	margin: 2vw 0 15px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 900;
	background-color: #66C;
}
#Rekitabi .CourseBnr a .course {
	display: block;
	font-size: 1.3em;
	font-family: 'Reggae One', cursive;
}
#Rekitabi .CourseBnr a .course small {
	font-size: 60%;
}
#Rekitabi .CourseBnr a .btn {
	position:relative;
	display: block;
	justify-content: center;
	align-items: center;
	width: auto;
	margin: 1vw 0 2vw;
	padding: 0px 30px 0px 20px;
	font-weight: bold;
	border-radius: 50px;
}
#Rekitabi .CourseBnr a .btn:after {
	position: absolute;
	top: 50%;
	right: 10px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 120%;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
}

/*	 A
-------------------*/
#Rekitabi .CourseBnr.A a {
	color: #23ac39;
	border: 2px solid #23ac39;
	background-color: #edf6d5;
}
#Rekitabi .CourseBnr.A a:hover {
	background-color: #fff;
}
#Rekitabi .CourseBnr.A a .ttl {
	background-color: #23ac39;
}
#Rekitabi .CourseBnr.A a .btn {
	color: #23ac39;
	border: 2px solid #23ac39;
}

/*	 B
-------------------*/
#Rekitabi .CourseBnr.B a {
	color: #e60012;
	border: 2px solid #e60012;
	background-color: #fce9e8;
}
#Rekitabi .CourseBnr.B a:hover {
	background-color: #fff;
}
#Rekitabi .CourseBnr.B a .ttl {
	background-color: #e60012;
}
#Rekitabi .CourseBnr.B a .btn {
	color: #e60012;
	border: 2px solid #e60012;
}

@media only screen and (max-width: 767px) {
#Rekitabi .CourseBnr {
	flex-direction: column;
	align-items: center;
	margin: 0px auto 60px;
}
#Rekitabi .CourseBnr a {
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 80%;
	margin: 0 auto;
	padding: 3vw 2vw;
}
#Rekitabi .CourseBnr a:before,
#Rekitabi .CourseBnr a:after {
	content:"";
	position:absolute;
	top: auto;
	bottom: 0px;
	background-repeat: no-repeat;
	background-size: contain;
}
#Rekitabi .CourseBnr a .ttl {
	padding: 5px 10px;
	margin: 0 auto 10px;
	line-height: 1.2;
	font-size: 1em;
}
#Rekitabi .CourseBnr a .course {
	font-size: 1.5em;
	text-align:center;
}


/*	 A
-------------------*/
#Rekitabi .CourseBnr.A a:after {
	right: -25px;
	width: 70px;
	height: 70px;
	background-position: 100% 100%;
}

/*	 B
-------------------*/
#Rekitabi .CourseBnr.B a:before {
	content: "";
	position:absolute;
	left: -20px;
	width: 45px;
	height: 75px;
	background-position: 0% 100%;
}
#Rekitabi .CourseBnr.B a:after {
	right: -25px;
	width: 50px;
	height: 80px;
	background-position: 0% 100%;
}

#Rekitabi .CourseBnr a .ttl {
	width: auto;
}
#Rekitabi .CourseBnr a .course {
	width: auto;
	margin: 0px auto 20px;
	line-height: 1;
}
#Rekitabi .CourseBnr a .btn {
	width: auto;
	padding: 0px 30px 0px 20px;
}

}

/*	 Reccomend Tours
--------------------------------------*/
#Rekitabi .Tours {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	margin: 0 auto 100px;
}
#Rekitabi .Tours .Block {
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 100%;
	margin: 0 auto 100px;
}
#Rekitabi .Tours .Block:last-child {
	margin: 0 auto 0px;
}
#Rekitabi .Tours .Block .Detail,
#Rekitabi .Tours .Block .Box {
	width: 43%;
	max-width: 100%;
	margin: 0 auto;
}
#Rekitabi .Tours .Block h3 {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 5px 10px;
	margin: 0 0 20px;
	font-size: 1.3em;
	color: #ea5413;
	border-top: 1px solid #ea5413;
	border-bottom: 1px solid #ea5413;
}

#Rekitabi .Tours .Block dl {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	
	width: 100%;
	max-width: 100%;
	margin: 30px auto;
}
#Rekitabi .Tours .Block dl dt,
#Rekitabi .Tours .Block dl dd {
	margin: 0 0 20px;
}

#Rekitabi .Tours .Block dl dt {
	display: flex;
	justify-content: center;
	width: 130px;
	color: #ea5514;
	font-weight: 500;
	border: 1px solid #ea5514;
}
#Rekitabi .Tours .Block dl dd {
	display: flex;
	width: calc( 100% - 130px );
	padding-left: 10px;
}

/*	 Reccomend Tours Box
--------------------------------------*/
#Rekitabi .Tours .Block .Box {
	margin-top: 60px;
	padding: 2vw;
	background-color: #fffcd1;
}

/*	 Title
-------------------*/
#Rekitabi .Tours .Box .ttl {
	margin-bottom: 10px;
	font-weight: 600;
	text-align:center;
}
#Rekitabi .Tours .Box .ttl > span {
	color: #ea5413;
	font-size: 120%;
}

/*	 Images
-------------------*/
#Rekitabi .Tours .Box .img {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}
#Rekitabi .Tours .Box .img span {
	display: flex;
	width: 100%;
	height: 150px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size:cover;
}

/*	 Detail
-------------------*/
#Rekitabi .Tours .Box .detail .member {
	display: inline-block;
	padding: 5px 10px;
	color: #ea5413;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid #ea5413;
}
#Rekitabi .Tours .Box .detail > p {
	font-size: 0.9em;
}

/*	 Button
-------------------*/
#Rekitabi .Tours .Box .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px auto 10px;
}
#Rekitabi .Tours .Box .btn a {
	position:relative;
	display: flex;
	padding: 3px 25px 3px 15px;
	text-decoration: none;
	color: #fff;
	line-height: 1.3;
	font-size: 0.9em;
	font-weight: 500;
	border-radius: 50px;
	border: 1px solid #ea5413;
	background-color: #ea5413;
}
#Rekitabi .Tours .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: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
}
#Rekitabi .Tours .Box .btn a:hover {
	color: #ea5413;
	background-color: #fff;
}

@media only screen and (max-width: 767px) {
#Rekitabi .Tours {
	margin: 0 auto 0px;
}
#Rekitabi .Tours .Block {
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
	margin: 0 auto 30px;
}
#Rekitabi .Tours .Block .Box {
	width: 100%;
}
#Rekitabi .Tours .Block:last-child .Box {
	border-bottom: none;
}
#Rekitabi .Tours .Block .Detail,
#Rekitabi .Tours .Block .Box {
	width: 100%;
	max-width: 100%;
	margin: 0;
}
}

/*	 Hotel List
--------------------------------------*/
#Rekitabi .HotelList ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
#Rekitabi .HotelList ul li {
	display: flex;
	flex-direction: column;
	width: calc( 100% / 3 );
	margin: 0 0 50px;
	padding: 0 0 0 15px;
	list-style: none;
	border-left: 3px solid #800931;
}
#Rekitabi .HotelList ul li h4 {
	margin: 0;
	padding: 0;
}
#Rekitabi .HotelList ul li p {
	margin: 0;
	padding: 0;
}
@media only screen and (max-width: 767px) {
#Rekitabi .HotelList ul li {
	width: 100%;
	margin: 0 0 30px;
}
}


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

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

footer {
	position:relative;
    width: 100%;
	margin: 0px auto;
	color: #000;
	border-top: 2px dashed #ccc;
	background: #fff;
}

footer #footer-inner {
	position:relative;
    display: flex;
    flex-wrap: wrap;
	align-items: flex-start;
    justify-content: space-between;
	z-index: 100;
}
footer #footer-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 50px 0px 20px;
}


#wrapper footer a {
	color: #000;
}

/*--------------------------------------------------------------
	Address / text
--------------------------------------------------------------*/
footer #footer-inner address {
	width: 45%;
}

/*--------------------------------------------------------------
	Sitemap
--------------------------------------------------------------*/
footer #footer-inner .footerlink {
	display:flex;
	width: 55%;
	margin-left:auto;
}
footer #footer-inner .footerlink ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
}
footer #footer-inner .footerlink ul li {
	width: 50%;
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}
footer #footer-inner .footerlink ul li a {
	position:relative;
	display:inline-block;
	padding-left: 20px;

}
footer #footer-inner .footerlink ul li a:after {
	position: absolute;
	top: 3px;
	left: 0px;
	display: inline-block;
	width: auto;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 90%;
	content: "\f0da";
}

/*--------------------------------------------------------------
	Copyright
--------------------------------------------------------------*/
#copyright {
	padding: 8px;
	margin: 0 auto;
	
	font-size: 90%;
	text-align:center;
}

@media only screen and (max-width: 1000px) {
footer #footer-inner {
	max-width: 95%;
}
}

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

/*--------------------------------------------------------------
	Sitemap
--------------------------------------------------------------*/
footer #footer-inner .footerlink ul {
	justify-content: flex-start;
}
footer #footer-inner .footerlink ul li {
	width: auto;
	padding: 0;
	margin-right: 40px;
	margin-bottom: 20px;
}
}


@media only screen and (max-width: 767px) {
footer {
	border-top: 2px solid #ccc;
}
footer #footer-inner {
	max-width: 100%;
	padding: 0px;
}

/*--------------------------------------------------------------
	Address / text
--------------------------------------------------------------*/
footer #footer-inner address {
	order: 2;
	width: 100%;
	max-width: 95%;
	margin: 0 auto 30px;
}
footer #footer-inner address h2 {
	width: auto;
	margin: 0 auto;
	text-align:center;
}
footer #footer-inner address p .SPbr {
	margin-right: 15px;
}
footer #footer-inner address .tel-link a {
	color: #86d8ff;
}

/*--------------------------------------------------------------
	Sitemap
--------------------------------------------------------------*/
footer #footer-inner .footerlink {
	order: 1;
	display:flex;
	width: 100%;
	margin-left: 0;
	margin-bottom: 40px;
	margin-bottom: 20px;
}

footer #footer-inner .footerlink ul {
	justify-content: flex-start;
}
footer #footer-inner .footerlink ul li {
	margin: 0px;
}

footer #footer-inner .footerlink ul li a {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 10px 20px 10px 10px;
	font-size: 0.9em;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}
footer #footer-inner .footerlink ul li:nth-child(2n+1) a {
	border-right: 1px solid rgba(0,0,0,0.2);
}
footer #footer-inner .footerlink ul li a:after {
	top: 50%;
	left: auto;
	right: 10px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family:"Line Awesome Free","Line Awesome Brands";
	content: "\f105";
}
footer #footer-inner .footerlink ul li a br {
	display: none;
}


#copyright {
	font-size: 0.8em;
}
}

/*--------------------------------------------------------------
	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: -50px 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;
}

}