@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;
max-width: 100%;
height: auto;
}

/*リンク時の枠の点線をなしにする*/
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:#faf8f5;
}


/*リンクの装飾の設定*/
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:100vh;
  min-height:700px;
  /* 画像ファイルの指定 */
  background-image: url(images/maingra_l.jpg);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
  background-size: cover;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  }

#header_top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 960px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#header_top h1 {
  padding: 0;
  float: none;
  margin-bottom: 30px;
}

.hero-title {
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  margin: 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-family: 'Hannari', serif;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #fff;
  margin: 30px 0 50px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  font-family: 'Hannari', serif;
  display: block;
  position: relative;
}

.hero-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.cta-button {
  display: inline-block;
  padding: 18px 40px;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  min-width: 200px;
}

.cta-primary {
  background: linear-gradient(135deg, #e0a5a6 0%, #d66868 100%);
  color: #fff;
  border: 2px solid #fff;
}

.cta-primary:hover {
  background: linear-gradient(135deg, #d66868 0%, #c55a5a 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  color: #fff;
  text-decoration: none;
}

.cta-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #e0a5a6;
  border: 2px solid #fff;
}

.cta-secondary:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  color: #d66868;
  text-decoration: none;
}

#header_top p {
  font-size: 120%;
  color: #fff;
  padding: 0;
  font-family: 'Hannari', serif;
}

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


#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
}

/*@media only screen and (max-width: 767px) {
#header_top {
    background-image: url(images/maingra_s.jpg);
  }
}*/

/*==========================================
グローバルナビゲーションの設定
============================================*/
#globalnav{
	text-align:center;
	margin:0 auto;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}
#globalnav ul{
	width:900px;
	max-width: 100%;
	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:#f5f2ed;
	padding-top: 50px;
}

h2{
	text-align:center;
	font-family: 'Pinyon Script', cursive;
	font-size:60px;
}

.more{	
	font-family: 'Zeyada', cursive;
	font-size:100%;
}


/*==========================================
枠とテキストエリアの設定
============================================*/
.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;
}

.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_event{
	width:600px;
	min-height:350px;
	margin:0 auto 50px;
	padding:40px;
	background:#fff;
	color:#333;
}

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

.btn_pagetop_wrap{
	width:100%;
	max-width:940px;
	margin:20px auto 0;
}

.btn_pagetop_wrap .btn_pagetop{
	margin:0;
}

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

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

#btn_pagetop_last .btn_pagetop{
	width:100%;
	margin:0;
	padding:0;
	text-align:right;
}

/*==========================================
ラインの設定
============================================*/

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

#event_header,#book_header,#press_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{
	background:url(images/race03.png) 0 0 repeat-x;
}

#story,#news,#company,#event,#book{
	background:url(images/bg02.gif) 0 0 repeat;
	padding: 100px 0;
	position: relative;
	margin: 0;
}

#service,#message,#contact{
	background:url(images/bg03.gif) 0 0 repeat;
	padding: 100px 0;
	position: relative;
	margin: 0;
}

#news, #service, #story, #message, #company, #contact {
	margin-bottom: 0;
	position: relative;
}

#news::before, #service::before, #story::before, #message::before, #company::before, #contact::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 800px;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(224, 165, 166, 0.5), transparent);
}

#news h2, #service h2, #story h2, #message h2, #company h2, #contact h2 {
	margin-bottom: 50px;
	position: relative;
	animation: fadeInUp 0.8s ease-out;
}

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

.section-content {
	animation: fadeInUp 1s ease-out;
	animation-fill-mode: both;
}

.section-content:nth-child(2) {
	animation-delay: 0.2s;
}

.section-content:nth-child(3) {
	animation-delay: 0.4s;
}

/*==========================================
　Service紹介スライドの設定
============================================*/
.service-images {
	width: 100%;
	max-width: 1200px;
	margin: 50px auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	padding: 0 20px;
	box-sizing: border-box;
	text-align: center;
	justify-items: center;
}

.service-image-item {
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	background: #fff;
}

.service-image-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.service-image-item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.service-image-item:hover img {
	transform: scale(1.05);
}

.service-image-item a {
	display: block;
	text-decoration: none;
}

