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

html {
	font-family: Hiragino Kaku Gothic ProN,YuGothic,Noto Sans CJK JP,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
	font-size: 16px;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}
a {
	text-decoration: none;
	transition: .3s all;
}
p {font-size: clamp(0.813rem, 0.757rem + 0.28vw, 1rem)}
a, p, button, .search_button, li {letter-spacing: 0.06em}
img {display: block;max-width: 100%;height: auto}
button, .link__btn, .search_button {
	background: linear-gradient(90deg, rgba(156,223,170,1) 0%, rgba(6,205,197,1) 20%, rgba(0,136,131,1) 66%, rgba(15,44,52,1) 100%);
	font-size: clamp(0.813rem, 0.757rem + 0.28vw, 1rem);
	color: #fff;
	padding: clamp(0.625rem, 0.443rem + 0.91vw, 1.125rem);
	border: none;
	border-radius: 50vh
}
button, .search_button {
	transition: .3s all;
	cursor: pointer
}

.link__btn {
	position: relative;
	display: block;
	text-align: center
}
.link__btn::after {
	content: '';
	position: absolute;
	top: calc(50% - 7px);
	right: 5px;
	display: block;
	background-image: url("../img/arrow_right2.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	width: 14px;
	height: 14px;
	opacity: .75
}
input[type="text"] {
	border: .0625rem solid #e3e3e3;
	padding: 1rem;
	border-radius: 1.5rem
}
::placeholder {
	color: #e3e3e3;
}

#wrapper {
	padding: 0 1rem;
}
#hero__wrapper {
	position: relative;
	background-image: url(../img/hero_bg.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}
.toppage__wrapper #hero__wrapper {
	height: 420px;
}
#hero__grade {
	position: absolute;
	left: 0;
	top: 0;
	width: 75%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background: linear-gradient(90deg, rgba(156,223,170,0.6) 0%, rgba(6,205,197,0.6) 20%, rgba(0,136,131,0.6) 66%, rgba(15,44,52,0.6) 100%);
	padding: 0 20px
}
.hero__grade__inner img {
	max-height: 50px;
	width: auto;
	margin: 0 auto 8px 0
}
.hero__grade__inner p {
	color: #fff
}
.subpage__wrapper header {
	background: #fff;
}
.subpage__wrapper header::after {
	content: none
}
.subpage__wrapper .menu__check__label span,
.subpage__wrapper .menu__check__label span::before,
.subpage__wrapper .menu__check__label span::after {
	background-color: #1f1e31
}
#top__content__caption {
	position: relative;
	border-bottom: 1px solid;
	border-image: linear-gradient(90deg, rgba(156,223,170,1) 0%, rgba(6,205,197,1) 20%, rgba(0,136,131,1) 66%, rgba(15,44,52,1) 100%);
	border-image-slice: 1;
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	z-index: 5
}
#top__content__caption p {
	font-size: clamp(0.75rem, 0.694rem + 0.28vw, 0.938rem);
	color: #323232;
	padding: .625rem 0;
	line-height: 1.2
}
#top__content__head {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	padding: 1rem 0;
	z-index: 15
}
#logo {
	width: calc(100% - 60px);
	text-align: left
}
#logo img {
	max-width: 80%;
	max-height: 40px;
	transition: .3s all;
}
#hero__wrapper #logo img {
	filter: invert(86%) sepia(99%) saturate(0%) hue-rotate(185deg) brightness(110%) contrast(97%)
}
.menu__check__label {
	position: relative;
	display: flex;
	height: 60px;
	width: 60px;
	justify-content: center;
	align-items: center;
	z-index: 100;
}
.menu__check__label span,
.menu__check__label span::before,
.menu__check__label span::after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background-color: #fff;
	position: absolute;
	transition: .3s all;
}
.menu__check__label span::before {
	bottom: 8px
}
.menu__check__label span::after {
	top: 8px
}
#menu__check:checked ~ .menu__check__label span {
	background-color: transparent
}
#menu__check:checked ~ .menu__check__label span::before {
	bottom: 0;
	transform: rotate(45deg)
}
#menu__check:checked ~ .menu__check__label span::after {
	top: 0;
	transform: rotate(-45deg)
}
#menu__check {display: none}
#head__menu__content {
	position: fixed;
	top: 0;
	left: -100%;
	width: 80%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	transition: .3s all;
	z-index: 90
}
#menu__check:checked ~ #head__menu__content {
	left: 0
}
#head__menu__content ul {
	margin: 0;
	padding: 0;
	list-style: none
}
#head__menu__content ul li {
	display: block;
	border-bottom: 1px solid rgba(255,255,255,.3);
	padding: 20px
}
#head__menu__content ul li a {
	color: #fff
}
#head__menu__content ul li a span {
	display: block;
	font-size: 75%;
	opacity: .6
}

