@charset "utf-8";

/* ==========================================================

title : 東通トラベル TOP
scope : 人気のハネムーンスポット（長崎）

last modify :　2019/10/09 306_kondo 

memo  : 

========================================================== */

/* --------------------------------------
  common.css 上書き
--------------------------------------- */
#wrap {
  width: auto;
}
#header,
#main h1,
#foot_breadcrumb
 {
  margin: 0 auto;
  width: 1000px;
}
#about_area .foot_txt {
 line-height: 1.65em;
}

/* パンくずをulに変更
--------------------------------------- */
.top_box {
  margin: 0 auto;
  width: 940px;
}
#breadcrumb > ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: left;
	}
#breadcrumb > ul li {
  font-size: 16px;
  margin: 10px 0 0 1.25em;
  padding: 0;
  line-height: 18px;
  position: relative;
}
#breadcrumb > ul li::after {
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  content: '';
  display: block;
  height: 6px;
  position: absolute;
  top: .4em;
  left: -0.9em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 6px;
}
#breadcrumb > ul li:first-child {
  margin-left: 0;
}
#breadcrumb > ul li:first-child::after {
  display: none;
}

/* --------------------------------------
  ページ内共通
--------------------------------------- */
/* 行間 */
[id$="_area"] {
 line-height: 10px;
}
[id$="_area"] .txt_box > p {
 line-height: 1.65em;
}

/* バナー */
[id$="_area"] .bnr {
  margin-top:0;
}
[id$="_area"] .bnr a {
  display:inline-block;
}

/* 注釈 */
.note {
  text-indent: -1em;
  padding-left: 1em;
}

/* --------------------------------------
  nav_sapporo
--------------------------------------- */
#nav_sapporo {
  height:73px;
  margin: 8px auto 35px;
  width: 1000px;
}
#nav_sapporo ul {
  display: -webkit-flex;
  display: flex;
}
#nav_sapporo ul li {
}

/* --------------------------------------
  lead_area
--------------------------------------- */
#lead_area {
  background: url(../image/bk_lead.png) 0 25px no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto 37px;
  min-height: 404px;
  padding-bottom: 50px;
  text-align:center;
  width: 1020px;
}
#lead_area .ttl {
  margin: 0 auto 10px 0;
  width: 930px;
}
#lead_area .txt_box {
  margin: 0 20px 0 auto;
  width: 980px;
}
#lead_area .txt_box p {
  margin: 0 auto;
  text-align: justify;
  width: 748px; /* font-seiz 17px の 44文字分 */
}
#lead_area .txt_box p + p {
  margin-top: 1.5em;
}

/* --------------------------------------
  recommend_area
--------------------------------------- */
#recommend_area {
  margin: 0 auto;
  width: 1000px;
}
#recommend_area > .ttl {
  margin: 0 0 0 auto;
  text-align:center;
  width: 996px;
}

/* --------------------------------------
  spot_block
--------------------------------------- */
.spot_block h3 + div {
  display: -webkit-flex;
  display: flex;
  padding-top: 25px;
  margin:0 auto;
  width: 958px;
}

.spot_block > .ttl{
  display: table-cell;
  height: 59px;
  text-align:center;
  vertical-align:bottom;
  width: 1000px;
}
div > .spot_block > .ttl{
  height: 112px;
  width: 480px;
}

/* --------------------------------------
  spot_block 2カラム
--------------------------------------- */
.spot_block + div {
  display: -webkit-flex;
  display: flex;
  margin:0 auto;
  width: 962px;
}
.spot_block + div > section {
  margin:0 auto;
  width: 465px;
}
.spot_block + div > section:first-of-type {
  margin-left: 0;
}
.spot_block + div > section:last-of-type {
  margin-right: 0;
}

/* --------------------------------------
  photo_box
--------------------------------------- */
.photo_box {
  padding-top: 6px;
}
.photo_box li + li {
  margin-top: 20px;
}

/* --------------------------------------
  photo_box 2カラム内
--------------------------------------- */
div > .spot_block > .ttl + .photo_box {
  padding-top: 28px;
  padding-bottom: 14px;
}

/* --------------------------------------
  info_box
--------------------------------------- */
.info_box {
  margin-bottom: 14px;
  margin: 0 0 0 auto;
  width:450px;
}

/* 行間 */
[id$="_area"] .info_box * {
 line-height: 1.7em;
}

.info_box.ls p {
  letter-spacing: -0.035em;
}

.info_box > p {
  margin-bottom: 11px;
}
.info_box > p.ls_06 {
  letter-spacing: 0.06em;
}
.info_box > p.ls_075 {
  letter-spacing: 0.075em;
}

