@charset "utf-8";
/* GoogleFonts */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* Font Awesome */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
/* HTML5用に初期化 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
	background:transparent;
	}	 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display:block;
	}
html {
	font-size: 4vw;
	}
@media (min-width: 600px) {
	html {
		font-size: 3vw;
		}
	}
@media (min-width: 1024px) {
	html {
		font-size: 1.2vw;
		}
	}
body {
	font-family: 'M PLUS Rounded 1c';
	}

p,li,dd {
	font-weight:400;
	}
nav ul {
	list-style:none;
	}
blockquote, q {
	quotes:none;
	}
blockquote:before, blockquote:after,q:before, q:after {
	content:''; content:none;
	}
a {
	vertical-align:baseline;
	background:transparent;
	text-decoration: none;
	}
a:hover {
	opacity: 0.5 ;
	}
ins {
	background:#ff9;
	color:#000;
	text-decoration:none;
	}
mark {
	background:#ff0;
	color:#000;
	font-style:italic;
	font-weight:bold;
	}
del {
	text-decoration: line-through;
	}
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
	}

/* ヘッダー共通 */
#header-container {
	position: fixed;
	z-index: 99999;
	width: 100vw;
	background: #000080;
	margin: 0 auto;
	padding: 0;
	border-top: 8px solid #ff0000;
	}
#header-container:after {
	content: "";
	display:block;
	clear:both;
	}
header {
	width: 100vw;
	background: #000080;
	}
header img.logo{
	display: block;
	float: left;
	height: calc(100vw * 0.65 * 0.121);
	margin:1vw;
	}
header h1{
	float: left;
	width: calc(50vw - 8vw);
	line-height: calc(100vw * 0.65 * 0.121);
	margin:1vw;
	font-size: 3vw;
	}
@media (min-width: 600px) {
	header h1{
		font-size: 2vw;
	}
}
header h1 a{
	color:#FFF;
	}
header #contactus{
	float: right;
	margin:1vw;
	}
header #contactus a img{
	height: calc(100vw * 0.65 * 0.121);
	}
/* PC画面での表示 */
@media (min-width: 1024px) {
	header img.logo{
		height: calc(100vw * 0.325 * 0.121);
		margin:1vw;
		}
	header h1{
		line-height: calc(100vw * 0.325 * 0.121);
		margin:1vw;
		font-size: 2vw;
		}
	header #contactus{
		float: none;
		margin:0;
		}
	header #contactus a img{
		position: absolute;
		top:1vw;
		right:1vw;
		height: calc(100vw * 0.325 * 0.121);
		margin-right:1vw;
		}
	}
/* /ヘッダー共通 */

/* コンテンツ共通 */
#main-container {
	clear: both;
	text-align: left;
	width: 100vw;
	padding-top: calc(100vw * 0.65 * 0.121 + 2vw + 8px);
	}

#main-contents {
	width: 100vw;
	}
@media (min-width: 1024px) {
	#main-container {
		width: 80vw;
		margin: 0 auto;
		}
	#main-contents,
	#WhatsNews,
	#TopPage,
	#TopPage img.harfsizeimage{
		float:right;
		width: calc(60vw - 40px);
		margin: 20px 0 0 40px;
		}
	}
	
h2 {
	padding: 2vw;
	background-color: #EFEFEF;
	}
	
h3 {
	margin:calc(1vw + 5px) 0;
	margin-left :1vw;
	padding: 1vw;
	border-left:5px solid #000080;
	}
h4{
	background-color:#efefef;
	}

h4,
h5 {
	padding: 2vw 4vw;
	}
	
p {
	padding: 2vw 4vw;
	line-height: 2rem;
	}

table {
	width: 92%;
	margin: 2vw auto;
	border-collapse: collapse;
	}
tbody {
    -webkit-text-size-adjust: 100%;
  } 

th,
td {
	padding: 1vw;
	border: 1px solid #CCC;
	vertical-align:middle;
	background: #FAFBFC;
	}

dl,
ul {
	width: 92%;
	margin: 2vw auto;
	}

dt,
dd,
li {
	width: 89%;
	margin: 0 auto;
	padding: 2vw;
	border-bottom: 1px dotted #CCC;
	list-style: none;
	}

#main-contents dt {
	font-weight: bold;
	}
	
ul.harfsizelist li{
	float: left;
	width: 42vw;
	text-align: center;
	border-bottom: 0;
}

.harfsizeimage {
	display: block;
	width: 100vw;
	}
	
.quartersizeimage {
	display: block;
	width: 42vw;
	}

footer nav ul.sns li {
	display: inline;
	}
	
footer nav ul.sns li a img {
	padding: 2.5vw;
	width: 10vw;
	}
@media (min-width: 1024px) {
	.harfsizeimage {
		display: block;
		width: 100%;
		}
	footer nav ul li {
		display: inline;
		border: 0;
		}
footer nav ul.sns li a img {
	padding: 0;
	width: 5vw;
	}
}	
	
/* /コンテンツ共通 */

/* カレンダー 共通右ナビゲーション */
#side-area-right {
	width: 100vw;
	margin-top:2vw;
	}