#search__wrapper {
	position: relative;
	background: #fff;
	padding: clamp(1.5rem, 0.682rem + 4.09vw, 3.75rem);
	margin-top: -4rem;
	border-radius: 1.5rem;
	z-index: 10
}
.search__wrapper__content h2 {
	position: relative;
	line-height: 1;
	font-size: clamp(1.125rem, 1.051rem + 0.37vw, 1.375rem);
	color: #00637c;
	padding: clamp(0.4rem, 0.352rem + 0.24vw, 0.563rem) 0 clamp(0.4rem, 0.352rem + 0.24vw, 0.563rem) clamp(2.75rem, 2.546rem + 1.02vw, 3.438rem);
	margin-bottom: clamp(0.8rem, 0.704rem + 0.48vw, 1.125rem);
	background-size: contain;
	background-repeat: no-repeat;
}
.search__wrapper__content .search__map {
	background-image: url("../img/icon_map.svg");
}
.search__wrapper__content .search__magnifier {
	background-image: url("../img/icon_magnifier.svg");
}
.search__wrapper__content {
	margin-bottom: clamp(3rem, 2.778rem + 1.11vw, 3.75rem)
}
.search__map__content {
	background-image: url("../img/japan_map.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center
}
.search__list {
	margin: 0 0 .8rem 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center
}
.search__list li {
	width: 16.6%;
	background: #fff;
	border-radius: .3125rem;
}
.search__list li a {
	display: block;
	text-align: center;
	border: .125rem solid;
	border-radius: .3125rem;
	font-size: clamp(0.813rem, 0.757rem + 0.28vw, 1rem);
	font-weight: 600;
	padding: .25rem 0;
	letter-spacing: 0
}
.search__list__enabled {
	background: #fff;
}
.search__list__disabled {
	background: #ddd;
	color: #fff
}
.search__list li .search__list__enabled:hover {
    cursor: pointer;
}

#hokkaido .search__list__enabled {
	color: #f79f3c
}
#hokkaido .search__list__enabled:hover {
	background: #f79f3c;
	border-color: #f79f3c;
	color: #fff
}
#tohoku .search__list__enabled {
	color: #f17147
}
#tohoku .search__list__enabled:hover {
	background: #f17147;
	border-color: #f17147;
	color: #fff
}
#kanto .search__list__enabled {
	color: #dd5491
}
#kanto .search__list__enabled:hover {
	background: #dd5491;
	border-color: #dd5491;
	color: #fff
}
#chubu .search__list__enabled {
	color: #a681d1
}
#chubu .search__list__enabled:hover {
	background: #a681d1;
	border-color: #a681d1;
	color: #fff
}
#kansai .search__list__enabled {
	color: #5c7ab7
}
#kansai .search__list__enabled:hover {
	background: #5c7ab7;
	border-color: #5c7ab7;
	color: #fff
}
#chugoku .search__list__enabled {
	color: #3e97cc
}
#chugoku .search__list__enabled:hover {
	background: #3e97cc;
	border-color: #3e97cc;
	color: #fff
}
#shikoku .search__list__enabled {
	color: #38c7f9
}
#shikoku .search__list__enabled:hover {
	background: #38c7f9;
	border-color: #38c7f9;
	color: #fff
}
#kyushu .search__list__enabled {
	color: #59c4b4
}
#kyushu .search__list__enabled:hover {
	background: #59c4b4;
	border-color: #59c4b4;
	color: #fff
}
#okinawa .search__list__enabled {
	color: #afcb43
}
#okinawa .search__list__enabled:hover {
	background: #afcb43;
	border-color: #afcb43;
	color: #fff
}

#wrapper section {
	margin: clamp(1.875rem, 1.193rem + 3.41vw, 3.75rem) calc(50% - 50vw);
	padding: clamp(1.875rem, 1.193rem + 3.41vw, 3.75rem) calc(50vw - 50%);
}
#wrapper section > h2 {
	color: #1f1e31;
	font-size: clamp(1.125rem, 0.94rem + 0.93vw, 1.75rem);
	line-height: 2em
}
#wrapper section > p {
	color: #666
}
#section__reason {
	text-align: center;
	background-image: url("../img/reason_bg.jpg");
	background-size: cover;
	background-position: center center;
}
#wrapper #section__reason h2,
#wrapper #section__reason > p {
	color: #fff;
}
#section__reason .link__btn {
	width: 75%;
	margin: 0 auto
}
#section__reason__point {
	margin: clamp(0.625rem, 0.366rem + 1.3vw, 1.5rem) 0 clamp(1.875rem, 1.653rem + 1.11vw, 2.625rem)
}
.section__reason__point__box {
	padding: clamp(1rem, 0.852rem + 0.74vw, 1.5rem);
	margin-bottom: .75rem;
	border-radius: 1rem;
	background: #fff;
	box-shadow: .1875rem .1875rem .75rem rgba(0,0,0,.2)
}
.section__reason__point__inner img {
	margin: 0 auto;
	max-height: 90px
}
.section__reason__point__inner h3 {
	display: inline-block;
	font-weight: 900;
	font-size: clamp(1.156rem, 1.017rem + 0.69vw, 1.625rem);
	background: linear-gradient(90deg, rgba(0,186,174,1) 0%, rgba(0,156,216,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
}
.section__reason__point__box p {
	font-size: clamp(0.75rem, 0.713rem + 0.19vw, 0.875rem);
	color: #666;
	text-align: left
}

#section__about {
	background: #fff
}
#wrapper #section__about h2 {
	color: #00637c
}
.section__about__btnwrapper {
	position: relative;
	background-size: cover;
	background-position: center center;
	padding: 10px;
	border-radius: 20px;
	overflow: hidden
}
.section__about__btnwrapper::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 65%);
	z-index: 1
}
.section__about__btnwrapper .link__btn {
	position: relative;
	margin-top: 140px;
	z-index: 10
}
.about__knowledge {
	background-image: url("../img/knowledge_bg.jpg")
}
.about__flow {
	background-image: url("../img/flow_img03.jpg")
}