.info_box > p + dl{
  border-top: 1px solid #eee4d6;
}
.info_box > dl > div {
  border-bottom: 1px solid #eee4d6;
  display: -webkit-flex;
  display: flex;
}
.info_box > dl > div > * {
  padding: 14px 0;
}
.info_box > dl > div > dt {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #966c4a;
  font-weight: 600;
  margin-right: 22px;
  text-align: center;
  width: 118px;
}
.info_box > dl > div > dd {
  width: 310px;
}

/* --------------------------------------
  info_box 2カラム内
--------------------------------------- */
div > .spot_block > .info_box {
  width:465px;
}
div > .spot_block > .info_box > p {
  margin-bottom: 28px;
}
div > .spot_block > .info_box > dl > div:last-of-type {
  border-bottom: none;
}
div > .spot_block > .info_box > dl > div > dt {
  width: 138px;
  margin-right: 12px;
}
div > .spot_block > .info_box > dl > div > dd {
  width: 300px;
}

/* --------------------------------------
  price_list 料金
--------------------------------------- */
.price_list > dd > dl > div {
  display: -webkit-flex;
  display: flex;
}
.info_box > dl > div.price_list > dt.ttl {
  margin-right: 0;
  padding-left: 14px;
  text-align: left;
  width: 140px;
}

/* 大人～のdtが四文字の場合 */
.price_list_1 dt{
  width:4em;
}
.price_list_1 dt + dd {
  padding: 0 18px 0 15px;
}

/* 大人～のdtが五文字の場合 */
.price_list_2 dt{
  width:5em;
}
.price_list_2 dt + dd {
  padding: 0 18px 0 15px;
}

/* 注釈 */
.price_list_note {
  font-weight: 600;
  margin-top: 30px;
}

/* --------------------------------------
  transit 交通アクセス
--------------------------------------- */
.transit_train {
  background: url(../image/icon_train.png) 0 .2em no-repeat;
  color: #966c4a;
  text-indent: 28px;
  margin-top: 3px;
}

.transit_road {
  background: url(../image/icon_road.png) 0 .7em no-repeat;
  color: #966c4a;
  text-indent: 28px;
}

.transit_bus {
  background: url(../image/icon_bus.png) 0 .2em no-repeat;
  color: #966c4a;
  text-indent: 28px;
}

/* 隣接した際の余白 */
.transit_train + .transit_road,
.transit_train + .transit_bus,
.transit_bus + .transit_road {
  margin-top: 20px;
}

/* リスト共通 */
[class^="transit_list"] {
  color: #000;
  text-indent: 0;
  padding-left: 21px;
  letter-spacing: -0.02em;
}
/* リスト共通の行間 */
[id$="_area"] .info_box [class^="transit_list"],
[id$="_area"] .info_box [class^="transit_list"] * {
  line-height: 1.55em;
}
[class^="transit_list"] span {
  display: inline-block;
}

.transit_list_red {
  background: url(../image/icon_red.png) 0 .425em no-repeat;
}

.transit_list_blue {
  background: url(../image/icon_blue.png) 0 .425em no-repeat;
}

.transit_list_green {
  background: url(../image/icon_green.png) 0 .425em no-repeat;
}

/* --------------------------------------
  transit 2カラム内 リスト共通
--------------------------------------- */
div > .spot_block > .info_box [class^="transit_list"] {
  margin-top: 3px;
}

/* --------------------------------------
  spot_link_box 施設の詳細を見る
--------------------------------------- */
.spot_link_box {
  text-align:right;
}
.spot_link_box a {
  display:inline-block;
  margin-top: 20px;
  margin-right: -2px;
}

/* --------------------------------------
  food_area
--------------------------------------- */
#food_area {
  background: url(../image/bk_food.png) center top repeat;
  text-align:center;
  margin: 20px auto 0;
}
#food_area > div {
  background: url(../image/bk_food2.png) center top repeat-y;
  padding:40px 0;
}
#food_area > div * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#food_area > div > p {
  line-height: 1.625em;
  margin: 20px auto 40px;
  width: 35em;
}

#food_area div > dl {
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
  width: 1000px;
}
#food_area div > dl > div {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 2px 2px 4px rgba(120,120,120,0.2), 0 0 3px rgba(80,80,80,0.2);
  margin-right:20px;
  padding: 20px 18px 25px;
  width:235px;
}
#food_area div > dl > div:last-of-type{
  margin-right:0;
}

#food_area div > dl dt {
  display: table-cell;
  height:180px;
  text-align: center;
  vertical-align: bottom;
  width: 205px;
}

#food_area div > dl dt span {
  display:inline-block;
  color: #966c4a;
  font-size: 19px;
  font-weight: 600;
  margin:25px auto 0;
}
#food_area div > dl dt img {
  display:block;
  margin:auto;
}
#food_area div > dl dd {
  letter-spacing:-0.05em;
  line-height: 1.7em;
  padding-top: 14px;
  text-align: justify;
}

