@charset "utf-8";

/*==================================================
CSS Variables
================================================== */
:root {
	/* Colors */
	--color-logo: #5BC2DC;
	--color-primary: #0065BD;
	--color-secondary: #0057a3;
	--color-tertiary: #4D94D1;
	--color-accent: #00A2C7;
	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-bg-blue: #d3eeff;
	--color-bg-blue-down: #c9e9ff;
	--color-light-gray: #CCCCCC;
	--color-water: #F2FCFF;
	--color-water-down: #E6FAFF;
	--color-blue-shadow: #00528B;
	--color-blue-shadow-40: rgba(0, 82, 139, 0.4);
	--color-blue-shadow-15: rgba(0, 82, 139, 0.15);
	--color-light-yellow: #fffbd4;
	--color-red: #D70000;
	--color-transparent: transparent;
	--gradation1: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
	--gradation2: linear-gradient(90deg, var(--color-primary), var(--color-accent));

	/* icon */
	--icon-menu: url(../img/icon_menu.svg);
	--icon-close: url(../img/icon_close.svg);
	--icon-play: url(../img/icon_play.svg);
	--icon-pause: url(../img/icon_pause.svg);
	--icon-arrow-up: url(../img/arrow_up.svg);
	--icon-arrow-down: url(../img/arrow_down.svg);
	--icon-arrow-right: url(../img/arrow_right.svg);
	--icon-arrow-right-white: url(../img/arrow_right_wh.svg);
	--icon-right-blue: url(../img/arrow_circle_blue.svg);
	--icon-instagram: url(../img/icon_instagram.svg);
	--icon-external-min: url(../img/icon_external_min.svg);
	--icon-external: url(../img/icon_external.svg);
	--logo-sfo: url(../img/logo_sfokinawa.webp);
	--logo-suntory: url(../img/logo_suntory.svg);
	--img-pagetop: url(../img/illust_pagetop.webp);

	--icon-dot: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2023%2023%22%3E%20%20%3C%21--%20Generator%3A%20Adobe%20Illustrator%2029.3.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.0%20Build%20151%29%20%20--%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23006cc9%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%225%22%2F%3E%3C%2Fsvg%3E");

	--icon-breadcrumb-separator: url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.7%200L0%200.7L4%204.7L0%208.7L0.7%209.4L5.4%204.7L0.7%200Z%22%20fill%3D%22%23767676%22%2F%3E%3C%2Fsvg%3E");

	/* background */
	--bg-texture: url(/okinawa/assets/img/bg_texture.webp);
	--bg-subpage-h2: url(../img/bg_subpage_h2.svg);

	/* group illust */
	--img-csr: url(../img/img_csr.webp);
	--img-eco: url(../img/img_eco.webp);
	--img-product: url(../img/img_product.webp);

	/*角丸・影*/
	--panel-shadow: 0 1.333333333vw 4vw var(--color-blue-shadow-40);
	--panel-shadow-small: 0 1.333333333vw 2vw var(--color-blue-shadow-15);
	--bd-radius: 5.333333333vw;
	--bd-radius-large: 8vw;
	--bd-radius-s: 4.266666667vw;
	--bd-radius-ss: 2.666666667vw;

	/* Fonts */
	--font-family-jp: 'Arial', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', sans-serif;
	--font-base: 4.266666667vw;

	/* 値 他 */
	--value-sp10: 2.666666667vw;
	--value-sp20: 5.333333333vw;
	--value-sp24: 6.4vw;
	--value-sp32: 8.533333333vw;
	--value-sp40: 10.66666667vw;
	--value-sp80: 21.33333333vw;
	--transition-normal: all 0.3s ease;

	--value-pc10: 10px;
	--value-pc20: 20px;
	--value-pc24: 24px;
	--value-pc32: 32px;
	--value-pc40: 40px;
	--value-pc80: 80px;
}