#reason__point__wrapper {
	background: linear-gradient(90deg, rgba(156,223,170,1) 0%, rgba(6,205,197,1) 20%, rgba(0,136,131,1) 66%, rgba(15,44,52,1) 100%);
	margin: clamp(1.25rem, 0.341rem + 4.55vw, 3.75rem) calc(50% - 50vw);
	padding: clamp(1.25rem, 0.341rem + 4.55vw, 3.75rem) calc(50vw - 50%)
}
#wrapper #reason__point__wrapper > h3 {
	color: #fff;
	margin: 0 0 clamp(1rem, 0.727rem + 1.36vw, 1.75rem);
	letter-spacing: .06em
}
.reason__point__box {
	position: relative;
	background: #fff;
	padding: clamp(1.125rem, 0.807rem + 1.59vw, 2rem);
	margin-bottom: clamp(1.375rem, 0.966rem + 2.05vw, 2.5rem);
	border-radius: clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);
	box-shadow: 4px 4px 12px rgba(0,0,0,0.2);
}
.reason__point__box h1 {
	position: absolute;
	margin: 0;
	padding: 0 5px 0 0;
	font-family: Futura, 'Century Gothic';
	font-style: italic;
	font-size: clamp(2.5rem, 2.045rem + 2.27vw, 3.75rem);
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(90deg, rgba(156,223,170,1) 0%, rgba(6,205,197,1) 20%, rgba(0,136,131,1) 66%, rgba(15,44,52,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	opacity: .3
}
#reason__point__wrapper .reason__point__box h3 {
	text-align: left;
	margin: 0 0 0 clamp(2.125rem, 1.534rem + 2.95vw, 3.75rem);
	line-height: 1.2
}
.reason__point__img {
	border-radius: 16px;
	margin: 16px 0;
	width: 100%;
	height: 160px;
	object-fit: cover;
	object-position: center center
}
.reason__point__text p {
	margin-bottom: 8px
}
#reason__point__wrapper .reason__point__text li {
	margin: 0 0 clamp(0.063rem, -0.051rem + 0.57vw, 0.375rem) 0
}
.reason__point__text span {
	font-weight: 600;
	color: #f9751c
}

#section__knowledge {
	text-align: center;
	background: #edeff1
}
#wrapper #section__knowledge h2,
#wrapper #section__info h2 {
	display: inline-block;
	background-repeat: no-repeat;
	line-height: 1.3em;
	padding-left: clamp(1.938rem, 1.506rem + 2.16vw, 3.125rem);
	margin-bottom: clamp(1rem, 0.636rem + 1.82vw, 2rem);
	color: #00637c
}
#wrapper #section__knowledge h2 {
	background-image: url("../img/icon_megaphone.svg")
}
#wrapper #section__info h2 {
	background-image: url("../img/icon_info.svg");
	font-size: clamp(1.125rem, 0.94rem + 0.93vw, 1.75rem);
	width: 120px
}
#section__knowledge__wrapper {
	position: relative;
}
.section__knowledge__wrapper__arrow {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	box-shadow: .0625rem .0625rem .375rem rgba(0,0,0,0.3);
	top: calc(50% - 1.25rem);
	cursor: pointer;
	transition: .3s all;
	z-index: 1
}
.section__knowledge__wrapper__arrow img {
	width: 13px;
}
.section__knowledge__wrapper__arrow:hover {
	opacity: .8
}
.arrow__left {
	left: -.375rem
}
.arrow__left img {
	margin-right: 4px
}
.arrow__right {
	right: -.375rem
}
.arrow__right img {
	margin-left: 4px
}
#knowledge__wrapper .section__knowledge__scroll {
	display: flex;
	overflow-x: auto;
	gap: 1.25rem;
	margin-bottom: 1rem;
	padding: 0 1rem
}
#knowledge__list {
	margin: 0;
	padding: 0 10px 10px 0;
	list-style: none
}
#knowledge__list li {
	display: block;
	/*width: clamp(8.75rem, 7.386rem + 6.82vw, 12.5rem);*/
	min-width: clamp(8.75rem, 7.386rem + 6.82vw, 12.5rem);
	background: #fff;
	box-shadow: .125rem .125rem .625rem rgba(0,0,0,.2);
	text-align: left;
	color: #666;
	margin-bottom: .8125rem;
	transition: .3s all;
}
#knowledge__list li:hover {
	box-shadow: .125rem .125rem .75rem rgba(0,0,0,.3);
}
.section__knowledge__infobox__imgwrapper {
	width: 100%;
	height: 90px;
	overflow: hidden
}
.section__knowledge__infobox__imgwrapper img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
	transition: .3s all;
}
#knowledge__list li:hover img {
	transform: scale(1.2,1.2)
}
#knowledge__list li > p {
	padding: clamp(0.375rem, 0.264rem + 0.56vw, 0.75rem) clamp(0.625rem, 0.514rem + 0.56vw, 1rem) 0
}
#knowledge__list li h4 {
	padding: 0 clamp(0.625rem, 0.514rem + 0.56vw, 1rem) clamp(0.75rem, 0.659rem + 0.45vw, 1rem)
}
#knowledge__list li h4 a,
#info__list li a {
	font-size: clamp(0.813rem, 0.757rem + 0.28vw, 1rem);
	color: #666;
}
.date {
	font-size: clamp(0.656rem, 0.61rem + 0.23vw, 0.813rem)
}
.link__right {
	width: clamp(16.25rem, 13.977rem + 11.36vw, 22.5rem);
	margin-left: auto
}

