@charset "utf-8";

/* style.css
* * * * * * * * * * * * * * * * * * * * */

/***** reset *****/

/* @group @viewport
--------------------------------------------------------*/

@-webkit-viewport{width:device-width;}
@-moz-viewport{width:device-width;}
@-ms-viewport{width:device-width;}
@-o-viewport{width:device-width;}
@viewport{width:device-width;}

/* @end @viewport */

/* @group nomalize.css */

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/* Corrects `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {display: block}

/* Corrects `inline-block` display not defined in IE 8/9. */
audio,canvas,video {display: inline-block}

/* Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices. */
audio:not([controls]) {display: none;height: 0}

/* Addresses styling for `hidden` attribute not present in IE 8/9. */
[hidden] {display: none}

/* ==========================================================================
   Base
========================================================================== */

/* 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom. */

html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/* Removes default margin. */

body {margin: 0}


/* ==========================================================================
   Links
========================================================================== */

/* Addresses `outline` inconsistency between Chrome and other browsers. */
a:focus { outline: thin dotted}

/* Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover {outline: 0}

/* ==========================================================================
   Typography
========================================================================== */

html { font-size: 80%}

/* Addresses `h1` font sizes within `section` and `article` in Firefox 4+, Safari 5, and Chrome. */
h1 {font-size: 2em;}

p,li,dt,dd,th,td,pre{
-ms-line-break: strict;
line-break: strict;
-ms-word-break: break-strict;
word-break: break-strict}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {border-bottom: 1px dotted}

/* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.*/
b,strong {font-weight: bold}

/*Addresses styling not present in Safari 5 and Chrome.*/
dfn { font-style: italic}

/*Addresses styling not present in IE 8/9.*/
mark { background: #ff0;
color: #000}


/* Corrects font family set oddly in Safari 5 and Chrome.*/
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em}

/*Improves readability of pre-formatted text in all browsers.*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word}

/*Sets consistent quote types.*/
q {quotes: "\201C" "\201D" "\2018" "\2019";}

/*Addresses inconsistent and variable font size in all browsers.*/
small {font-size: 80%;}

/*Prevents `sub` and `sup` affecting `line-height` in all browsers.*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline}

sup {top: -0.5em}
sub {bottom: -0.25em}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*Removes border when inside `a` element in IE 8/9.*/
img {
    max-width :100%;
    vertical-align: middle;
    border: 0}

/* .ie8 img{width: auto; height: auto} */

/* Corrects overflow displayed oddly in IE 9.*/
svg:not(:root) {overflow: hidden}


/* ==========================================================================
   Figures
   ========================================================================== */

/*Addresses margin not present in IE 8/9 and Safari 5.*/

figure {margin: 0}

/* ==========================================================================
   Tables
========================================================================== */

/*Remove most spacing between table cells.*/
table {
border-collapse: collapse;
border-spacing: 0}

/* ==========================================================================
 @end normarize.css */




/* ==========================================================================
  @base setting
   ========================================================================== */

body {
	margin: 0 auto;
	color: #305565;
	background:#e8f4f2 url(../img/base/bg_blue.png) repeat;  
	background-size: 10% auto;
	width:100%;
}

ul{
	list-style-type: none;
}

section{
	margin: 0 auto;
	padding: 0;
}


/* ==========================================================================
  @group link setting 
   ========================================================================== */

a,a:link,a:visited{
	color:#305565;
	text-decoration: none;
}



/* ==========================================================================
  @group HOME
   ========================================================================== */