@media (min-width: 768px) {
	:root {

		--font-family-jp: 'Arial', 'YuGothic', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Meiryo', sans-serif;
		--font-base: 16px;

		--panel-shadow: 0px 10px 30px var(--color-blue-shadow-40);
		--panel-shadow-hover: 0px 10px 30px var(--color-transparent);
		--panel-shadow-small: 0px 10px 15px var(--color-blue-shadow-15);
		--panel-shadow-small-hover: 0px 10px 15px var(--color-transparent);
		--bd-radius: 40px;
		--bd-radius-large: 60px;
		--bd-radius-s: 30px;
		--bd-radius-ss: 20px;
		--bd-radius-mini: 16px;
	}
}

/*==================================================
Global Reset
================================================== */
html {
	scroll-behavior: smooth;
	block-size: 100%;
	-webkit-text-size-adjust: none
}

@media (prefers-reduced-motion:no-preference) {
	html {
		scroll-behavior: smooth
	}
}

body {
	text-rendering: optimizeSpeed;
	min-block-size: 100%;
	font-family: var(--font-family-jp);
	font-weight: 300;
	color: var(--color-black);
	background-color: var(--color-white);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default list styles */
ul,
ol {
	list-style: none;
}

a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Remove default link styles */
a {
	color: inherit;
	text-decoration: none;
}

/* Image styles */
img,
picture {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

input,
button,
textarea,
select {
	font: inherit;
}

/* Remove default button styles */
button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*==================================================
no-scroll
================================================== */
body.no-scroll {
	overflow: hidden;
}

/*==================================================
SP
================================================== */
.pc_item {
	display: none;
}

/*==================================================
[sp]header
================================================== */
.header {
	width: 100%;
	height: 18.66666667vw;
}

.header .inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.header .logo a {
	display: block;
	width: 66.66666667vw;
	height: 18.66666667vw;
	position: relative;
}

.header .logo a::before {
	content: '';
	width: 56vw;
	height: 7.466666667vw;
	background-color: var(--color-logo);
	-webkit-mask: var(--logo-sfo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: calc(50% - 3.733333333vw);
	left: calc(50% - 28vw);
}

.header .logo a span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.header .btn_menu {
	width: 18.666666666666667vw;
	height: 18.666666666666667vw;
	position: relative;
}

.header .btn_menu::before {
	content: '';
	width: 7.466666667vw;
	height: 6.666666667vw;
	background-color: var(--color-primary);
	-webkit-mask: var(--icon-menu);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: calc(50% - 3.733333333vw);
	left: calc(50% - 3.333333333vw);
	pointer-events: none;
}

.header .btn_menu span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.header .nav_container {
	display: block;
	transition: var(--transition-normal);
	background: var(--color-primary) url(../img/bg_menu_sp.webp) no-repeat left bottom / contain;
	width: 89.333333333333333vw;
	height: 100vh;
	padding: 21.333333333333333vw 0 0;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	transform: translateX(89.333333333333333vw);
}

.header.nav_open .nav_container {
	transform: translateX(0);
	box-shadow: -2.666666666666667vw 0 5.333333333333333vw 0 rgba(0, 0, 0, 0.25);
}

.header .btn_menu_close {
	width: 13.33333333vw;
	height: 13.33333333vw;
	background-color: var(--color-white);
	position: absolute;
	top: 2.666666667vw;
	right: 2.666666667vw;
	border-radius: 50%;
}

.header .btn_menu_close::before {
	content: '';
	width: 5.866666666666667vw;
	height: 5.6vw;
	background-color: var(--color-primary);
	-webkit-mask: var(--icon-close);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: calc(50% - 2.8vw);
	left: calc(50% - 2.933333333333333vw);
	pointer-events: none;
}

.header .btn_menu_close span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.header .nav_container_inner {
	overflow-y: auto;
	height: calc(100vh - 21.333333333333333vw);
}

.header .main_nav .logo a {
	display: block;
	width: 67.46666667vw;
	height: 8.8vw;
	margin: 0 auto 4vw;
	position: relative;
}

.header .main_nav .logo a::before {
	content: '';
	width: 67.46666667vw;
	height: 8.8vw;
	background-color: var(--color-white);
	-webkit-mask: var(--logo-sfo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.header .main_nav .logo a span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.header .main_nav ul {
	display: flex;
	flex-direction: column;
	padding: 0;
	width: 67.46666667vw;
	margin: 0 auto;
}

.header .main_nav .nav_item a {
	display: block;
	color: var(--color-white);
	margin: 0;
	padding: 4vw 0;
	font-size: 5.333333333vw;
	font-weight: 600;
	text-align: center;
}

.header .main_nav .sns {
	margin: 2.4vw auto 0;
}

.sns {
	display: block;
	width: fit-content;
	margin: 2.4vw auto 0;
	color: var(--color-white);
	font-size: 4.266666666666667vw;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	position: relative;
}

.sns a {
	color: var(--color-white);
	text-decoration: none;
	padding: 4vw 0 4vw 8.8vw;
	position: relative;
	display: inline-block;
}

.sns a::before {
	content: '';
	width: 6.4vw;
	height: 6.4vw;
	background-color: var(--color-white);
	-webkit-mask: var(--icon-instagram);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: calc(50% - 3.2vw);
	left: 0;
}


/*==================================================
[sp]footer
================================================== */
.footer {
	width: 100%;
	margin: 10.53333333vw 0 0;
	background-color: var(--color-primary);
	position: relative;
}

.footer::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 10.53333333vw;
	left: 0;
	top: -10.53333333vw;
	background: url(../img/bg_footer_sp.webp) no-repeat left bottom /contain;
}

.footer .inner {
	width: 100%;
	padding: 12vw 5.333333333vw 0;
}

.footer .logo_container {
	display: block;
}

.footer .logo a {
	display: block;
	width: 89.33333333vw;
	height: 17.6vw;
	position: relative;
}

.footer .logo a::before {
	content: '';
	width: 74.93333333vw;
	height: 10vw;
	background-color: var(--color-white);
	-webkit-mask: var(--logo-sfo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: calc(50% - 5vw);
	left: calc(50% - 37.466666665vw);
}

.footer .logo a span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.footer .logo_container .link a {
	display: block;
	margin: 0 0 4.8vw;
	font-size: 3.733333333vw;
	font-weight: 600;
	line-height: 1;
	color: var(--color-white);
	text-decoration: none;
	text-align: center;
}

.footer .sns {
	margin: 7.466666667vw auto 10.66666667vw;
}

.footer .main_nav {
	margin: 9.6vw 0 0;
}

.footer .main_nav p {
	margin-bottom: 3.2vw;
	padding-bottom: 4vw;
	font-size: 4.266666666666667vw;
	font-weight: 600;
	line-height: 1;
	color: var(--color-white);
	border-bottom: 0.266666666666667vw solid var(--color-white);
}

.footer .main_nav .nav_list_primary {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: flex-start;
	gap: 8vw 3.2vw;
}

.footer .main_nav .nav_list_primary .nav_item {
	width: 41.86666667vw;
}

.footer .nav_list_secondary li a {
	display: block;
	padding: 2.4vw 0;
	font-size: 3.733333333333333vw;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-white);
	text-decoration: none;
}

.footer .nav_list_secondary li a.external::after {
	content: '';
	display: inline-block;
	width: 4vw;
	height: 1.5em;
	vertical-align: bottom;
	background: var(--icon-external-min) no-repeat right center / 2.666666667vw auto;
}

.footer .copyright {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 10.666666666666667vw;
	background-color: var(--color-secondary);
	color: var(--color-white);
	font-size: 2.933333333vw;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

/*==================================================
[sp]page_top
================================================== */
.page_top {
	width: 12.8vw;
	height: 12.8vw;
	border-radius: 50%;
	border: 0.4vw solid var(--color-primary);
	background: var(--color-white);
	position: fixed;
	bottom: 16.4vw;
	right: 4.8vw;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	transition: var(--transition-normal);
	cursor: pointer;
}

.page_top::before {
	content: '';
	display: block;
	width: 3.2vw;
	height: 3.2vw;
	position: absolute;
	top: calc(50% - 1.6vw);
	left: calc(50% - 1.6vw);
	background: var(--icon-arrow-up);
}

.page_top::after {
	content: '';
	display: block;
	width: 20vw;
	height: 9.333333333vw;
	position: absolute;
	bottom: -6.133333333vw;
	left: calc(50% - 10vw);
	background: var(--img-pagetop) no-repeat center top / contain;
}

.page_top span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.page_top.active {
	opacity: 1;
	visibility: visible;
}

/*==================================================
[sp] subpage BASE 下層ページ
================================================== */
.container {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}

.container main {
	width: 100%;
	padding: 0 0 10.66666667vw;
	background: var(--color-bg-blue);
	order: 1;
}

section {
	width: 100%;
	margin: 0;
	position: relative;
}

/*[sp]イラスト-------------------------------------------*/
:root {
	/* deco illust */
	--img-angelfish: url(../img/illust/il_angelfish.webp);
	--img-banana: url(../img/illust/il_banana.webp);
	--img-coral-a: url(../img/illust/il_coral_a.webp);
	--img-coral-b: url(../img/illust/il_coral_b.webp);
	--img-dolphin: url(../img/illust/il_dolphin.webp);
	--img-eagleray: url(../img/illust/il_eagleray.webp);
	--img-fish: url(../img/illust/il_fish.webp);
	--img-goya: url(../img/illust/il_goya.webp);
	--img-hibiscus-mv: url(../img/illust/il_hibiscus_mv.webp);
	--img-hibiscus-red: url(../img/illust/il_hibiscus_red.webp);
	--img-hibiscus-org: url(../img/illust/il_hibiscus_org.webp);
	--img-kumanomi: url(../img/illust/il_kumanomi.webp);
	--img-manbou: url(../img/illust/il_manbou.webp);
	--img-pineapple: url(../img/illust/il_pineapple.webp);
	--img-starfish: url(../img/illust/il_starfish.webp);
	--img-seagull: url(../img/illust/il_seagull.webp);
	--img-seahorse: url(../img/illust/il_seahorse.webp);
	--img-shark: url(../img/illust/il_shark.webp);
	--img-shell: url(../img/illust/il_shell.webp);
	--img-turtle: url(../img/illust/il_turtle.webp);
	--img-turtle-side: url(../img/illust/il_turtle_side.webp);
}

main .deco {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}

main .deco.seahorse {
	background-image: var(--img-seahorse);
	width: 10.13333333vw;
	height: 20.53333333vw;
}

main .deco.eagleray {
	background-image: var(--img-eagleray);
	width: 13.33333333vw;
	height: 16.53333333vw;
}

main .deco.manbou {
	background-image: var(--img-manbou);
	width: 13.33333333vw;
	height: 17.86666667vw;
}

main .deco.shell {
	background-image: var(--img-shell);
	width: 13.86666667vw;
	height: 16.26666667vw;
}

main .deco.kumanomi {
	background-image: var(--img-kumanomi);
	width: 13.6vw;
	height: 10.13333333vw;
}

main .deco.turtle {
	background-image: var(--img-turtle);
	width: 14.93333333vw;
	height: 13.6vw;
}

main .deco.hibiscus_red {
	background-image: var(--img-hibiscus-red);
	width: 13.6vw;
	height: 13.6vw;
}

main .deco.hibiscus_org {
	background-image: var(--img-hibiscus-org);
	width: 12.26666667vw;
	height: 12.26666667vw;
}

main .deco.turtle_side {
	background-image: var(--img-turtle-side);
	width: 17.6vw;
	height: 13.86666667vw;
}

main .deco.pineapple {
	background-image: var(--img-pineapple);
	width: 11.73333333vw;
	height: 19.46666667vw;
}

main .deco.goya {
	background-image: var(--img-goya);
	width: 15.46666667vw;
	height: 13.86666667vw;
}

main .deco.coral_a {
	background-image: var(--img-coral-a);
	width: 20.8vw;
	height: 16.53333333vw;
}

main .deco.coral_b {
	background-image: var(--img-coral-b);
	width: 20.8vw;
	height: 16.53333333vw;
}


/*==================================================
[sp]breadcrumbs 下層ページ
================================================== */
.breadcrumbs {
	margin: 0 auto;
	padding: 0 5.333333333vw 8.533333333333333vw;
	width: 100%;
	background-color: var(--color-bg-blue);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: baseline;
	order: 2;
}

.breadcrumbs li {
	display: inline-flex;
	font-size: 3.733333333333333vw;
	color: var(--color-black);
}

.breadcrumbs li a {
	display: inline-flex;
}

.breadcrumbs li:not(:has(a)) {
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5;
	max-height: calc(1.5em * 2);
}

.breadcrumbs li a {
	margin-right: 7.466666666666667vw;
	color: var(--color-primary);
	text-decoration: underline;
	position: relative;
}

.breadcrumbs li a::after {
	content: '';
	width: 1.6vw;
	height: 2.666666666666667vw;
	background-color: var(--color-black);
	-webkit-mask: var(--icon-breadcrumb-separator);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: calc(50% - 1.333333333333333vw);
	right: -4.533333333333333vw;
}

/*==================================================
[sp] subpage COMMON 下層ページ
================================================== */
.container .subpage_h1area {
	padding: 12.8vw 0 0;
	background: #0065BD url(../img/bg_subpage_h1_sp.png) no-repeat center top / cover;
	height: 41.6vw;
	margin-bottom: 10.66666667vw;
}

.container h1.subpage_h1 {
	color: var(--color-white);
	font-size: 8.533333333vw;
	text-align: center;
	font-weight: 600;
	line-height: 1.5;
}

.subpage_body {
	width: 89.33333333vw;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.subpage_body.lump {
	padding: 10.66666667vw 0;
	background: var(--color-white);
	border-radius: var(--bd-radius);
}

.subpage_body.headmv {
	padding: 0 0 10.66666667vw;
	background: var(--color-white);
	border-radius: var(--bd-radius);
}

.subpage_body section {
	padding: 0 5.333333333vw;
	position: relative;
}

.subpage_body.headmv section+section,
.subpage_body.lump section+section {
	margin-top: 21.33333333vw;
}

.subpage_body section>section.sec_mini {
	padding: 0;
}

.subpage_body section h2.subpage_h2 {
	color: var(--color-primary);
	font-size: 7.466666667vw;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	padding: 0 0 8.533333333vw;
	margin: 0 0 var(--value-sp40);
	background: var(--bg-subpage-h2) no-repeat center bottom / auto 3.2vw;
}

.subpage_body section h3.bluebg {
	color: var(--color-primary);
	font-size: 5.866666667vw;
	font-weight: 600;
	line-height: 1.5;
	padding: 4.266666667vw 5.333333333vw;
	border-radius: var(--bd-radius-s);
	margin: var(--value-sp40) 0 8.533333333vw;
	background: var(--color-water-down)
}


.subpage_body .sub_mv {
	width: 100%;
	height: auto;
	position: relative;
}

.subpage_body .sub_mv img {
	border-radius: var(--bd-radius) var(--bd-radius) 0 0;
}

.subpage_body section p {
	font-size: var(--font-base);
	line-height: 1.75;
}

/*==================================================
[sp]panel 共通 
================================================== */
.panel a {
	position: relative;
	width: 100%;
	background: var(--color-white);
	border-radius: var(--bd-radius);
	box-shadow: var(--panel-shadow);
	overflow: hidden;
}

.panel .img_photo {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
}

.panel a .img_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*==================================================
[sp]group rectangle 共通
================================================== */
.group .rectangle {
	padding: 5.333333333vw 10.66666667vw;
	border-radius: var(--bd-radius);
	background: var(--color-white);
	overflow: hidden;
}

.group .rectangle ul {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

.group .rectangle li {
	width: 100%;
	padding: 5.333333333vw 0 9.066666667vw;
	border-top: 0.266666667vw solid var(--color-light-gray);
}

.group .rectangle li.link_suntory {
	border: none;
}

.group .rectangle li a {
	display: block;
	padding: 26.66666667vw 0 0;
	text-align: center;
}

.group .rectangle li a span {
	display: block;
	position: relative;
	font-size: 4.8vw;
	line-height: 1;
}

.group .rectangle li a span::after {
	content: '';
	display: inline-block;
	width: 8vw;
	height: 1em;
	vertical-align: bottom;
	background: var(--icon-external) no-repeat right center / 4.266666667vw auto;
}

.group .rectangle li.link_suntory a {
	background: var(--logo-suntory) no-repeat center top 6.666666667vw / 53.33333333vw auto;
}

.group .rectangle li.link_csr a {
	background: var(--img-csr) no-repeat center top / 23.46666667vw auto;
}

.group .rectangle li.link_eco a {
	background: var(--img-eco) no-repeat center top / 23.46666667vw auto;
}

.group .rectangle li.link_product a {
	background: var(--img-product) no-repeat center top / 23.46666667vw auto;
}

@media (min-width: 768px) {

	/*==================================================
[PC]Base
================================================== */
	.sp_item {
		display: none !important;
	}

	.pc_item {
		display: block;
	}

	/*==================================================
  [pc]header
  ================================================== */
	.header {
		height: 90px;
	}

	.header .inner {
		max-width: 1440px;
		min-width: 1200px;
		height: 90px;
		margin: 0 auto;
		padding: 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-end;
		gap: 50px;
	}

	.header .logo a {
		width: 340px;
		height: 90px;
	}

	.header .logo a::before {
		width: 280px;
		height: 36px;
		top: calc(50% - 18px);
		left: calc(50% - 140px);
	}

	.header .btn_menu,
	.header .btn_menu_close,
	.header .main_nav .logo,
	.header .main_nav .sns {
		display: none;
	}

	.header .nav_container {
		display: block;
		background: none;
		width: calc(100% - 340px);
		height: 90px;
		padding: 0;
		position: static;
		transform: translateX(0);
	}

	.header .nav_container_inner {
		overflow: visible;
		height: 90px;
	}

	.header .main_nav {
		height: 90px;
		display: flex;
		align-items: flex-end;
	}

	.header .main_nav ul {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 38px;
		margin: 0 0 15px;
	}

	.header .main_nav .nav_item a {
		display: block;
		margin: 0;
		padding: 0 0 8px;
		font-weight: 600;
		font-size: 18px;
		line-height: 1;
		text-decoration: none;
		color: var(--color-black);
		border-bottom: 4px solid var(--color-white);
		transition: var(--transition-normal);
	}

	.header .main_nav .nav_item a:hover {
		border-color: var(--color-primary);
	}

	/*==================================================
  [pc]footer
  ================================================== */
	.footer {
		max-width: 1920px;
		margin: 70px auto 0;
	}

	.footer::before {
		content: "";
		position: absolute;
		max-width: 1920px;
		height: 70px;
		left: 0;
		top: -70px;
		background: url(../img/bg_footer_pc.webp) no-repeat center bottom / 1920px auto;
	}

	.footer .inner {
		padding: 60px 40px 80px;
		width: 1280px;
		margin: 0 auto;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		position: relative;
	}

	.footer .logo a {
		width: 280px;
		height: 36px;
		margin: 0 0 20px;
	}

	.footer .logo a::before {
		content: '';
		width: 280px;
		height: 36px;
		top: 0;
		left: 0;
	}

	.footer .logo_container .link a {
		margin: 0;
		font-size: 18px;
	}

	.footer .logo_container .link a:hover {
		text-decoration: underline;
	}

	.footer .sns {
		position: absolute;
		margin: 0;
		font-size: 15px;
		left: 76px;
		top: 170px;
	}

	.footer .sns a {
		display: block;
		color: var(--color-white);
		text-decoration: none;
		padding: 0 0 0 30px;
		line-height: 24px;
	}

	.footer .sns a::before {
		width: 24px;
		height: 24px;
		top: calc(50% - 12px);
	}

	.footer .main_nav {
		margin: 0;
	}

	.footer .main_nav p {
		margin-bottom: 24px;
		padding-bottom: 12px;
		font-size: 18px;
		font-weight: 400;
		line-height: 1;
		color: var(--color-white);
		border-bottom: 1px solid var(--color-white);
	}

	.footer .main_nav .nav_list_primary {
		flex-wrap: nowrap;
		gap: 40px;
	}

	.footer .main_nav .nav_list_primary .nav_item {
		width: 185px;
	}

/*	.footer .main_nav .nav_list_primary .nav_item:last-child {
		width: 200px;
	}*/

	.footer .nav_list_secondary li {
		margin: 10px 0 0;
	}

	.footer .nav_list_secondary li a {
		padding: 0;
		font-size: 15px;
		line-height: 1.5;
	}

	.footer .nav_list_secondary li a:hover {
		text-decoration: underline;
	}

	.footer .nav_list_secondary li a.external::after {
		width: 15px;
		background-size: 10px auto;
	}

	.footer .copyright {
		height: 40px;
		font-size: 12px;
	}

	/*==================================================
  [pc]page_top
  ================================================== */
	.page_top {
		width: 80px;
		height: 80px;
		border: 2px solid var(--color-primary);
		right: 50px;
		bottom: 78px;
	}

	.page_top::before {
		width: 20px;
		height: 20px;
		top: calc(50% - 10px);
		left: calc(50% - 10px);
		transition: var(--transition-normal);
	}

	.page_top:hover::before {
		top: calc(50% - 18px);
	}

	.page_top::after {
		content: '';
		display: block;
		width: 126px;
		height: 60px;
		position: absolute;
		bottom: -40px;
		left: calc(50% - 63px);
	}

	/*==================================================
  [PC] subpage BASE 下層ページ
================================================== */
	.container {
		max-width: 1920px;
		min-width: 1200px;
		margin: 0 auto;
		padding: 46px 0 0;
		background: #0065BD url(../img/bg_minsa.svg) repeat-x left 8px top 6px / auto 30px;
	}

	.container main {
		padding: 0 0 100px;
		order: 2;
	}

	/*[PC] イラスト----------------------------------*/
	main .deco.seahorse {
		width: 60px;
		height: 122px;
	}

	main .deco.eagleray {
		width: 80px;
		height: 99px;
	}

	main .deco.manbou {
		width: 80px;
		height: 107px;
	}

	main .deco.shell {
		width: 83px;
		height: 97px;
	}

	main .deco.kumanomi {
		width: 82px;
		height: 61px;
	}

	main .deco.turtle {
		width: 90px;
		height: 82px;
	}

	main .deco.hibiscus_red {
		width: 82px;
		height: 82px;
	}

	main .deco.hibiscus_org {
		width: 74px;
		height: 74px;
	}

	main .deco.turtle_side {
		width: 106px;
		height: 84px;
	}

	main .deco.pineapple {
		width: 70px;
		height: 116px;
	}

	main .deco.goya {
		width: 93px;
		height: 83px;
	}

	main .deco.coral_a {
		width: 136px;
		height: 108px;
	}

	main .deco.coral_b {
		width: 136px;
		height: 108px;
	}


	/*==================================================
  [PC] breadcrumbs 下層ページ
  ================================================== */
	.breadcrumbs {
		margin: 0 auto 6px;
		padding: 0;
		max-width: 1200px;
		background: var(--color-primary);
		order: 1;
	}

	.breadcrumbs li {
		font-size: 14px;
		color: var(--color-white);
	}

	.breadcrumbs li a {
		margin-right: 28px;
		color: var(--color-white);
		text-decoration: underline;
		position: relative;
	}

	.breadcrumbs li a::after {
		content: '';
		width: 6px;
		height: 10px;
		background-color: var(--color-white);
		-webkit-mask: var(--icon-breadcrumb-separator);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		-webkit-mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		position: absolute;
		top: calc(50% - 5px);
		right: -17px;
	}

	/*==================================================
[PC] subpage COMMON 下層ページ
================================================== */

	.container .subpage_h1area {
		background: #0065BD url(../img/bg_subpage_h1_pc.png) no-repeat center bottom / 1920px;
		padding: 0 0;
		height: 168px;
		margin-bottom: 80px;
	}

	.container h1.subpage_h1 {
		font-size: 45px;
	}

	.subpage_body {
		width: 1120px;
	}

	.subpage_body.lump {
		padding: 80px 0;
	}

	.subpage_body.headmv {
		padding: 0 0 80px;
	}

	.subpage_body section {
		padding: 0 80px;
	}

	.subpage_body.headmv section+section,
	.subpage_body.lump section+section {
		margin-top: 80px;
	}

	.subpage_body section h2.subpage_h2 {
		font-size: 36px;
		padding: 0 0 32px;
		margin: 0 0 40px;
		background-size: auto 12px;
	}

	.subpage_body section h3.bluebg {
		font-size: 22px;
		padding: 16px 24px;
		border-radius: var(--bd-radius-mini);
		margin: 56px 0 32px;
	}

	.subpage_body section p.summary_txt {
		width: 760px;
		margin: 0 auto;
	}

	/*==================================================
[PC]panel 共通 
================================================== */
	.panel a {
		height: 100%;
	}

	/*hover用*/
	.panel a::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: var(--bd-radius);
		border: 10px solid var(--color-transparent);
		transition: var(--transition-normal);
	}

	.panel a:hover {
		box-shadow: var(--panel-shadow-hover);
	}

	.panel a:hover::after {
		border-color: var(--color-primary);
	}

	/*==================================================
[pc]group rectangle 共通
================================================== */
	.group .rectangle {
		padding: 80px 80px 65px;
	}

	.group .rectangle ul {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
	}

	.group .rectangle li {
		width: calc(100%/3);
		padding: 0;
		border-top: none;
		border-left: 1px solid var(--color-light-gray);
	}


	.group .rectangle li.link_suntory {
		width: 100%;
	}

	.group .rectangle li.link_csr {
		border: none;
	}

	.group .rectangle li a {
		display: block;
		padding: 180px 0 20px;
		text-align: center;
	}

	.group .rectangle li a span {
		display: block;
		position: relative;
		font-size: 20px;
		line-height: 1;
		font-weight: 600;
	}

	.group .rectangle li a span::after {
		content: '';
		display: inline-block;
		width: 30px;
		height: 1em;
		vertical-align: bottom;
		background: var(--icon-external) no-repeat right center / 16px auto;
	}

	.group .rectangle li a:hover span {
		color: var(--color-primary);
	}

	.group .rectangle li.link_suntory a {
		height: 96px;
		padding: 80px 0 0;
		margin: 0 0 40px;
		background: var(--logo-suntory) no-repeat center top / 266px auto;
	}

	.group .rectangle li.link_csr a {
		background: var(--img-csr) no-repeat center top 30px / 110px auto;
	}

	.group .rectangle li.link_eco a {
		background: var(--img-eco) no-repeat center top 30px / 110px auto;
	}

	.group .rectangle li.link_product a {
		background: var(--img-product) no-repeat center top 30px / 110px auto;
	}

}