@charset "utf-8";
/* 共通
---------------------------------------------- */
/* clearfix */
.clearfix:after {
 content: "."; /* 新しい要素を作る */
 display: block; /* ブロックレベル要素に */
 clear: both;
 height: 0;
 visibility: hidden;
}
.clearfix {
 min-height: 1px;
}
* html .clearfix {
 height: 1px;
 /*¥*/ /*/
height: auto;
overflow: hidden;
/**/
}

/* 高汎用 */
.font_80{
 font-size: 80%;
}
.font_bold{
 font-weight: 900;
}
.font_bold_120{
 font-size: 120%;
 font-weight: 900;
}
.align_center{
 text-align: center;
}

/* スマホ非表示 */
.sp_none {
 display: none;
}
/* パンくず */
#breadCrumb {
 margin: 0 auto;
}
#breadCrumb ol {
 position: relative;
 padding: 4px 10px 6px;
 border-top: 1px solid #e2e2e2;
 border-bottom: 1px solid #e2e2e2;
 background: #fefefe;
 background: linear-gradient(to bottom, #fefefe 0%, #f4f4f4 100%);
 line-height: 1.4;
 z-index: 10;
}
#breadCrumb ol li {
 display: inline-block;
 padding: 0 0.5em 0 10px;
 background: url(/s/files/img/common/ico_topicpath_01.png) 0 50% no-repeat;
 background-size: 4px 7px;
 font-size: 10px;
}
#breadCrumb ol li, #breadCrumb ol li a {
 /*padding: 10px 0;*/
}
#breadCrumb ol li:first-of-type {
 padding-left: 0;
 background-image: none;
}
#harukara img {
 width: 100%;
 height: auto;
}
/* //////////////////////////////////////////////

トップページ
////////////////////////////////////////////// */
#harukara {
 font-family: "sans-serif" !important;
 margin-bottom: 20px;
 font-size: 15px;
}
/* キービジュアル
------------------------------------------ */
#harukara .keyV .inner {
 padding: 10px 0;
 text-align: center;
}
#harukara .keyV .inner img {
 width: 80%;
}

