@charset "UTF-8";
/* CSS Document */

:root {
	--regualr: 400;
	--semibold: 600;
	--bold: 700;
}

body {
	text-spacing-trim: trim-start;
	font-feature-settings: palt;
}

.contents {
	font-family: "Noto Serif JP", serif;
}

h2 {
	text-align: center;
	margin-bottom: 50px;
}

:where(.contents) img {
	width: auto;
}

/* 終了告知文 */
.Post {
	font-size: 22px;
	font-weight: 600;
	color: #c00;
	text-align: center;
	margin-top: 10px;
}

/* H1 */
#PageName {
	width: 1024px;
	margin: 10px auto;
	font-weight: bold;
}

/* Keyvisual */
.Bg__keyvisual {
	position: relative;
	background-image: url(/attending/t/szo-d/hakodate/images/bg_AS23-015015D.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 525px;
	overflow: hidden;
}

.Bg__keyvisual::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-image: url(/attending/t/szo-d/hakodate/images/HP24-033905D_SP22-006656D_BP24-005692D.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 1400px;
	height: 480px;
	z-index: 10;
}

.title {
	position: absolute;
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 959px;
	height: 433px;
	z-index: 11;
}

/* Block__tv */
.Block__tv {
	background-color: #9b6ac8;
	padding: 30px 0;
}

.Block__tv__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1024px;
	margin: 0 auto;
}

.Block__tv__inner dl {
	width: calc(100% - 300px - 50px);
}

.Block__tv__inner dt {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(44, 138, 167);
	background: linear-gradient(90deg, #4b3b20 0%, rgba(255, 255, 255, 1) 3%, rgba(255, 255, 255, 1) 97%, rgba(255, 255, 255, 0) 100%);
	font-size: 22px;
	font-style: normal;
	font-family: "Noto Sans JP", sans-serif;
	color: #4b3b20;
	text-align: left;
	padding: 10px 0;
}

.Block__tv__inner dt img {
	margin-right: 10px;
	width: 90px;
}

.Block__tv__inner dd {
	font-weight: 400;
	font-style: normal;
	font-family: "Noto Sans JP", sans-serif;
	color: #fff;
	margin-top: 10px;
}

.Block__tv__inner dd .emphasis {
	display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}

.Block__tv__inner figure {
	width: 300px;
	position: relative;
}

.Block__tv__inner figure img {
	width: 100%;
}
.Block__tv__inner figure .credit {
	position: absolute;
	right: 5px;
	bottom: 5px;
	font-size: 12px;
	color: #fff;
	text-shadow: 
	-1px 1px 3px rgb(0 0 0 / 100%), 
	1px -1px 3px rgb(0 0 0 / 100%), 
	-1px -1px 3px rgb(0 0 0 / 100%), 
	1px 1px 3px rgb(0 0 0 / 100%);
	font-family:sans-serif;
	font-weight: 600;
}

/* Block__tel */
.Block__tel {
	background: rgb(210, 130, 0);
	background: linear-gradient(90deg, rgba(210, 130, 0, 1) 0%, rgba(254, 240, 94, 1) 25%, rgba(255, 255, 255, 1) 50%, rgba(254, 240, 94, 1) 75%, rgba(210, 130, 0, 1) 100%);
	text-align: center;
	padding: 2px 0;
}

.Block__tel__inner {
	position: relative;
	background: #7900ac;
	background: linear-gradient(90deg, #7900ac 0%, #7900ac 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
    padding: 12px 0;
}

.Block__tel__inner::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url(/attending/t/szo-d/hakodate/images/wpn__inquiry.png);
	background-repeat: no-repeat;
	width: 138px;
	height: 116px;
}

/* Block__inquiry */
.Block__inquiry {
	background-color: #f8ebd4;
	text-align: center;
	padding: 60px 0;
}

.Block__inquiry a {
	transition: opacity 0.5s;
}

.Block__inquiry a:hover {
	opacity: 0.5;
}

/* Block__anchor */
.Block__anchor {
	position: relative;
	background: #51b244;
	background: linear-gradient(0deg, #9ace8c 0%, #51b244 100%);
	padding-top: 40px;
}

.Anchor__items {
	display: flex;
	justify-content: center;
	column-gap: 70px;
	margin-bottom: 40px;
}

.curve img {
	width: 100%;
	height: 100%;
}

/* 背景 */
[class^="Sec__"] {
	padding: 80px 0;
}

.Sec__cts01 {
	position: relative;
	background-image: url(/attending/t/szo-d/hakodate/images/bg01.png);
	background-repeat: repeat;
	padding: 0 0 80px;
}

.Sec__cts01__inner {
	position: relative;
	z-index: 2;
}

.Sec__cts02 {
	background-image: url(/attending/t/szo-d/hakodate/images/bg02.jpg);
	background-repeat: repeat;
}

.Sec__cts03 {
    background-size: auto auto;
    background-color: #d5f2ce;
    background-image: repeating-linear-gradient(-30deg, transparent, transparent 8px, #cef0cd 8px, #cef0cd 14px);
}

.Sec__cts04 {
	background-image: url(/attending/t/szo-d/hakodate/images/bg01.png);
	background-repeat: repeat;
}

/* hospitality */
.Point__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 838px;
	margin: 0 auto;
	padding-top: 50px;
}

.Point__item {
	position: relative;
	background-color: #fff;
	border: solid 3px #925bae;
	width: 100%;
	font-size: 22px;
	font-weight: var(--bold);
	letter-spacing: -0.005em;
	padding: 15px;
}

.Point__item:not(:last-child) {
	margin-bottom: 60px;
}

.Point__item::before {
	content: "";
	position: absolute;
	top: -50px;
	left: -50px;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	width: 117px;
	height: 117px;
	z-index: 5;
}

.Point__item.Num01::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num01.png);
}