.section__info__flex {
	display: flex;
	align-items: flex-start;
	justify-content: space-between
}
.section__info__flex iframe {
	width: calc(100% - 120px);
	margin-bottom: clamp(0.25rem, 0.028rem + 1.11vw, 1rem)
}
#info__list {
	margin: 0;
	padding: 0;
	list-style: none
}
#info__list li {
	display: flex;
	align-items: center;
	font-size: .8125rem;
	border-bottom: .0625rem solid #e3e3e3;
	padding-bottom: .9375rem;
	margin-bottom: .9375rem;
}
#info__list li .date {
	width: clamp(5rem, 4.545rem + 2.27vw, 6.25rem);
	color: #666
}

#area__wrapper {
	background: #3f4453;
	margin: 0 calc(50% - 50vw);
	padding: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem) calc(50vw - 50%);
}
#area__wrapper h3 {
	font-size: .8125rem;
	color: #fff
}
#area__wrapper p {
	font-size: .6875rem;
	color: #fff
}

#footer {
	background: #1b2336;
	margin: 0 calc(50% - 50vw);
	padding: 30px calc(50vw - 50%);
}
#footer__link {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap
}
#footer__link li {
	border-left: .0625rem solid #fff;
	margin-left: .625rem;
	margin-bottom: .625rem;
	padding-left: .625rem;
	line-height: 1
}
#footer__link li:first-child {
	border: none;
	margin-left: 0;
	padding: 0;
}
#footer__link li a {
	color: #fff;
	font-size: .75rem;
}
#copyright {
	color: #fff;
	font-size: .75rem;
	text-align: center;
	margin-top: 30px
}

#return__top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,.4);
	color: #fff;
	height: 40px;
	width: 40px;
	border-radius: 5px;
	z-index: 100
}
#return__top img {
	width: 20px
}

#top__content__sub .menu__check__label span,
#top__content__sub .menu__check__label span::before,
#top__content__sub .menu__check__label span::after {
	background-color: #1f1e31
}
#sub__page__title {
	position: relative;
	text-align: center;
	background-image: url("../img/top_contents_bg.jpg");
	background-size: cover;
	background-position: center center;
	margin: 0 calc(50% - 50vw);
	padding: clamp(1.875rem, 1.042rem + 4.17vw, 4.688rem) calc(50vw - 50%)
}
#sub__page__title::after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: '';
	height: 100%;
	width: 100%;
	background: rgba(0,99,124,0.75)
}
#sub__page__title h2 {
	position: relative;
	color: #fff;
	font-size: clamp(1.5rem, 1.278rem + 1.11vw, 2.25rem);
	letter-spacing: .1em;
	z-index: 1
}
#sub__page__title h2::after {
	display: block;
	font-weight: 300;
	font-size: clamp(0.75rem, 0.676rem + 0.37vw, 1rem);
	letter-spacing: 0.2rem;
	opacity: 0.5
}
.shop__title h2::after {
	content: 'SHOP';
}
.about__title h2::after {
	content: 'ABOUT';
}
.knowledge__title h2::after {
	content: 'KNOWLEDGE'
}
.flow__title h2::after {
	content: 'FLOW'
}
.faq__title h2::after {
	content: 'FAQ'
}
.terms__title h2::after {
	content: 'TERMS'
}
.publish__title h2::after {
	content: 'PUBLISH'
}
.sitemap__title h2::after {
	content: 'SITE MAP'
}
.navi__wrapper {
	display: flex;
	align-items: center;
	margin: 6px 0
}
.navi__wrapper > * {
	font-size: clamp(0.656rem, 0.628rem + 0.14vw, 0.75rem);
	display: flex;
	align-items: center;
	color: #666
}
.navi__wrapper > *::after {
	content: '';
	display: block;
	height: 8px;
	width: 20px;
	background-image: url("../img/arrow_right.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center
}
#navi__here::after {
	content: none
}

