@charset "utf-8";
/* Generated by scripts/build_css.py. Do not edit directly. */
/* CSS Document */

/*reset
-------------------------------------------------------------------------------------*/
*{
	padding:0;
	margin:0;
}

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
	line-height:1.75;
    vertical-align:baseline;
    background:transparent;
	font-family: 'Noto Sans JP', sans-serif;
	font-size:100%;
	-webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
}

html{
	height:100%;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
	height:100%;
	position:relative;
	-webkit-text-size-adjust: 100%;/*スマホやタブレットを横サイズにした場合に変動してしまうフォントサイズを維持（阻止）するための記述*/
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
nav ul {
    list-style:none;
}
ul li{
	list-style:none;
}


/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}


/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	color:#fff;
	-webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
	font-family: 'Noto Sans JP', sans-serif;/*ゴシック*/
	line-height:1em;
}

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

a img{
	border:0;
	outline:none;
}

a:link{
	color:#fff;
	text-decoration:none;
}

a:active{
	color:#fff;
}

a:visited{
	color:#fff;
}

a:hover{
	text-decoration:none;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
	width:100%;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

img {
	vertical-align: top;
	font-size:0;
	line-height: 0;
    display:block;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}


/* Source: base.css */
/* リセットここから */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    font-weight: normal;
}

body {
    line-height:1;
}

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

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

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

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

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

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
/* リセットここまで */

/* 変数 */
:root {

}

/* 基本設定 */
html {
    font-size: 100%;
}

body * {
    font-size: clamp(1rem, 0.505rem + 2.27vw, 2.25rem);
    font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
    /* overflow-x: hidden; */
    text-underline-position: right;
}
@media (min-width: 575px) {
    body * {
        font-size: clamp(0.8rem, 0.405rem + 1.2vw, 1.25rem);
    }
}
.gothic {
    font-family: "Helvetica", "Helvetica Neue", "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", "メイリオ", "Meiryo", "verdana", sans-serif;
}

.bold {
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #000;
}

li {
    list-style-type: none;
}



/* ---------------------------------------------------------------------------------------------

   ベストレート

--------------------------------------------------------------------------------------------- */

.bestrate_fixbnr {
	position: fixed;
	bottom: -1px;
	right: 100px;
	z-index: 40;
}

@media screen and (max-width:750px) {
	.bestrate_fixbnr {
		bottom: 5px;
	    left: 10px;
	}
	.bestrate_fixbnr img {
		width: 208px;
		height: 60px;
	}
}


/* Source: style.css */
/* ========================================
   基本スタイル
======================================== */
body {
  background: #fff;
  color: #2a2a2a;
}

.pc-only {
  display: none;
}

@media (min-width: 575px) {
  .sp-only {
    display: none;
  }

  .pc-only {
    display: block;
  }
}

/* ========================================
   メインコンテンツ
======================================== */
main .wrapper {
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
}

/* ========================================
   ビジュアルセクション
======================================== */
main #visual .main-visual {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
}

main #visual .navi {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #977a2a;
  color: #fff;
  width: 150px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  z-index: 1000;
}

main #visual .navi a {
  font-size: 1rem;
}

main #visual h1 {
  position: absolute;
  top: 20vw;
  left: 11.5%;
  width: 36%;
}

main #visual h1 img {
  width: 100%;
  height: auto;
}

main #visual .catch {
  position: absolute;
  top: 110vw;
  left: 16%;
  font-size: clamp(1rem, 0.625rem + 4.125vw, 2.75rem);
  line-height: 1.5;
  text-shadow: 1px 1px 5px #fff, -1px 1px 5px #fff, 1px -1px 5px #fff, -1px -1px 5px #fff;
}

/* ========================================
   予約セクション
======================================== */
main .reservations {
  margin-bottom: 4em;
}

main .reservations .text {
  text-align: center;
  color: #977a2a;
  margin: 2.5rem auto 1.25rem;
  font-size: 1.38em;
}

main .reservations .button {
  position: relative;
  margin: 0 auto;
  width: 80%;
  text-align: center;
  background-color: #977a2a;
  color: #fff;
  height: 3em;
  line-height: 3em;
  font-size: 1.38em;
  cursor: pointer;
}

main .reservations .button::before {
  content: "";
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 2px solid #fff;
  position: absolute;
  top: 3px;
  left: 3px;
}