#home{
	background: url(../img/home/topimage.jpg) no-repeat center top;  
	background-size: cover;
	width:100%; 
	height: 620px;
	}

	.witch {
		background: url(../img/home/witch2023.gif)  no-repeat center top;
		background-size: cover;
		width:100%; 
		height: 98%;
		background-size: 30% ;
		animation: witch 16s linear infinite, 0;
		}

		@keyframes witch {
			0% { background-position: 400px -100px;}
			100% { background-position: -100px 200px;}
			}

	.santa {
		background: url(../img/home/santa_wave.gif)  no-repeat center top;
		background-size: cover;
		width:100%; 
		height: 98%;
		background-size: 50% ;
		animation: santa 16s linear infinite, 0;
		}

		@keyframes santa {
			0% { background-position: 400px -100px;}
			100% { background-position: -100px 500px;}
			}

	#home .logo{
		padding: 1em;
		}

		#home .logo img{
			width:25%;
			height:25%;
			}

	.text{
		text-align: center;
		font-size: 120%;
		color: #fff;
		}

	.text p {
		margin: 4em auto;
		animation-name: fadein;
		animation-duration: 5s;
		animation-iteration-count: 1;
		background-color: rgba(0,97,210,0.7);
		width: 50%;
		padding:1em;
		}

		@keyframes fadein {
			from {
				opacity: 0;
				transform: translateY(20px);
				}
			to {
				opacity: 1;
				transform: translateY(0);
				}
			}

	#contents div.link ul{
		padding:0 0 0 1.2em;
		width:20%;
		float: left;
		font-size: 110%;
		font-weight: bold;
		}

		#contents div.link ul li{
			margin-bottom:0.8em;
			}

		#contents div.link ul li a{
			position: relative;
			display: inline-block;
			transition: .3s;
			}

		#contents div.link ul li a::after {
			position: absolute;
			bottom: 0;
			left: 50%;
			content: '';
			width: 0;
			height: 2px;
			background-color: #E38449;
			transition: .3s;
			transform: translateX(-50%);
			}

		#contents div.link ul li a:hover::after{
			width: 100%;
			}

		#contents div.link ul li a:hover {
			color:#E38449;
			}

		#contents i{
			padding-left: 5px;
			}

	#contents div.fb-page iframe{
		padding:1em;
		float: left;
		}

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

	.footer {
		padding:0 0 1em 0;
		width: 100%;
		clear: left;
		text-align: center;
}

/* ==========================================================================
  @group MAP
   ========================================================================== */

