@charset "utf-8";

:root {
    /* space */
    --spacing-medium: 80px;
    --spacing-large: 150px;

    /* color */
    --primary-color: #af2c19;
    --secondary-color: #fbb338;
    --tertiary-color: #d6a263;
    --base-color: #ffffff;
    --neural-color: rgba(251, 179, 56, 0.1);
    --dark-color: #231f20;
    --base-text-color: #1a1a1a;

    /* gradation */
    --gradation-start: var(--secondary-color);
    --gradation-middle: #f16541;
    --gradation-end: var(--primary-color);
    --gradation: to right, var(--gradation-start), var(--gradation-middle) 47%, var(--gradation-end);
    --gradation-bg-start: rgba(249, 160, 27, 0.3);
    --gradation-bg: to bottom, var(--gradation-bg-start), var(--base-color) 50%, var(--base-color);

    /* font-family */
    --base-font-family: "Noto Sans JP", "Noto Sans", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", san-serif;
    --serif-font-family: "Noto Serif JP", "Noto Serif", "Noto Serif KR", "Noto Serif SC", "Noto Serif TC", serif;

    /* font-size */
    --font-size-x-small: 10px;
    --font-size-small: 14px;
    --font-size-base: 18px;
    --font-size-medium: 21px;
    --font-size-large: 24px;
    --font-size-x-large: 30px;
    --font-size-xx-large: 36px;
    --font-size-huge: 48px;

    /* letter-spacing */
    --base-letter-spacing: 0.2em;
    --medium-letter-spacing: 0.19em;
    --small-letter-spacing: 0.1em;

    /* font-weight */
    --regular-font-weight: 400;
    --base-font-weight: 500;
    --bold-font-weight: 700;

    /* box-shadow */
    --shadow: 0 0 5.3px 0 rgba(0, 0, 0, 0.15);

    /* section */
    --section-inner-max-width: 980px;
    --section-inner-padding: 0 100px;
    --section-margin-bottom: 150px;
    --section-bg-color: #ffffff;

}

body {
    font-family: var(--base-font-family);
    font-weight: var(--medium-font-weight);
    letter-spacing: var(--base-letter-spacing);
    color: var(--base-text-color);
    font-feature-settings: "palt";
}

body.en {
    letter-spacing: 0;
}

.br-sp {
    display: none;
}

.spacing-1em {
    margin-bottom: 1em;
}

.letter-spacing-0 {
    letter-spacing: 0;
}

.letter-spacing-1 {
    letter-spacing: 0.1em;
}

.letter-spacing-15 {
    letter-spacing: 0.15em;
}

/* button */
.button {
    position: relative;
    text-align: center;
}

.button a {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid currentColor;
    font-family: var(--serif-font-family);
    font-size: var(--font-size-base);
    font-weight: 900;
    color: var(--primary-color);
    background-color: #ffffff;
    text-align: center;
    border-radius: 100vh;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.button .arrow {
    position: absolute;
    right: 0.83em;
    top: 50%;
    transform: translateY(calc(-50% - 0.1em));
    display: inline-block;
    width: 0.32em;
}

.button .arrow .arrow-line {
    fill: none;
    stroke: currentColor;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}

/* END button */

/* header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #ffffff;
}

.site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 40px 14px 17px;
    max-width: var(--site-header-max-width);
    margin: auto;
}

.site-logo {
    width: 193px;
    flex-shrink: 0;
}

.en .site-logo {
    width: 143px;
}

.kr .site-logo {
    width: 207px;
}

.zh .site-logo {
    width: 201px;
}

.cn .site-logo {
    width: 169px;
}

.header-nav {
    margin-left: auto;
}

.header-nav-list {
    display: flex;
}

.header-nav-link {
    display: inline-block;
    padding: 0 1.79em;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

.kr .header-nav-link,
.en .header-nav-link {
    font-size: 13px;
}

.header-nav-item:not(:last-child) {
    border-right: 1px solid #000000;
}

.header-buttons {
    display: flex;
    gap: 20px;
}

.header-button {
    width: 228px;
    text-align: center;
}

.header-button a {
    display: inline-block;
    width: 100%;
    padding: 0.5em 0;
    border: 1px solid var(--key-color);
    font-family: var(--serif-font-family);
    font-size: var(--font-size-base);
    font-weight: 900;
    color: var(--base-color);
    background: linear-gradient(var(--gradation));
    border-radius: 100vh;
    transition: background-color 0.3s ease;
}

.header-button-sp a {
    display: none;
    font-size: var(--font-size-large);
    font-weight: var(--bold-font-weight);
    color: #ffffff;
    background-color: var(--key-color);
    text-align: center;
}

.header-button a:hover {
    background-color: #f0f0f0;
}

.header-button-sp a:active {
    color: var(--key-color);
    background-color: #ffffff;
}

/* ハンバーガーメニュー */
.header-button-hamburger {
    display: none;
    position: relative;
    z-index: 1000;
    width: 26px;
    height: 19px;
    background: none;
    border: none;
    cursor: pointer;
}

.header-button-hamburger::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background: transparent;
    z-index: -1;
}

