@charset "UTF-8";

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height:0;
	min-width : 0;
}

a{
	color:inherit;
	text-decoration: none;
	transition: 0.3s;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	outline: none;
}

.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb80{margin-bottom: 80px;}
.mb100{margin-bottom: 100px;}
.mb200{margin-bottom: 200px;}

.normal{font-weight: normal;}
.small{font-size: 8pt;}
.red{color: #CC0000;}

#text{
	display: none;
}


/* SP版ベースに構築 ---------------------------------------- */

/* 共通設定 */
.sp_none{
	display: none;
}

html {
	visibility: hidden;
}
html.wf-active {
	visibility: visible;
}

.loading{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	overflow: hidden;
}

.loading_logo{
	width: 100px;
	height: 86px;
	animation: flash 3s linear infinite;
}

@keyframes flash {
  0% {opacity: 1;}
	20% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

.loading_logo img{
	width: 100%;
	height: 100%;
}

html{
	font-size: 62.5%;
	height: 100%;
	width: 100%;
}

body {
	font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Noto Sans JP',
	'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	font-size: 1.2rem;
	font-weight: 400;
	background-color: #fff;
	color: #111;
	line-height: 2.0;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	font-feature-settings : "palt";
	letter-spacing: 0.03em;
	width: 100vw;
	min-width: 100vw;
}

.bodyfixed{
		position: fixed;
		width: 100%;
		height: 100%;
}

p{
	font-size: 1.2rem;
}

h2{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	letter-spacing: 0.1em;
	font-size: 2.4rem;
	margin-bottom: 30px;
	text-align: center;
	color: #127501;
}

.link {
	border: 1px solid #111;
	height: 50px;
	line-height: 50px;
	position: relative;
	margin: 30px 0;
}

.link a{
	text-align: center;
	display: block;
	height: 50px;
	line-height: 50px;
	background-image: url(../img/cursol.svg);
	background-position: top 18px right 15px;
	background-repeat: no-repeat;
	background-size: 41px 7px;
}

.link a:before, .link a:after, .link:before, .link:after{
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: #e5e5e5;
	position: absolute;
	top: -2px;
	left: -2px;
}

.link a:after{
	left: auto;
	right: -2px;
}

.link:before, .link:after{
	top: auto;
	bottom: -2px;
	left: -2px;
}

.link:after{
	left: auto;
	right: -2px;
}

.contents_wrap{
	width: 100vw;
    overflow-x: hidden;
	animation: dummy 2s ease 0s 1 normal;
	-webkit-animation: dummy 2s ease 0s 1 normal;
}

@keyframes body_fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes body_fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.firstview{
	width: 100vw;
}

#slide_number{
	position: absolute;
	top: 20px;
	z-index: 90;
}

#slide_number a{
	display: block;
	color: rgba(255,255,255,0.5);
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.4rem;
	font-weight: bold;
}

#slide_number a:before{
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	background-color: transparent;
	margin-right: 5px;
	vertical-align: 5px;
}

#slide_number a.active{
	color: rgba(255,255,255,1.0);
}

#slide_number a.active:before{
	background-color: rgba(255,255,255,0.8);
}

.logowrap{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 1;
}
	
.logowrap img{
	width: 70%;
	height: auto;
	display: block;
	margin: 0 auto;
	opacity: 0;
    animation: topslidein 0.5s ease 1.5s 1 forwards;
}

.logowrap img.logopc{
	display: none;
}

@keyframes topslidein {
    100% {opacity: 1}
}

@-webkit-keyframes topslidein {
    100% {opacity: 1}
}

.scroll{
	position: absolute;
	bottom: 20px;
	left: 7.5%;
	width: 7px;
	height: 41px;
	z-index: 90;
}

.scroll img{
	width: 100%;
	height: 100%;
}

.scroll a{
	display: block;
}


.about{
	background-color: #e5e5e5;
	padding-top: 100px;
	padding-bottom: 100px;
}

.about h1 {
	width: 210px;
	height: 60px;
	margin: 0 auto;
	margin-bottom: 35px;
}

.about h1 img{
	width: 100%;
	height: 100%;
}

.about p{
	text-align: center;
}

.contents{
	width: 100vw;
    max-width: 100vw;
	background-color: #fff;
	padding-top: 100px;
}

.contents section{
	width: 90%;
	margin: 0 auto;
}