/* ========================================
   背景
======================================== */
main .bg-top {
  background-image: url("../img/sp/bg_top_sp.webp");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   ヘッドライン
======================================== */
main #headline .headline-1 {
  display: grid;
  grid-template-columns: 70% 30%;
  margin-bottom: 5rem;
}

main #headline .headline-1 .headline-11 {
  width: 100%;
  height: auto;
}

main #headline .headline-1 .headline-12 {
  writing-mode: vertical-rl;
  margin: 0 auto;
}

main #headline .headline-1 .headline-12 .upper {
  border-right: 2px solid #c9c9c9;
  padding-top: 10%;
}

main #headline .headline-1 .headline-12 .lower {
  margin-top: 10%;
  border-right: 2px solid #c9c9c9;
  padding-bottom: 10%;
}

main #headline .headline-2 .headline-21 {
  width: 80%;
  height: auto;
  margin: 0 auto 2rem;
}

main #headline .headline-2 .headline-22 {
  width: 90%;
  margin: 0 auto;
}

main #headline .headline-2 .headline-22 p {
  margin-bottom: 2em;
}

/* ========================================
   見出し
======================================== */
main h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: clamp(1rem, 0.625rem + 3.825vw, 3.8rem);
  line-height: 1;
  font-weight: bold;
  letter-spacing: 0.25em;
}

main h2 span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ========================================
   客室セクション
======================================== */
main #rooms {
  width: 80%;
  margin: 0 auto;
}

main #rooms .bg-rooms {
  background-image: url("../img/sp/bg_rooms_sp.webp");
  background-position: 20vw;
  background-size: contain;
  background-repeat: repeat-y;
}

main #rooms .views img {
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

/* ========================================
   お食事セクション
======================================== */
main #restaurant {
  width: 80%;
  margin: 0 auto;
}

main #restaurant .bg-restaurant {
  background-image: url("../img/sp/bg_restaurant_sp.webp");
  background-position: 3vw;
  background-size: contain;
  background-repeat: repeat-y;
}

main #restaurant h3 {
  font-weight: bold;
  text-align: center;
  margin-top: 30px;
}

main #restaurant .views img {
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

/* ========================================
   温泉セクション
======================================== */
main #spring .bg-spring {
  background-image: url("../img/sp/bg_hot_spring_sp_01.webp");
  background-size: contain;
  background-repeat: repeat-y;
}

main #spring .text {
  text-align: center;
  background-image: url("../img/sp/bg_hot_spring_sp_02.webp?ver=1.2");
  background-size: cover;
  color: #fff;
  padding: 1em 0 1.5em;
  margin-bottom: 2em;
}

main #spring .text h3 {
  margin-bottom: 1em;
}

main #spring .text p {
  font-size: 0.8em;
}

main #spring .spring-card {
  width: 100%;
  margin-bottom: 2rem;
}

main #spring .spring-card .images {
  position: relative;
  width: 100%;
  overflow: visible;
}

main #spring .spring-card .images .main {
  width: 80%;
  height: auto;
  margin-bottom: 10%;
}

main #spring .spring-card .images .sub {
  position: absolute;
  bottom: -20%;
  right: 0;
  width: 40%;
  height: auto;
}

main #spring .spring-card .texts {
  width: 90%;
  margin: 0 auto;
}

main #spring .spring-card .texts h3 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1rem;
}

main #spring .spring-card:nth-child(even) .images .main {
  margin: 0 0 10% auto;
}

main #spring .spring-card:nth-child(even) .images .sub {
  left: 0;
}

main #spring .spring-card:nth-child(even) .texts {
  text-align: end;
}

/* ========================================
   足湯セクション
======================================== */
main .bg-footbath {
  background-image: url("../img/sp/bg_foot_bath_sp.webp");
  background-size: cover;
  background-repeat: repeat-y;
}

main #footbath {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 2em;
}

main #footbath img {
  width: 100%;
  height: auto;
  margin-bottom: 1.5em;
}

main #footbath h3 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* ========================================
   プランセクション
======================================== */
main #plan {
  background-color: #f5e9c3;
  background-image: url("../img/sp/bg_plan.webp");
}

main #plan .plan-wrap {
  padding: 2em 0 2em;
}