#map iframe{
 	margin:0;
	width: 100%;
	height: 520px;
	border:0;
}

	#contents_map .logo{
		text-align: right;
		float: left;
		width: 120px;
		padding: 0.3em 1.2em 1.2em 0;
		font-weight: bold; 
		}

	#contents_map .logo li{
		padding-top: 0.5em;
		}

	#contents_map .nav{
		margin: 0 auto;
		padding: 1.2em;
		}

		ul.nav a {
			line-height: 3em; 
			display: block;
			}

		ul.nav li {
			width: 210px;
			display: inline-block;
			position: relative;
			line-height: 3em;   
			}

		ul.nav li.title_d{
			background-color: #d13834;
			color: #ffffff;
			font-weight: bold;
			text-align: center; 
			}
		ul.nav li.title_h{
			background-color: #444c93;
			color: #ffffff;
			font-weight: bold; 
			text-align: center; 
			}
		ul.nav li.title_l{
			background-color: #53a469;
			color: #ffffff;
			font-weight: bold;
			text-align: center; 
			}
		ul.nav li.title_c{
			color: #ffffff;
			font-weight: bold;
			background:linear-gradient(90deg,#918128 0%,#918128 50%,#774309 50%,#774309 100%);
			text-align: center;  
			}

		.nav label{
			display: block;
			margin: 0;
			padding : 0;
			cursor :pointer;
			transition: all 0.3s;
			}

		.nav input {
			display: none;
			}

		.nav .accshow{
			width:200px;
			height: 0;
			padding: 0 0 0 10px;
			overflow: hidden;
			opacity: 0;
			transition: 0.5s;
			text-align: left;
			font-weight: normal; 
			}

		.cssacc:checked + .accshow {
			height: auto;
			background: #fffff3;
			opacity: 1;
					}

		.nav ul{
			counter-reset:number; /*数字をリセット*/
			list-style-type: none!important; /*数字を一旦消す*/
			}

			ul.nav ul li a {
				text-align: left;
				padding-left: 25px;
				font-weight: normal;
				}
			ul.nav ul li.drink a:hover {
				background-color: #fcf2f2;
				}
			ul.nav ul li.health a:hover {
				background-color: #f1f2f7;
				}
			ul.nav ul li.life a:hover {
				background-color: #ecffe6;
				}
			ul.nav ul li.clinic a:hover {
				background-color: #fff8d5;
				}
			ul.nav ul li.corporation a:hover {
				background-color: #E1DBD5;
				}

			ul.nav ul li.drink {
				border-bottom: thin dotted #d13834;
				}
			ul.nav ul li.health {
				border-bottom: thin dotted #444c93;
				}
			ul.nav ul li.life {
				border-bottom: thin dotted #53a469;
				}
			ul.nav ul li.clinic {
				border-bottom: thin dotted  #918128;
				}
			ul.nav ul li.corporation {
				border-bottom: thin dotted  #774309;
				}

			.nav li.drink:before{
				position: absolute;
				counter-increment: number;
 				content: counter(number);
 				display:inline-block;
 				color: white;
 				font-weight:bold;
 				border-radius: 50%;
				left: 0;
 				width: 20px;
 				height: 20px;
 				background: #d15634;
 				line-height: 20px;
 				text-align: center;
 				top: 50%;
 				-webkit-transform: translateY(-50%);
 				transform: translateY(-50%);
				}

				.fa-spin{
					color: #d15634;
					}
				.justnow{
					font-size: 90%;
					line-height: 1.2em;
					padding: 0 3em 0.5em 0;
					}

			.nav li.health:before{
				position: absolute;
				counter-increment: number;
 				content: counter(number);
 				display:inline-block;
 				color: white;
 				font-weight:bold;
 				border-radius: 50%;
				left: 0;
 				width: 20px;
 				height: 20px;
 				background: #42b1f4;
 				line-height: 20px;
 				text-align: center;
 				top: 50%;
 				-webkit-transform: translateY(-50%);
 				transform: translateY(-50%);
				}
			.nav li.life:before{
				position: absolute;
				counter-increment: number;
 				content: counter(number);
 				display:inline-block;
 				color: white;
 				font-weight:bold;
 				border-radius: 50%;
				left: 0;
 				width: 20px;
 				height: 20px;
 				background: #76c656;
 				line-height: 20px;
 				text-align: center;
 				top: 50%;
 				-webkit-transform: translateY(-50%);
 				transform: translateY(-50%);
				}
			.nav li.clinic:before{
				position: absolute;
				counter-increment: number;
 				content: counter(number);
 				display:inline-block;
 				color: white;
 				font-weight:bold;
 				border-radius: 50%;
				left: 0;
 				width: 20px;
 				height: 20px;
 				background: #9c983b;
  				line-height: 20px;
 				text-align: center;
 				top: 50%;
 				-webkit-transform: translateY(-50%);
 				transform: translateY(-50%);
				}
			.nav li.corporation:before{
				position: absolute;
				counter-increment: number;
 				content: counter(number);
 				display:inline-block;
 				color: white;
 				font-weight:bold;
 				border-radius: 50%;
				left: 0;
 				width: 20px;
 				height: 20px;
 				background: #774309;
  				line-height: 20px;
 				text-align: center;
 				top: 50%;
 				-webkit-transform: translateY(-50%);
 				transform: translateY(-50%);
				}




/* ==========================================================================
  @group MENMER
   ========================================================================== */

#member_drink{
	background:#fcebec url(../img/base/bg_pink.png) repeat;  
	background-size: 10% auto;
	width:100%;
	}

#member_health{
	background:#e8e7f3 url(../img/base/bg_purple.png) repeat;  
	background-size: 10% auto;
	width:100%;
	}