.contents article{
	padding-bottom: 100px;
	padding-top: 100px;
}

.slider{
	background-color: transparent;
	position: relative;
}

.slider:before{
	border-width: 15px 15px 0 0;
	border-color: #fff transparent transparent;
	top: 0;
	left: 0;
}

.info{
	background-color: #e5e5e5;
	padding-top: 60px;
	padding-left: 7.5%;
	padding-right: 7.5%;
	padding-bottom: 50px;
	position: relative;
	margin-top: -7px;
}

.info:after{
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #fff;
	right: 0;
	bottom: 0;
}

.slider:before, .info:after{
	content: "";
	display: inline;
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	z-index: 2;
}

.copy{
	text-align: justify;
	text-justify: inter-ideograph;
}

.info dl dt{
	background-color: rgba(0,0,0,0.2);
	color: #fff;
	line-height: 1.3;
	width: 40px;
	text-align: center;
	display: table;
	margin-bottom: 5px;
	margin-top: 25px;
}

.info dl dt span{
	display: table-cell;
	-moz-text-align-last: justify;
	text-align-last: justify;
}

.info dl dd{
	line-height: 1.8;
	text-align: justify;
    text-justify: inter-ideograph;
}

h3.text{
	line-height: 20px;
	height: 20px;
	background-color: #fff;
	display: inline-block;
	margin-bottom: 20px;
	letter-spacing: 0.2em;
	font-size: 1.3rem;
	font-weight: 600;
}

h3.logo{
	margin: 0px auto 50px auto;
}

h3.logo img{
	width: 100%;
	height: 100%;
}

.zen h3.logo{
	width: 141px;
	height: 50px;
}

.bar h3.logo{
	width: 127px;
	height: 60px;
}

.check h3.logo{
	width: 141px;
	height: 20px;
}

.food h3.logo{
	width: 184px;
	height: 20px;
}


#topics{
	padding-top: 100px;
	padding-bottom: 100px;
}

.feed{
	width: 90%;
	margin: 0 auto;
}

.feed .link{
	width: 83.5%;
	margin: 0 auto;
}

.feed .link a:before, .feed .link a:after, .feed .link:before, .feed .link:after {
	background-color: #fff;
}


#access{
	background-color: #e5e5e5;
	padding-top: 100px;
}

.address{
	width: 75%;
	margin: 0 auto;
}

.address img{
	width: 100%;
	height: auto;
	display: block;
}

.address picture{
	position: relative;
	display: block;
	width: 100%;
}

.address picture:before {
    border-width: 15px 15px 0 0;
    border-color: #e5e5e5 transparent transparent;
    top: 0;
    left: 0;
}

.address picture:after{
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #e5e5e5;
	right: 0;
	bottom: 0;
}

.address picture:before, .address picture:after{
	content: "";
	display: inline;
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	z-index: 2;
}

.address h3{
	font-size: 1.4rem;
	margin-bottom: 20px;
	margin-top: 30px;
	font-weight: 600;
	line-height: 1.8em;
}

.address .link{
	margin-bottom: 50px;
}

.address .picture_wrap{
	position: relative;
	z-index: 2;
	width: 115%;
	left: 50%;
	transform: translate(-50%, 0);
}

.address .whiteSlide{
	background-color: #e5e5e5;
	border-bottom: 0;
}

.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 100%;
	position: relative;
}

.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

h3.chart_title{
	margin-top: 45px;
	margin-bottom: 15px;
	letter-spacing: 0.2em;
	font-size: 1.3rem;
	font-weight: 600;
	text-align: center;
}

.chart_wrap{
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
	margin-bottom: 100px;
	width: 100vw;
	border-right: 20px solid #fff;
}

ol.chart_list{
	width: calc(270px * 5 + 20px);
	display: flex;
	flex-wrap:nowrap;
	border-right: 20px solid #fff;
}

.bar ol.chart_list{
	width: calc(270px * 3 + 20px);
}

.check ol.chart_list{
	width: calc(290px * 3 + 20px);
}

ol.chart_list li{
	background-image: url(../img/chart_cursol.svg);
	background-position: center right 12px;
	background-repeat: no-repeat;
	background-size: 29px 28px;
	padding-right: 55px;
	min-width: 270px;
}

ol.chart_list li:last-child{
	background-image: none;
	padding-right: 0;
	min-width: calc(270px - 55px);
}

