@charset "utf-8";
/* CSS Document */

/*==========================================
ベースのCSSの設定
============================================*/
/*ベースの要素の設定をリセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,blockquote,th,td {
margin:0;
padding:0;
}

/*画像の枠線をクリアして位置の初期値の設定*/
img{
border:0;
vertical-align: top;
}

/*リンク時の枠の点線をなしにする*/
a{
outline: none;
}

/*リスト要素の初期値をリセット*/
ul,ol{
list-style: none;
}

/*フロート解除用のハック*/
/*clearfixの設定*/
.clearfix:after{  
visibility:hidden;/*見えなくする*/ 
height:0;/*見えなくする*/
display: block;/*block要素にする*/
font-size: 0;  
content: " ";  
clear: both;  

}  
* html .clearfix             { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */



/*==========================================
共通
============================================*/
body{
	font-size: 75%;
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	line-height:1.4;
	color:#666;
	background:#f4e8e2;
}


/*リンクの装飾の設定*/
a:link,
a:visited,
a:active{
	color:#666;
	text-decoration:underline;
}

a:hover{
color:#e0a5a6;
text-decoration:none;
}

body , html {
	height:100%;
	}

#container{
	min-height:100%;
	position:relative;
	background:url(images/bg01.jpg) 0 0 repeat;
}



/*==========================================
ヘッダーエリアの設定
============================================*/
#header{
	width:100%;
	margin:0 auto;
	position:relative;
	background:#fff;
}

#header_top {
  height:990px;
  /* 画像ファイルの指定 */
  background-image: url(images/maingra_l.jpg);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: top center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  }

#header_top_event {
	height:70px;
 	background: url(images/maingra_line.jpg) 0 0 no-repeat fixed;
}

#header_top h1{
	padding:20px 15px 0 20px;
	float:left;
}
#header_top p{
	font-size:120%;
	color:#fff;
	padding:30px;
	font-family: 'Hannari', serif
}

#header_top_event{
	height:70px;
}

#header_top_event h1{
	padding:9px 15px 9px 20px;
	float:left;
}
#header_top_event p{
	font-size:120%;
	color:#fff;
	padding:30px;
	font-family: 'Hannari', serif
}
/*==========================================
グローバルナビゲーションの設定
============================================*/
#globalnav{
	text-align:center;
	margin:0 auto;
}
#globalnav ul{
	width:800px;
	height:50px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

#globalnav li{
	float:left;
	text-align:center;
	width:100px;
}

/*==========================================
パン屑リストの設定
============================================*/
#guide ol{
	padding:30px 0 0 20px;
}
	
#guide li{
	display: inline;
}

#guide ol li:before {
  content: "　>　";
}
#guide ol li:first-child:before {
  content:"";
}

/*==========================================
コンテンツ 共通部分の設定
============================================*/
#contents{
	width:960px;
	margin:0 auto;
	position:relative;
	background:#ebe5db;
}

h2{
	text-align:center;
}

.text_mb20{
	margin-bottom:20px;
}

.text_mb50{
	margin-bottom:50px;
}

/*==========================================
枠とテキストエリアの設定
============================================*/
.frame_l{
	width:600px;
	height:350px;
	margin:0 auto;
	padding:40px;
	background:url(images/frame_l.png) 0 0 no-repeat;
}

.frame_m{
	width:600px;
	height:220px;
	margin:0 auto;
	padding:40px;
	background:url(images/frame_m.png) 0 0 no-repeat;
}


.frame_s{
	width:600px;
	height:120px;
	margin:0 auto;
	padding:40px;
	background:url(images/frame_s.png) 0 0 no-repeat;
}

.textarea_l{
	width:560px;
	height:310px;
	background:#fff;
	color:#000;
	padding:20px;
	opacity: 0.6;
	overflow-x:hidden;
}

#story .textarea_l{
	width:560px;
	height:310px;
	background:#fff;
	color:#000;
	padding:20px;
	opacity: 0.6;
	overflow-x:hidden;
}

#eventcal .textarea_l{
	width:560px;
	height:310px;
	background:#fff;
	color:#000;
	padding:20px;
	opacity: 0.6;
}

.textarea_m{
	width:560px;
	height:180px;
	background:#fff;
	color:#000;
	padding:20px;
	opacity: 0.6;
	overflow-x:hidden;
}