#sub__content {
	margin: clamp(1.25rem, -0.023rem + 6.36vw, 4.75rem) 0
}
#sub__content #date {
	font-size: clamp(0.75rem, 0.694rem + 0.28vw, 0.938rem);
	color: #666;
}
#sub__content h2 {
	font-size: clamp(1.375rem, 1.153rem + 1.11vw, 2.125rem);
	color: #1f1e31;
	line-height: 1.2;
	margin-bottom: clamp(0.5rem, 0.278rem + 1.11vw, 1.25rem);
}
#sub__content .detailUpfile img {
	margin: 12px auto
}
#sub__content p {
	color: #323232
}
#sub__content ul,
#sub__content ol {
	padding-left: 1em
}
#sub__content ul li,
#sub__content ol li {
	font-size: clamp(0.813rem, 0.757rem + 0.28vw, 1rem);
	color: #323232;
	margin-bottom: clamp(0.5rem, 0.136rem + 1.82vw, 1.5rem)
}
.shop__content {
	margin: clamp(1.875rem, 1.134rem + 3.7vw, 4.375rem) 0
}
.shop__content h3 {
	color: #1f1e31;
	font-size: 18px;
	margin-bottom: 12px
}
.shop__info > p {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #1f1e31;
	background-repeat: no-repeat;
	background-size: contain;
	height: 26px;
	padding-left: 34px;
	margin: 12px 0;
	flex-wrap: wrap
}
.shop__info p .guidance {
	display: block;
	width: 100%;
	color: #808080;
	font-weight: 100;
	font-size: 9px;
	line-height: 1
}
.shop__info .shop__info__address {
	background-image: url("../img/icon_address.svg")
}
.shop__info .shop__info__tel {
	background-image: url("../img/icon_tel.svg")
}
.shop__info .shop__info__time {
	background-image: url("../img/icon_time.svg")
}
.shop__info .shop__info__url {
	background-image: url("../img/icon_url.svg")
}
.shop__info__other {
	background: #ededef;
	padding: 14px;
	margin-bottom: 18px;
	border-radius: 5px;
	min-height: 90px
}
.shop__info__other p {
	color: #666
}
.shop__info__other p span {
	color: #FF5069
}
.shop__map iframe {
	width: 100%;
	height: 400px
}
#google-map {width: 100%}
.list__map__google {height: clamp(22.5rem, 18.056rem + 22.22vw, 37.5rem)}
.shop__map__google {height: clamp(22.5rem, 21.759rem + 3.7vw, 25rem)}
.shop__photo__inner {
	margin-bottom: clamp(1rem, 0.704rem + 1.48vw, 2rem)
}
.shop__photo__inner img {
	width: 100%;
	height: clamp(15rem, 13.519rem + 7.41vw, 20rem);
	object-fit: cover;
	object-position: center center
}
.shop__photo__inner p {
	font-size: clamp(0.656rem, 0.628rem + 0.14vw, 0.75rem)
}
#sub__content .to__lp {
	display: flex;
	align-items: center;
	justify-content: center
}
#wrapper #sub__content .to__lp::after {
	position: relative;
	top: auto;
	right: auto;
	content: '';
	display: block;
	margin-left: 8px;
	background-image: url("../img/icon_link.svg");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 1
}
#prefectures__map {
	width: 100%;
	height: clamp(18.75rem, 13.194rem + 27.78vw, 37.5rem);
	margin: 12px 0
}
#prefectures__shoplist {
	margin: 0;
	padding: 0;
	list-style: none
}
#prefectures__shoplist li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #1f1e31;
	padding: clamp(0.5rem, 0.204rem + 1.48vw, 1.5rem) 0
}
#prefectures__shoplist li h3 {
	min-height: clamp(1rem, 0.815rem + 0.93vw, 1.625rem);
	color: #1f1e31;
	font-size: clamp(0.938rem, 0.845rem + 0.46vw, 1.25rem);
	line-height: 1.2;
	text-align: left;
	background-image: url("../img/arrow_shoplist.svg");
	background-size: clamp(1rem, 0.815rem + 0.93vw, 1.625rem) auto;
	background-position: left center;
	background-repeat: no-repeat;
	padding: 0 0 0 clamp(1.5rem, 1.204rem + 1.48vw, 2.5rem);
	margin-top: 0
}
#prefectures__shoplist li p {
	color: #aaa;
	margin-left: clamp(1.5rem, 1.352rem + 0.74vw, 2rem);
	font-size: clamp(0.75rem, 0.676rem + 0.37vw, 1rem)
}
#prefectures__shoplist li .link__btn {
	width: 100px;
	font-size: clamp(0.75rem, 0.676rem + 0.37vw, 1rem);
	padding: clamp(0.5rem, 0.352rem + 0.74vw, 1rem);
	margin: 0;
	line-height: 1.2
}
#prefectures__shoplist li .link__btn::after {
	content: none
}
.prefectures__shoplist__info {
	width: calc(100% - 105px)
}
#newsList {
	margin: 0;
	padding: 0;
	list-style: none
}
#newsList li {
	display: block;
	background: #fff;
	box-shadow: 0.125rem 0.125rem 0.625rem rgba(0,0,0,.2);
	padding: clamp(1rem, 0.704rem + 1.48vw, 2rem);
	margin-bottom: clamp(1.25rem, 0.88rem + 1.85vw, 2.5rem);
	transition: .3s all;
}
#newsList li .up_ymd {
	font-size: clamp(0.656rem, 0.61rem + 0.23vw, 0.813rem);
	color: #888
}
#newsList li .catName {
	display: inline-block;
	background: #888;
	color: #fff;
	font-size: clamp(0.625rem, 0.588rem + 0.19vw, 0.75rem);
	line-height: 1;
	padding: clamp(0.25rem, 0.213rem + 0.19vw, 0.375rem);
	margin: 0 clamp(0.375rem, 0.239rem + 0.68vw, 0.75rem);
	border-radius: 3px;
	letter-spacing: 0.06em
}
#newsList li .thumbNailWrap {
	display: block;
	line-height: 0;
	margin: clamp(0.375rem, 0.116rem + 1.3vw, 1.25rem) 0
}
#newsList li .thumbNailWrap img {
	width: clamp(6.25rem, 1.435rem + 24.07vw, 22.5rem)
}
#newsList li .comment {
	font-size: clamp(0.813rem, 0.757rem + 0.28vw, 1rem);
	color: #666;
	letter-spacing: 0.06em
}
#newsList li .title a {
	font-size: clamp(0.875rem, 0.727rem + 0.74vw, 1.375rem);
	color: #1f1e31;
	font-weight: 700
}
#newsList li:hover {
	box-shadow: .125rem .125rem .75rem rgba(0,0,0,.3)
}
#newsList li .title a:hover {
	color: #ff8b1b
}

