@charset "UTF-8";
html{height:100%;color:#333;background:#FFF;}

.content {
    color: black;
    -webkit-font-smoothing: antialiased;
    margin: 0px;
    padding: 0px;
	display: block;
}

img {
    width: 100%;
	max-width:100%;
    height: auto;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	opacity: 0.7 ;
}

h2, h3, h4, p, a, ul, li {
	font-weight: normal;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", 'Noto Serif JP', serif;
    color: #000000;
}

@media screen and (min-width: 680px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 680px){   
  .pc { display:none; }
  .sp { display:block; }
}

.wrapper {
	overflow: hidden;	/* はみ出た部分が隠れる */
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	max-width :960px;
	width :100%;
}

/* ボタン */
h1.button {
    width: 7.2vw;
    top: 5;
    left: 0;
    z-index: 5;
	margin-top:5%;
}
@media screen and (min-width: 960px) {
	/* 960px以上に適用されるCSS（PC用） */
	h1.button {
    width: 40px;
    top: 0;
    left: 0;
    z-index: 5;
}
}

.posi_fixed {
    position: fixed !important;
}

h1.button img{
	margin-bottom:3vw;
}
@media screen and (min-width: 960px) {
	h1.button img{
	margin-bottom:15px;
}
}

.top_logo {
	width :50%;
	text-align: center;
	margin: 15% auto 12% auto;
}
@media screen and (min-width: 960px) {
	.top_logo {
	width :25%;
	text-align: center;
	margin: 60px auto 12% auto;
}
}

.othre_logo{
	width :100%;
	text-align: center;
	margin: 10% auto 10% auto;
}
@media screen and (min-width: 960px) {
	.othre_logo{
	width :50%;
	text-align: center;
	margin: 5% auto 10% auto;
}
}

.top_menu {
	width: 75%;
	margin-right: auto;
	margin-left: auto;
}
@media screen and (min-width: 960px) {
	.top_menu {
	width: 40%;
	margin-right: auto;
	margin-left: auto;
}
}

/* フレックスボックスにする */
.flex-item {
    display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto 25% auto;
	justify-content: space-between;
}

.flex-item img {
	width: 45%;
	margin-right: auto;
	margin-left: auto;
}

.icon ul {
	list-style:none;
	text-align: left;
	padding:0;
	margin-top:2%;
}

.icon li {
	display:block;
}

.icon img {
	width: 25%;
	margin: 0 auto 18% 12%;
}

.address h2{
	width :55%;
	margin: 15% auto 5% auto;
}
@media screen and (min-width: 960px) {
	.address h2{
	width :30%;
	margin: 15% auto 5% auto;
}
}

.address h3 {
	text-align: center;
	font-size: 4.6875vw;
	letter-spacing: 0.5px;
	line-height:1;
	margin-bottom:0;
}
@media screen and (min-width: 960px) {
	.address h3 {
	font-size: 16px;
}
}

.address h4 {
	text-align: center;
	font-size: 5vw;
	letter-spacing: 0.5px;
	margin:1% auto;
}
@media screen and (min-width: 960px) {
	.address h4 {
	font-size: 18px;
}
}

.map {
	margin:5% auto;
}

.map p {
	text-align: center;
	font-size: 3.75vw;
	letter-spacing: 0.5px;
	margin:1% auto;
}
@media screen and (min-width: 960px) {
	.map p {
	font-size: 20px;
}
}

.global_wrapper {
	margin: 2% auto 5% auto;
 }
    
.youtube {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
    
.player {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
    
.thumb {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}

/* TOPへ戻るボタン */
#t-scroll {
    position:fixed;
    bottom:30px;
    right:0px;
	z-index:1000;
}
#t-scroll img{
    width: 20%;
	text-align: right;
	margin-right: 10px;
}

@media screen and (min-width: 960px) {
	#t-scroll img {
	width: 30%;
}
}
/* TOPへをがテキストの時
#t-scroll a {
    background-color:#999;
    color:#fff;
    text-align:center;
    text-decoration:none;
    padding:15px 10px;
}
#t-scroll a:hover {
    background-color:#666;
    text-decoration:none;
} */

/* フッター */
.footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer li {
	padding:15px 0 12px 0;
	border-bottom:1px solid #e5e5e5;
	list-style:none;
}

.footer a {
	font-size:14px;
	text-decoration:none;
	color:#666;
}

.flex-sns {
    display: flex;
	justify-content: center;
	width: 35%;
	margin: 10% auto 20% auto;
	justify-content: space-between;
}
@media screen and (min-width: 960px) {
	.flex-sns {
    display: flex;
	justify-content: center;
	width: 15%;
	margin: 30px auto 50px 0;
	justify-content: space-between;
}
}

.flex-sns img {
	display: block;
	width: 55%;
	height:auto;
	margin:auto;
}

.footer h2 {
	width: 16%;
	margin:0 auto 5% auto;
}
@media screen and (min-width: 960px) {
	.footer h2 {
	width: 8%;
	margin:0 auto 2% auto;
}
}

.footer p {
	font-size:12px;
}

.pcs img {
  width: 100%;
}

@media screen and (min-width: 960px) {
 .pcs img {
    width: 70%;
	margin-top: 50px;
  }
}

/* aboutページ */
.about h2 {
	text-align: center;
	font-size: 5.5vw;
	letter-spacing: 0.5px;
	color: #6AA7CA;
	margin-bottom: 10%;
}
@media screen and (min-width: 960px) {
	.about h2 {
	text-align: center;
	font-size: 25px;
	letter-spacing: 1px;
	color: #6AA7CA;
	margin-bottom: 40px;
}
}

.about img {
	width: 100%;
	margin:0 auto 10% auto;
}
@media screen and (min-width: 960px) {
	.about img {
	width: 100%;
	margin:0 auto 40px auto;
}
}

.about p {
	width: 80%;
	text-align: justify;
	font-size: 4.0625vw;
	line-height: 1.8;
	margin: 0 auto 10% auto;
}
@media screen and (min-width: 960px) {
	.about p {
	text-align: center;
	font-size: 16px;
	line-height: 2.2;
	letter-spacing: 1px;
	margin: 0 auto 10% auto;
}
}

.about a {
	text-decoration: underline;
}

.photo {
	width: 85%;
	text-align: center;
	margin: 0 auto 10% auto;
}

@media screen and (min-width: 960px) {
	.photo {
	width: 100%;
	text-align: center;
	margin: 0 auto 10% auto;
}
	

/* スケジュールページ */
.fruit h2 {
	text-align: center;
	font-size: 4.375vw;
	letter-spacing: 0.5px;
	color: #6AA7CA;
	margin-bottom: 10%;
}
@media screen and (min-width: 960px) {
	.fruit h2 {
	text-align: center;
	font-size: 20px;
	letter-spacing: 1px;
	color: #6AA7CA;
	margin-bottom: 40px;
}
}

	
/* スマホ用のCSSはメディアクエリの外に記述する */

@media screen and (min-width: 481px) {
	/* 481px以上に適用されるCSS（タブレット用） */
}
@media screen and (min-width: 960px) {
	/* 960px以上に適用されるCSS（PC用） */
}

/* スマホ用のCSSはメディアクエリの外に記述する */
img {
  width: 100%;
}

@media screen and (min-width: 960px) {
  img {
    max-width: 960px;
  }
}