.textarea_s{
	width:520px;
	height:80px;
	background:#fff;
	color:#000;
	padding:20px 40px;
	opacity: 0.6;
}

.textarea_h{
	width:280px;
	height:310px;
	padding:20px 20px 20px 40px;
	background:#fff;
	color:#000;
	overflow:scroll;
	opacity: 0.6;
	overflow-x : hidden；
}

.textarea_event{
	width:600px;
	min-height:350px;
	margin:0 auto 50px;
	padding:40px;
	background:#fff;
	color:#333;
}

.textarea_event .prize {
    padding-left: 20px;
    background: url(images/prize2.png) 0 10px no-repeat;
}

/*==========================================
ラジオボタンの設定
==========================================*/
/*ラジオボタンは非表示にする*/
input[type=radio] {
  display: none; 
}
/* チェックされた時のスタイル */
input[type="radio"]:checked + label {
  background: #e0a5a6;
  color: #FFF; 
}
/* マウスオーバーしたときのスタイル */
.label:hover {
  background-color: #e5c9c8; 
}
/* lableのスタイル */
.label {
  color: #000;
  border: #dddddd solid 1px;
  display: block;
  height: 30px;
  width: 170px; 
  margin-bottom: -15px;
  line-height: 32px;
  padding-left: 20px;
  padding-right: 10px;
  cursor: pointer;
  font-size: 100%;
}

/*==========================================
テキストエリアの設定
==========================================*/
.textarea_event .a-box {
    border: 1px dashed #e0a5a6;
    border-radius: 10px;
    font-size: 95%;
    padding: 10px;
    margin: 10px 10px;
    line-height: 1.6;
    overflow: auto;
    clear: both;
}
.textarea_event .b-box {
    width: 150px;
    height: 40px;
    margin: 30px auto 0;
    border: 2px solid #e5c9c8;
    border-radius: 10px;
    background-color: #fff;
}
.textarea_event a{
    display:block;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
}
.textarea_event .boxleft1 {
    width: 200px;
	height: 150px;
	padding: 10px;
	float: left;
}
.textarea_event .boxright1 {
    width: 310px;
	height: 10px;
	padding: 10px;
	float: right;
}
.textarea_event .boxleft2 {
    width: 200px;
	height: 170px;
	padding: 10px;
	float: left;
}
.textarea_event .boxright2 {
    width: 310px;
	height: 10px;
	padding: 10px;
	float: right;
}
.textarea_event .text {
    font-size: 80%;
    color: #D66868;
}
.textarea_event .copy1 {
    width: 320px;
	height: 220px;
    float: right;
    margin: 10px 0 10px 0;
}
.textarea_event .copy2 {
    width: 315px;
	height: 138px;
    float: right;
    margin: 10px 0 10px 0;
}
.textarea_event .text1 {
    float: right;   
}
.textarea_event .text2 {
    text-align:right;
    float:right;
    margin: 0 5px 0 0;
    clear: both;
}

