@charset "utf-8";


/* ================================================================================
10月19日（金）の楽器体験広場に「コットンフィール」の海（うみ）ちゃんが来場します！
================================================================================= */
.sec_cotton_feel { display: flex; justify-content: space-between; }
.img_umi { width:20%; }
.img_umi img { width:100%; height: auto; }
.prof_cotton { width:78%; }

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
.sec_cotton_feel { flex-direction: column; }
.img_umi { width:70%; margin: auto auto 1em; }
.prof_cotton { width:100%; }
}

/* ================================================================================
common
================================================================================= */
.column_outer { background: #fff; }
.mfair2018 #contents {
  padding-top:0;
  background:transparent;
}

.bg_gray,
.bg_white {
  margin-top:10px;
  padding:40px;
  background:#fff;
}
.bg_gray {
  background:#f5f5f5;
}
.bg_gray.notice { padding:20px; }
.ttl_line {
  margin-bottom:15px;
  padding:10px 0;
  border-top:2px solid #000;
  border-bottom:2px solid #000;
  font-size:24px;
  text-align:center;
}
.pic_shadow {
  display:inline-block;
  box-sizing:border-box;
  padding:9px;
  background:#fff;
  border:1px solid #f4f4f4;
  box-shadow:0px 1px 8px -2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 8px -2px rgba(0,0,0,0.4);
  -webkit-box-shadow:0px 1px 8px -2px rgba(0,0,0,0.4);
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
.ttl_line { font-size: 18px; }
.bg_gray, .bg_white {
  padding:10px;
}

}



/* 見出し */
.txt_ttl_en { text-align: center; }
.txt_ttl { height: auto; margin-bottom: 1em; font-size: 36px; font-weight: 700; text-align: center; }
/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:768px) {
.txt_ttl { font-size: 24px; margin-bottom: 0.2em; }
}


/* ================================================================================
mv
================================================================================= */
.mv {
  max-width:1280px;
  margin:0 auto 10px;
}
.mv img {
  width:100%;
  height:auto;
}

/* ================================================================================
.intro
================================================================================= */
.intro { margin-top: 3em; margin-bottom: 3em; text-align: center; }

.intro h2 { margin-bottom: 0.6em; font-size: 36px; font-weight: bold; }
.intro p { font-size: 18px; }

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
	.intro { margin-top: 1em; margin-bottom: 1em; }
	.intro h2 { font-size: 20px; }
	.intro p { font-size: 14px; text-align: left; }
}

/* ================================================================================
page_nav
================================================================================= */
.page_nav {
  margin-top:10px;
  padding:5px;
  background:#f5f5f5;
  display: flex;
}
.page_nav li {
width: 33.33333%;
  padding:6px;
  box-sizing:border-box;
}
.page_nav a {
  display:block;
  background:#000 url(../img/bg_pagenav.png) 10px center no-repeat;
  line-height:31px;
  text-align:center;
  color:#fff;
  border-radius:3px;
}
.page_nav a:hover {
  display:block;
  background-color:#555;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
.page_nav { flex-direction: column; }
.page_nav li {
width: 100%;
}
}


/* ================================================================================
体験できる楽器
================================================================================= */
#gakki .txt_ttl { margin-bottom: 0.5em; font-size: 28px; }
#gakki .txt_notice { text-align: center; }

#gakki .md_ttl img {
  max-width:218px;
}
#gakki ul { margin-bottom: 1.5em; }
#gakki li {
  float:left;
  width:25%;
}
#gakki li:nth-child(5),
#gakki li:nth-child(9),
#gakki li:nth-child(13){ clear: left; }
#gakki li a { display: block; }
#gakki li a:hover { opacity: 0.7; }
#gakki li div {
  margin:9px;
  border:1px solid #ebebeb;
}
#gakki li div img {
  width:100%;
}
#gakki li div span {
  display:block;
  padding:6px 5px;
  background:url(../img/bg_brands.png);
  background-size:cover;
box-sizing: border-box;
  color:#fff;
  font-size: 12px; min-height: 30px; line-height: 150%; text-align: center; 
}

#gakki li div span.txt_band-taiken { padding:2px 5px; line-height: 125%; }

#gakki li div span span.font_s { min-height: auto; padding: 0; background-image: none; font-size: 9px; }

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
#gakki .bg_white {
  padding:10px;
}
#gakki ul { display: flex; justify-content:flex-start; flex-wrap: wrap; }
#gakki li {
  width:50%;
  float: none; 
}
#gakki li:nth-child(5),
#gakki li:nth-child(9),
#gakki li:nth-child(13){ clear: none; }
#gakki li div {
  margin:4px;
}
#gakki li div span { min-height: 45px; padding-top: 10px; }
}