#Cal p {
	text-align:center;
	}
#Cal ul {
	display: flex;
	justify-content: center;
	}
#Cal li {
	display:inline;
	margin: 2vw auto;
	width: 92vw;
	padding: 0;
	border-bottom: 0;
	list-style: none;
	text-align: center;
	}
#Cal table {
	margin-bottom:0;
	}
#Cal th,
#Cal td {
	text-align:center;
	line-height:1.5em;
	}
#Cal th {
	background-color: #EFEFEF;
	}
#Cal .sunday,
#Cal .saturday,
#Cal .holiday {
	background-color: #FF9900;
	color: #FFF;
	}
div#Cal p {
	width:70vw;
	margin: 0 auto;
	border-radius:20px;
	background-color:#000030;
	color:#fff;
	font-weight:bold;
}
#Cal p.calbottom{
	margin: 0 auto;
	background-color: #FFF;
	color: #000;
	font-weight: normal;
	}
#Cal span.holiday {
	background-color: #FFF;
	color: #FF9900;
	}
@media (min-width: 1024px) {
	#side-area-right {
		float:left;
		width: 20vw;
		margin: 20px 0 0 0;
		padding: 0;
		}
	#side-area-right h4,
	#side-area-right h5 {
		padding: 1vw 2vw;
		text-align: center;
		}
	#side-area-right address {
		text-align: center;
		}	
	#side-area-right address span.phone {
		display: block;
		margin: 0;
		padding: 0;
		}		
	div#Cal{
		margin: 0;
		padding: 0;
		}
	div#Cal p {
		width: calc(20vw - 40px);
		margin: 10px;
		padding: 10px;
		font-size: 0.9rem;
		}
	div#Cal ul{
		width: calc(20vw - 40px);
		margin: 5px auto;
		height: 40px;
		}
	div#Cal li{
		height: 40px;
		font-size: 0.8rem;
		}
	div#Cal table {
		width: calc(20vw - 40px);
		}
	div#Cal th,
	div#Cal td {
		width: calc(20vw / 7);
		margin: 0;
		padding: 0;
		}
}
/* /カレンダー 共通右ナビゲーション */

/* page-topへ戻るボタン */
#pageTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
	}
#pageTop a {
	width: 4rem;    /* 円の直径 */
	height: 4rem;   /* 円の直径 */
	background-color: #efefef; /* 背景色 */
	border-radius: 50%; /* 円形にするための設定 */
	display: flex;  /* 中央揃えのための設定 */
	align-items: center; /* 中央揃えのための設定 */
	justify-content: center; /* 中央揃えのための設定 */
	color: #FFF;
	}
#pageTop a img {
	width: 3.4rem;
	}
/* /page-topへ戻るボタン */

/* 共通フッター */
#footer-container {
	width: 100vw;
	background: #eee;
	border-top: 1px solid #ccc;
	margin: 0 auto;
	}

footer {
	text-align: center;
	width: 100vw;
	margin: 0 auto;
	}
@media (min-width: 1024px) {
	#footer-container {
		clear:both;
		}
	}
/* /共通フッター */

/* google map */

#side-area-right h4,
#side-area-right h5,
#side-area-right address{
	text-align: center;
	}
.map-container {
	width: 92vw;
	height: 498px; /* お好みで高さを調整してください */
	margin: 2vw auto; /* 中央に配置するためのスタイル */
	border: 1px solid #333; /* 中央に配置するためのスタイル */
	}
@media (min-width: 1024px) {
	.map-container {
		width: calc(20vw - 40px);
		height: 300px; /* お好みで高さを調整してください */
		margin: 2vw auto; /* 中央に配置するためのスタイル */
		border: 1px solid #333; /* 中央に配置するためのスタイル */
		}
	}
/* /google map */

/* フォーム */
.formtable {
	width: 90%;
	margin: 20px auto;
	}

.formtable th, .formtable th {
	font-size: 0.8rem;
	}

.InText , .InTextArea {
	width: 90%;
	border: 1px solid #CCC;
	padding: 3px;
	font-size: 0.8rem;
	}
.InText {
	height: 1.2rem;
	}
.valid {
	height: 1.2rem;
	font-size: 0.8rem;
}

.InSubmit {
   font-size: 90%;
	margin: 0 auto 20px 40px;
	padding: 10px;
	background: #EFEFEF;
	border: 1px solid #CCC;

	}

.errormsg {
	/*font-size: 90%;*/
	color: #FF0000;
	}

.css_btn_area {
	width: 100%;
	height: 200px;
	text-align: left;
	}

.call_btn_class {
	border:none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display:block;
	width:90%;
	margin: 20px auto 20px auto;
	padding: 20px 0 20px 0;
	text-align: center;
	color:#FFF;
	background: #35AEFF;
	border-radius: 10px;	/* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */ 
	opacity: 1.0;
	font-size:1em;
	}

.call_btn_class:hover {
	color: #fff;
	opacity: 0.5;
	}

#contactForm {
	display:block;
	width:100%;
	margin:0 0 0 0;
	}