/*==========================================
フォローボタンの設定
==========================================*/
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
.animate, .btn, .btn-border-o:before, .btn-border-o:after, .btn-border:before, .btn-border:after, .btn-border-rev-o:before, .btn-border-rev-o:after, .btn-border-rev:before, .btn-border-rev:after, .btn-fill-vert-o:before, .btn-fill-vert-o:after, .btn-fill-vert:before, .btn-fill-vert:after, .btn-fill-horz-o:before, .btn-fill-horz-o:after, .btn-fill-horz:before, .btn-fill-horz:after {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.main-container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
section {
  padding: 5px 0;
  text-align: center;
  position: relative;
}
section:not(:last-child):after {
  content: '';
  width: 70%;
  height: 1px;
  border-bottom: 1px dashed #2c3e50;
  opacity: .5;
  position: absolute;
  bottom: -1px;
  left: 15%;
}
.btn {
  display: inline-block;
  line-height: 35px;
  margin: 8px;
  padding: 0 20px;
  font-size: 15px;
  position: relative;
  opacity: .999;
  border-radius: 5px;
}
.btn-fill-horz-o {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #B8B8B8;
  overflow: hidden;
}
.btn-fill-horz-o:before, .btn-fill-horz-o:after {
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}
.btn-fill-horz-o:before {
  left: 50%;
}
.btn-fill-horz-o:after {
  right: 50%;
}
.btn-fill-horz-o:hover {
  color: #fff;
}
.btn-fill-horz-o:hover:before, .btn-fill-horz-o:hover:after {
  width: 50%;
  opacity: 1;
}
.btn-fill-horz-o.btn-green:before, .btn-fill-horz-o.btn-green:after {
  background-color: #55ACEE;
}
.btn-fill-horz-o.btn-green:hover {
  border-color: #55ACEE;
}
.btn-fill-horz-o.btn-blue:before, .btn-fill-horz-o.btn-blue:after {
  background-color: #3b5998;
}
.btn-fill-horz-o.btn-blue:hover {
  border-color: #3b5998;
}
.btn-fill-horz-o.btn-purple:before, .btn-fill-horz-o.btn-purple:after {
  background-color: #3f729b;
}
.btn-fill-horz-o.btn-purple:hover {
  border-color: #3f729b;
}
.btn-fill-horz-o.btn-navy:before, .btn-fill-horz-o.btn-navy:after {
  background-color: #008000;
}
.btn-fill-horz-o.btn-navy:hover {
  border-color: #008000;
}

/*==========================================
トップに戻るボタンの設定
============================================*/
.btn_pagetop{
	width:940px;
	height:40px;
	padding-right:20px;
	margin:20px 0 0 0;
	text-align:right;
}

#btn_pagetop_last{	
	width:940px;
	height:40px;
	margin:20px 0 0 0;
	padding-right:20px;
	text-align:right;
	background:url(images/race02.png) 0 bottom repeat-x;
}

.btn_pagetop a,#btn_pagetop_last a{
	text-decoration:none;
	color:#5e5351;
	font-family: 'Parisienne', cursive;
	font-size:150%;
}

/*==========================================
ラインの設定
============================================*/
.line_solid_title{
	border-top: 3px double #d9cebc;
	margin:0 0 20px 0;
}

.line_solid{
	border-top: 3px double #d9cebc;
	margin:20px 0;
}

.line_dotted{
	border-top: 1px solid #e6dacc;
	margin:20px 0px;
}

/*==========================================
背景（ボーダー・クロス・レース）の設定
============================================*/
#news h2{
	background:url(images/race01.png) 0 0 repeat-x;
}

#event_header,#book_header,#opendata_header{
	background:url(images/race01.png) 0 0 repeat-x;
}

#story h2,#service h2,#contact h2{
	background:url(images/race04.png) 0 0 repeat-x;
}

#message h2,#company h2,#eventcal h2{
	background:url(images/race03.png) 0 0 repeat-x;
}

#story,#news,#company,#event,#book,#opendata{
	background:url(images/bg02.gif) 0 0 repeat;
}

#service,#message,#contact{
	background:url(images/bg03.gif) 0 0 repeat;
}

#eventcal{
	background:url(images/bg04.gif) 0 0 repeat;
}
/*==========================================
　Service紹介スライドの設定
============================================*/
#service_slide{
	width:600px;
	height:350px;
	overflow:hidden;
}
/*==========================================
　storyの設定
============================================*/
#story h3{
	text-decoration:none;
	font-size:130%;
	margin:20px;
}

#story .text{
	margin:20px;
}

#story .text_mb40{
	margin:20px 0px 40px 20px;
}

#story .img1{
	text-align:center;
	margin-top:20px;
}

#story .img2{
	border:#ccc solid 1px;
	text-align:center;
	margin-top:40px;
}

/*==========================================
　Newsの設定
============================================*/
#news .memo{
	width:600px;
	height:60px;
	margin:55px auto 0;
	text-align:center;
	}

#news dt{
	font-size:95%;
	float:left;
	clear : both;
	width:90px;
	margin-bottom:10px;
}

#news dd{
	font-size:100%;
	padding-left:100px;
	margin-bottom:10px;
}

#news #fl{
	text-align:center;
}

#news #fl_link{
	margin:0 auto 45px;
	height:40px;
	font-size:114%;
	padding-top:15px;
	text-align:center;
}

/*==========================================
　Eventの設定
============================================*/