/* エリア検索
------------------------------------------ */
#harukara .areaMap {
 padding: 0 3% 1em;
}
#harukara .areaMap .areaMap_bg {
 background: url(../img/bg_area.jpg) no-repeat right top;
 background-size: cover;
}
#harukara .areaMap h4 {
 background: url(../img/icon01.png) no-repeat left 10px top 4px #57B6DD;
 padding: 10px 0.5em 8px 60px;
 color: #FFF;
 margin: 0 auto 10px;
 border-radius: 4px;
 font-size: 1.1em;
 text-shadow: none;
}
#harukara .areaMap h4 span {
 color: #ff8100;
 font-size: 130%;
 text-shadow: 2px 2px 1px #FFF, -2px 2px 1px #FFF, 2px -2px 1px #FFF, -2px -2px 1px #FFF, 2px 0px 1px #FFF, 0px 2px 1px #FFF, -2px 0px 1px #FFF, 0px -2px 1px #FFF;
 margin-right: 0.2em;
}
#harukara .areaMap dl {
 font-size: 16px;
 font-weight: bold;
 text-shadow: none;
 padding: 4px;
}
#harukara .areaMap dl:nth-child(1) {
 background: #2CB4B4;
}
#harukara .areaMap dl:nth-child(2) {
 background: #4BBA6D;
}
#harukara .areaMap dl:nth-child(3) {
 background: #EEC340;
}
#harukara .areaMap dl:nth-child(4) {
 background: #E77E69;
}
#harukara .areaMap dl:nth-child(5) {
 background: #E28A9B;
}
#harukara .areaMap dl:nth-child(6) {
 background: #7DA1D3;
}
#harukara .areaMap dl dt {
 color: #FFF;
 font-size: 70%;
 padding: 2px 1em;
}
#harukara .areaMap dl dd {
 width: 20%;
 float: left;
 padding: 0 2px;
 box-sizing: border-box;
 margin-bottom: 4px;
}
#harukara .areaMap dl dd a {
 display: block;
 text-align: center;
 background: #FFF;
 background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0); /* IE6-9 */
 border: #DDD solid 1px;
 border-radius: 3px;
 color: #222;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 transition: all 400ms ease-out;
 padding: 0.5em 0;
}
.searchLinks h2 {
 font-size: 200%;
 text-align: center;
 margin-top: 80px;
 position: relative;
 margin-bottom: 10px;
}
.searchLinks h2::after {
 margin-left: -16px;
 left: 50%;
 bottom: -10px;
 width: 32px;
 height: 2px;
 border-radius: 2px;
 background-color: #e95b00;
 content: "";
 position: absolute;
}
/* #gaiyou
---------------------------------------------- */
#gaiyou {
 width: 100%;
 margin: 0 auto 30px;
 padding: 20px 0 0;
 position: relative;
 background-image: url("/ssi/event/yoyaku_system/harukara/img/bg_re_x_01.png");
 background-repeat: repeat-x;
}
.tit_greenribbon {
 width: 86%;
 height: 4em;
 background-color: #36a638;
 margin: 0 auto 20px;
 border-radius: 10px;
 position: relative;
 padding: 20px 1%;
}
.tit_greenribbon:before {
 content: '';
 display: inline-block;
 width: 50px;
 height: 48px;
 background-image: url("/media/assets/img/support/concierge/ttl_bg01.png");
 background-size: contain;
 background-repeat: none;
 vertical-align: middle;
 position: absolute;
 left: -16px;
 bottom: -13px;
}
.tit_greenribbon:after {
 content: '';
 display: inline-block;
 width: 50px;
 height: 48px;
 background-image: url("/media/assets/img/support/concierge/ttl_bg02.png");
 background-size: contain;
 background-repeat: none;
 vertical-align: middle;
 position: absolute;
 right: -16px;
 bottom: -13px;
}
.tit_greenribbon p {
 display: block;
 font-size: 100%;
 font-weight: 900;
 color: #fff;
 margin: 0;
 text-align: center;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 width: 90%;
 z-index: 2;
}
.tit_greenribbon p span {
 font-size: 140%;
}
h2 {
 display: block;
 width: 100%;
 margin: 0 auto 30px;
 background-image: url("/ssi/event/yoyaku_system/harukara/img/bg_line.png");
 background-repeat: no-repeat;
 background-size: 100% 50%;
 background-position: center bottom;
 text-align: center;
 font-size: 200%;
 font-weight: 900;
 color: #4cb847;
 line-height: 1em;
}
h2 span {
 display: block;
 width: 80%;
 margin: 0 auto -20px;
 font-size: 50%;
 line-height: 1.8em !important;
}
.g_inner {
 width: 94%;
 margin: 0 auto;
 padding: 0 0 20px;
 position: relative;
 border: 3px solid #4cb847; /*theme_green*/
 background-color: #fffcd6; /*theme_light_yellow*/
 border-radius: 10px;
}
.g_inner p {
 display: block;
 line-height: 1.7em;
 margin: 0 15px 1.7em;
 text-align: left !important;
}
.boutou {
 width: 100%;
 margin: 0 0 40px 0;
 padding-top: 1em;
}
.illust01 {
 width: 100%;
 margin: 0;
}
/*画像横スクロールレスポンシブ
----------------------------------------*/
p.xscroll_guide {
 display: block;
 padding: 0.5em 0.5em 0.5em 1.5em;
 background-color: #fff;
 background-image: url(/ssi/event/yoyaku_service/img/sp/x_scroll.gif);
 background-repeat: no-repeat;
 background-size: auto 70%;
 background-position: 5px 5px;
 line-height: 1.3em;
 width: 92%;
 margin: 0;
 font-size: 80%;
}
.img_slide_of1 {
 width: auto;
 margin: auto;
 overflow: auto;
}
.img_slide_of1 img {
 height: auto;
 max-width: none;
 width: 700px!important;
}
.schedule {
 margin: 0 10px 30px;
 text-align: center;
 position: relative;
}
.schedule img {
 margin: 0 0 40px 0;
}
img.money {
 float:right;
 width:6em!important;
}
.green_band {
 display: block;
 margin: 0 0 20px 0;
 padding: 10px 16px;
 background-color: #4cb847;
 color: #fff;
 font-size: 140%;
 font-weight: 900;
}
.g_inner ul {
 list-style: none;
 margin: 0 10px;
}
.g_inner li {
 display: block;
 float: left;
 width: 31%;
 text-align: center;
 margin: 0 2% 0 0;
 padding: 0;
}
/* #why
---------------------------------------------- */
#why {
 width: 96%;
 margin: 0 auto 30px auto;
 padding: 30px 0 0;
}
.w_inner {
 width: auto;
 margin: 0 auto;
 padding: 0;
 position: relative;
 border: 3px solid #f36f23; /*theme_orange*/
}
.w_inner p {
 display: block;
 line-height: 1.7em;
 margin: 0 3% 1.7em;
 text-align: left !important;
}
p.w_tit {
 margin: 0 0 1em !important;
 padding: 16px 3em 16px 2%;
 display: block;
 background-color: #f36f23;
 color: #fff;
 font-weight: 900;
 font-size: 140%;
 line-height: 1.6em;
 position: relative;
}
p.w_tit img.boy {
 width: 3.5em !important;
 position:absolute;
 right:0;
 bottom:0;
 z-index:0;
}
img.move {
 width: 10em!important;
 margin: 0 10px 5px 5px;
 float: right;
}
/* エリア検索
------------------------------------------ */
.searchLinks h3 {
 font-size: 160%;
 text-align: center;
 margin-top: 60px;
 position: relative;
 margin-bottom: 10px;
}
.searchLinks h3::after {
 margin-left: -16px;
 left: 50%;
 bottom: -10px;
 width: 32px;
 height: 2px;
 border-radius: 2px;
 background-color: #e95b00;
 content: "";
 position: absolute;
}