@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Zen+Maru+Gothic:wght@400;700&display=swap");
/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	font-weight: inherit;
	font-size: inherit;
	font-style: inherit;
	-webkit-tap-highlight-color: transparent;
}

article,
aside,
details,
figcaption,
figure,
picture,
main,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

ul,
ol {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}

button {
	font-family: inherit;
}

/*----------
	vars
----------*/
:root {
	/* color */
	--color-prim: #0062B6;
	--color-txt: #333;
	--color-txt-caption: #777;
	--color-link: #0062B6;
	--color-hover: #0062B6;
	--color-hover-light: #007AE6;
	--color-border: #DDDDDD;
	--color-bg-blue: #E8F4FF;
	--color-bg-gray: #F7F7F7;
	--color-red: #E64040;
	/* font family */
	--font-sans: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, sans-serif;
	/* line height */
	--line-height-s: 1.4;
	--line-height-m: 1.6;
	--line-height-l: 1.8;
}

/*----------
	base
----------*/
html {
	width: 100%;
	font-size: 62.5%;
	background-color: #fff;
}
html.is-locked {
	position: absolute;
	overflow: hidden;
}

body {
	position: relative;
	font-size: 1.6rem;
	line-height: var(--line-height-l);
	font-family: var(--font-sans);
	letter-spacing: 0.05em;
	color: var(--color-txt);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	opacity: 0;
	transition: opacity 1s;
}
@media (max-width: 767px) {
	body {
		font-size: 1.4rem;
	}
}
@media print {
	body {
		min-width: 1240px;
		zoom: 0.8;
	}
}
body.is-locked {
	overflow: hidden;
}
body.is-active {
	opacity: 1;
}
a {
	text-decoration: none;
	color: var(--color-link);
}
@media (min-width: 768px), print {
	a:hover {
		text-decoration: none;
	}
}

img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

sup {
	vertical-align: top;
	font-size: 0.7em;
}

sub {
	vertical-align: baseline;
	font-size: 0.7em;
}