ol.chart_list li span{
	padding: 20px;
	border: 1px solid #ccc;
	display: block;
	text-align: justify;
    text-justify: inter-ideograph;
}

.bar ol.chart_list span, .check ol.chart_list span{
	height: 115px;
}

ol.chart_list li br{
	display: none;
}


footer section{
	padding-top: 70px;
	padding-bottom: 70px;
}

.footer_logo{
	width: 125px;
	height: 36px;
	text-align: center;
	margin: 0 auto;
}

.footer_logo img{
	width: 100%;
	height: 100%;
}

small{
	font-size: 0.9rem;
	margin-top: 15px;
	display: block;
    text-align: center;
}

.group{
	background-color: rgba(18,117,1,0.1);
	width: 85vw;
	margin: 0 auto;
	margin-top: 70px;
	padding: 30px 55px;
}

.footer_slider li i{
	display: block;
	font-size: 1.8rem;
	text-align: center;
}

.footer_slider li em{
	display: block;
	text-align: center;
	font-style: normal;
	font-weight: 600;
	margin-top: 2px;
	margin-bottom: 10px;
}

.footer_slider li p{
	text-align: justify;
    text-justify: inter-ideograph;
}

.whiteSlide{
	z-index: 3;
	display: block;
	top: 0px;
	right: 0;
	position: absolute;
	background-color: #fff;
	border-bottom: 1px solid #fff;
	box-sizing: content-box;
}

/*iphoneXより横幅が狭い場合*/
@media screen and (max-width:374px){
	.copy br.delete{
		display: none;
	}
}


/* SP横版上書き ---------------------------------------- */
@media screen and (max-width:812px) and (orientation: landscape) {
	.logowrap img {
		width: auto;
		height: 70%;
	}	
}


/* PC版上書き ---------------------------------------- */