/* ================================================================================
奏旅
================================================================================= */
.logo_kanatabi { display: flex;  margin: auto auto 3em; }
.logo_kanatabi .logo { width:320px; margin-right: 20px; }
.logo_kanatabi .logo img { width:100%; height: auto; }
.logo_kanatabi .txt_kanatabi { width:780px; box-sizing: border-box; padding: 1.5em 1em 1em; background: url(../img/bg_kanatabi_text.png) no-repeat; background-size: cover; color:#fff; font-size: 18px; }

#kanatabi h3 { }
#kanatabi h3 span { font-size: 18px; }
#kanatabi h3 img { width:100%; height: auto; }

.sec_moriguchi { display: flex; padding: 20px; }

.sec_moriguchi .photo { width:40%; margin-right: 20px; }
.sec_moriguchi .photo img { width:100%; height: auto; }

.sec_moriguchi .sec_schedule { width:calc(60% - 20px); width:webkit-calc(60% - 20px); font-size: 18px; }
.sec_moriguchi .sec_schedule .schedule { margin-bottom: 2em; padding: 1em 0; border-top:2px solid #000; border-bottom: 2px solid #000; }

.font_ll a:after { top:15px; }

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
	.logo_kanatabi { flex-direction: column; width:auto; margin: auto auto 2em; }
	.logo_kanatabi .logo,
	.sec_moriguchi .photo,
	.logo_kanatabi .txt_kanatabi { width:100%; margin-right: 0; }
	
	.logo_kanatabi .txt_kanatabi { margin-top: 1em; font-size: 14px; }
	#kanatabi h3 { font-size: 22px; }
	#kanatabi h3 span { font-size: 14px; }
	.sec_moriguchi { flex-direction: column; padding: 10px; }
	.sec_moriguchi .photo { margin-bottom: 1em;}
	.sec_moriguchi .sec_schedule { width:100%; margin-bottom: 1em;  font-size: 16px; }
}

/* ================================================================================
schedule
================================================================================= */
#schedule .box {
  border:1px solid #e6e6e6;
  margin-top:40px;
}
#schedule .box:first-child {
  margin-top:0;
}
#schedule .box h3 {
  padding:15px 5px;
  text-align:center;
	border-bottom: 1px solid #e6e6e6;
  font-size:22px;
  font-weight:bold;
}
.logo_kanatabi_schedule { width:150px; height: auto; margin-right: 1em; }

#schedule .box ul {
padding:15px 30px;
line-height:1.8;
font-size: 18px;
}

#schedule .box span { display: inline-block; padding-right: 1em; }

#schedule .box .date { margin-top: 1em; font-weight: bold; }
#schedule .box .date:first-child { margin-top: 0; }

#schedule .box li.txt_moriguchi span.special_stage { color:#af9577; font-weight: bold; }

#schedule .box li.txt_moriguchi span.special_stage img { width:550px; height: auto; }

#schedule p { padding-left: 30px; padding-right: 30px; }

#schedule sup,
#schedule sub { font-size: 12px; }

.disp_flex { display: flex; align-items: flex-start; }
.taiken_title { width:5em; }
/*
.box_schedule { display: flex; justify-content: space-between; }
.box_schedule ul { width:49%; }
*/
/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
	#schedule .box {margin-top:10px;}
	.logo_kanatabi_schedule { display: block; margin: auto; }
	#schedule .box ul { padding: 10px; font-size: 14px; }
	#schedule p { padding-left: 10px; padding-right: 10px; }
	#schedule li { margin-bottom: 0.3em; }
	#schedule .box#sec_kanatabi li span:nth-child(2) { width:auto; }
	#schedule .box li.txt_moriguchi span.special_stage img { width:100%; }
	
	.disp_flex { flex-direction: column; }
	.taiken_title { width:auto; }
}

/* ================================================================================
enjoy
================================================================================= */
#enjoy .md_ttl img {
  max-width:326px;
}
#enjoy h3 {
  margin:30px 0;
}
#enjoy h3:first-child {
  margin-top:0;
}
#enjoy .box {
  position:relative;
  min-height:275px;
  padding-right:430px;
}
#enjoy .box .pic_shadow {
  position:absolute;
  top:0;
  right:0;
}
#enjoy .box .pic_shadow img {
  max-width:390px;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
#enjoy .md_ttl_category img {
  max-width:80% ;
  height:auto;
}
#enjoy .box {
  min-height:auto;
  padding-right:0;
}
#enjoy .box .pic_shadow {
  position:static;
  margin-top:1em;
}
#enjoy .box .pic_shadow img {
  max-width:100%;
}
}

/* ================================================================================
contact
================================================================================= */
#contact .md_ttl img {
  max-width:268px;
}
#contact .bg_white {
  text-align:center;
}
#contact .txt_read {
  margin-bottom:25px;
  padding-bottom:30px;
  border-bottom:2px solid #000;
  font-size:20px;
  font-weight:bold;
}
#contact .contact_add {
  margin-bottom:30px;
  font-size:16px;
  line-height:1.8;
}
#contact .box_reserve {
  padding:40px;
  background:url(../img/bg_reserve.png.html);
  color:#fff;
}
#contact .txt_reserve {
  font-size:24px;
  font-weight:bold;
}
#contact .bt_reserve a {
  display:block;
  max-width:550px;
  box-sizing:border-box;
  margin:30px auto 0;
  padding:23px 15px;
  font-size:18px;
  background:#eb2035;
  color:#fff;
  border-radius:5px;
  text-align:center;
}
#contact .bt_reserve a:hover {
  background:#ef4d5d;
}

/* スマホサイズ調整----------------------------　*/
@media only screen and (max-width:750px) {
#contact .box_reserve {
  padding:20px;
}
#contact .bt_reserve a {
  margin-top:15px;
}
}

/* ================================================================================
clearfix
================================================================================= */
.page_nav:after,
#about_dp .group:after,
#fee #fee_list li:after,
#brands ul:after,
#rooms .box_wrapper:after,
#set .item_detail:after {
  content: "";
  clear: both;
  display: block;
}


#rooms .bt_reserve.coming a,
#set .bt_reserve.coming a,
#contact .bt_reserve.coming a { background-color:#999; font-size:12px; }