input[type=text],
textarea,
select {
	font-family: inherit;
	font-size: 1.6rem;
}
/*----------
	header
----------*/
.l-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 63px;
	z-index: 90;
}
.l-header.is-open {
	background: #fff;
}
.l-header.is-scroll {

}
.l-header__inner {

}
.l-header__logo {
	width: 151px;
	height: 63px;
	position: relative;
	z-index: 91;
}
.l-header-logo__link {
	display: block;
	width: 151px;
}
.l-header__nav {
	display: none;
}
.l-header__snow {
	display: none;
}
@media (max-width: 767px) {
	.l-header__spmenu {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 50px;
		height: 50px;
	}
	.l-header-spmenu__link {
		display: block;
		width: 50px;
		height: 50px;
		background: #fff;
		border-radius: 50%;
		position: relative;
	}
	.l-header-spmenu__icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 19px;
		height: 8px;
		content: "";
		background: url(/hokkaido100/assets/img/common/icon_menu.svg) no-repeat center center / contain;
	}
	.l-header.is-open .l-header-spmenu__icon {
		width: 14px;
		height: 14px;
		background: url(/hokkaido100/assets/img/common/icon_close.svg) no-repeat center center / contain;
	}
	.l-header__nav {
		display: block;
		position: absolute;
		top: 63px;
		left: 0;
		width: 100%;
		padding: 48px 64px 100px;
		background: #fff;
		font-size: 1.7rem;
		line-height: 1.3;
		font-weight: 700;
		color: #00338A;
		display: none;
		opacity: 0;
		transition: opacity .3s;
	}
	.l-header__nav::before {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4px;
		content: "";
		background: #00338A;
	}
	.l-header__nav::after {
		position: absolute;
		bottom: 4px;
		left: 0;
		width: 100%;
		height: 2px;
		content: "";
		background: #E7C77D;
	}
	.l-header.is-open .l-header__nav {
		height: auto;
		opacity: 1;
		overflow: visible;
	}
	.l-header-nav__item {
		position: relative;
	}
	.l-header-nav__item::before {
		position: absolute;
		display: inline-block;
		top: 52px;
		left: 0;
		width: 100%;
		height: 2px;
		content: "";
		background-image: radial-gradient(circle, #5A7180 1px, transparent 1px);
		background-position: 0 0;
		background-size: 6px 2px;
	}
	.l-header-nav__link {
		display: block;
		padding: 15px 0 15px 20px;
		z-index: -1;
	}
	.l-header-nav__link::before {
		position: absolute;
		top: 23px;
		left: 0;
		width: 10px;
		height: 10px;
		content: "";
		background: #E7C77D;
		border-radius: 50%;
		z-index: 89;
	}
}
@media (min-width: 768px), print {
	.l-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 103px;
		z-index: 90;
	}
	.l-header.is-scroll {
		background: #fff;
	}
	.l-header__inner {
		width: 100%;
		min-width: 1260px;
		height: 103px;
		position: relative;
	}
	.l-header__logo {
		width: 247px;
		height: auto;
	}
	.l-header-logo__link {
		width: 247px;
	}
	.l-header__spmenu {
		display:none;
	}
	.l-header__nav {
		display: block;
		position: absolute;
		top: 50%;
		left: 275px;
		transform: translate(0, -50%);
	}
	.l-header-nav__wrapper {
		display: flex;
		font-size: 1.7rem;
		line-height: 1.5;
		font-weight: 700;
	}
	.l-header-nav__item {

	}
	.l-header-nav__item + .l-header-nav__item {
		margin-left: 25px;
	}
	.l-header-nav__link {
		color: #0D2A84;
		transition: all .3s;
/*		text-shadow: 0px 0px 6px #000;*/
	}
	.l-header-nav__link.is-active {
		color: #B9943F;
	}
	.l-header-nav__link:hover {
		color: #B9943F;
	}
	.l-header__snow {
		display: block;
		position: absolute;
		top: 50%;
		right: 30px;
		transform: translate(0, -50%);
		width: 162px;
	}
}
/*----------
	footer
----------*/
.l-footer {
	position: relative;
	background: #fff;
	padding: 18px 0 10px;
}
.l-footer::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	content: "";
	background: #00338A;
}
.l-footer::after {
	position: absolute;
	top: 4px;
	left: 0;
	width: 100%;
	height: 4px;
	content: "";
	background: #E7C77D;
}
.l-footer__inner {
	padding: 0 30px;
}
.l-footer__logo {
	width: 193px;
	margin: 0 auto;
}
.l-footer__nav {
	margin-top: 15px;
	font-size: 1.0rem;
	font-weight: 700;
	line-height: 2;
}
.l-footer-nav__item {
	text-align: center;
}
.l-footer-nav__item + .l-footer-nav__item {
	margin-top: 5px;
}
.l-footer-nav__link {
	color: #00338A:
}
.l-footer__copyright {
	margin-top: 36px;
	text-align: center;
	font-family: "Noto Sans JP", serif;
	font-size: .8rem;
	line-height: 1.3;
	color: #5A7180;
}
@media (min-width: 768px), print {
	.l-footer {
		padding: 30px 0 40px;
	}
	.l-footer__inner {
		width: 100%;
		height: 100px;
		max-width: 1260px;
		min-width: 1260px;
		padding: 0 30px;
		margin: 0 auto;
		position: relative;
	}
	.l-footer__logo {
		top: 0;
		left: 0;
		width: 255px;
		margin: 0 0;
	}
	.l-footer__nav {
		position: absolute;
		top: 50%;
		right: 30px;
		transform: translate(0, -50%);
		margin-top: 0;
		font-size: 1.4rem;
		display: flex;
	}
	.l-footer-nav__item {
		text-align: left;
	}
	.l-footer-nav__item + .l-footer-nav__item {
		margin-top: 0;
		margin-left: 20px;
	}
	.l-footer-nav__link {
		transition: all .3s;
	}
	.l-footer-nav__link:hover {
		color: #B9943F;
	}
	.l-footer__copyright {
		position: absolute;
		bottom: -30px;
		right: 30px;
		font-size: 1.0rem;
	}
}
/*----------
	gotop
----------*/
.l-gotop {
	position: fixed;
	bottom: 60px;
	right: 10px;
	width: 40px;
	height: 40px;
	display: none;
	z-index: 10;
}
.l-gotop.is-active {
	display: block;
}
.l-gotop__link {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.l-gotop__icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	content: "";
	background: #00338A;
	border-radius: 50%;
}
.l-gotop__icon::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 1;
	content: "";
	background: url(/hokkaido100/assets/img/common/icon_arrow_white.svg) no-repeat center center / contain;
}
@media (min-width: 768px), print {
	.l-gotop {
		bottom: 147px;
		right: 40px;
		width: 46px;
		height: 46px;
	}
	.l-gotop__icon {
		width: 46px;
		height: 46px;
	}
	.l-gotop__icon::before {
		width: 18px;
		height: 18px;
	font-size: 18px;
	line-height: 1;
	}
}
/*----------
	overlay
----------*/
.l-overlay {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	content: "";
	background: rgba(0, 51, 138, .5);
	z-index: 88;
}
.l-overlay.is-active {
	display: block;
}
/*----------
	main
----------*/
.l-main {
	position: relative;
}
@media (min-width: 768px), print {
	.l-main {
		min-width: 1260px;
	}
}
.l-section {
	padding: 0 30px;
}
@media (min-width: 768px), print {
	.l-section {
		width: 100%;
		max-width: 1260px;
		margin: 0 auto;
		padding: 0 30px;
	}
}
/*----------
	mainv
----------*/
.c-mainv {
	padding: 0 15px;
}
.c-mainv__inner {
	width: 100%;
/*	max-width: 1306px;*/
	height: 270px;
	margin: 0 auto;
	position: relative;
}
.c-mainv__pic {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.c-mainv__picimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.c-mainv__text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.c-mainv__title {
	font-size: 2.8rem;
	line-height: 1.5;
	font-weight: 700;
	color: #fff;
	text-shadow: 0px 0px 6px #5a5045;
	text-align: center;
}
@media (min-width: 768px), print {
	.c-mainv {
		padding: 0 30px;
	}
	.c-mainv__inner {
		height: 400px;
	}
	.c-mainv__pic {
		border-radius: 20px;
	}
	.c-mainv__title {
		font-size: 4.6rem;
	}
}
/*----------
	title
----------*/
.c-title01 {
	margin-top: 60px;
	margin-bottom: 30px;
}
.c-title01__inner {

}
.c-title01__sub {
	display: block;
	text-align: center;
	font-size: 2rem;
	line-height: 1.5;
	font-weight: 700;
	color: #00338A;
	margin-bottom: 10px;
}
.c-title01__sub > span {
	display: block;
	text-align: center;
}
.c-title01__en {
	display: block;
	text-align: center;
	font-size: 1.8rem;
	line-height: 2;
	font-weight: 700;
	color: #0062B6;
	margin-bottom: 10px;
	position: relative;
	z-index: 1;
}
.c-title01__en::before {
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 59px;
	height: 10px;
	content: "";
	background: url(/hokkaido100/assets/img/common/bg_title01.svg) no-repeat center center / contain;
	z-index: -1;
}
.c-title01__ja {
	display: block;
	text-align: center;
	font-size: 2.8rem;
	line-height: 1.5;
	font-weight: 700;
	color: #00338A;
}
@media (min-width: 768px), print {
	.c-title01 {
		margin-top: 120px;
		margin-bottom: 80px;
	}
	.c-title01__sub {
		font-size: 2.4rem;
	}
	.c-title01__sub > span {
		display: inline;
	}
	.c-title01__sub > span:nth-of-type(1) {
		padding: 0 0.5em 0 0;
	}
	.c-title01__en {
		font-size: 2.2rem;
	}
	.c-title01__en::before {
		bottom: 6px;
		width: 65px;
		height: 11px;
	}
	.c-title01__ja {
		font-size: 4.4rem;
	}
}
/*----------
	copy
----------*/
.c-copy01 {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px;
}
.c-copy01__inner {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1.3;
	font-weight: 700;
	position: relative;
}
.c-copy01__inner::before {
	position: absolute;
	top: 50%;
	left: -10px;
	width: 1.5px;
	height: 22px;
	content: "";
	background: #22394d;
	transform: rotate(-15deg) translate(0, -50%);
}
.c-copy01__inner::after {
	position: absolute;
	top: 50%;
	right: -10px;
	width: 1.5px;
	height: 22px;
	content: "";
	background: #22394d;
	transform: rotate(15deg) translate(0, -50%);
}
@media (min-width: 768px), print {
	.c-copy01 {
		margin-top: 80px;
	}
	.c-copy01__inner {
		font-size: 2rem;
	}
	.c-copy01__inner::before {
		width: 2px;
		height: 30px;
	}
	.c-copy01__inner::after {
		width: 2px;
		height: 30px;
	}
}
/*----------
	btn
----------*/
.c-btn {
	width: 100%;
	max-width: 380px;
}
.c-btn.c-btn--center {
	margin-left: auto;
	margin-right: auto;
}
.c-btn__link {
	width: 100%;
	height: 50px;
	background: #00338A;
	border-radius: 31px;
	display: flex;
	align-items: center;
	position: relative;
}
.c-btn__link::before {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translate(0, -50%);
	width: 14px;
	height: 14px;
	content: "";
	background: url(/hokkaido100/assets/img/common/icon_arrow2_white.svg) no-repeat center center / contain;
}
.c-btn--blank .c-btn__link::before {
	background: url(/hokkaido100/assets/img/common/icon_blank_white.svg) no-repeat center center / contain;
}
.c-btn__inner {
	width: 100%;
	padding: 0 12px 0 0;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}
.c-btn.c-btn--white .c-btn__link {
	background: #fff;
}
.c-btn.c-btn--white .c-btn__link::before {
	background: url(/hokkaido100/assets/img/common/icon_arrow3.svg) no-repeat center center / contain;
}
.c-btn.c-btn--white .c-btn__inner {
	color: #00338A;
}
.c-btn.c-btn--white.c-btn--blank .c-btn__link::before {
	background: url(/hokkaido100/assets/img/common/icon_blank.svg) no-repeat center center / contain;
}
.c-btn.c-btn--s {
	max-width: 170px;
}
.c-btn.c-btn--s .c-btn__link {
	height: 30px;
	border-radius: 15px;
}
.c-btn.c-btn--s .c-btn__link::before {
	width: 12px;
	height: 12px;
}
.c-btn.c-btn--s .c-btn__inner {
	font-size: 1.2rem;
}
@media (min-width: 768px), print {
	.c-btn__link {
		height: 62px;
		transition: all .3s;
	}
	.c-btn__link:hover {
		transform: scale(1.05);
	}
	.c-btn__link::before {
		right: 20px;
		width: 18px;
		height: 18px;
	}
	.c-btn__inner {
		font-size: 1.8rem;
	}
	.c-btn.c-btn--s {
		max-width: 200px;
	}
	.c-btn.c-btn--s .c-btn__inner {
		font-size: 1.4rem;
	}
}
/*----------
	bnr
----------*/
/* bnr-recipe */
.c-bnr__recipe {

}
.c-bnr-recipe__link {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 63.4920%;
	position: relative;
}
.c-bnr-recipe__pic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.c-bnr-recipe__picinner {
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}
.c-bnr-recipe__picinner > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.c-bnr-recipe__text {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translate(0, -50%);
	width: calc( 100% - 40px );
	z-index: 2;
}
.c-bnr-recipe__text01 {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.8;
	color: #fff;
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
	margin-bottom: 4px;
}
.c-bnr-recipe__text02 {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.8;
	color: #fff;
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}
.c-bnr-recipe__text02inner {
	position: relative;
}
.c-bnr-recipe__text02inner::before {
	position: absolute;
	display: inline-block;
	top: calc( 100% + 4px );
	left: 0;
	width: 100%;
	height: 2px;
	content: "";
  background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
  background-position: 0 0;
  background-size: 6px 2px;
  overflow: visible;
}
.c-bnr-recipe__icon {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	content: "";
	background: #00338A;
	border-radius: 50%;
}
.c-bnr-recipe__icon::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	content: "";
	background: url(/hokkaido100/assets/img/common/icon_arrow_white.svg) no-repeat center center / contain;
}
@media (min-width: 768px), print {
	.c-bnr__recipe {
		width: 100%;
		max-width: 790px;
		margin: 0 auto;
	}
	.c-bnr-recipe__link {
		display: block;
		width: 100%;
		height: 200px;
		padding-top: 0;
	}
	.c-bnr-recipe__picinner > img {
		transition: all .3s;
	}
	.c-bnr-recipe__link:hover .c-bnr-recipe__picinner > img {
		transform: scale(1.05);
	}
	.c-bnr-recipe__text {
		top: calc( 50% - 4px );
		left: 40px;
	}
	.c-bnr-recipe__text01 {
		font-size: 1.8rem;
	}
	.c-bnr-recipe__text02 {
		font-size: 3.2rem;
	}
	.c-bnr-recipe__text02inner::before {
		height: 3px;
  	background-image: radial-gradient(circle, #ffffff 1.5px, transparent 1.5px);
    background-size: 7px 3px;
	}
	.c-bnr-recipe__text02inner > span {
		font-size: 2.2rem;
	}
	.c-bnr-recipe__icon {
		bottom: 20px;
		right: 20px;
		width: 46px;
		height: 46px;
	}
	.c-bnr-recipe__icon::before {
		width: 18px;
		height: 18px;
	}
}
/*----------
	main-note
----------*/
.c-main-note {
	position: absolute;
	bottom: 20px;
	left: 50%;
	width: 100%;
	max-width: 1260px;
	padding: 0 30px;
	transform: translate(-50%, 0);
	font-size: 1.2rem;
}
/*----------
	utility
----------*/
.u-mt-none {
	margin-top: 0 !Important;
}
/*----------
	display
----------*/
@media (max-width: 767px) {
	.u-pc-v {
		display: none;
	}
}

@media (min-width: 768px), print {
	.u-sp-v {
		display: none;
	}
}