/* --------------------------------------
  event_area
--------------------------------------- */
#event_area {
  margin: 40px auto 0;
  text-align:center;
}
#event_area * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#event_area > dl {
  display: -webkit-flex;
  display: flex;
  margin: 30px auto;
  width: 980px;
}
#event_area > dl > div {
  margin: 0 auto;
  width: 306px;
}
#event_area > dl dt {
  background: url(../image/event_ribon.png) left top no-repeat;
  color: #fff;
  font-weight: 600;
  height:60px;
  line-height: 60px;
  margin-bottom: 20px;
  padding-left: 15px;
  text-align: left;
}
#event_area > dl div:last-of-type dt{
  padding-top: 5px;
  line-height: 1.5em;
}
#event_area > dl dd:first-of-type {
  margin-bottom: 14px;
}
#event_area > dl dd {
  line-height: 1.625em;
  text-align: left;
}

/* --------------------------------------
  present_area
--------------------------------------- */
#present_area {
  background: url(../image/nami_patern.png) center bottom repeat-x #f6fdff;
  text-align: center;
  padding: 40px 0 20px;
}
#present_area * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#present_area > p {
  line-height: 1.625em;
  margin: 20px auto;
}

#present_area > dl {
  background: url(../image/kurofune.png) right bottom no-repeat;
  display: -webkit-flex;
  display: flex;
  margin: 20px auto;
  padding-bottom: 100px;
  width: 980px;
}
#present_area > dl > div {
  margin: 0 auto;
  width: 306px;
}
#present_area > dl dt {
  color: #966c4a;
  font-size: 19px;
  font-weight: 600;
  margin:0 0 15px;
  text-align: left;
}
#present_area > dl dt img {
  display:block;
  margin:0 0 25px;
}
#present_area > dl dd {
  line-height: 1.625em;
  text-align: left;
}

/* --------------------------------------
  qa_area
--------------------------------------- */
#qa_area {
  margin: 40px auto;
  width: 850px;
}
#qa_area > .ttl {
  text-align: center;
}
#qa_area > dl {
  margin: 20px auto 0;
  line-height: 1.625em;
}
#qa_area > dl > div > dt {
  color: #966c4a;
  font-size: 19px;
  font-weight: 600;
  text-align: left;
}
#qa_area > dl > div > dd {
  margin: 10px 0 30px 2em;
}

/* --------------------------------------
  season_list
--------------------------------------- */
.season_list {
  margin-top: 20px;
}
.season_list > div {
  display: -webkit-flex;
  display: flex;
}
.season_list > div > dt {
  color: #966c4a;
  font-weight: 600;
}

/* --------------------------------------
  info_area
--------------------------------------- */
#info_area {
  background-color: #fffcf1;
  padding: 30px 0 10px;
  margin-bottom: 20px;
  text-align:center;
}
#info_area > *{
  text-align:left;
  margin:auto;
  width: 960px;
}

/* バナー */
#info_area > .bnr{
  text-align:center;
 	margin:20px auto 10px;
  width: 910px;
}
#info_area .bnr > * {
  display: inline-block;
	 margin:0 12px 20px;
}
[class^="bnr_"] > *{
  display: inline-block;
}

#info_area > .bnr_box2,
#info_area > .bnr_box3 {
  clear: both;
 	margin:0 auto 30px;
}
#info_area > .bnr_box2 > *,
#info_area > .bnr_box3 > *{
	 margin:20px 12px 0;
}
#info_area > .bnr_box2 > *:first-of-type {
  margin-left: 168px;
}
#info_area > .bnr_box3 > *:first-of-type {
  margin-left: 0;
}
#info_area > .bnr_box3 > *:last-of-type {
  margin-right: 0;
}

#info_area dl dt {
	float: left;
}

#info_area dl {
	border-top:1px solid #e7dfc0;
	padding-top:20px;
}
#info_area .bnr + dl {
	border-top: none;
}

#info_area dl ul, #info_area dl ul, #info_area dl ul{
	 float:right;
  line-height: 1.625em;
 	width:775px;
}

/* --------------------------------------
  arrow
--------------------------------------- */
.arrow {
  display: inline-block;
  padding-left: .8em;
  position: relative;
}
.arrow::before {
  display: block;
  content: '';
  position: absolute;
}
.arrow::before {
  top: .625em;
  left: 0;
  width: .3125em;
  height: .3125em;
  border-right: 2px solid #831444;
  border-bottom: 2px solid #831444;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* --------------------------------------
  last_note 
--------------------------------------- */
.last_note {
  text-align:right;
  margin:0 auto 40px;
  width: 980px;
}