.service-links {
	width: 100%;
	max-width: 1200px;
	margin: 50px auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.service-links h3 {
	font-size: 1.8rem;
	color: #e0a5a6;
	margin-bottom: 30px;
	text-align: center;
	font-weight: bold;
	font-family: 'Hannari', serif;
}

.service-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.service-links li {
	margin-bottom: 15px;
	padding: 15px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.service-links li:hover {
	transform: translateX(5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.95);
}

.service-links a {
	color: #d66868;
	font-weight: bold;
	text-decoration: none;
	font-size: 1rem;
	display: block;
	transition: color 0.3s ease;
}

.service-links a:hover {
	color: #e0a5a6;
	text-decoration: underline;
}


/*==========================================
　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,
#eventcal dt{
	font-size:95%;
	float:left;
	clear : both;
	width:90px;
	margin-bottom:10px;
	font-family: 'Pinyon Script', cursive;
}

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

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

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

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

/*==========================================
　代表挨拶・事業内容の設定
============================================*/
#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;
	display:flex;
	align-items:center;
	justify-content:center;
}
	
#contact #mail{
	text-align:center;
	font-size:150%;
	width:100%;
	height:100%;
	padding:0 40px;
	box-sizing:border-box;
	display:flex;
	justify-content:center;
	align-items:center;
}

#contact #mail .contact-button{
	display:inline-block;
	padding:12px 24px;
	background:linear-gradient(135deg, #e0a5a6 0%, #d66868 100%);
	color:#fff;
	border-radius:30px;
	font-size:1rem;
	font-weight:bold;
	text-decoration:none;
	box-shadow:0 4px 10px rgba(0,0,0,0.15);
	transition:all 0.3s ease;
	margin-top:32px;
}

#contact #mail .contact-button:hover{
	background:linear-gradient(135deg, #d66868 0%, #c55a5a 100%);
	color:#fff;
	transform:translateY(-2px);
	text-decoration:none;
}

#contact #mail .contact-button:focus{
	outline:2px solid #fff;
	outline-offset:3px;
}

#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;
}

.sumnail{
	margin:30px 0 5px 0;
}

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

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

#book h4{
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size:140%;
	margin-bottom:15px;
}

#book 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;
}

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

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

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

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

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

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

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

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

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

#book .event_box{
	border: 1px solid #999;
	padding:10px;
	margin-bottom:10px;
	}

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

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

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

/*==========================================
　オープンデータページの設定
============================================*/
#press{
	font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
}

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

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

#press h5{
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size:120%;
	margin-top:7px;
}

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

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

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

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

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

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

#press .event_box{
	border: 1px solid #999;
	padding:10px;
	margin-bottom:10px;
	}
	
#press .event_box2{
	border:3px double #d9cebc;
	padding:10px;
	border-radius:3px;
	margin-bottom:50px;
	}
	
#press .event_box3{
	border: 2px solid #f0f0f0;
	border-radius:10px;
	font-size:95%;
	padding:10px;
	margin:5px 10px 15px 10px;
	line-height:1.6;
	}
	
#press .event_box4{
	border: 2px solid #f0f0f0;
	border-radius:10px;
	font-size:95%;
	padding:10px;
	margin:5px 10px 15px 10px;
	line-height:1.6;}

#press .fl_left{
	float:left;
	border: 2px solid #f0f0f0;
	border-radius:10px;
	font-size:95%;
	padding:10px;
	margin:5px 0 15px 10px;
	width:250px;
	height:200px;}
	
#press .fl_right{
	float:right;
	border: 2px solid #f0f0f0;
	border-radius:10px;
	font-size:95%;
	padding:10px;
	margin:5px 10px 15px 0;
	width:250px;
	height:200px;}
	
.textarea_event .event_box3 #od_note{
	font-size:90%;
	color:#D66868;}

#press .event_box2 p{
	font-size:120%;
	line-height:1.8;}

#press ol{
	line-height:1.8;
	margin:0 15px 0 15px;
	list-style-type: decimal;}
	
#press .li_heart{
	padding-left: 15px;
	margin-bottom:5px;
	background:url(images/heart.png) 0 5px no-repeat;}

#press .li_prize{
	padding-left:18px;
	background:url(images/prize2.png) 0 5px no-repeat;}

.tag{
	font-size:110%;
	margin-left:20px;}
	