#contactForm .columnLeft{
	display:block;
	float:left;
	width:500px;
	height:200px;
	margin:20px 10px 40px 0;
	background:#FAFBFC;
	}

#contactForm .columnRight{
	display:block;
	float:left;
	width:500px;
	height:200px;
	margin:20px 10px 40px 0;
	background:#FAFBFC;
	}

#contactForm figure img{
	display:block;
	margin:40px auto;
	}

#contactForm .columnLeft h3,
#contactForm .columnRight h3{
	padding:20px 0;
	text-align:center;
	color:#FFF;
	background:#CCC;
	}

#contactForm .columnLeft h3:before,
#contactForm .columnRight h3:before{
	content:none;
	}

/* フォームエラーメッセージ */
.errormsg {
	font-weight: bold;
	color: #FF0000;
	}
/* /フォーム */

/* クローズ時メッセージ */
#close_massage {
	width: 100vw;
	padding:50px;
	}

#close_massage h1{
	font-size:2em;
	color:#000;
	}

#close_massage address{
	margin:20px 0;
	padding:20px 0;
	}
/* /クローズ時メッセージ */

/* ハンバーガーメニュー */
#nav-drawer {
	position: relative;
	float:right;
	margin:1vw;
	padding: 0 auto;
	}
#nav-drawer i{
	display:block;
	width: 6vw;
	margin: 0;
	padding: 0 auto;
	/*font-size:5vw;*/
	color:#fff;
	/*background: #f4d4d4;*/
	}
/*チェックボックス等は非表示に*/
.nav-unshown {
	display:none;
	}
/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
	}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width:60vw;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 60vw;/*最大幅（調整してください）*/
	height: 100%;
	background: #3B3B3B;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
	}

#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
#nav-open span img{
	display:block;
	height: calc(100vw * 0.65 * 0.121);
	}
#navMenu li{
	border-bottom:0;
	}

#navMenu li a{
	display:block;
	text-decoration:none;
	color:#fff;
	background: #3B3B3B;/*背景色*/
	border-bottom:3px dotted #CCC;
	padding:15px;
	font-size:1rem;
	line-height:4vw;
	}

/* PC画面での表示 */
@media (min-width: 1024px) {
    #nav-drawer {
    	clear:both;
        position: relative;
        float: none;
        margin: 0;
        padding: 0;
    }
    #nav-open,
    #nav-close,
    #nav-input {
        display: none;
    }
    #nav-content {
        position: static;
        width: 100%;
        max-width: none;
        height: auto;
        transform: none;
        box-shadow: none;
        display: flex;
        justify-content: center;
        background: #999;
    }
    #navMenu {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    #navMenu li {
        display: inline-block;
        border: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #navMenu li a {
        color: #fff;
        background: #999;
        border: none;
        padding: 0;
        font-size: 1.2rem;
    }
    #navMenu li:hover {
       background: #ccc;
		opacity: 0.5;
    }
}
/* /ハンバーガーメニュー */

/*トップページスライド */
#mainSlid-container-non{/*トップページ以外*/
	clear:both;
	display:flex;
	margin:0;
	padding:0;
	border:0;
	position:relative;
	overflow:hidden;
	width: 100vw;
	height:calc(17vw - 10px);
	}
#mainSlid-container{/*トップページ*/
	clear:both;
	display:flex;
	margin:0;
	padding:0;
	border:0;
	position:relative;
	overflow:hidden;
	width: 100vw;
	height:calc(66.6vw);
	}
	
.slide {
	position:relative;
	overflow:hidden;
	width: 100vw;
	height:66.6vw;
	margin: auto;
	background:#fff;
	}
.slide img {
	display:block;
	position:absolute;
	width:inherit;
	height :inherit;
	left:100%;
	animation:slideAnime 18s ease infinite;
	}
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
.slide img:nth-of-type(3) { animation-delay: 12s }
.slide img:nth-of-type(4) { animation-delay: 18s }

@keyframes slideAnime{
   0% {opacity: 0;left:100%;}
   3% {opacity: 0;left:0;}
  22% {opacity: 1;left:0;}
  45% {opacity: 1;left:-100%;}
 100% {opacity: 0;left:-100%;}
	}
	
@media (min-width: 1024px) {
	#mainSlid-container {/*ハンバーガーメニュー非表示*/
		width: 80vw;
		height: calc(80vw * 0.66);
		}
	.slide img {/*ハンバーガーメニュー非表示*/
		width: 80vw;
		height: calc(80vw * 0.66);
		}
	}
/* /トップページスライド */

/* 会社概要 */
.horizontal-list {
  list-style-type: none; /* リストのデフォルトのマーカーを非表示にする */
  padding: 0; /* リストの内側の余白を0にする */
}

.horizontal-list li {
  display: inline; /* 各リストアイテムを横並びにする */
  margin-right: 10px; /* リストアイテムの間にスペースをつける */
padding:0;
border: 0;
}
/* /会社概要 */

/* musicplayer */
.mejs__controls {
  align-items: center;
  height: 50px;
}
 
.mejs__horizontal-volume-slider {
  margin-top: -4px;
}
/* musicplayer */