.Point__item.Num02::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num02.png);
}

.Point__item.Num03::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num03.png);
}

.Point__item.Num04::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num04.png);
}

.Point__item.Num05::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num05.png);
}

.Point__item.Num06::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num06.png);
}

.Point__item.Num07::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num07.png);
}

.Point__item.Num08::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num08.png);
}

.Point__item.Num09::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num09.png);
}

.Point__item.Num10::before {
	background-image: url(/attending/t/szo-d/hakodate/images/num10.png);
}

.Point__item.photo .Point__item__inner {
	justify-content: space-between;
}

.Point__item.photo .Point__item__inner div {
	/* display: flex;
	flex-direction: column;
	align-items: center; */
	width: calc(100% - 364px);
}

.Point__item__inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

.Point__item p .emphasis {
	color: #925bae;
}

.Point__item p .small {
	font-size: 20px;
}
.Num06_txt{
	position: relative;
}
.Num06_txt .position{
	position: absolute;
	left: 83px;
	bottom: -30px;
}

.Point__item.Num01 {
	padding: 30px 15px;
}

.Point__item.Num01 p {
	text-align: center;
}

.Point__item.Num01 p .notation {
	display: block;
	font-size: 16px;
}

.Point__item.Num02 p {
	text-align: center;
	padding-bottom: 12px;
}

.Point__item__inner figure .credit ,
.Point__item.Num02 figure .credit {
	display: block;
	font-size: 12px;
	font-family: "Noto Sans JP", sans-serif;
	text-align: right;
}
.Point__item__inner figure .pht_cap ,
.Point__item.Num02 figure .pht_cap {
	float: left;
	font-size: 14px;
	font-family: "Noto Sans JP", sans-serif;
	text-align: left;
	font-weight: 500;
}

.Point__item.Num03 .Point__item__inner p {
	text-align: center;
}

.Point__item.Num03 .Point__item__inner p .small {
	display: block;
}

.Point__item.Num04 .Point__item__inner p {
	text-align: center;
}

.Point__item.Num05 .Point__item__inner p {
	text-align: center;
}