#sub__content h3 {
	text-align: center;
	margin-top: clamp(1.125rem, 0.903rem + 1.11vw, 1.875rem);
	color: #00637c;
	font-size: clamp(1.125rem, 0.94rem + 0.93vw, 1.75rem)
}
#wrapper #sub__content section {
	margin: clamp(1.25rem, 1.139rem + 0.56vw, 1.625rem) 0;
	padding: clamp(0.875rem, 0.727rem + 0.74vw, 1.375rem);
	border-radius: 8px;
	background: #f3f3f4
}
#wrapper #sub__content section p {
	margin-bottom: clamp(0.375rem, 0.338rem + 0.19vw, 0.5rem)
}

.knowledge__flex {
	margin-bottom: clamp(2.25rem, 1.435rem + 4.07vw, 5rem)
}
.knowledge__flex__txt p {
	margin-bottom: clamp(0.5rem, 0.426rem + 0.37vw, 0.75rem);
}
.knowledge__flex__txt p span {
	font-weight: 600;
	background: linear-gradient(transparent 60%, #ff6 60%)
}
.knowledge__flex__txt table {
	border: 2px solid #eee
}
.knowledge__flex__txt table th,
.knowledge__flex__txt table td {
	font-size: clamp(0.813rem, 0.757rem + 0.28vw, 1rem);
	padding: clamp(0.375rem, 0.301rem + 0.37vw, 0.625rem)
}
.knowledge__flex__txt table tr:not(:last-child) th, 
.knowledge__flex__txt table tr:not(:last-child) td {
	border-bottom: 1px solid #eee
}
.knowledge__flex__txt table th {
	width: 22%
}
.knowledge__flex__txt table td {
	color: #323232
}

.flow__box {
	position: relative;
	background: #F0F0F2;
	padding: clamp(0.875rem, 0.542rem + 1.67vw, 2rem);
	margin-top: 14px;
	margin-bottom: 40px;
	border-radius: 15px
}
.flow__box::after {
	content: '';
	position: absolute;
	bottom: -30px;
	left: 0;
	display: block;
	width: 100%;
	height: 20px;
	background-image: url("../img/arrow_bottom.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center
}
#no_arrow::after {
	content: none
}
#sub__content .flow__box h3 {
	display: flex;
	margin: 0 0 clamp(0.75rem, 0.528rem + 1.11vw, 1.5rem);
	align-items: center;
	justify-content: center
}
.flow__box h3 span {
	display: block;
	background: #00637c;
	color: #fff;
	padding: 0 12px;
	margin-right: 7px;
	border-radius: 10px
}
.flow__flex img {
	border-radius: 10px
}
.flow__box .flow__flex__txt p {
	margin-bottom: 6px
}
#sub__content .flow__flex ul {
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 10px 18px;
	border-radius: 6px
}
.flow__flex ul li {
	background-image: url("../img/checkmark.svg");
	background-repeat: no-repeat;
	background-size: auto 50%;
	background-position: center left;
	padding-left: 25px
}

