@charset "Shift_JIS";
/*
 ------------------------------

 ◆(C)ANA /anamail/omiyage/hokkaido_sapporo/ CSS
 ◆Version: 1.0
 ◆creation date: 18/04/2016
 ◆last update: 18/04/2016

 ◆INDEX
	01 Public, Common
	02 #EyeCatch
	03 #section1
	04 #section2
	05 #section3
	06 #section4
	07 #section5
	08 #ContentFooterBanner
 ----------------------------- */

body {
  width: 100%;
  margin: 0;
}
img {
  height: auto;
}
/* ------------------------------
	01 Public , Common
 ----------------------------- */
#DomTourContainer {
  width: 100%;
}
#MainContents {
  background: url(../image/bg_pattern.jpg);
  font-size: 13px;
  line-height: 1.5rem;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-align: center;
}
.Wrap, .Sec {
  width: 950px;
  padding: 0;
  margin: 0 auto 20px auto;
  text-align: center;
}
.SectionTitle {
  margin: 0 auto 5px;
  display: block;
}
.ItemName {
  margin-bottom: 10px;
  text-align: right;
  padding-right: 5px;/*	text-align:center;*/
}
.ItemName img {
  height: auto;
  padding: 0 20px;
}
.Description {
  line-height: 25px;
  margin-bottom: 30px;
  text-align: left;
  font-size: 13px;
}
.Description_1 {
  line-height: 25px;
  margin-bottom: 30px;
  text-align: left;
  font-size: 13px;
  padding: 0 5px 0 30px;
}
.ItemName_1 {
  height: auto;
  padding: 0 0 0 30px;
}
/*--------------------------
	◆float
---------------------------- */
.LeftSide {
  float: left;
  position: relative;
}
.RightSide {
  float: right;
  position: relative;
}
/*--------------------------
	◆clearfix
---------------------------- */
.cf:before, .cf:after {
  content: "";
  display: block;
  overflow: hidden;
}
.cf:after {
  clear: both;
}
/* ------------------------------
	01 #EyeCatch
 ----------------------------- */
#EyeCatch {
  height: auto;
  position: relative;
  width: 100%;
  min-width: 950px;
}
#EyeCatch .main_images {
  width: 100%;
}
#EyeCatch .main_images .logo {
  display: block;
  position: absolute;
  top: 1.5%;
  left: 1.45%;
}
#EyeCatch .main_images .slice_image img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  display: block;
}
#EyeCatch .text_wrap {
  position: absolute;
  top: 6%;
  width: 100%;
  left: 0;
}
#EyeCatch .text_wrap .title, #EyeCatch .text_wrap .text {
  width: 40%;
  display: block;
  margin: auto;
}
#EyeCatch .text_wrap .title img, #EyeCatch .text_wrap .text img {
  width: 95%;
  height: auto;
}

@media screen and (min-width: 1450px) {
#EyeCatch .text_wrap .title,  #EyeCatch .text_wrap .text {
  width: 615px;
}
}
/* ------------------------------
	02 #Intro
 ----------------------------- */
#Intro.Wrap {
  margin-bottom: 28px;
}
#Intro .InnerContents {
  position: relative;
  top: -14px;
  height: 280px;
  text-align: left;
}
#Intro .TargetMap {
  position: absolute;
  top: -85px;
  right: -5px;
  height: auto;
}
#Intro .Comment {
  float: right;
  position: absolute;
  top: 20px;
  left: -5px;
  width: 409px;
}
#Intro .Comment h3 {
  margin-bottom: 0;
}
#Intro .Comment h3 .page_area_title {
  margin: 0 0 0 0;
}
#Intro h3 + p {
  width: 450px;
  padding-left: 15px;
}
/* ------------------------------
	03 #Section1
 ----------------------------- */