.Point__item.Num10 .Point__item__inner ,
.Point__item.Num09 .Point__item__inner ,
.Point__item.Num08 .Point__item__inner ,
.Point__item.Num07 .Point__item__inner ,
.Point__item.Num06 .Point__item__inner {
	flex-wrap: wrap;
	gap: 20px;
}

.Point__item.Num10 .Point__item__inner div ,
.Point__item.Num09 .Point__item__inner div ,
.Point__item.Num08 .Point__item__inner div ,
.Point__item.Num07 .Point__item__inner div ,
.Point__item.Num06 .Point__item__inner div {
	width: calc(100% - 364px - 20px);
}

.Point__item.Num10 .Point__item__inner p ,
.Point__item.Num09 .Point__item__inner p ,
.Point__item.Num08 .Point__item__inner p ,
.Point__item.Num07 .Point__item__inner p ,
.Point__item.Num06 .Point__item__inner p {
	text-align: center;
	letter-spacing: -0.05em;
}

.Point__item.Num10 .Point__item__inner .caption ,
.Point__item.Num09 .Point__item__inner .caption ,
.Point__item.Num08 .Point__item__inner .caption ,
.Point__item.Num07 .Point__item__inner .caption ,
.Point__item.Num06 .Point__item__inner .caption {
	background-color: #ececec;
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	font-family: "Noto Sans JP", sans-serif;
	text-align: center;
	padding: 5px 0;
}

.Point__item.Num10 .Point__item__inner div .meal ,
.Point__item.Num09 .Point__item__inner div .meal ,
.Point__item.Num08 .Point__item__inner div .meal ,
.Point__item.Num07 .Point__item__inner div .meal ,
.Point__item.Num06 .Point__item__inner div .meal {
	background-color: #925bae;
	color: #fff;
	text-align: center;
	margin-bottom: 10px;
}

.Point__item.Num08 {
	padding: 30px 15px;
}

.Point__item.Num08 p {
	text-align: center;
}

/* hotel */
.Block__hotel {
	background-color: #fffef4;
	padding: 60px 0 40px;
}

.Block__hotel:not(:last-child) {
	margin-bottom: 60px;
}

.Hotel__name {
	position: relative;
	text-align: center;
}

.Hotel__name::before,
.Hotel__name::after {
	content: "";
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	z-index: 2;
}

.Hotel__name::before {
	top: -100px;
	left: 30px;
	background-image: url(/attending/t/szo-d/hakodate/images/medal__rank-a.png);
	width: 136px;
	height: 166px;
}

.Hotel__name::after {
	background-size: contain;
	top: -70px;
	right: 0;
	width: 192px;
	height: 127px;
}

.Hoel__caption {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	font-weight: var(--bold);
	margin-top: 20px;
}

.Hotel__name h3 {
	position: relative;
	font-size: 42px;
	font-weight: var(--bold);
	margin-bottom: 30px;
}

.Hotel__name h3::before,
.Hotel__name h3::after {
	content: "";
	position: absolute;
	transform: translateY(-50%);
	display: block;
	width: 100%;
}

.Hotel__name h3::before {
	top: calc(50% + 16px);
	height: 2px;
}

.Hotel__name h3::after {
	top: calc(50% + 24px);
	height: 3px;
}

.Hotel__name h3 span {
	position: relative;
	display: inline-block;
	background-color: #fffef4;
	padding: 0 70px;
	z-index: 1;
}
.Hotel__name h3 span img {
    padding-right: 20px;
}
.Hotel__text01 {
	font-size: 24px;
	font-weight: var(--bold);
	text-align: center;
	margin-top: 10px;
	margin-bottom: 20px;
}

.Hotel__text02 {
	font-weight: var(--semibold);
	text-align: center;
	margin-bottom: 30px;
}

.Hotel01__introduction {
	display: flex;
	justify-content: space-between;
	width: 944px;
	margin: 0 auto 30px;
}

.Cts__hotel figcaption {
	font-weight: var(--semibold);
	color: #25283d;
	text-align: left;
	margin-top: 10px;
}