main #plan .plan-wrap .plan-h2 {
  position: relative;
  height: 15em;
}

main #plan .plan-wrap .plan-h2 .symbol {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-25%);
  width: 12vw;
  height: auto;
}

main #plan .plan-wrap .plan-h2 h2 {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  font-weight: normal;
}

main #plan .plan-wrap .plan-card {
  width: 90%;
  margin: 0 auto 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5%;
}

main #plan .plan-wrap .plan-card img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

main #plan .plan-wrap .plan-note {
  width: 90%;
  margin: 0 auto;
}

/* ========================================
   PC版スタイル
======================================== */
@media (min-width: 575px) {
  main .wrapper {
    width: 100%;
    max-width: 1200px;
    overflow-x: visible;
  }

  main #visual {
    position: relative;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }

  main #visual .main-visual {
    width: 100%;
    height: auto;
  }

  main #visual h1 {
    top: 18.5vw;
    left: 23%;
    width: 12%;
    height: auto;
    background-color: hsla(0, 0%, 100%, 0.8);
    padding: 1rem 1.2rem 1rem;
  }

  main #visual .catch {
    top: 10vw;
    right: 20%;
    writing-mode: vertical-rl;
    color: #000;
    font-size: 1.4rem;
    text-shadow: none;
  }

  main #visual .catch p {
    background-color: hsla(0, 0%, 100%, 0.8);
    padding: 0.5rem;
    margin-left: 1em;
  }

  main .fullbg,
  main .bg-footbath,
  main #spring .bg-spring,
  main #restaurant .bg-restaurant,
  main #rooms .bg-rooms,
  main .bg-top {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }

  main .bg-top {
    background-image: url("../img/pc/bg_top.webp");
  }

  main #headline {
    position: relative;
    width: 100%;
    height: clamp(500px, 80vw, 960px);
    margin-bottom: 8rem;
  }

  main #headline .headline-1 .headline-11 {
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: auto;
  }

  main #headline .headline-1 .headline-12 {
    margin-left: 1em;
  }

  main #headline .headline-1 .headline-12 > * {
    font-size: clamp(1rem, 0.625rem + 1.825vw, 3.8rem);
    line-height: 2;
  }

  main #headline .headline-1 .headline-12 .upper {
    border-right: none;
    padding-top: 0;
  }

  main #headline .headline-1 .headline-12 .lower {
    border-right: 0;
    margin-top: 0;
    padding-bottom: 0;
  }

  main #headline .headline-2 .headline-21 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: auto;
  }

  main #headline .headline-2 .headline-22 {
    position: absolute;
    top: clamp(500px, 51vw, 620px);
    right: 60%;
    width: auto;
    writing-mode: vertical-rl;
  }

  main #headline .headline-2 .headline-22 p {
    font-size: clamp(0.8rem, 0.3rem + 0.875vw, 1rem);
    margin-left: 2em;
  }

  main h2 {
    font-size: clamp(1rem, 0.625rem + 3.825vw, 2rem);
  }

  main #rooms {
    margin-bottom: 5rem;
  }

  main #rooms .bg-rooms {
    background-image: url("../img/pc/bg_rooms.webp");
    background-position: 40vw;
  }

  main #rooms .views {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  main #rooms .views img {
    margin: 0;
  }

  main #rooms h3 {
    font-size: 1.2em;
    letter-spacing: 0.25em;
  }

  main #rooms p {
    font-size: 0.8em;
  }

  main #restaurant {
    margin-bottom: 5rem;
  }

  main #restaurant .bg-restaurant {
    background-image: url("../img/pc/bg_restaurant.webp");
    background-position: 10vw;
  }

  main #restaurant .views {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  main #restaurant .views img {
    margin: 0;
  }

  main #restaurant h3 {
    font-size: 1.2em;
    letter-spacing: 0.25em;
  }

  main #restaurant p {
    font-size: 0.8em;
  }

  main #spring .bg-spring {
    background-image: url("../img/pc/bg_hot_spring_01.webp");
    background-position: -20vw;
  }

  main #spring .text {
    background-image: url("../img/pc/bg_hot_spring_02.webp");
  }

  main #spring .text h3 {
    font-size: 1.2em;
  }

  main #spring .text p {
    line-height: 3;
  }

  main #spring .spring-card {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 8rem;
  }

  main #spring .spring-card .texts p {
    font-size: 0.75em;
  }

  main .bg-footbath {
    background-image: url("../img/pc/bg_foot_bath.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  main #plan {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }

  main #plan .plan-wrap .plan-h2 {
    height: 24em;
  }

  main #plan .plan-wrap .plan-h2 .symbol {
    width: 10vw;
  }

  main #plan .plan-wrap .plan-card {
    width: 50%;
    margin: 0 auto;
    grid-template-columns: 1fr;
  }

  main #plan .plan-wrap .plan-card img {
    width: 100%;
  }

  main #plan .plan-wrap .plan-note {
    margin-top: 3em;
    width: 50%;
    font-size: 0.8em;
  }
}