#eventcal dt{
	font-size:95%;
	float:left;
	clear : both;
	width:90px;
	margin-bottom:10px;
}

#eventcal dd{
	font-size:100%;
	padding-left:100px;
	margin-bottom:10px;
}

/*==========================================
　代表挨拶・事業内容の設定
============================================*/
#message .frame_l img{
	float:left;
}

#message .name{
	margin-top:10px;
	text-align:right;
	font-weight:bold;
	font-size:114%;
}

#message .title{
	font-size:120%;
	margin-bottom:15px;
}

#message .text{
	margin-bottom:10px;
}

#company h3{
	text-decoration:none;
	font-size:120%;
	margin-bottom:15px;
	text-align:center;
}

#company h4{
	text-decoration:none;
	font-size:100%;
	margin-bottom:5px;
}

#company ul{
	margin-bottom:10px;
}

/*==========================================
　お問い合わせの設定
============================================*/
#contact h2{
	margin-bottom:40px;
}

#contact .frame_r{
	width:340px;
	height:230px;
	margin:0 auto 40px;
	background:url(images/frame_r.png) 0 0 no-repeat;
}
	
#contact #mail{
	text-align:center;
	font-size:150%;
	width:340px;
	height:30px;
	padding-top:122px;
}

#contact #address{
	text-align:center;
	font-size:100%;
	width:340px;
	height:80px;
	margin:0 auto 40px;
}

#map{
	width:500px;
	height:450px;
	margin:0 auto 50px;
	text-align:center;
}

/*==========================================
　イベント紹介ページの設定
============================================*/
#event{
	font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
	line-height:1.6;
}

#event h3{
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size:170%;
	margin-bottom:5px;
	color:#5e5351;
}

#event h4{
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size:120%;
	background:#f5f2ed;
	margin-bottom:7px;
}

#event h5{
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size:120%;
	padding:0 0 0 15px;
	background:url(images/heart.png) 0 8px no-repeat;
}

#event_pizza h4{
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size:120%;
	background:#fff2ed;
}

#event .date{
	font-family: 'Pinyon Script', cursive;
	font-size:200%;
	margin-bottom:15px;
	color:#5e5351;
}

#event .url{
	font-size:90%;
	color:#666;
	}

#event .url2{
	font-size:90%;
	color:#666;
	margin-top:10px;
	}

#event .url_last{
	font-size:90%;
	color:#666;
}

#event .place{
	font-size:115%;
	margin-bottom:10px;
}

#event .note{
	font-size:85%;
	color:#D66868;
}

#event .note2{
	font-size:120%;
	}

#event .note3{
	font-size:85%;
	color:#aaa;
}

#event .note4{
	font-size:85%;
	color:#c66;
	margin-bottom:10px;
}

#event .title{
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size:130%;
	margin-top:60px;
	color:#d9cebc;
	}
	
#event .pp{
	float:left;
	margin-right:20px
}

#event .event_box{
	border: 1px solid #999;
	padding:10px;
	margin-bottom:10px;
	}
	
#event .event_box2{
	border:1px double #e0a5a6;
	padding:10px;
	margin-bottom:50px;
	}

#pizza_text{
	margin-top:20px;
	width:310px;
	min-height:375px;
	padding:0 20px 0 0;
	float:left;	
}

#pizza_img{
	margin-top:20px;
	width:250px;
	min-height:375px;
	float:left;
}

#ff_li{
	margin:30px 0;
}

#event .li_heart{
	padding-left: 15px;
	margin-bottom:5px;
	background:url(images/heart.png) 0 5px no-repeat;
}

#kyousai{
	font-size:90%;
	color:#666;
	border: 3px double #d9cebc;
	padding:15px;
	margin:40px 10px 40px 10px;
}

#press{
	font-size:100%;
	color:#666;
	align:center;
	border: 3px double #d9cebc;
	padding:15px;
	margin:0 auto;
}

.sumnail{
	margin:30px 0 5px 0;
}
	
.tag .od_note2{
	font-size:90%;
	color:#D66868;
}

.link_button {
	width:250px;
	height:70px;
	margin:10px auto;
	border: 2px solid #e5c9c8;
	border-radius:10px;
	background-color: #fff;
}
.link_button:hover {
	background-color: #fff;
	border: 2px solid #e5c9c8;
	color: #f3e8e2;
}
/*==========================================
フッターの設定
============================================*/