.Cts__hotel figcaption ul {
	margin-top: 5px;
}

.Cts__hotel figcaption ul li {
	font-size: 14px;
	line-height: 1.4;
	text-indent: -1em;
	padding-left: 1em;
}

.Group__meal {
	position: relative;
	background-image: url(/attending/t/szo-d/hakodate/images/bg_meal.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 944px;
	margin: 0 auto;
	padding: 10px;
}

.Group__meal figure::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	border: solid 1px #fff9b4;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
}

.Group__meal__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: solid 2px #b7691b;
	padding: 20px;
}

.Meal__text {
	width: calc(100% - 416px);
	font-weight: var(--bold);
	color: #391609;
	text-align: center;
}
.Hotel01__caption01 {
    width: 944px;
    margin: 0 auto 30px;
}
/* ホテル01 */
.Block__hotel:nth-of-type(1) {
	color: #1b2559;
}

.Block__hotel:nth-of-type(1) .Hotel__name::after {
	background-image: url(/attending/t/szo-d/hakodate/images/icon__night-day1.png);
}

.Block__hotel:nth-of-type(1) .Hotel__name h3::before,
.Block__hotel:nth-of-type(1) .Hotel__name h3::after {
	background-color: #1b2559;
}

.Block__hotel:nth-of-type(1) .Hotel01__introduction {
	column-gap: 24px;
}

.Block__hotel:nth-of-type(1) .Meal__text {
	font-size: 22px;
}

/* .Block__hotel:nth-of-type(1) .Meal__text::first-letter {
	font-size: 28px;
} */

.Block__hotel:nth-of-type(1) .Meal__text span {
	font-size: 28px;
}

.Block__hotel:nth-of-type(1) .Group__meal figure {
	position: relative;
	border: solid 2px #fff;
}

/* ホテル02 */
.Block__hotel:nth-of-type(2) {
    color: #027791;
}

.Block__hotel:nth-of-type(2) .Hotel__name::after {
	background-image: url(/attending/t/szo-d/hakodate/images/icon__night-day2.png);
}

.Block__hotel:nth-of-type(2) .Hotel__name h3::before,
.Block__hotel:nth-of-type(2) .Hotel__name h3::after {
	background-color: #027791;
}

.Block__hotel:nth-of-type(2) .Hotel01__introduction {
	column-gap: 24px;
}

.Block__hotel:nth-of-type(2) .Meal__text {
	font-size: 22px;
}

/* .Block__hotel:nth-of-type(2) .Meal__text::first-letter {
	font-size: 28px;
} */

.Block__hotel:nth-of-type(2) .Meal__text span {
	font-size: 28px;
}

.Block__hotel:nth-of-type(2) .Group__meal figure {
	position: relative;
	border: solid 2px #fff;
}
/* ホテル03 */
.Block__hotel:nth-of-type(3) {
    color: #006233;
}

.Block__hotel:nth-of-type(3) .Hotel__name::after {
	background-image: url(/attending/t/szo-d/hakodate/images/icon__night-day3.png);
}

.Block__hotel:nth-of-type(3) .Hotel__name h3::before,
.Block__hotel:nth-of-type(3) .Hotel__name h3::after {
	background-color: #006233;
}

.Block__hotel:nth-of-type(3) .Hotel01__introduction {
	column-gap: 24px;
}

.Block__hotel:nth-of-type(3) .Meal__text {
	font-size: 22px;
}

/* .Block__hotel:nth-of-type(2) .Meal__text::first-letter {
	font-size: 28px;
} */

.Block__hotel:nth-of-type(3) .Meal__text span {
	font-size: 28px;
}

.Block__hotel:nth-of-type(3) .Group__meal figure {
	position: relative;
	border: solid 2px #fff;
}

/* sightseeing */
.Block_sightseeing {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 32px;
}

.Block_sightseeing dl {
	width: calc(50% - 16px);
	position: relative;
}
.Block_sightseeing .badge img {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 107px;
	height: auto;
}