.header-button-hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--secondary-color);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.header-button-hamburger span:nth-child(1) {
    top: 0;
}

.header-button-hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.header-button-hamburger span:nth-child(3) {
    bottom: 0;
}

.header-button-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.header-button-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.header-button-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

#menu {
    --header-height: 83px;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    width: 100%;
    height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
    padding: 0 calc((24 / 750) * 100%);
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(-100% - var(--header-height)));
    transition: transform 0.3s ease, opacity 0.3s ease,
        visibility 0s 0.3s;
    text-align: center;
}

#menu.open {
    display: block;
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0s;
}

#menu li {
    border-bottom: 2px solid var(--secondary-color);
}

#menu li a {
    display: block;
    padding: 1em 0;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: var(--bold-font-weight);
    transition: color 0.3s ease;
}

#menu li a:hover,
#menu li a:active {
    color: #007bff;
}

#menu .header-button {
    display: none;
}

/* END ハンバーガーメニュー */

.header form {
    margin-left: 10px;
}

.header select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url(../img/icon-arrow-down.svg) no-repeat right 1em center/1em auto;
    border: 2px solid #000;
    border-radius: 200px;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    height: 46px;
    padding-left: 1em;
    width: 86px;
}

.header select:hover {
    cursor: pointer;
}

/* END header */