.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: cover;
		background-position: center center;
		height: auto;
		min-height: 500px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.hero-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		width: 100%;
	}
	
	.hero-title {
		font-size: 1.8rem;
		white-space: nowrap;
		margin: 20px 0;
		order: 1;
	}
	
	.hero-subtitle {
		font-size: 1.2rem;
		margin: 20px 0 30px;
		display: block;
		position: relative;
		order: 2;
	}
	
	.hero-cta {
		flex-direction: column;
		align-items: center;
	}
	
	.cta-button {
		width: 90%;
		max-width: 300px;
		padding: 15px 30px;
		font-size: 1rem;
	}
	
	#header_top_event {
		background-size: 100% auto;
	}
	
	#globalnav {
		width: 100%;
		padding: 0;
		position: relative;
		background: rgba(255, 255, 255, 0.98);
	}
	
	#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;
	}
	
	#globalnav img {
		max-width: 100%;
		height: auto;
		width: auto;
		max-height: 50px;
	}
	
	#contents {
		width: 100%;
		padding: 0 10px;
		padding-top: 0;
		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 {
		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-images {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0 10px;
		margin: 30px auto;
	}
	
	.service-image-item {
		margin-bottom: 20px;
	}
	
	.service-links {
		padding: 0 10px;
		margin: 30px auto;
	}
	
	.service-links h3 {
		font-size: 1.5rem;
		margin-bottom: 20px;
	}
	
	.service-links li {
		padding: 12px;
		margin-bottom: 12px;
	}
	
	.service-links a {
		font-size: 0.9rem;
	}
	
	
	.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 {
		width: auto;
		min-width: 80px;
	}
	
	#news 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%;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	
	#contact #mail, #contact #address {
		width: auto;
		max-width: 100%;
		padding: 10px 20px;
		box-sizing:border-box;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	
	#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, #press .event_box, #press .event_box2, #press .event_box3, #press .event_box4 {
		margin: 10px;
		padding: 10px;
		box-sizing: border-box;
	}
	
	#press .fl_left, #press .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;
	}
}

/*==========================================
menubarの設定（shipディレクトリ用）
============================================*/
#menubar ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #f8f9fa;
	border-radius: 5px;
	padding: 10px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	max-width: 100%;
}

#menubar ul li {
	margin: 5px;
}

#menubar ul li a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: #333;
	background-color: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 5px;
	transition: all 0.3s ease;
	font-weight: 500;
}

#menubar ul li a:hover {
	background-color: #4169e1;
	color: #fff;
	border-color: #4169e1;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(65, 105, 225, 0.3);
}

#menubar ul li.current a {
	background-color: #4169e1;
	color: #fff;
	border-color: #4169e1;
	font-weight: bold;
}

/* 問い合わせフォームのスタイル */
#contact #mail {
	padding-top: 0;
	height: auto;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.contact-form {
	width: 100%;
}

.contact-form .form-group {
	margin-bottom: 20px;
}

.contact-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: #333;
	font-weight: normal;
}

.contact-form .required {
	color: #e74c3c;
	margin-left: 4px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: #4169e1;
	box-shadow: 0 0 5px rgba(65, 105, 225, 0.2);
}

.contact-form textarea {
	resize: vertical;
	min-height: 120px;
}

.contact-form .submit-btn {
	background-color: #4169e1;
	color: #fff;
	padding: 12px 40px;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.contact-form .submit-btn:hover {
	background-color: #3151c0;
}

.contact-form .submit-btn:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

.form-message {
	margin-top: 15px;
	padding: 12px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.form-message.success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.form-message.error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.contact-form-wrapper {
	max-width: 560px;
	margin: 0 auto;
}

.contact-form {
	width: 100%;
}

.contact-form-group {
	margin-bottom: 16px;
}

.contact-form-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.contact-form-row .contact-form-group + .contact-form-group {
	margin-top: 0;
}

.contact-form-row .contact-form-group {
	flex: 1 1 240px;
	margin-bottom: 0;
}

.contact-form-status {
	display: none;
	margin-top: 16px;
	font-size: 14px;
	font-weight: bold;
	color: #555;
}

.contact-form-status.is-success {
	display: block;
	color: #2c8c5c;
}

.contact-form-status.is-error {
	display: block;
	color: #c0392b;
}

.contact-form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: bold;
}

.contact-form-group input,
.contact-form-group textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 14px;
}

.contact-form-group textarea {
	min-height: 70px;
	resize: vertical;
}

.contact-form-submit {
	display: inline-block;
	padding: 12px 32px;
	background-color: #d77ca8;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.contact-form-submit:hover,
.contact-form-submit:focus {
	background-color: #c06692;
}

.contact-form-hint {
	font-size: 12px;
	color: #666;
	margin-top: 8px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
	#contact #mail {
		width: 100%;
		padding: 10px;
	}
	
	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form textarea {
		font-size: 16px; /* iOSでズームを防ぐ */
	}
	
	.contact-form .submit-btn {
		width: 100%;
		padding: 14px;
	}
}