.Block_sightseeing dt {
	background-color: #197800;
	font-size: 22px;
	font-weight: var(--semibold);
	color: #fff;
	text-align: center;
	padding: 5px 0;
}

.Block_sightseeing dd figure {
	position: relative;
}
.Block_sightseeing dd figure .credit {
	position: absolute;
	right: 5px;
	bottom: 5px;
	font-size: 12px;
	color: #fff;
	text-shadow: 
	-1px 1px 3px rgb(0 0 0 / 100%), 
	1px -1px 3px rgb(0 0 0 / 100%), 
	-1px -1px 3px rgb(0 0 0 / 100%), 
	1px 1px 3px rgb(0 0 0 / 100%);
	font-family:sans-serif;
	font-weight: 600;
}

.Block_sightseeing dd .lead {
    font-size: 20px;
    font-weight: var(--bold);
    line-height: 1.4;
    color: #197800;
    padding: 10px 0 5px;
}

.Block_sightseeing dd figure p {
	font-weight: var(--semibold);
	color: #25283d;
}

.Block_sightseeing .full {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.Block_sightseeing .full figure {
	width: 496px;
}

.Block_sightseeing .full dl {
	width: calc(100% - 496px - 32px);
}

.Block_sightseeing .full dl .caption {
	font-size: 20px;
	font-weight: var(--semibold);
	line-height: 1.4;
	color: #e93b0d;
	padding: 10px 0;
}

.Block_sightseeing .full dl .text {
	font-weight: var(--semibold);
	color: #25283d;
}

/* gourmet */
.Group__gourmet {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	/* column-gap: 30px; */
}

.Group__gourmet:nth-of-type(even) {
	flex-direction: row-reverse;
}

.Group__gourmet figure {
	position: relative;
}

.Group__gourmet figure::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	border: solid 1px #fff;
	width: calc(100% - 19px);
	height: calc(100% - 20px);
}

.Group__gourmet figure .icn__gourmet {
	position: absolute;
	inset: 5px 5px auto auto;
}
.Group__gourmet figure .icn__gourmet01 {
	position: absolute;
	inset: 5px auto auto 5px;
}
.Group__gourmet:nth-of-type(even)  figure .icn__gourmet {
	position: absolute;
	inset: 5px auto auto 5px;
}

.Group__gourmet dl dt {
	position: relative;
	top: 44px;
	left: -16px;
}

.Group__gourmet dl dd {
	background-color: #fff;
	font-size: 18px;
	font-weight: var(--semibold);
	padding: 60px 20px 30px;
}
.Group__gourmet dl dd small {
    color: #777777;
    letter-spacing: 0.01em;
}

.Group__gourmet dl dd span {
	color: #de0a16;
}

.Group__gourmet{
	margin-top: 60px;
}

.Group__gourmet dl {
	width: calc(100% - 535px - 30px);
}

.Group__gourmet:nth-of-type(even) dl dt {
	left: 0;
}

.Group__gourmet:nth-of-type(even) dl {
	width: calc(100% - 535px - 14px);
}

.Group__gourmet:nth-of-type(even) dl dd {
	margin-left: 16px;
}

.tabWrap01{
	display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    width: 1024px;
    margin: 0 auto;
}

a.btn_link{
	position: relative;
    font-size: 20px;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 32%;
    padding: 2rem 4rem;
    font-weight: bold;
    background: linear-gradient(to top,#cc0000, #df1818);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    transition: 0.5s;
    border: double 6px #fff;
}

a.btn_link.gry{
	pointer-events: none;
	position: relative;
    font-size: 20px;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 32%;
    padding: 2rem 4rem;
    font-weight: bold;
    background: linear-gradient(to top,#999, #ccc);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    transition: 0.5s;
    border: double 6px #fff;
}

.btn_link::before{
	content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background: white;
    border-radius: 50%;
}

.btn_link::after{
	content: "";
    display: block;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 46%;
    right: 18px;
    border-top: 2px solid #a20000;
    border-right: 2px solid #a20000;
    transform: rotate(45deg);
}