/* main-visual */
.main-visual {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 98px;
    aspect-ratio: 1440 / 800;
    background-image: url(../img/img/img-mv-bg@2x.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.site-title {
    margin-bottom: calc((30 / 1440) * 100%);
}

.site-title img {
    width: calc((606 / 1440) * 100%);
}

.en .site-title img {
    width: calc((509 / 1440) * 100%);
}

.kr .site-title img {
    width: calc((735 / 1440) * 100%);
}

.zh .site-title img {
    width: calc((714 / 1440) * 100%);
}

.main-visual-border {
    width: calc((538 / 1440) * 100%);
    margin: 0 auto calc((15 / 1440) * 100%);
    font-size: 0;
}

.site-sub-title {
    font-family: var(--serif-font-family);
    font-size: calc((30 / 1440) * 100vw);
    font-weight: var(--bold-font-weight);
    color: var(--primary-color);
    margin-bottom: 0.4em;
}

.en .site-sub-title {
    font-size: calc((25 / 1440) * 100vw);
}

.zh .site-sub-title {
    font-size: calc((32 / 1440) * 100vw);
}

.cn .site-sub-title {
    font-size: calc((32 / 1440) * 100vw);
}

.main-visual-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    text-align: center;
    width: 100%;
}

.main-visual-description {
    font-size: calc((14 / 1440) * 100vw);
    font-weight: var(--medium-font-weight);
}

/* 区切り線 */
.divider-img {
    background-image: url(../img/icon/icon-divider.png);
    background-repeat: repeat;
    background-size: cover;
    height: 15px;
}

/* セクション */
.section-inner {
    position: relative;
    box-sizing: content-box;
    max-width: var(--section-inner-max-width);
    margin: 0 auto;
    padding: var(--section-inner-padding);
    background-color: var(--section--bg-color);
}

.section-title {
    font-size: var(--font-size-huge);
    margin-bottom: 1em;
    text-align: center;
}

.section-title h2 {
    position: relative;
    font-family: var(--serif-font-family);
    font-size: inherit;
    font-weight: var(--bold-font-weight);
    color: var(--primary-color);
    display: inline-block;
}

.en .section-title h2 {
    font-weight: var(--base-font-family);
}

.section-title h2::before,
.section-title h2::after {
    content: '';
    display: inline-block;
    width: 1.75em;
    height: 1.85em;
    aspect-ratio: 84 / 89;
    position: absolute;
    top: -0.2em;
    background-repeat: no-repeat;
    background-size: cover;
}

.en .section-title h2::before,
.en .section-title h2::after,
.kr .section-title h2::before,
.kr .section-title h2::after {
    top: 50%;
    transform: translateY(-50%);
}

.section-title h2::before {
    left: -2em;
    background-image: url(../img/icon/icon-flower-left.svg);
}

.section-title h2::after {
    content: '';
    right: -2em;
    background-image: url(../img/icon/icon-flower-right.svg);
}

.main-container {
    position: relative;
    padding: var(--spacing-large) 0;
    overflow: hidden;
}

.bg-icon {
    content: '';
    position: absolute;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-container::before,
.main-container::after {
    content: '';
    position: absolute;
}

.main-container::before {
    top: 0;
    left: 0;
    right: 0;
    height: calc((500 / 1440) * 100%);
    background: linear-gradient(var(--gradation-bg));
    z-index: 10;
}

.main-container>.bg-icon-1 {
    top: calc((-6 / 1440) * 100%);
    right: calc(-185 / 1440 * 100%);
    width: calc((833 / 1440) * 100%);
    height: auto;
    aspect-ratio: 833 / 494;
    background-image: url(../img/icon/icon-flower-bg-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

.main-container>.bg-icon-2 {
    bottom: calc((-1 / 1440) * 100%);
    left: calc((50 / 1440) * 100%);
    width: calc((159 / 1440) * 100%);
    height: auto;
    aspect-ratio: 159 / 187;
    background-image: url(../img/icon/icon-flower-bg-6.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

/* about-bingata */
.about-bingata {
    position: relative;
    margin-bottom: var(--section-margin-bottom);
    z-index: 100;
}

.about-bingata .bg-icon-1 {
    bottom: calc((-75 / 1440) * 100%);
    left: calc((92 / 1440) * 100%);
    width: calc((187 / 1440) * 100%);
    aspect-ratio: 187 / 198;
    background-image: url(../img/icon/icon-flower-bg-2.png);
    z-index: -1;
}

.about-bingata .bg-icon-2 {
    bottom: calc((96 / 1440) * 100%);
    right: calc((40 / 1440) * 100%);
    width: calc((157 / 1440) * 100%);
    aspect-ratio: 157 / 187;
    background-image: url(../img/icon/icon-flower-bg-3.png);
    z-index: -1;
}

.section-content {
    background-color: #ffffff;
    padding: 80px;
    box-shadow: var(--shadow);
}

.section-content-text {
    font-size: var(--font-size-base);
    line-height: 1.333;
    font-weight: 500;
}

.about-bingata .section-content-text {
    margin-bottom: 3em;
}

.about-bingata-img-container {
    display: flex;
    justify-content: space-between;
}

.bingata-img {
    width: calc((433 / 820) * 100%);
}

.about-bingata-img-caption {
    font-size: var(--font-size-x-small);
    font-weight: var(--regular-font-weight);
    margin-top: -1em;
}

.caption {
    font-size: var(--font-size-x-small);
    font-weight: 400;
}

.material-img {
    width: calc((360 / 820) * 100%);
}

/* END about-bingata */

/* about-hariko */
.about-hariko {
    position: relative;
    z-index: 100;
    margin-bottom: var(--section-margin-bottom);
}

.about-hariko .bg-icon-1 {
    position: absolute;
    top: calc((-30 / 1440) * 100%);
    left: calc((40 / 1440) * 100%);
    width: calc((738 / 1440) * 100%);
    aspect-ratio: 738 / 768;
    background-image: url(../img/icon/icon-flower-bg-4.png);
    z-index: -1;
}

.about-hariko .bg-icon-2 {
    position: absolute;
    bottom: calc((190 / 1440) * 100%);
    right: calc((20 / 1440) * 100%);
    width: calc((187 / 1440) * 100%);
    aspect-ratio: 187 / 198;
    background-image: url(../img/icon/icon-flower-bg-5.png);
    z-index: -1;
}

.about-hariko .bg-icon-3 {
    position: absolute;
    bottom: calc((-140 / 1440) * 100%);
    left: calc((40 / 1440) * 100%);
    width: calc((159 / 1440) * 100%);
    aspect-ratio: 159 / 187;
    background-image: url(../img/icon/icon-flower-bg-6.png);
    z-index: -1;
}

.about-hariko .section-content-text {
    margin-bottom: 2em;
}

.about-hariko-img-container {
    display: flex;
    justify-content: space-between;
}

.about-hariko-img {
    width: calc((390 / 820) * 100%);
}

.about-hariko-img .caption {
    margin-top: 1em;
}

.about-hariko-img:last-child .caption {
    text-align: right;
}

/* END about-hariko */

/* okinawa-culture */
.okinawa-culture {
    position: relative;
    z-index: 100;
    margin-bottom: var(--spacing-large);
}

.okinawa-culture .bg-icon-1 {
    position: absolute;
    top: calc((-40 / 1440) * 100%);
    right: calc((-185 / 1440) * 100%);
    width: calc((833 / 1440) * 100%);
    aspect-ratio: 833 / 494;
    background-image: url(../img/icon/icon-flower-bg-1.png);
    z-index: -1;
}

.okinawa-culture .bg-icon-2 {
    position: absolute;
    top: calc((600 / 1440) * 100%);
    right: calc((40 / 1440) * 100%);
    width: calc((159 / 1440) * 100%);
    aspect-ratio: 159 / 187;
    background-image: url(../img/icon/icon-flower-bg-3.png);
    z-index: -1;
}

.okinawa-culture .bg-icon-3 {
    position: absolute;
    bottom: calc((400 / 1440) * 100%);
    left: calc((12 / 1440) * 100%);
    width: calc((187 / 1440) * 100%);
    aspect-ratio: 187 / 198;
    background-image: url(../img/icon/icon-flower-bg-2.png);
    z-index: -1;
}

.container-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-medium);
}

.container-row.reverse {
    flex-direction: row-reverse;
}

.container-col {
    position: relative;
    width: calc((390 / 820) * 100%);
}

.crafts-name {
    font-family: var(--serif-font-family);
    font-size: var(--font-size-xx-large);
    color: var(--primary-color);
    font-weight: var(--bold-font-weight);
    margin-bottom: 0.44em;
}

.en .crafts-name {
    font-weight: var(--base-font-family);
}

.balloon-img {
    position: absolute;
    z-index: 100;
}

.kr .balloon-img {
    top: -95px;
    right: 0;
    width: 91px;
}

.en .balloon-img {
    top: -12%;
    left: 255px;
    width: 120px;
}

.zh .balloon-img,
.cn .balloon-img {
    top: -19%;
    left: 280px;
    width: 91px;
}

.container-col:has(.section-content-text):has(.okinawa-culture-img) {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.container-col:has(.section-content-text):has(.okinawa-culture-img) .okinawa-culture-img {
    margin-top: auto;
}

.okinawa-culture-img:has(.caption-human) {
    position: relative;
}

.okinawa-culture-img .caption {
    margin-top: 1em;
}

.okinawa-culture-img .caption-human {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--secondary-color);
    margin-top: 0;
}

.okinawa-culture-img .caption-human p {
    font-family: var(--serif-font-family);
    font-size: 20px;
    font-weight: var(--bold-font-weight);
    letter-spacing: 0.1em;
    text-align: center;
    padding: 0.5em;
}

.en .okinawa-culture-img .caption-human p {
    font-size: 16px;
}

.kr .okinawa-culture-img .caption-human p {
    letter-spacing: 0;
}

.okinawa-culture-img .caption-human p span {
    font-size: 0.5em;
}

.caption-right {
    text-align: right;
}

.shibai-title {
    font-family: var(--serif-font-family);
    font-size: var(--font-size-huge);
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1em;
}

.en .shibai-title h3 {
    font-weight: var(--base-font-weight);
}

.shibai .section-content-text {
    margin-bottom: 1em;
}

.shibai .section-content-text span {
    color: var(--primary-color);
}

.shibai .section-content-text:first-child {
    margin-bottom: 2.78em;
}

.shibai-link-area {
    position: relative;
    background-color: var(--neural-color);
    margin-bottom: 50px;
}

.shibai-link-area-inner {
    padding: var(--spacing-medium) 0 0;
}

.shibai-link-area-title {
    font-family: var(--serif-font-family);
    font-size: var(--font-size-huge);
    font-weight: var(--bold-font-weight);
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 0.67em;
}

.en .shibai-link-area-title {
    font-weight: var(--base-font-weight);
}

.shibai-button {
    text-align: center;
}

.shibai-button-inner {
    position: relative;
    display: inline-block;
    max-width: 280px;
    width: 100%;
    padding-bottom: var(--spacing-medium);
}

.shibai-button a {
    width: 100%;
}

.shibai-button a:hover,
.shibai-button a:active {
    color: #ffffff;
    background-color: var(--primary-color);
}

.shibai-button .show-button-img {
    position: absolute;
    bottom: 0;
    right: -290px;
    display: block;
    width: 248px;
}

/* END okinawa-culture */

.purchase {
    overflow: hidden;
}

.purchase-link-area {
    position: relative;
}

.purchase-link-area .bg-icon-1 {
    top: calc((14 / 1440) * 100%);
    right: calc((-186 / 1440) * 100%);
    width: calc((831 / 1440) * 100%);
    aspect-ratio: 1664 / 987;
    background-image: url(../img/icon/icon-flower-bg-8.png);
    z-index: 10;
}

.purchase-link-area .bg-icon-2 {
    top: calc((781 / 1440) * 100%);
    left: calc((12 / 1440) * 100%);
    width: calc((187 / 1440) * 100%);
    aspect-ratio: 187 / 198;
    background-image: url(../img/icon/icon-flower-bg-9.png);
    z-index: 10;
}

.purchase-link-area .bg-icon-3 {
    bottom: calc((82 / 1440) * 100%);
    right: calc((40 / 1440) * 100%);
    width: calc((157 / 1440) * 100%);
    aspect-ratio: 157 / 186;
    background-image: url(../img/icon/icon-flower-bg-10.png);
    z-index: 10;
}

.purchase-link-area-inner {
    position: relative;
    z-index: 100;
}

.purchase-link-item {
    position: relative;
}

.purchase-link-item-bingata-hariko .purchase-link-img {
    position: absolute;
    top: -47px;
    left: -90px;
    width: 180px;
}

.purchase-link-item-bingata .purchase-link-img {
    position: absolute;
    top: -54px;
    right: -21px;
    width: 271px;
}

.purchase-link-item-hariko .purchase-link-img {
    position: absolute;
    top: -50px;
    left: -3px;
    width: 254px;
    z-index: 10;
}

.purchase-link-item-bingata-hariko .purchase-link-content,
.purchase-link-item-shibai .purchase-link-content {
    padding-bottom: 0;
}

.purchase-link-item-bingata-hariko .purchase-link-button-inner,
.purchase-link-item-shibai .purchase-link-button-inner {
    position: relative;
    padding-bottom: 80px;
}

.purchase-link-item-bingata-hariko .purchase-link-button .show-button-img,
.purchase-link-item-shibai .purchase-link-button .show-button-img {
    position: absolute;
    bottom: 0;
}

.purchase-link-item-bingata-hariko .purchase-link-button .show-button-img {
    right: -315px;
    width: 317px;
}

.purchase-link-item-shibai .purchase-link-button .show-button-img {
    right: -240px;
    width: 237px;
}

.purchase-link-button-inner {
    display: inline-block;
}

/* END purchase */

/* contact */
.contact {
    text-align: center;
    background-color: var(--neural-color);
}

.contact .section-inner {
    padding: var(--spacing-medium) 100px;
}

.contact .section-title {
    margin-bottom: 0.63em;
}

.contact .section-title h2 {
    color: var(--secondary-color);
}

.contact .section-title h2::before,
.contact .section-title h2::after {
    content: none;
}

.contact-information {
    font-size: var(--font-size-large);
}

.contact-information-text {
    margin-bottom: 1em;
    font-weight: var(--bold-font-weight);
}

.contact-information-mail {
    position: relative;
    display: inline-block;
    letter-spacing: var(--base-letter-spacing);
}

.contact-information-mail::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -2.13em;
    transform: translateY(-50%);
    display: inline-block;
    width: 37px;
    height: auto;
    aspect-ratio: 37 / 27;
    background-image: url(../img/icon/icon-mail.svg);
    background-size: cover;
}

/* END contact */

/* cultural-tourism */
.cultural-tourism {
    position: relative;
    z-index: 100;
    margin-bottom: 140px;
}

.cultural-tourism .bg-icon-1 {
    top: calc((1200 / 1440) * 100%);
    right: calc((20 / 1440) * 100%);
    width: calc((187 / 1440) * 100%);
    aspect-ratio: 187 / 198;
    background-image: url(../img/icon/icon-flower-bg-5.png);
    z-index: -1;
}

/* END cultural-tourism */

/* sustainable-tourism */
.sustainable-tourism {
    margin-bottom: 72px;
}

.cultural-tourism-inner,
.sustainable-tourism-inner {
    box-sizing: content-box;
    max-width: var(--section-inner-max-width);
    margin: 0 auto;
    padding: var(--section-inner-padding);
    padding-top: 0;
    padding-bottom: 0;
}

.cultural-tourism-title p,
.sustainable-tourism-title p {
    font-size: var(--font-size-huge);
    margin-bottom: 0.81em;
    text-align: center;
    font-family: var(--serif-font-family);
    font-weight: var(--bold-font-weight);
    color: var(--secondary-color);
}

.cultural-tourism-title p,
.sustainable-tourism-title p {
    font-weight: var(--base-font-weight);
}

/* END sustainable-tourism */

/* link-area */
.link-area-inner {
    box-sizing: content-box;
    max-width: var(--section-inner-max-width);
    margin: 0 auto;
    padding: var(--section-inner-padding);
    padding-top: 0;
    padding-bottom: 0;
}

.link-list {
    display: flex;
    justify-content: space-between;
    gap: 40px var(--spacing-medium);
    flex-wrap: wrap;
}

.link-item {
    width: calc((100% - var(--spacing-medium)) / 2);
    padding: var(--spacing-medium) 30px;
    background-color: var(--neural-color);
}

.kr .link-item .button a {
    letter-spacing: 0;
}

.link-item .button a:hover,
.link-item .button a:active {
    color: #ffffff;
    background-color: var(--primary-color);
}

/* END link-area */

/* purchase */
.purchase-sample-list {
    display: flex;
}

.purchase-sample-item {
    width: calc(100% / 3);
}

.purchase-sample-item img {
    width: 100%;
    max-width: none;
}

.purchase-link-area {
    background-color: var(--secondary-color);
}

.purchase-link-area-inner {
    box-sizing: content-box;
    max-width: var(--section-inner-max-width);
    margin: 0 auto;
    padding: var(--section-inner-padding);
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-large);
}

.purchase-link-item {
    margin-bottom: var(--spacing-medium);
}

.purchase-link-item:last-child {
    margin-bottom: 0;
}

.purchase-link-title {
    font-family: var(--serif-font-family);
    font-size: var(--font-size-x-large);
    font-weight: var(--bold-font-weight);
    color: #ffffff;
    text-align: center;
    padding: 0.5em 2em;
    background-color: var(--primary-color);
}

.en .purchase-link-title {
    font-weight: var(--base-font-weight);
    --font-size-x-large: 23px;
}

.purchase-link-content {
    background-color: #ffffff;
    padding: var(--spacing-medium) 10px;
}

.purchase-link-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.purchase-link-text span {
    display: inline-block;
    min-width: 100px;
    padding: 0.28em;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--medium-font-weight);
    color: #ffffff;
    background-color: var(--dark-color);
    line-height: 1;
}

.purchase-link-button {
    text-align: center;
    margin-top: 40px;
}

.purchase-link-button-inner {
    max-width: 300px;
    width: 100%;
}

.purchase-link-button a {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0.5em 1em;
    font-family: var(--serif-font-family);
    font-size: var(--font-size-large);
    font-weight: var(--bold-font-weight);
    color: var(--base-color);
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    border-radius: 100vh;
    transition: background-color 0.3s ease;
}

.purchase-link-button a:hover,
.purchase-link-button a:active {
    background-color: #f0f0f0;
}

.purchase-link-button .arrow svg {
    fill: #ffffff;
}

/* END purchase */

/* footer */
.site-footer {
    text-align: center;
    color: #ffffff;
    background-color: var(--dark-color);
}

.copyright {
    display: block;
    font-size: 14px;
    font-weight: var(--medium-font-weight);
    line-height: 1.83;
    letter-spacing: var(--small-letter-spacing);
    padding: 0.71em 0;
}

/* END footer */

@media screen and (max-width: 1260px) {

    /* header */
    .site-logo {
        width: 153px;
    }

    .kr .site-logo {
        width: 153px;
    }

    .header-nav-link {
        font-size: 11px;
    }

    .kr .header-nav-link {
        font-size: 10px;
    }

    .en .header-nav-link {
        font-size: 11px;
    }

    .header-button {
        width: 163px;
    }

    /* END header */

    /* main-visual */
    .main-visual {
        margin-top: 83.49px;
    }

    /* END main-visual */

    /* purchase */
    .purchase-link-item-bingata-hariko .purchase-link-img {
        width: 130px;
    }

    .purchase-link-item-bingata .purchase-link-img {
        right: -90px;
        width: 180px;
    }

    .purchase-link-item-hariko .purchase-link-img {
        width: 130px;
    }

    /* END purchase */
}

@media screen and (max-width: 1023px) {

    :root {
        --spacing-medium: 43px;
        --spacing-large: 80px;

        --section-margin-bottom: 80px;
        --section-inner-padding: 50px;

        --font-size-base: 16px;
        --font-size-large: 18px;
        --font-size-x-large: 24px;
        --font-size-xx-large: 24px;
        --font-size-huge: 30px;

    }

    /* header */
    .header-button-hamburger {
        display: inline-block;
        padding: 10px;
    }

    .header-nav {
        display: none;
    }

    .header-buttons {
        display: none;
    }

    .header-button-hamburger {
        order: -1;
        margin-right: 12px;
    }

    .header form {
        margin-left: auto;
        margin-right: 8px;
    }

    #menu {
        --header-height: 98px;
    }

    /* END header */

    /* about-bingata */
    .kr .balloon-img {
        top: -70px;
        right: 0;
        width: 70px;
    }

    .en .balloon-img {
        top: -15%;
        left: 175px;
        width: 90px;
    }

    .zh .balloon-img,
    .cn .balloon-img {
        top: -23%;
        left: 195px;
        width: 70px;
    }

    /* END abobut-bingata */

    /* shibai */
    .shibai-button .show-button-img {
        width: 163px;
        right: -170px;
    }

    /* END shibai */
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .en #menu {
        --header-height: 97.7px;
    }

    .zh #menu {
        --header-height: 97.9px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --spacing-medium: 48px;
        --spacing-large: 72px;

        --section-margin-bottom: 40px;
        --section-inner-padding: calc((24 / 750) * 100vw);

        --font-size-x-small: 10px;
        --font-size-base: 12px;
        --font-size-large: 16px;
        --font-size-x-large: 20px;
        --font-size-xx-large: 22.5px;
        --font-size-huge: 20px;
    }

    .br-pc {
        display: none;
    }

    .br-sp {
        display: block;
    }

    .spacing-1em {
        margin-top: 1em;
    }

    .divider-img {
        height: 9px;
    }

    .section-content {
        padding: 40px calc((24 / 702) * 100%);
    }

    /* header */
    .site-logo {
        width: 96px;
    }

    .en .site-logo {
        width: 71px;
    }

    .kr .site-logo {
        width: 96px;
    }

    .zh .site-logo {
        width: 100px;
    }

    .cn .site-logo {
        width: 84px;
    }

    .site-header-inner {
        justify-content: flex-start;
        padding: 0 0 0 calc((24 / 750) * 100%);
    }

    .header-button-sp a {
        display: inline-block;
        font-family: var(--serif-font-family);
        font-size: clamp(0.563rem, -0.549rem + 5.56vw, 0.75rem);
        color: #ffffff;
        background: linear-gradient(var(--gradation));
        min-width: 116px;
        min-height: 44px;
        line-height: 44px;
        padding: 0 1em;
    }

    .zh .header-button-sp a,
    .cn .header-button-sp a {
        min-width: 116px;
    }

    #menu {
        --header-height: 44px;
    }

    .header select {
        font-size: 12px;
        width: 58px;
        height: 31px;
    }

    /* END header */

    .main-container {
        --spacing-large: 60px;
    }

    /* main-visual */
    .main-visual {
        margin-top: 43px;
        aspect-ratio: 750 / 1250;
        background-image: url(../img/img/img-mv-bg-sp.png);
    }

    .main-visual-text {
        transform: translate(-50%, -43%);
    }

    .site-title {
        margin-bottom: calc((33 / 750)* 100%);
    }

    .site-title img {
        width: calc((490 / 750) * 100%);
    }

    .kr .site-title img {
        width: calc((510 / 750) * 100%);
    }

    .en .site-title img {
        width: calc((400 / 750) * 100%);
    }

    .zh .site-title img {
        width: calc((514 / 750)* 100%);
    }

    .cn .site-title img {
        width: calc((470 / 750)* 100%);
    }

    .main-visual-border {
        width: calc((435 / 750) * 100%);
        margin-bottom: calc((15 / 750)* 100%);
    }

    .site-sub-title {
        font-size: calc((28 / 750)* 100vw);
    }

    .kr .site-sub-title {
        font-size: calc((27 / 750)* 100vw);
    }

    .en .site-sub-title {
        font-size: calc((30 / 750)* 100vw);
    }

    .zh .site-sub-title {
        font-size: calc((25 / 750)* 100vw);
    }

    .cn .site-sub-title {
        font-size: calc((24 / 750)* 100vw);
    }

    .main-visual-description {
        font-size: calc((18 / 750) * 100vw);
    }

    .kr .main-visual-description {
        font-size: calc((15 / 750) * 100vw);
        line-height: 1.75;
    }

    .en .main-visual-description {
        font-size: calc((20 / 750) * 100vw);
    }

    .zh .main-visual-description {
        font-size: calc((14 / 750) * 100vw);
    }

    .cn .main-visual-description {
        font-size: calc((19 / 750) * 100vw);
    }

    /* END main-visual */

    .main-container>.bg-icon-1 {
        top: 44px;
        right: calc((-345 / 750) * 100%);
        width: calc((785 / 750) * 100%);
        aspect-ratio: 785 / 465;
        background-image: url(../img/icon/icon-flower-bg-1-sp.png);
    }

    .main-container>.bg-icon-2 {
        bottom: 5px;
        left: calc((-12 / 750) * 100%);
        width: calc((170 / 750) * 100%);
        aspect-ratio: 171 / 202;
        background-image: url(../img/icon/icon-flower-bg-6-sp.png);
    }

    /* about-bingata */
    .about-bingata .bg-icon-1 {
        bottom: 4px;
        left: calc((-80 / 750)* 100%);
        width: calc((175 / 750)* 100%);
    }

    .about-bingata .bg-icon-2 {
        bottom: 550px;
        right: calc((-64 / 750)* 100%);
        width: calc((149 / 750)* 100%);
    }

    .about-bingata-img-container {
        flex-direction: column;
        gap: 20px;
    }

    .about-hariko-img .caption {
        --font-size-x-small: 6px;
        letter-spacing: 0.15em;
    }

    .bingata-img,
    .material-img {
        margin: auto;
    }

    .bingata-img {
        width: calc((624 / 702)* 100%);
    }

    .material-img {
        width: calc((518 / 702)* 100%);
    }

    .about-bingata-img-caption {
        margin-top: 1em;
    }

    /* END about-bingata */

    /* about-hariko */
    .about-hariko .bg-icon-1 {
        top: 70px;
        left: calc((-320 / 750)* 100%);
        width: calc((694 / 750)* 100%);
        aspect-ratio: 738 / 768;
    }

    .about-hariko .bg-icon-2 {
        bottom: -24px;
        right: calc((-70 / 750)* 100%);
        width: calc((175 / 750)* 100%);
    }

    .about-hariko .bg-icon-3 {
        bottom: -80px;
        left: calc((-88 / 750)* 100%);
        width: calc((175 / 750)* 100%);
        aspect-ratio: 171 / 202;
        background-image: url(../img/icon/icon-flower-bg-6-sp.png);
    }

    .container-row {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 36px;
    }

    .container-row:first-of-type {
        flex-direction: column-reverse;
    }

    .container-row:nth-of-type(3) {
        flex-direction: column-reverse;
    }

    .container-row:nth-of-type(4) {
        flex-direction: column;
    }

    .container-row:nth-of-type(5) {
        flex-direction: column-reverse;
    }

    .container-col {
        width: 100%;
    }

    .container-col:has(.section-content-text):has(.okinawa-culture-img) {
        flex-direction: column-reverse;
    }

    /* okinawa-culture */
    .okinawa-culture .bg-icon-1 {
        top: 86px;
        right: calc((-414 / 750)* 100%);
        width: calc((898 / 750)* 100%);
        background-image: url(../img/icon/icon-flower-bg-1.png);
    }

    .okinawa-culture .bg-icon-2 {
        top: 1510px;
        right: calc((-65 / 750)* 100%);
        width: calc((170 / 750)* 100%);
    }

    .okinawa-culture .bg-icon-3 {
        bottom: 560px;
        left: calc((-75 / 750)* 100%);
        width: calc((201 / 750)* 100%);
    }

    .okinawa-culture .section-title h2::before,
    .okinawa-culture .section-title h2::after {
        top: 0.4em;
    }

    .en .okinawa-culture .section-title h2::before,
    .en .okinawa-culture .section-title h2::after,
    .kr .okinawa-culture .section-title h2::before,
    .kr .okinawa-culture .section-title h2::after {
        top: 50%;
        transform: translateY(-50%);
    }

    .en .okinawa-culture .section-title h2::before {
        left: -1.4em;
    }

    .en .okinawa-culture .section-title h2::after {
        right: -1.4em;
    }

    .kr .balloon-img {
        top: -14px;
        left: 250px;
        right: auto;
        width: 46px;
    }

    .en .balloon-img {
        top: -12%;
        left: 165px;
        width: 75px;
    }

    .zh .balloon-img,
    .cn .balloon-img {
        top: -16%;
        left: 183px;
        width: 51px;
    }

    .okinawa-culture-img .caption-human p {
        font-size: 16px;
    }

    .en .okinawa-culture-img .caption-human p {
        font-size: 13px;
        line-height: 1.2;
    }

    .en .okinawa-culture-img .caption-human.special-caption p span {
        font-size: 0.6em;
    }

    .shibai-button-inner {
        width: calc((389 / 654) * 100%);
    }

    .shibai-button a {
        width: 100%;
    }

    .shibai-button .show-button-img {
        width: 102px;
        right: -100px;
    }

    .link-list {
        flex-direction: column;
        gap: 24px;
    }

    .link-item {
        --spacing-medium: 30px;

        width: 100%;
    }

    .link-item .button {
        width: calc((650 / 702)* 100%);
        margin: auto;
    }

    .cultural-tourism {
        margin-bottom: 72px;
    }

    .cultural-tourism .bg-icon-1 {
        top: 115px;
        right: calc((-66 / 750)* 100%);
        width: calc((201 / 750)* 100%);
        aspect-ratio: 187 / 198;
        background-image: url(../img/icon/icon-flower-bg-5.png);
        z-index: -1;
    }

    .sustainable-tourism {
        margin-bottom: 24px;
    }

    /* END okinawa-culture */

    /* purchase */
    .purchase-link-title {
        padding: 0.5em;
    }

    .en .purchase-link-title {
        --font-size-x-large: 15px;
    }

    .purchase-link-text {
        font-size: 12px;
        gap: 10px;
    }

    .purchase-link-text span {
        min-width: 78px;
    }

    .purchase-link-button {
        margin-top: 24px;
    }

    .purchase-link-button a {
        width: 100%;
    }

    .kr .purchase-link-item .purchase-link-title {
        font-size: 17px;
    }

    .purchase-link-item-bingata-hariko .purchase-link-text {
        align-items: flex-start;
    }

    .purchase-link-item-bingata-hariko .purchase-link-img {
        position: absolute;
        top: -70px;
        left: -10px;
        width: 78px;
        z-index: 100;
    }

    .purchase-link-item-bingata .purchase-link-img {
        position: absolute;
        top: -60px;
        right: -28px;
        width: 112px;
    }

    .purchase-link-item-hariko .purchase-link-img {
        position: absolute;
        top: -36px;
        left: -6px;
        width: 81px;
    }

    .purchase-link-button-inner {
        max-width: calc((393 / 702) * 100%);
    }

    .purchase-link-item-bingata-hariko .purchase-link-button-inner,
    .purchase-link-item-shibai .purchase-link-button-inner {
        padding-bottom: 48px;
    }

    .purchase-link-item-shibai .purchase-link-button .show-button-img {
        width: 119px;
        right: -120px;
    }

    .purchase-link-item-bingata-hariko .purchase-link-button .show-button-img {
        right: -153px;
        width: 151px;
    }

    /* END purchase */

    /* contact */
    .contact .section-inner {
        padding: var(--spacing-medium) calc((24 / 750) * 100vw);
    }

    .contact .section-title {
        --font-size-huge: 32px;
    }

    .contact-information-text,
    .contact-information-mail {
        font-size: 15.5px;
        letter-spacing: 0;
    }

    .en .contact-information-text span {
        font-size: 12.8px;
    }

    .contact-information-mail::before {
        width: 25px;
    }

    .copyright {
        font-size: 10px;
    }

    /* END contact */
}