/* ========================================
   フッター
======================================== */
footer {
  width: 100%;
  margin: 0 auto;
  padding: 1em 0 0;
  text-align: center;
}

footer #access {
  color: #fff;
  line-height: 1.7;
}

footer #access h2 {
  font-size: 1.2em;
}

footer #access .address {
  background-color: #535353;
  padding: 0.5em 0;
}

footer #access .address p {
  font-size: 1em;
}

footer #access .copyright {
  background-color: #949494;
  text-transform: uppercase;
  font-size: 0.85em;
  padding: 0.7em 0 0.75em;
}

@media (min-width: 575px) {
  footer {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }
}

/* ========================================
   お知らせ
======================================== */
.notice {
  width: 40em;
  max-width: calc(100% - 2em);
  margin: 0 auto 2rem;
}

.notice p {
  margin-bottom: 0.5rem;
  text-align: justify;
  line-height: 1.25;
  font-size: 1.1rem;
}

.notice-term {
  color: #f33 !important;
  margin-bottom: 0.5rem;
  font-weight: bold;
}


/* Source: topics.css */
#topics {
  max-width: 90%;
  margin: auto;
}

#set_list_topics {
  max-width: 90%;
  width: 960px;
  margin: 0 auto;
  font-size: 16px;
}

#set_list_topics dt {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

#set_list_topics dt:last-of-type {
  padding-top: 0.5rem;
}

#set_list_topics dt .topic-date {
  margin-right: 1rem;
  color: #4a8c3a;
}

#set_list_topics dt .topic-title {
  color: #4a8c3a;
}

#set_list_topics .topic-content {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

#set_list_topics .topic-content a {
  color: #4a8c3a;
  text-decoration: underline;
  word-break: break-all;
}

#set_list_topics .topic-content a:hover {
  opacity: 0.7;
}

#set_list_topics .topic-content img {
  max-width: 100% !important;
  height: auto !important;
}

#set_list_topics .no-contents {
  text-align: center;
}

.topic-content {
  display: none;
}

.topic-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.topic-link span {
  color: #4a8c3a;
}

.topic-link span:first-of-type:hover {
  text-decoration: underline;
}

.topic-icon {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.3s;
}

.topic-link.active .topic-icon {
  transform: rotate(180deg);
}


/* Source: i18n.css */
/* 多言語対応スタイル */

/* フォント設定 */
/* 日本語版（デフォルト）: 欧文明朝 Libre Baskerville, 和文明朝 Noto Serif JP, 和文ゴシック Noto Sans JP */
/* 翻訳完了まで日本語テキストを非表示（FOUC防止） */
html:not(.i18n-ready) [data-i18n] {
    visibility: hidden;
}

html.i18n-ready [data-i18n] {
    visibility: visible;
}

/* 言語切り替えボタン */
#lang-switcher {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    position: absolute;
    z-index: 999;
}

#lang-switcher a {
    transition: color 0.3s ease;
}

#lang-switcher a:hover {
    color: #8B4513 !important;
}

/* 言語ごとのフォント調整 */
html.lang-ja,
.lang-ja {
    font-family: "Libre Baskerville", "Noto Serif JP", serif;
}

html.lang-en,
.lang-en {
    font-family: "Libre Baskerville", "Georgia", serif;
}

html.lang-ko,
.lang-ko {
    font-family: "Noto Serif KR", serif;
}

html.lang-zh-cmn-Hans,
.lang-zh-cmn-Hans {
    font-family: "Noto Serif SC", serif;
}