@media screen and (min-width:813px){
	
	a:hover{
		color: inherit;
	}
	
	
	body{
		font-weight: 300;
		font-size: 1.3rem;
		letter-spacing: 0.05em;
	}
	
	.pc_none{
		display: none;
    }
	.sp_none{
		display: block;
    }
	
	p {
		font-size: 1.3rem;
	}
	
	h2{
		font-size: 3.0rem;
		text-align: center;
	}
	
	.logowrap{
		position: absolute;
		top: calc(100vh + 180px);
		height: 300px;
		width: 1100px;
		display: block;
	}
	
	.logowrap img {
		width: auto;
		height: 100%;
		margin: 0;
	}
	
	.logowrap img.logosp{
		display: none;
	}
	
	.logowrap img.logopc{
		display: block;
		animation-name: none;
		-webkit-animation-name: none;
	}
	
	.firstview{
		background: linear-gradient(90deg,#fff 0%,#fff 5%,#127501 5%,#127501 100%);
		height: 100vh;
		padding-top: 5vh;
		overflow: hidden;
	}

	.firstview .sp_none{
		width: 90vw;
	}
	
	#slide_number{
		top: 10vh;
	}
	
	.scroll{
		left: calc(5% - 40px);
		transition: 0.3s;
	}
	
	.scroll:hover{
		transform: translateY(5px);
	}
	
	.bx-wrapper{
		height: 100%;
	}
	
	#about{
		padding-top: 200px;
		margin-top: -200px;
	}
	
	.about{
		padding-top: 0;
		padding-bottom: 0;
		position: relative;
		height: 350px;
	}
	
	.about .textwrap{
		background-color: #fff;
		display: inline-block;
		position: absolute;
		right: 10vw;
		width: 500px;
		padding-top: 100px;
		padding-bottom: 80px;
		animation: dummy .7s ease 2s 1 normal;
		-webkit-animation: dummy .7s ease 2s 1 normal;
		animation-fill-mode: forwards;
		z-index: 90;
	}
	
	/*IE hack*/
	_:-ms-fullscreen, :root .about .textwrap {
		bottom: 90px;
		opacity: 1;
	}
	
	@keyframes textwrap_fadeIn {
		0% {bottom: 0; opacity: 0;}
		100% {bottom: 90px; opacity: 1;}
	}
	
	@-webkit-keyframes textwrap_fadeIn {
		0% {bottom: 0; opacity: 0;}
		100% {bottom: 90px; opacity: 1;}
	}
	
	.about h1{
		margin-bottom: 50px;
	}
	
	.contents {
		width: 1100px;
		max-width: 1100px;
		margin: 0 auto;
		padding-top: 150px;
	}
	
	.contents section {
		width: 100%;
	}
	
	.slider{
		width: 600px;
		height: 390px;
		z-index: 2;
		background-color: transparent;
	}
	
	.slider:hover{
		cursor: move;
	}
	
	.info{
		float: right;
		width: 675px;
		margin-top: -350px;
		z-index: 1;
		padding-left: 270px;
		padding-right: 80px;
		padding-top: 80px;
		padding-bottom: 70px;
	}
	
	h3.logo{
		margin: 0;
		margin-bottom: 70px;
	}
	
	h3.text{
		margin-bottom: 15px;
	}
	
	.link{
		margin: 30px 0 40px 0;
		transition: 0.3s;
	}
	
	.link a{
		background-position: top 18px right 20px;
	}
	
	.link:hover {
		border: 1px solid #999;
	}
	
	.link:hover a{
		background-position: top 18px right 15px;
		background-image: url(../img/cursol_on.svg);
		color: #999;
	}
	
	
	h3.chart_title{
		margin-top: 0;
		clear: both;
		padding-top: 100px;
	}
	
	h3.chart_title:after{
		content: "";
		display: block;
		width: 190px;
		margin: 0 auto;
		height: 1px;
		background-color: #111;
		margin-bottom: 40px;
	}
	
	.info dl dt{
		width: 50px;
	}
	
	.chart_wrap{
		overflow-x: hidden;
		width: 100%;
		border-right: 0;
		margin-bottom: 190px;
	}
	
	ol.chart_list {
		width: 100%;
		border-right: 0;
		margin: 0 auto;
	}
	
	ol.chart_list li{
		min-width: auto;
		width: 100%;
		background-size: 25px auto;
		padding-right: 50px;
	}
	
	ol.chart_list li:last-child{
		min-width: auto;
	}
	
	ol.chart_list li span {
		padding: 5px;
		font-size: 1.2rem;
		border: 0;
		letter-spacing: 0.03em;
	}
	
	.bar ol.chart_list span, .check ol.chart_list span {
		height: auto;
	}
	
	.bar ol.chart_list {
		width: 900px;
	}
	
	.check ol.chart_list {
		width: 1000px;
	}
	
	.bar ol.chart_list li:first-child span {
		width: 350px;
	}
	
	.check ol.chart_list li:last-child span {
		width: 390px;
	}
	
	#topics {
		padding-top: 150px;
		padding-bottom: 150px;
	}
	
	.feed .link, .address .link {
		width: 350px;
	}
	
	#access{
		padding-top: 150px;
	}
	
	.address {
		width: 1100px;
	}
	
	.address picture{
		width: 100%;
	}
	
	.address_flex {
		display: flex;
		width: 650px;
		margin: 80px auto 30px auto;
	}
	
	.address h3{
		width: 340px;
		margin-bottom: 0;
		margin-top: 0;
	}
	
	.gmap{
		padding-bottom: 500px;
	}
	
	.group{
		width: 100vw;
		margin-top: 0px;
		padding: 100px 0;
	}
	
	.footer_slider{
		display: flex;
		width: 1100px;
		margin: 0 auto;
		justify-content: space-between;
	}
	
	.footer_slider li{
		width: calc(100% / 4 - 80px);
	}
	
	.footer_logo {
		width: 175px;
		height: 50px;
	}
	
	.whiteSlide{
		height: 390px;
	}
	
	.address .whiteSlide{
		height: 616px;
	}
	
}



/* tablet版上書き ---------------------------------------- */

@media only screen and (min-width:813px) and (max-width:1112px) {
	.logowrap {
		width: 100vw;
	}
	
	.info{
		width: 60%;
		padding-left: 20%;
		padding-right: 10%;
	}
	
	ol.chart_list, .bar ol.chart_list, .check ol.chart_list {
		width: 80%;
	}
	
	.address {
		width: 75vw;
	}
	
	.address img {
		width: 100%;
	}
	
	.footer_slider{
		width: 90vw;
	}
	
	.footer_slider li {
		width: calc(100% / 4 - 40px);
	}
	
} /* tablet版終わり */



/* 印刷用 ---------------------------------------- */
@media print{
	*{
		transition-property: none !important;
		animation-name: none !important;
		opacity: 1 !important;
		font-family:initial;
	}
}