#member_life{
	background:#eaf4e9 url(../img/base/bg_green.png) repeat;  
	background-size: 10% auto;
	width:100%;
	}

#member_clinic{
	background:#fff8da url(../img/base/bg_yellow.png) repeat;  
	background-size: 10% auto;
	width:100%;
	}


	div.shop{
		text-align: center;
		margin: 0 auto;
		padding-top:1em;
		}

		div.shop table.information{
			margin:0 auto;
			border: medium solid #305565;
			width:300px;
			}

			div.shop table.information th{
				font-size: 120%;
				padding:0.5em;
				background: white;
				border: medium solid #305565;
				}
			div.shop table.information .item{
				padding:0.5em;
				background: #305565;
				color: white;
				border: thin solid #fff;
				}
			div.shop table.information .info{
				padding:0.5em;
				background: #fff;
				color: 305565;
				border: thin solid #305565;
				text-align: left;
				}
			div.shop table.information .info a{
				padding-right: 1em;
				}

				.maru {
					width: 20px;
					height: 20px;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					flex-flow: column wrap; 
					vertical-align: top;
					color: white;
 					font-weight:bold;
					color: #fff;
					margin-right: 0.5em;
					}

				#member_drink .drink {
					background: #d15634;
					}
				#member_health .health {
					background: #444c93;
					}
				#member_life .life {
					background: #76c656;
					}
				#member_clinic .clinic {
					background: #9c983b;
					}
				#member_clinic .corporation {
					background: #774309;
					}


		div.shop p{
			width:270px;
			margin:1em auto;
			padding: 1em;
			border: medium solid #305565;
			background: white;
			border-radius: 40px;
			text-align: left;
			}

		div.shop .photo{
			width:300px;
			margin:0 auto;
			}

			div.shop .photo img{
				border: medium solid #fff;
				box-shadow: 2px 2px 6px gray;
				}

		div.shop ul.next{
			width:300px;
			text-align: center;
			padding-bottom: 2em;
			}

			div.shop ul.next .triangle{
				display: inline-block;
				vertical-align: middle;
				}

		div.shop ul.next .triangle  a:hover {
			color:#E38449;
			}

			div.shop ul.next .home{
				width:200px;
				padding: 1em;
				display: inline-block;
				}

/* ==========================================================================
  @group EVENT
   ========================================================================== */

#event{
	background: #e8f4f2 url(../img/event/topimage_event.jpg) no-repeat center top;  
	background-size:cover;
	width:100%; 
	height: 760px;
	color: #ffffff;
	padding-top: 1em;
	position: relative;
	z-index: 20;
	}

	#event h2{
		text-align: center;
		}

	#event .mainevent {
  		margin: 0.5em auto;
		padding: 0;
		width: 90%;
		}

	#event .mainevent a{
 		color: #faf2ef;
		}

	#event .mainevent .mainevent_info {
 		text-align: center;
		}

	#event .mainevent .mainevent_info2 {
 		text-align: left;
		padding:0.5em;
		}

	#event .accbox a{
		text-decoration:none;
		color:#FFFFFF;
		}

	#event .accbox {
  		margin: 0.5em auto;
		padding: 0;
		width: 90%;
		}

	#event .accbox label {
		display: block;
		padding : 10px 12px;
		color: #fffaec;
		font-weight: bold;
		font-size: 110%;
		background-color: rgb(255,229,56,0.6);
		cursor :pointer;
		transition: all 0.5s;
		text-align: center;
		}

		#event .accbox label:before {
		content: '\f054';
		font-family: 'FontAwesome';
		padding-right: 8px;
		}

		#event .accbox label:hover {
			background-color: rgb(240,187,73,0.8);
		}

		#event .accbox input {
			display: none;
		}

		#event .accbox .accshow {
			height: 0;
			padding: 0;
			overflow: hidden;
			opacity: 0;
			transition: 0.8s;
		}

		#event .cssacc:checked + label + .accshow {
			height: auto;
			padding: 10px;
			background-color: rgb(91,142,182,0.6);
			opacity: 1;
			}

		#event .cssacc:checked + label:before {
			content: '\f078';
			}

		#event .cssacc:checked + label:before {
			content: '\f078';
			}

	#event .fes{
		font-size: 70%;
		}

	#event .fes_info{
		display: inline-block;
		text-align: left;
		vertical-align: bottom;
		padding: 0.5em;
		}

	#event .fes_info a{
		color: #fffaec;
		}
	#event .fes_info span{
		color: #6198d2;
		font-size: 80% ;
		background-color: #fffaec;
		padding: 1px 2px 1px 2px ;
		margin-right: 1em;
		margin-bottom: 1em;
		}

	#event .accbox label .img_fujikyun_m{
		width: 22%;
		display: inline-block;
		}
	#event .accbox label .img_fujikyun_t{
		width: 18%;
		display: inline-block;
		}
	
		#event .accbox .photo_m{
			width: 43%;
			display: inline-block;
			margin: 0.5em;
			}

		#event .accbox .photo_t{
			width: 80%;
			margin: 0.5em auto;
			}

			#event .accshow img{
				border : solid 2px #fffaec ;
				}

		#contents_event {
			z-index: 10;
			}

			#contents_event .container_event{
				padding: 1em;
				display: flex;
				}


	#contents_event .logo{
		text-align: right;
		float: left;
		width: 120px;
		padding: 0.3em 1.2em 1.2em 0;
		font-weight: bold; 
		}

	#contents_map .logo li{
		padding-top: 0.5em;
		}