html.lang-zh-cmn-Hant,
.lang-zh-cmn-Hant {
    font-family: "Noto Serif TC", serif;
}

/* 日本語以外のフォントサイズ調整（特定要素のみ） */
html.lang-en .catch p,
html.lang-ko .catch p,
html.lang-zh-cmn-Hant .catch p,
html.lang-zh-cmn-Hans .catch p {
    font-size: 0.75em;
}

html.lang-en main #headline .headline-1 .headline-12,
html.lang-ko main #headline .headline-1 .headline-12,
html.lang-zh-cmn-Hant main #headline .headline-1 .headline-12,
html.lang-zh-cmn-Hans main #headline .headline-1 .headline-12 {
    font-size: clamp(0.85rem, 0.5rem + 1.5vw, 2.8rem);
}

html.lang-en main #headline .headline-1 .headline-12 > *,
html.lang-ko main #headline .headline-1 .headline-12 > *,
html.lang-zh-cmn-Hant main #headline .headline-1 .headline-12 > *,
html.lang-zh-cmn-Hans main #headline .headline-1 .headline-12 > * {
    font-size: clamp(0.85rem, 0.5rem + 1.5vw, 2.8rem);
}

html.lang-en .headline-22,
html.lang-ko .headline-22,
html.lang-zh-cmn-Hant .headline-22,
html.lang-zh-cmn-Hans .headline-22 {
    font-size: 1em;
}

/* 英語版のみsubtitleを非表示 */
html.lang-en h2 span[data-i18n$=".subtitle"] {
    display: none;
}

/* 日本語以外は横書きに変更 */
html.lang-en .headline-12,
html.lang-en .headline-22,
html.lang-en .catch,
html.lang-en .plan-h2 h2,
html.lang-ko .headline-12,
html.lang-ko .headline-22,
html.lang-ko .catch,
html.lang-ko .plan-h2 h2,
html.lang-zh-cmn-Hant .headline-12,
html.lang-zh-cmn-Hant .headline-22,
html.lang-zh-cmn-Hant .catch,
html.lang-zh-cmn-Hant .plan-h2 h2,
html.lang-zh-cmn-Hans .headline-12,
html.lang-zh-cmn-Hans .headline-22,
html.lang-zh-cmn-Hans .catch,
html.lang-zh-cmn-Hans .plan-h2 h2 {
    writing-mode: horizontal-tb !important;
}

/* スマホビューのみ：画像の下にテキストを配置 */
@media (max-width: 575px) {
    html.lang-en #headline .headline-1,
    html.lang-ko #headline .headline-1,
    html.lang-zh-cmn-Hant #headline .headline-1,
    html.lang-zh-cmn-Hans #headline .headline-1 {
        display: block;
    }

    html.lang-en main #headline .headline-1 .headline-12,
    html.lang-ko main #headline .headline-1 .headline-12,
    html.lang-zh-cmn-Hant main #headline .headline-1 .headline-12,
    html.lang-zh-cmn-Hans main #headline .headline-1 .headline-12 {
        margin: 2rem auto 0;
        text-align: center;
        font-size: 1.5rem !important;
    }

    html.lang-en main #headline .headline-1 .headline-12 > *,
    html.lang-ko main #headline .headline-1 .headline-12 > *,
    html.lang-zh-cmn-Hant main #headline .headline-1 .headline-12 > *,
    html.lang-zh-cmn-Hans main #headline .headline-1 .headline-12 > * {
        font-size: 1.5rem !important;
    }

    html.lang-en main #headline .headline-1 .headline-12 .upper,
    html.lang-ko main #headline .headline-1 .headline-12 .upper,
    html.lang-zh-cmn-Hant main #headline .headline-1 .headline-12 .upper,
    html.lang-zh-cmn-Hans main #headline .headline-1 .headline-12 .upper {
        border-right: none;
        padding-top: 0;
    }

    html.lang-en main #headline .headline-1 .headline-12 .lower,
    html.lang-ko main #headline .headline-1 .headline-12 .lower,
    html.lang-zh-cmn-Hant main #headline .headline-1 .headline-12 .lower,
    html.lang-zh-cmn-Hans main #headline .headline-1 .headline-12 .lower {
        margin-top: 0;
        border-right: none;
        padding-bottom: 0;
    }
}