#Section1.Sec {
  text-align: left;
  width: 950px;
  padding-top: 90px;
}
#Section1 .InnerContents {
  position: relative;
}
#Section1 .SectionTitle {
  position: relative;
  margin-bottom: 20px;
}
#Section1 .LeftSide {
  width: 488px;
  right: 0;
}
#Section1 .LeftSide > img {
  position: relative;
  top: -90px;
  left: 0;
}
#Section1 .LeftSide > img + img {
  left: 0;
  margin-top: 20px;
}
#Section1 .RightSide {
  width: 356px;
  position: relative;
  right: 70px;
  top: -110px;
}
#Section1 .ImgTitle {
}
#Section1 .comment_image {
  position: relative;
  top: -20px;
  right: -215px;
}
#Section1 .image_01 {
  margin-top: 0;
}
#Section1 .image_02 {
  position: relative;
  left: 40px;
  top: -10px;
}
#Section1 .RightSide .ItemName_1 {
  height: auto;
  padding: 0;
  margin-bottom: 10px;
}
#Section1 .RightSide .Description_1 {
  padding: 0;
  margin: 0;
}
/* ------------------------------
	04 #Section2
 ----------------------------- */
 
#Section2.Sec {
  margin-bottom: 10px;
  padding-top: 0;
  margin-top: -5px;
}
#Section2 .LeftSide {
  width: 336px;
  padding: 0;
  left: 55px;
  top: -70px;
}
#Section2 .LeftSide .Description {
  width: 338px;
  margin: 0;
}
#Section2 .LeftSide .SectionTitle {
  position: relative;
  padding: 0 0 15px 0;
}
#Section2 .LeftSide .ItemName {
  text-align: right;
}
#Section2 .LeftSide .ItemName img {
  padding: 0;
}
#Section2 .RightSide {
  width: 492px;
  padding-top: 0;
  right: 0;
  top: -65px;
}
#Section2 .RightSide .image_01 {
  position: relative;
  right: 0;
  top: 0;
}
#Section2 .RightSide .image_01 > img {
  position: relative;
  left: -55px;
}
#Section2 .RightSide img + img {
  margin: 20px 60px 0 0;
}
/* ------------------------------
	05 #Section3
 ----------------------------- */


#Section3.Sec .InnerContents {
  margin: auto;
  text-align: left;
}
#Section3 .RightSide {
  width: 356px;
  right: 40px;
  top: -65px;
}
#Section3 .SectionTitle {
  position: relative;
  padding: 0;
  left: 0;
}
#Section3 .SectionTitleNote {
  text-align: center;
  margin: 0 0 10px;
}
#Section3 .txtBlue {
  color: #0000ff;
}
#Section3 .ItemName {
  margin-left: 0;
}
#Section3 .ItemName > img {
  padding: 0;
}
#Section3 .LeftSide {
  width: 487px;
  left: 40px;
}
#Section3 .LeftSide .image_01 {
  position: relative;
  right: 0px;
  padding-bottom: 20px;
}
#Section3 .RightSide .image_04 {
  position: absolute;
  left: 0;
}
#Section3 .LeftSide .CommentWrap {
  text-align: right;
  padding-left: 60px;
  padding-right: 10px;
}
#Section3.Sec {
  margin-top: 35px;
}
#Section3 .image_02 {
  position: relative;
  left: 40px;
  top: -20px;
}
#Section3 .LeftSide img + img {
  position: relative;
  left: 0;
}
#Section3 .Description {
  width: 356px;
}
/* ------------------------------
	06 #Section4
 ----------------------------- */
#Section4.Sec {
  padding-top: 0px;
}
#Section4.Sec .InnerContents {
  width: 956px;
  margin: -20px auto;
  text-align: left;
}
#Section4 .LeftSide {
  width: 355px;
  left: 30px;
  top: -35px;
}
#Section4 .image_01 {
  position: relative;
  margin-bottom: 20px;
  left: -60px;
}
#Section4 .art_head_02 {
  margin: 0 auto 10px;
}
#Section4 .RightSide {
  width: 500px;
  position: relative;
}
#Section4 .RightSide .SectionTitle {
  position: relative;
  right: 15px;
}
#Section4 .RightSide .img02 {
  position: relative;
  display: block;
  margin: 0 auto;
  right: -10px;
  text-align: right;
  padding-top: 20px;
}
#Section4 .CommentWrap {
  margin-top: 20px;
}
#Section4 .Description {
  padding: 0;
  margin-bottom: 10px;
}
#Section4 .image_02 {
  margin-left: 60px;
}
#Section4 .ItemName img {
  padding: 20px 0 0 0;
}
/* ------------------------------
	07 #Section5
 ----------------------------- */