.faq__box {
	margin-bottom: 36px;
	padding-top: 8px;
	border-top: 1px solid #e6e6e6
}
#sub__content .faq__box h3 {
	text-align: left;
	background-repeat: no-repeat;
	background-size: 32px auto;
	background-position: center left;
	padding-left: 46px;
	margin: 0 0 12px;
	font-size: clamp(1.125rem, 1.014rem + 0.56vw, 1.5rem);
}
#sub__content .faq__box .question {
	background-image: url("../img/question.svg");
	color: #51b9c9;
}
#sub__content .faq__box .answer {
	background-image: url("../img/answer.svg");
	color: #f58e8e
}
.faq__answer {
	background: #feefef;
	padding: clamp(0.875rem, 0.602rem + 1.36vw, 1.625rem);
	border-radius: clamp(0.625rem, 0.398rem + 1.14vw, 1.25rem);
	display: none
}
#sub__content .faq__answer p {
	color: #666
}
.publish__content p {
	margin-bottom: 1em
}
.problem__box {
	background: #eee;
	padding: 20px;
	text-align: center;
	border-radius: 20px
}
.problem__box h4 {
	color: #8E8E8E
}
.problem__box img {
	height: clamp(3.75rem, 2.386rem + 6.82vw, 7.5rem);
	margin: 1em auto 0;
	filter: invert(48%) sepia(96%) saturate(6%) hue-rotate(118deg) brightness(99%) contrast(86%)
}
#sitemap__list a {
	color: #1f1e31;
	font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem)
}


/**********************************************************************************/
/*                                  sp                                            */
/**********************************************************************************/
@media screen and (max-width: 599px) {
	#search__wrapper .search__wrapper__flex h2 {
		margin: 0;
		white-space: nowrap
	}
	.search__wrapper__flex {
		display: flex;
		align-items: center;
		gap: 1.25rem
	}
	.search__wrapper__flex input {
		width: 50%
	}
	.search__wrapper__flex button {
		flex-grow: 1
	}
	.section__reason__point__box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.section__reason__point__inner {
		width: 70px
	}
	.section__reason__point__box p {
		width: calc(100% - 90px);
	}
	.knowledge__flex img,
	.flow__flex img {
		margin-bottom: 6px
	}
	.problem__box {
		margin-bottom: 10px
	}
	.hero__grade__inner p br {
		display: none
	}
	.section__about__btnwrapper {
		margin: 10px 0
	}
}


/**********************************************************************************/
/*                                tablet                                          */
/**********************************************************************************/
@media screen and (min-width: 600px) {
	#hero__grade {
		width: 60%
	}
	#search__wrapper {
		display: flex;
		justify-content: space-between
	}
	#mode2 {
		width: calc(65% - 30px)
	}
	.search__map__content {
		margin-bottom: 0
	}
	.search__flex__content {
		width: 35%
	}
	.search__wrapper__flex input,
	.search__wrapper__flex button {
		width: 100%
	}
	.search__wrapper__flex input {
		margin-bottom: clamp(0.375rem, 0.301rem + 0.37vw, 0.625rem)
	}
	#section__reason__point {
		display: flex;
		justify-content: space-between
	}
	.section__reason__point__box {
		width: 32%
	}
	.section__reason__point__inner {
		margin-bottom: 8px
	}
	.section__about__btnarea {
		display: flex;
		justify-content: space-between;
		margin-top: 20px
	}
	.section__about__btnwrapper {
		width: calc(50% - 15px)
	}
	#wrapper #section__info h2 {
		width: 170px
	}
	.section__info__flex iframe {
		width: calc(100% - 170px)
	}
	.shop__photo__flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		&::after {
			content: '';
			display: block;
			width: 31%
		}
	}
	.shop__photo__inner {
		width: 48%
	}
	#prefectures__shoplist li .link__btn {
		width: 200px
	}
	.prefectures__shoplist__info {
		width: calc(100% - 200px)
	}
	.knowledge__flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between
	}
	.knowledge__flex img {
		width: 230px
	}
	.knowledge__flex__txt {
		width: calc(100% - 250px)
	}
	.flow__flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between
	}
	.flow__flex img {
		width: 260px
	}
	.flow__flex__txt {
		width: calc(100% - 280px)
	}
	.flow__box {
		margin-bottom: 60px;
	}
	.flow__box:not(:last-child)::after {
		bottom: -43px;
		height: 27px;
	}
	.problem__wrapper {
		display: flex;
		gap: 20px;
		margin-bottom: 1em
	}
	#sub__content .link__btn {
		font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
		padding: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
		border-radius: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
		margin-top: clamp(2.375rem, 2.011rem + 1.82vw, 3.375rem)
	}
	#sub__content .link__btn::after {
		height: 26px;
		width: 38px;
		top: calc(50% - 13px)
	}
	#sitemap__list {
		width: 80%;
		margin: 0 auto
	}
	.reason__point__inner {
		display: flex;
		margin: 32px 0 0 0
	}
	.reason__point__img {
		width: 240px;
		margin: 0
	}
	.reason__point__text {
		position: relative;
		padding: 26px;
		margin: 40px 0 0 -40px;
		border-radius: 20px;
		background: #fff;
		z-index: 1
	}
}