/* ==========================================================================
  Groupe BREAK POINT
   ========================================================================== */

/* min-width: 481px
* * * * * * * * * * * * * * * * * * * * */

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


/*  @group HOME
----------------- */


#home{
	background: url(../img/home/topimage.jpg) no-repeat center top;  
	background-size: contain;
	width:100%;
	height: 700px;
	}

	.witch {
		background-size: 20% ;
		}

		@keyframes witch {
			0% { background-position: 600px -1000px;}
			100% { background-position: 0px 0px;}
			}

	.santa {
		background-size: 30% ;}

		@keyframes santa {
			0% { background-position: 600px 0px;}
			100% { background-position: -100px 700px;}
			}

	#home .logo{
		padding-top: 0;
		padding-left: 5em;
		}
		#home .logo img{
			width:20%;
			height:20%;
			}


			.text p {
				width: 30%;
				margin: 0 auto;
				}

	#contents div.link ul{
		padding: 1em 1em 1em 5em;
		font-size: 130%;
		width:20%;
		}

	#contents div.fb-page iframe{
		padding: 3em;

		float: left;
		}

/* CONTENTS
----------------- */

	#contents .logo{
		padding: 3em 0 0 2em;
		float: left;
		}
		#contents .logo img{
			width:70%;
			height:70%;
			}

	#contents .nav{
		padding: 3em 0 0 0;

		}

/* FOOTER
----------------- */

	.footer {
		padding:2em ;
		width: 100%;
		clear: left;
		text-align: center;
		font-size:110%;
		}

/* MAP
----------------- */

#map iframe{
	height: 660px;
	}

	#contents .logo{
			width:13%;
			height:13%;
			padding-right: 1em;
		}

	#contents .logo p{
			font-size: 120%;
		}


/* EVENT
----------------- */