#footer{
	background:#fff;
	text-align:center;
	width:100%;
}

#rikon{
	padding-top:30px;
	margin:0 0 25px 0;
}

#copy{
	font-size:92%;
	color:#999;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F36;
	color: #FFF;
	font-size: 10px;
	padding: 0px 5px;
	border-radius: 2px;
	margin: 0px 5px;
}

/*==========================================
レスポンシブ対応（スマートフォン）
============================================*/
@media only screen and (max-width: 960px) {
	#container {
		width: 100%;
		overflow-x: hidden;
	}
	
	#header_top {
		background-attachment: scroll;
		background-size: 100% auto;
		background-position: top center;
		height: auto;
		min-height: 300px;
	}
	
	#header_top_event {
		background-size: 100% auto;
	}
	
	#globalnav {
		width: 100%;
		padding: 0;
	}
	
	#globalnav ul {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	#globalnav li {
		width: auto;
		min-width: 80px;
		flex: 1 1 auto;
		float: none;
	}
	
	#globalnav img {
		max-width: 100%;
		height: auto;
		width: auto;
		max-height: 50px;
	}
	
	#contents {
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	
	.frame_l, .frame_r, .frame_m, .frame_s {
		width: auto;
		max-width: 100%;
		margin: 10px;
		padding: 20px;
		background-size: 100% 100%;
	}
	
	.textarea_l, .textarea_m, .textarea_s, .textarea_h {
		width: auto;
		max-width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}
	
	.textarea_event {
		width: auto;
		max-width: 100%;
		margin: 10px;
		padding: 20px;
		box-sizing: border-box;
	}
	
	#service_slide {
		width: 100%;
		height: auto;
		max-width: 100%;
	}
	
	.bxslider img {
		max-width: 100%;
		height: auto;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	#news .memo {
		width: auto;
		max-width: 100%;
		margin: 20px 10px 0;
	}
	
	#news dt, #eventcal dt {
		width: auto;
		min-width: 80px;
	}
	
	#news dd, #eventcal dd {
		padding-left: 10px;
	}
	
	#message .frame_l img, #pizza_img, #pizza_text, #book_img, #book_text {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 10px 0;
	}
	
	#pizza_text, #pizza_img, #book_text, #book_img {
		width: 100%;
		min-height: auto;
		padding: 0;
	}
	
	#contact .frame_r {
		width: auto;
		max-width: 100%;
		margin: 10px;
		background-size: 100% 100%;
	}
	
	#contact #mail, #contact #address {
		width: auto;
		max-width: 100%;
		padding: 10px;
	}
	
	#map {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 10px 0;
	}
	
	.link_button {
		width: auto;
		max-width: 90%;
		margin: 10px auto;
	}
	
	#footer {
		width: 100%;
		overflow-x: hidden;
	}
	
	#footer img {
		width: 100% !important;
		max-width: 100%;
		height: auto;
	}
	
	#rikon {
		padding: 30px 10px 0;
		word-wrap: break-word;
	}
	
	.btn_pagetop, #btn_pagetop_last {
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	
	h2 {
		font-size: 120%;
		padding: 10px;
	}
	
	h3 {
		font-size: 110%;
	}
	
	body {
		font-size: 90%;
	}
	
	#event .pp, #book .pp {
		float: none;
		width: 100%;
		margin: 10px 0;
	}
	
	#event .pp img, #book .pp img {
		max-width: 100%;
		height: auto;
	}
	
	#event .event_box, #event .event_box2, #book .event_box, #opendata .event_box, #opendata .event_box2, #opendata .event_box3, #opendata .event_box4 {
		margin: 10px;
		padding: 10px;
		box-sizing: border-box;
	}
	
	#opendata .fl_left, #opendata .fl_right {
		float: none;
		width: auto;
		max-width: 100%;
		margin: 10px;
	}
	
	#kyousai, #press {
		margin: 10px;
		padding: 10px;
		box-sizing: border-box;
	}
	
	#story .img1, #story .img2 {
		margin: 10px 0;
	}
	
	#story .img2 img {
		max-width: 100%;
		height: auto;
	}
}