/* スマホビューでのキャッチコピー調整 */
html.lang-en .catch,
html.lang-ko .catch,
html.lang-zh-cmn-Hant .catch,
html.lang-zh-cmn-Hans .catch {
    text-align: right;
    right: 10%;
    left: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    top: 95vw !important;
}

html.lang-en .catch p,
html.lang-ko .catch p,
html.lang-zh-cmn-Hant .catch p,
html.lang-zh-cmn-Hans .catch p {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    display: block;
    margin-bottom: 0.5em;
    width: fit-content;
}

/* headline部分の行間調整（英語・韓国語） */
html.lang-en .headline-12,
html.lang-ko .headline-12 {
    line-height: 1.2 !important;
}

html.lang-en .headline-12 .upper,
html.lang-en .headline-12 .lower,
html.lang-ko .headline-12 .upper,
html.lang-ko .headline-12 .lower {
    display: block;
    line-height: 1.2 !important;
}

/* プランセクションの余白調整 */
html.lang-en #plan .plan-wrap,
html.lang-ko #plan .plan-wrap,
html.lang-zh-cmn-Hant #plan .plan-wrap,
html.lang-zh-cmn-Hans #plan .plan-wrap {
    padding: 2em 0 1em;
}

html.lang-en #plan .plan-wrap .plan-h2,
html.lang-ko #plan .plan-wrap .plan-h2,
html.lang-zh-cmn-Hant #plan .plan-wrap .plan-h2,
html.lang-zh-cmn-Hans #plan .plan-wrap .plan-h2 {
    height: 8em;
    margin-bottom: 1em;
}

html.lang-en #plan .plan-wrap .plan-h2 h2,
html.lang-ko #plan .plan-wrap .plan-h2 h2,
html.lang-zh-cmn-Hant #plan .plan-wrap .plan-h2 h2,
html.lang-zh-cmn-Hans #plan .plan-wrap .plan-h2 h2 {
    top: 1em;
}

/* PCビューでの調整 */
@media (min-width: 575px) {
    html.lang-en .catch,
    html.lang-ko .catch,
    html.lang-zh-cmn-Hant .catch,
    html.lang-zh-cmn-Hans .catch {
        writing-mode: horizontal-tb !important;
        right: 20%;
        left: auto;
        top: 15vw;
        text-align: right;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    html.lang-en .catch p,
    html.lang-ko .catch p,
    html.lang-zh-cmn-Hant .catch p,
    html.lang-zh-cmn-Hans .catch p {
        margin-bottom: 0.5em;
        display: block;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 0.5rem 1rem;
        width: fit-content;
    }

    html.lang-en .headline-12,
    html.lang-ko .headline-12 {
        line-height: 1.05 !important;
    }

    html.lang-en .headline-22,
    html.lang-ko .headline-22,
    html.lang-zh-cmn-Hant .headline-22,
    html.lang-zh-cmn-Hans .headline-22 {
        writing-mode: horizontal-tb !important;
        top: auto;
        bottom: 10%;
        right: auto;
        left: 5%;
        width: 40%;
        line-height: 1.6 !important;
    }

    html.lang-en .headline-22 p,
    html.lang-ko .headline-22 p,
    html.lang-zh-cmn-Hant .headline-22 p,
    html.lang-zh-cmn-Hans .headline-22 p {
        margin-left: 0;
        margin-bottom: 1em;
        line-height: 1.6 !important;
    }

    html.lang-en .plan-h2 h2,
    html.lang-ko .plan-h2 h2,
    html.lang-zh-cmn-Hant .plan-h2 h2,
    html.lang-zh-cmn-Hans .plan-h2 h2 {
        writing-mode: horizontal-tb !important;
        top: 1.5em;
    }

    html.lang-en #plan .plan-wrap .plan-h2,
    html.lang-ko #plan .plan-wrap .plan-h2,
    html.lang-zh-cmn-Hant #plan .plan-wrap .plan-h2,
    html.lang-zh-cmn-Hans #plan .plan-wrap .plan-h2 {
        height: 6em;
    }
}

/* レスポンシブ対応 */
@media (max-width: 576px) {
    #lang-switcher {
        top: 90px !important;
        right: 10px !important;
        left: auto !important;
        padding: 8px !important;
        font-size: 11px !important;
        z-index: 999 !important;
    }
}