#event{
	background:#e8f4f2 url(../img/event/topimage_event.jpg) no-repeat center center;  
	background-size:cover;
	width:100%;
	height:800px;
	font-size:120%;
	text-align: center;
	}


	#event .witch {
		height: 880px;
		background-size: 16% ;
		animation: witch 26s linear infinite, 0;
		}

		@keyframes witch {
			0% { background-position: 700px 50px;}
			100% { background-position: -300px 500px;}
			}

	#event .mainevent {
		display: inline-block;
		width: 35%;
		}

	#event .mainevent .mainevent_info {
 		text-align: center;
		font-size: 90% ;
		}

	#event .accbox{
		display: inline-block;
		width: 45%;
		vertical-align: top;
		}

			#event .fes .fes_info span{
				color: #3b78b7;
				font-size: 90% ;
				background-color: #fffaec;
				padding: 1px 2px 1px 2px ;
				margin-left : 6px;
				margin-right: 6px;
				}
			#event .accbox .accshow div{
				text-align: left;
				}


	#contents_event{
	max-width :600px;
		text-align:center;
		}

	#contents_event .chara{
		width:80%;

		}

	#contents_event .chara img{
			width:20%;
			height:20%;
		}

	#contents_event .fujikyun{
		font-size: 130%;
		}





/*  @group MEMBER
----------------- */

#member_drink{
	background-size: 5% auto;
	width:100%;
	}


#member_health{
	background-size: 5% auto;
	width:100%;
	}


#member_life{
	background-size: 5% auto;
	width:100%;
	}


#member_clinic{
	background-size: 5% auto;
	width:100%;
	}

	div.shop{
		margin: 0 auto;
		padding-top: 5em;
		width:760px;
		}

		div.shop .left{
			width:300px;
			float: left;
			padding:1em;
			}
		div.shop .photo{
			width:400px;
			float: left;
			padding:1em;		
			}
			div.shop .photo img{
				width:390px;
				}

		div.shop ul.next{
			clear: left;
			margin: 0em 0 3em 0;
			width:700px;
			}
}

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */

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

/*  @group HOME
----------------- */

body{
	background-size: 5% auto;
}

#home{
	background: url(../img/home/topimage.jpg) no-repeat center top;  
	background-size: contain; 
	max-width :900px;
	height: 900px
	}

	#home .logo{
		padding-top: 1em;
		padding-left: 2em;
		}

	#home .logo img{
		width:16%;
		height:16%;
		}

		.text p {
			margin: 0 auto;
			font-size: 130%;
			}

	#contents div.link ul{
		padding: 1em 1em 1em 6em;
		font-size: 150%;
		width:20%;
		}

		#contents div.link ul img{
			width: 70%;
			height: 70%;
			}



/*  CONTETS
----------------- */

#contents{
	background-size: 4.5% auto;
	}

#contents .container{
	margin: 0 auto;
 	width: 1000px;
	}

/*  map
----------------- */

	ul.nav{
		width:1100px;
		}

		ul.nav ul {
			margin: 0px;
			padding: 0px;
			display: block;
			position: absolute;
			}

		.nav .accshow{
			overflow: visible;;
			opacity: 1;
			height: auto;
			background: #fffff3;
			}

	#contents .logo{
			width:20%;
			height:20%;
		}

	#contents .logo p{
			font-size: 140%;
		}

	#contents .logo p img{
			width:40%;
			height:40%;
		}


/* EVENT
----------------- */

#event{
	background: url(../img/event/topimage_event.jpg) no-repeat center top;  
	background-size: contain; 
	max-width :900px;
	height: 920px;
	text-align: center;
	}

	#event h2{
		font-size:200%;
		}

	#event .accbox{
		display: inline-block;
		width: 300px;
		vertical-align: top;
		}



	#contents_event{
	max-width :900px;
		text-align:center;
		}

	#contents_event .chara{
		width:80%;

		}

	#contents_event .chara img{
			width:20%;
			height:20%;
		}

	#contents_event .fujikyun{
		font-size: 120%;
		}

/*  @group DRINK
----------------- */

	 div.shop{
		margin: 0 auto;
		padding-top: 5em;
		width:960px;
		}

		div.shop .left{
			width:300px;
			float: left;
			padding:1em;
			}
		div.shop .photo{
			width:600px;
			float: left;
			padding:1em;		
			}

			div.shop .photo img{
				width:590px;
				}

			div.shop ul.next{
			clear: left;
			margin: 0em 0 3em 5em;
			width:960px;
			}

}