#Section5.Sec {
  text-align: left;
  width: 950px;
  margin: 30px auto 70px;
}
#Section5 .LeftSide {
  width: 487px;
  z-index: 1;
  position: relative;
  left: 40px;
  top: 0;
}
#Section5 .LeftSide .image_01 {
  position: relative;
  right: 0px;
  top: 0px;
  margin-bottom: 20px;
}
#Section5 .LeftSide .ItemName_1 {
  padding: 0;
  margin-bottom: 20px;
}
#Section5 .LeftSide .Description_1 {
  padding: 0;
}
#Section5 .SectionTitle {
  margin: 0 auto 25px;
}
#Section5 .RightSide {
  width: 336px;
  height: auto;
  position: relative;
  top: 0;
  left: -45px;
  margin-bottom: 0;
}
#Section5 .RightSide .img02 {
  margin: 0 0 0 40px;
}
#Section5 .RightSide .ItemName img {
  padding: 0;
}
#Section5 .RightSide .image_02 {
  position: relative;
  padding: 30px 0 0 12px;
}
#Section5 .LeftSide .image_02 {
  margin-top: 30px;
  position: relative;
  left: 10px;
}
#Section5 .LeftSide .image_03 {
  padding-top: 20px
}
#Section5 .Description {
  margin-bottom: 10px;
}
#Section5 .CommentWrap {
  position: absolute;
  bottom: -150px;
  right: 10px;
}
#Section5 .art_head_03 {
  margin: 0 0 30px 24px !important;
}
/* ------------------------------
	08 #ContentFooterBanner
 ----------------------------- */
#ContentFooterBanner {
  margin: 0 auto 30px;
}
#ContentFooterBanner .ImgTitle {
  display: block;
  margin: 0 auto 10px;
}
#ContentFooterBanner .Btn {
  display: block;
  margin: 0 auto 10px;
  text-align: center;
  cursor: pointer;
}
.other-links h4 {
  text-align: center;
  margin: 0 auto 30px;
}
.other-links ul {
  margin-bottom: 30px;
}
.other-links ul li {
  display: inline-block;
}
.other-links ul li a {
  display: inline-block;
}
.other-links ul li a:hover {
  opacity: 0.85;
}
.other-links ul li.leftList {
  padding-right: 13px;
}
.other-links ul li.rightList {
  padding: 0;
}
.Survenia h4.SurveniaTitle {
  padding: 30px 0 20px 0;
  text-align: center;
}
.Survenia {
  background: url(../image/bg_frame.png) center top no-repeat;
  width: 950px;
  height: 200px;
  margin: 0 auto 30px;
}
.Survenia .cf {
  width: 865px;
  margin: auto;
}
.Survenia .cf .LeftSide {
  width: 370px;
  text-align: left;
  padding: 6px 0 0 0;
  letter-spacing: 2px;
  font-size: initial;
  line-height: initial;
}
.Survenia .LeftSide img {
  float: left;
  margin: 10px 10px 0 0;
}
.Survenia .LeftSide p {
  float: left;
  width: 60%;
  font-size: 14px;
  line-height: 1.5em;
}
.Survenia .cf .RightSide {
  width: 465px;
  border-left: 1px solid #a89c7e;
  padding-left: 20px;
}
.anafasta {
  width: 100%;
  height: auto;
}
.Survenia a:hover {
  opacity: 0.85;
}
.backnumber_btn {
  margin: 0 0 37px 0;
}
/* ------------------------------
	09 #SnsIcon
 ----------------------------- */
#SnsIcon {
}
#SnsIcon ul {
  width: 82px;
  margin: 0 auto;
}
#SnsIcon ul li {
  margin-right: 10px;
  float: left;
  width: 36px;
}
#SnsIcon ul li a {
}
#SnsIcon ul li a img {
}
#SnsIcon ul li.right_icon {
  margin-right: 0 !important;
}
/* ------------------------------
	10 #LastSection
 ----------------------------- */
.LastSection {
  background: url(../image/bg_footer.jpg) repeat;
}
.LastSection .InnerContents {
  background: url(../image/bg_pattern_footer.png) repeat-x left top;
  padding: 100px 45px 30px;
}
#Section4 .CommentWrap {
  top: 425px;
}