/**********************************************************************************/
/*                                  PC                                            */
/**********************************************************************************/
@media screen and (min-width: 1025px) {
	html {overflow-x: hidden}
	.link__btn::after {
		height: 20px;
		width: 25px;
		top: calc(50% - 10px)
	}
	#wrapper {
		max-width: 1400px;
		margin: 0 auto;
	}
	#hero__wrapper::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		height: 100%;
		width: 100%;
		background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%);
		z-index: 1
	}
	#hero__grade {
		width: 50%;
		justify-content: center;
		z-index: 5
	}
	.toppage__wrapper #hero__wrapper {
		height: 800px
	}
	.hero__grade__inner img {
		max-height: none;
		width: 400px;
		height: auto
	}
	.hero__grade__inner p {
		font-size: 20px;
		font-weight: 500
	}
	#head__menu__content ul li a {
		text-align: center
	}
	.menu__check__label {
		display: none
	}
	#logo {
		width: 370px
	}
	#logo img {
		max-width: none;
		max-height: none;
		height: 50px
	}
	#head__menu__content {
		position: relative;
		background: none;
		width: auto;
		left: 0;
	}
	#head__menu__content ul {
		display: flex;
		align-items: center
	}
	#head__menu__content ul li {
		position: relative;
		border: none;
		padding: 0 10px 3px;
		overflow: hidden
	}
	#head__menu__content ul li::after {
		content: '';
		position: absolute;
		left: -100%;
		bottom: 0;
		display: block;
		width: 100%;
		height: 1px;
		background-color: #fff;
		transition: .2s all;
	}
	#head__menu__content ul li:hover::after {
		left: 0
	}
	.search__map__content {
		position: relative;
		width: 780px;
		height: 420px;
		background-image: url("../img/japan_map_pc.svg");
		background-size: 700px auto;
		background-position: left center
	}
	.search__list {
		position: absolute;
	}
	#hokkaido {
		right: 20px;
		top: 35px
	}
	#tohoku {
		width: 160px;
		right: 0;
		top: 119px
	}
	#kanto {
		width: 160px;
		bottom: -30px;
		right: 30px
	}
	#chubu {
		width: 160px;
		right: 230px;
		top: 20px
	}
	#kansai {
		width: 160px;
		bottom: -80px;
		right: 260px
	}
	#chugoku {
		width: 160px;
		top: 110px;
		left: 210px
	}
	#shikoku {
		width: 160px;
		bottom: -10px;
		left: 180px
	}
	#kyushu {
		width: 160px;
		left: 20px;
		top: 110px
	}
	#okinawa {
		bottom: -20px;
		left: 22px
	}
	.search__list li {
		width: 80px
	}
	.search__flex__content {
		width: calc(100% - 850px)
	}
	.section__reason__point__inner img {
		max-height: 120px
	}
	.section__about__btnwrapper .link__btn {
		margin-top: 220px
	}
	#return__top {
		width: 60px;
		height: 60px;
		right: 20px;
		bottom: 20px;
	}
	#return__top img {
		width: 30px
	}
	#wrapper #section__info h2 {
		width: 240px
	}
	.section__info__flex iframe {
		width: calc(100% - 240px)
	}
	.section__knowledge__infobox__imgwrapper {
		height: 120px
	}
	#knowledge__list li h4 a:hover,
	#info__list li a:hover {
		color: #ff8b1b
	}
	button:hover, .link__btn:hover, .search_button:hover {
		opacity: .6
	}
	.subpage__wrapper #head__menu__content ul li a {
		color: #333
	}
	.subpage__wrapper #head__menu__content ul li::after {
		background-color: #333
	}
	#logo a:hover img {
		opacity: 0.8
	}
	.shop__info__wrapper {
		display: flex;
		justify-content: space-between
	}
	.shop__info {
		width: 600px;
	}
	.shop__map {
		width: calc(100% - 650px)
	}
	.shop__photo__inner {
		width: 31%
	}
	.prefectures__shoplist__info {
		display: flex;
		align-items: center
	}
	#prefectures__shoplist li .link__btn {
		width: 300px
	}
	.prefectures__shoplist__info {
		width: calc(100% - 300px)
	}
	.knowledge__flex img {
		width: 400px
	}
	.knowledge__flex__txt {
		width: calc(100% - 440px)
	}
	.knowledge__flex__txt table th {
		width: 30%
	}
	.knowledge__flex__txt table th,
	.knowledge__flex__txt table td {
		padding: 14px 8px
	}
	.flow__flex img {
		width: 400px
	}
	.flow__flex__txt {
		width: calc(100% - 420px)
	}
	.flow__box {
		margin-bottom: 80px;
	}
	.flow__box:not(:last-child)::after {
		bottom: -57px;
		height: 36px;
	}
	.reason__point__inner {
		margin: 40px 0 0 0
	}
	.reason__point__img {
		width: 330px;
		height: 220px;
	}
	.reason__point__text {
		margin-top: 60px;
		padding: 34px
	}
}