@charset "UTF-8";
/*-----------------------
reset
------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
ol li ol,
ul li ul,
ol li ul,
ul li ol,
li {
margin: 0;
list-style: none;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*:focus {
outline: none;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*-----------------------
common
------------------------*/
html {
padding: 0;
margin: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-size: 16px;
font-family: "Noto Serif JP", serif;
font-weight: 500;
font-style: normal;
background-color: #10325c;
}
@media screen and (max-width: 900px) {
html {
padding: 0px;
}
}
body {
line-height: 2em;
position: relative;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
background: #10325c;
color: #edeeee;
}
body#lower {
background: #edeeee;
color: #10325c;
}
body#lower #hotel_menu:hover,
body#lower #lang_menu:hover {
color: #edeeee;
background: #10325c;
}
body#lower #hotel_menu:hover p::before,
body#lower #lang_menu:hover p::before {
background: url('data:image/svg+xml;utf8,') no-repeat center center;
}
@media screen and (max-width: 900px) {
body#lower #hotel_menu:hover,
body#lower #lang_menu:hover {
color: transparent;
background: transparent;
}
body#lower #hotel_menu.active,
body#lower #lang_menu.active {
color: #edeeee;
background: #10325c;
}
body#lower #hotel_menu.active p::before,
body#lower #lang_menu.active p::before {
background: url('data:image/svg+xml;utf8,') no-repeat center center;
}
}
body#lower .head_img {
padding-top: 200px;
padding-bottom: 163px;
display: block;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
@media screen and (max-width: 900px) {
body#lower .head_img {
width: 70%;
padding-top: 180px;
padding-bottom: 70px;
}
}
body#lower .head_img img {
height: 29px;
width: auto;
margin: 0 auto 8px;
display: inline-block;
}
@media screen and (max-width: 900px) {
body#lower .head_img img {
width: 100%;
height: auto;
}
}
body#lower .head_img .h1_underline-wrap {
display: block;
}
body#lower .head_img .h1_underline-wrap svg {
display: block;
width: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-animation: underline-expand 0.6s ease-out 0.3s forwards;
animation: underline-expand 0.6s ease-out 0.3s forwards;
fill: #10325c;
}
body#lower #breadcrumb ol {
margin-bottom: 68px;
}
body#lower #breadcrumb ol li {
display: inline-block;
position: relative;
padding: 0 40px 0 0 !important;
line-height: 2em !important;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-size: 14px;
}
body#lower #breadcrumb ol li::after {
content: "";
background: url(../new_img/navi_s_arrow.svg) no-repeat center center;
width: 8px;
height: 10px;
position: absolute;
top: calc(50% - 4px);
right: 0;
background-size: contain;
display: inline-block;
margin: 0 10px;
color: #10325c;
}
body#lower #breadcrumb ol li a {
color: #70849d;
}
body#lower #breadcrumb ol li:last-child {
padding-right: 0 !important;
}
body#lower #breadcrumb ol li:last-child::after {
content: none;
}
@media screen and (max-width: 900px) {
body {
line-height: 2em;
}
}
@-webkit-keyframes underline-expand {
from {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes underline-expand {
from {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
h1, h2, h3, h4, h5, b {
font-weight: 600;
}
a {
color: #fff;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
a:hover {
opacity: 0.7;
}
@media screen and (max-width: 900px) {
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
outline: none;
}
}
.pc {
display: block;
}
.pc.tab {
display: block;
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
.pc {
display: none;
}
}
@media screen and (max-width: 900px) {
.pc {
display: none;
}
}
.tab {
display: none;
}
.tab.pc {
display: block;
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
.tab {
display: block;
}
}
@media screen and (max-width: 900px) {
.tab {
display: none;
}
.tab.pc {
display: none;
}
}
.sp {
display: none;
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
.sp {
display: none;
}
.sp.tab {
display: block;
}
}
@media screen and (max-width: 900px) {
.sp {
display: block;
}
.sp.sp_inline {
display: inline-block;
}
}
.sp2 {
display: none;
}
.sp2_in {
display: none;
}
@media screen and (max-width: 450px) {
.sp2 {
display: block;
}
.sp2_in {
display: inline-block;
}
}
.pdl_30 {
padding-left: 30px;
}
@media screen and (max-width: 900px) {
.pdl_30 {
padding-left: 0;
}
}
.pdr_30 {
padding-right: 30px;
}
@media screen and (max-width: 900px) {
.pdr_30 {
padding-right: 0;
}
}
.inner {
width: 100%;
max-width: 1200px;
padding: 0 min(10%, 30px);
margin: 0 auto;
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
.inner {
width: 100%;
max-width: 1500px;
padding: 50px 0;
}
}
@media screen and (max-width: 900px) {
.inner {
width: 100%;
padding: 50px 0;
}
}
.inner .wrap_column2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.inner.w1000 {
width: 90%;
max-width: 1000px;
padding: 0;
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
.inner.w1000 {
padding: 0 min(10%, 30px);
}
}
.inner.w900 {
width: 90%;
max-width: 900px;
padding: 0;
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
.inner.w900 {
width: calc(100% - 100px);
}
}
@media screen and (max-width: 900px) {
.inner.w900 {
width: calc(100% - 40px);
}
}
h2 {
position: relative;
display: block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: url(../new_img/ttl_bg.svg) no-repeat;
background-position-x: center;
margin-bottom: 100px;
}
h2 img {
height: 68px;
width: auto;
padding: 18px;
}
.btn {
display: inline-block;
font-size: 1.8rem;
text-align: center;
color: white;
letter-spacing: 0.25rem;
line-height: 1;
background-color: #808080;
padding: 10px 80px;
position: relative;
}
@media screen and (max-width: 900px) {
.btn {
width: 100%;
max-width: 500px;
font-size: 1.6rem;
text-align: center;
padding: 12px 80px;
}
}
.btn::after {
display: inline-block;
content: "→";
position: absolute;
top: calc(50% - 0.5em);
right: 2.5rem;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media screen and (min-width: 901px) {
.btn:hover::after {
right: 1.2rem;
}
}
.sans {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
}
.back_white {
background: #edeeee;
color: #10325c;
}
.fadein {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 1s;
transition: all 1s;
}
.fadein.fadein-left {
-webkit-transform: translate(-50px, -30px);
transform: translate(-50px, -30px);
}
.fadein.fadein-right {
-webkit-transform: translate(50px, -30px);
transform: translate(50px, -30px);
}
.fadein.fadein-up {
-webkit-transform: translate(0, -60px);
transform: translate(0, -60px);
}
.fadein.fadein-bottom {
-webkit-transform: translate(0, 60px);
transform: translate(0, 60px);
}
.fadein.scrollin {
opacity: 1 !important;
-webkit-transform: translate(0, 0) !important;
transform: translate(0, 0) !important;
}
.fadein2::before {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: opacity 0.6s ease, -webkit-transform 2s ease;
transition: opacity 0.6s ease, -webkit-transform 2s ease;
transition: opacity 0.6s ease, transform 2s ease;
transition: opacity 0.6s ease, transform 2s ease, -webkit-transform 2s ease;
}
.fadein2.scrollin2::before {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.fadein2::after {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: opacity 0.6s ease, -webkit-transform 2s ease;
transition: opacity 0.6s ease, -webkit-transform 2s ease;
transition: opacity 0.6s ease, transform 2s ease;
transition: opacity 0.6s ease, transform 2s ease, -webkit-transform 2s ease;
}
.fadein2.scrollin2::after {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#page-top {
position: fixed;
bottom: 0;
right: 0;
font-size: 14px;
line-height: 1;
z-index: 99;
}
#page-top a {
display: block;
width: 80px;
height: 80px;
background: #808080;
opacity: 0.9;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
}
@media screen and (max-width: 900px) {
#page-top a {
width: 50px;
height: 50px;
}
}
#page-top a:before {
display: inline-block;
content: "";
width: 24px;
height: 24px;
border-top: 2px solid white;
border-right: 2px solid white;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 12px);
}
@media screen and (max-width: 900px) {
#page-top a:before {
width: 18px;
height: 18px;
top: calc(50% - 3px);
left: calc(50% - 9px);
}
}
#page-top a:hover {
opacity: 0.5;
}
.fadein {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 1s;
transition: all 1s;
}
.fadein.fadein-left {
-webkit-transform: translate(-50px, -30px);
transform: translate(-50px, -30px);
}
.fadein.fadein-right {
-webkit-transform: translate(50px, -30px);
transform: translate(50px, -30px);
}
.fadein.fadein-up {
-webkit-transform: translate(0, -60px);
transform: translate(0, -60px);
}
.fadein.fadein-bottom {
-webkit-transform: translate(0, 60px);
transform: translate(0, 60px);
}
.fadein.scrollin {
opacity: 1 !important;
-webkit-transform: translate(0, 0) !important;
transform: translate(0, 0) !important;
}
/*-------------------------
hoverの動き
-------------------------*/
#lang_menu p, #lang_menu a {
padding-left: 17px;
}
#lang_menu p::before, #lang_menu a::before {
content: "";
background: url(../new_img/global.svg) no-repeat center center;
width: 13px;
height: 13px;
position: absolute;
top: calc(50% - 6px);
left: 0;
background-size: contain;
background-repeat: no-repeat;
}
#lower #lang_menu p {
padding-left: 17px;
}
#lower #lang_menu p::before {
content: "";
background: url('data:image/svg+xml;utf8,') no-repeat center center;
width: 13px;
height: 13px;
position: absolute;
top: calc(50% - 6px);
left: 0;
background-size: contain;
background-repeat: no-repeat;
}
#lang_menu p,
#hotel_menu p {
position: relative;
display: inline-block;
letter-spacing: 0.2em;
}
#lang_menu ul li a,
#hotel_menu ul li a,
ul.drawer-nav__menu li a {
display: inline-block;
position: relative;
letter-spacing: 0.2em;
}
.underline-wrap {
position: absolute; /* レイアウトから切り離す */
left: 0;
bottom: -5px; /* 文字の下に配置 */
width: 100%; /* 親（p・a）の文字幅に合わせる */
overflow: hidden;
}
.s .underline-wrap {
padding-left: 20px;
bottom: 0;
}
.underline-wrap svg {
display: block;
width: 100%;
height: auto;
fill: #edeeee;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 0.4s ease;
transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
@media screen and (max-width: 900px) {
.underline-wrap svg {
display: none;
}
}
/* pタグ：is-activeで線を表示 */
#lang_menu p .underline-wrap svg.is-active,
#hotel_menu p .underline-wrap svg.is-active {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* li > a：hoverで線を表示 */
#lang_menu ul li a,
#hotel_menu ul li a,
ul.drawer-nav__menu li a {
display: inline-block;
position: relative;
}
@media screen and (max-width: 900px) {
#hotel_menu ul li a {
font-size: 0.9em;
}
}
#lang_menu ul li a:hover .underline-wrap svg,
#hotel_menu ul li a:hover .underline-wrap svg,
ul.drawer-nav__menu li a:hover .underline-wrap svg {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/*-------------------------
#header-pc
-------------------------*/
#header-pc {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: background-color 0.5s ease, -webkit-box-shadow 0.5s ease;
transition: background-color 0.5s ease, -webkit-box-shadow 0.5s ease;
transition: background-color 0.5s ease, box-shadow 0.5s ease;
transition: background-color 0.5s ease, box-shadow 0.5s ease, -webkit-box-shadow 0.5s ease;
position: relative;
}
#header-pc.scrolled {
background-color: rgba(255, 255, 255, 0.95);
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#header-pc .header-pc__list-item.logo {
display: none;
}
#header-pc .header-pc__list-item.logo.disp {
display: block;
-webkit-transition: 0.5s;
transition: 0.5s;
}
/*-------------------------
header__pc
-------------------------*/
.header-pc__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
height: 123px;
}
.header-pc__inner.active {
background-color: #10325c;
}
@media screen and (max-width: 900px) {
.header-pc__inner {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
}
}
#header {
position: absolute; /* 最初は通常フローで表示 */
top: 0;
width: 100%;
z-index: 9999;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
#header.is-fixed {
position: fixed;
opacity: 0;
-webkit-animation: fadeIn 0.5s ease forwards;
animation: fadeIn 0.5s ease forwards;
background: #10325c;
}
#header.is-fixed .header-pc__inner.active {
background-color: #10325c;
}
#lower #header.is-fixed #logo-sp .cls-1 {
fill: #edeeee;
}
#lower #header.is-fixed .header-pc__inner #hotel_menu p {
color: #edeeee;
}
#lower #header.is-fixed .header-pc__inner #lang_menu p {
color: #edeeee;
}
#lower #header.is-fixed .header-pc__inner #lang_menu p::before {
content: "";
background: url('data:image/svg+xml;utf8,') no-repeat center center;
}
#lower #header.is-fixed .header-pc__inner .drawer-button__bar {
background: url('data:image/svg+xml;utf8,') top left no-repeat;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#hotel_menu {
padding: 30px;
position: relative;
}
#hotel_menu ul {
position: absolute;
top: 80%; /* pタグの直下に表示 */
left: -140px;
padding: 20px 30px;
white-space: nowrap; /* 長いテキストも折り返さない */
z-index: 100;
background-color: #10325c;
}
#hotel_menu ul li {
margin-bottom: 5px;
}
@media screen and (max-width: 900px) {
#hotel_menu {
padding: 0 30px;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
width: 100%;
text-align: right;
}
#hotel_menu ul {
width: 100%;
text-align: left;
left: 0;
}
}
#lang_menu {
padding: 30px 50px 30px 30px;
position: relative;
}
@media screen and (max-width: 900px) {
#lang_menu {
padding: 0 30px 10px;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
width: 100%;
text-align: right;
}
}
#lang_menu ul {
position: absolute;
top: 80%; /* pタグの直下に表示 */
left: 0;
padding: 20px 30px;
white-space: nowrap; /* 長いテキストも折り返さない */
z-index: 100;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 280px;
background-color: #10325c;
}
#lang_menu ul li {
width: 50%;
margin-bottom: 5px;
}
@media screen and (max-width: 900px) {
#lang_menu ul {
width: 100%;
text-align: left;
}
}
.drawer-button {
position: relative;
z-index: 1002;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 30px;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-color: transparent;
border: none;
}
@media screen and (max-width: 900px) {
.drawer-button {
padding: 30px 30px 8px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
outline: none;
}
}
.drawer-button__icon {
position: relative;
width: 68px;
height: 27px;
}
@media screen and (max-width: 900px) {
.drawer-button__icon {
width: 57px;
height: 14px;
}
}
.drawer-button__bar {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 68px;
height: 5px;
background: url('data:image/svg+xml;utf8,') top left no-repeat;
}
@media screen and (max-width: 900px) {
.drawer-button__bar {
width: 57px;
height: 5px;
}
}
#lower .drawer-button__bar {
background: url('data:image/svg+xml;utf8,') top left no-repeat;
}
.drawer-button__bar:nth-child(1) {
-webkit-transform: translate(-50%, calc(-50% - 5px));
transform: translate(-50%, calc(-50% - 5px));
-webkit-transition: 0.5s;
transition: 0.5s;
}
.drawer-button__bar:nth-child(1) include mixin.sp {
-webkit-transform: translate(-50%, calc(-50% - 3px));
transform: translate(-50%, calc(-50% - 3px));
}
.drawer-button__bar:nth-child(2) {
-webkit-transform: translate(-50%, calc(-50% + 5px));
transform: translate(-50%, calc(-50% + 5px));
-webkit-transition: 0.5s;
transition: 0.5s;
}
.drawer-button__bar:nth-child(2) include mixin.sp {
-webkit-transform: translate(-50%, calc(-50% - 3px));
transform: translate(-50%, calc(-50% - 3px));
}
.drawer-button__bar:where(.is-open *) {
background: url(../new_img/navi_line_b.svg) top left no-repeat !important;
width: 35px;
}
.drawer-button__bar:nth-child(1):where(.is-open *) {
-webkit-transform: translate(-60%, 300%) rotate(45deg) scale(0.8);
transform: translate(-60%, 300%) rotate(45deg) scale(0.8);
}
.drawer-button__bar:nth-child(2):where(.is-open *) {
-webkit-transform: translate(-60%, 300%) rotate(-45deg) scale(0.8);
transform: translate(-60%, 300%) rotate(-45deg) scale(0.8);
}
.drawer-button__text {
font-size: 10px;
line-height: 1;
}
.drawer-nav[hidden] {
display: none;
}
.drawer-nav {
position: fixed;
inset: 0;
z-index: 1001;
background: transparent;
}
.drawer-nav__inner {
position: absolute;
top: 0;
right: 0;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100vh;
padding: 0;
background: #edeeee;
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: 0.5s;
transition: 0.5s;
border: 30px solid #10325c;
color: #10325c;
overflow: auto;
}
@media screen and (max-width: 900px) {
.drawer-nav__inner {
height: auto;
}
}
.drawer-nav__inner:where(.is-open *) {
-webkit-transform: unset;
transform: unset;
opacity: 1;
}
.drawer-nav__contents {
position: relative;
overflow: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 120px;
}
@media screen and (max-width: 900px) {
.drawer-nav__contents {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0px;
padding: 30px;
height: auto;
}
.drawer-nav__contents.yoko {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 30px;
padding: 30px;
height: calc(100vh - 60px);
}
.drawer-nav__contents.yoko .drawer-nav__menu {
width: 40%;
}
.drawer-nav__contents.yoko .drawer-nav__menu.pl_l {
width: 20%;
}
}
.drawer-nav__logo {
position: absolute;
top: 15px;
left: 5%;
width: 120px;
}
.drawer-nav__menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
padding: 0;
margin: 5% 0;
list-style: none;
}
@media screen and (max-width: 900px) {
.drawer-nav__menu {
gap: 10px;
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin: 5% 0 0 0;
}
}
.drawer-nav__menu li a {
color: #10325c;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-size: 21px;
position: relative;
}
.drawer-nav__menu li a.s {
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-size: 16px;
padding-left: 20px;
letter-spacing: 0.25em;
}
.drawer-nav__menu li a.s::before {
content: "";
background: url(../new_img/navi_s_arrow.svg) top left no-repeat;
width: 12px;
height: 16px;
position: absolute;
top: calc(50% - 8px);
left: 0;
}
@media screen and (max-width: 900px) {
.drawer-nav__menu li a {
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-size: 16px;
line-height: 1.2em;
}
.drawer-nav__menu li a.s::before {
width: 9px;
height: 14px;
top: calc(50% - 6px);
}
}
@media screen and (max-width: 900px) {
.drawer-nav__menu li {
width: 100%;
}
.drawer-nav__menu li.half_p {
margin-top: 2%;
line-height: 1.5em;
}
.drawer-nav__menu li.half {
width: 47%;
line-height: 1.5em;
}
.drawer-nav__menu li.half a {
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-size: 16px;
}
.drawer-nav__menu li.half a.s {
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-size: 14px;
padding-left: 13px;
}
}
.drawer__overlay {
position: absolute;
inset: 0;
z-index: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.32);
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
.is-open :where(.drawer__overlay) {
opacity: 1;
}
.drawer-button_scroll {
background-color: #03AFCD;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.drawer-button_scroll .drawer-button__bar {
-webkit-transition: 0.6s;
transition: 0.6s;
}
.drawer-button.bg_no {
background-color: transparent;
padding-top: 30px;
}
.drawer-button.bg_no .drawer-button__bar {
-webkit-transition: 0.6s;
transition: 0.6s;
}
@media (prefers-reduced-motion: reduce) {
.drawer-button__bar,
.drawer-nav__inner,
.drawer__overlay {
-webkit-transition: none !important;
transition: none !important;
}
}
.is-open :where(.drawer__overlay) {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.drawer-button__bar,
.drawer-nav__inner,
.drawer__overlay {
-webkit-transition: none !important;
transition: none !important;
}
}
#logo-sp {
width: 188px;
vertical-align: bottom;
position: absolute;
left: 30px;
top: calc(50% - 30px);
z-index: 100;
}
#logo-sp .cls-1 {
fill: #edeeee;
}
@media screen and (max-width: 900px) {
#logo-sp {
width: 150px;
}
}
#lower #logo-sp .cls-1 {
fill: #10325c;
}
#logo-sp-scroll .logo-sp-scroll__bar {
position: fixed;
top: -60px;
width: 100%;
height: 60px;
background-color: white;
z-index: 100;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#logo-sp-scroll .logo-sp-scroll__bar img {
width: 120px;
vertical-align: bottom;
position: absolute;
left: 5%;
top: 16px;
}
/*-------------------------
footer
-------------------------*/
footer {
background-color: #10325c;
color: #edeeee;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-size: 14px;
}
footer .inner.w1000 {
padding: 80px 0 0;
}
@media screen and (max-width: 900px) {
footer .inner.w1000 {
width: 85%;
}
}
footer #ft_logo {
width: 190px;
margin: 0 auto;
}
footer #navidial {
margin-top: 60px;
margin-bottom: 30px;
}
footer #navidial p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-size: 27px;
letter-spacing: 0.1em;
}
footer #navidial p img {
height: 20px;
width: auto;
padding: 0 5px;
margin-top: 5px;
}
@media (max-width: 1000px) {
footer #navidial p {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media screen and (max-width: 900px) {
footer #navidial p {
font-size: 1.5rem;
text-align: center;
display: block;
}
footer #navidial p img {
margin-top: 0;
margin-bottom: 5px;
padding: 0;
}
}
footer #address {
margin-bottom: 66px;
}
@media (max-width: 1000px) {
footer #address {
width: 570px;
margin: 0 auto;
}
}
@media screen and (max-width: 900px) {
footer #address {
width: 300px;
}
}
footer #address li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media (max-width: 1000px) {
footer #address li {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
@media screen and (max-width: 900px) {
footer #address li {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 10px;
}
}
footer #address li .name {
width: 333px;
display: inline-block;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-size: 15px;
}
@media (max-width: 1000px) {
footer #address li .name {
width: 100%;
}
}
@media screen and (max-width: 900px) {
footer #address li .name {
padding-left: 20px;
}
}
footer #address li div {
width: calc(100% - 333px);
display: inline-block;
}
@media (max-width: 1000px) {
footer #address li div {
width: 100%;
}
}
@media screen and (max-width: 900px) {
footer #address li div {
width: calc(100% - 20px);
padding-left: 20px;
}
}
footer #address li div p {
display: inline-block;
letter-spacing: 0.12em;
}
footer #address li div p.tel {
margin-left: 15px;
}
@media (max-width: 1100px) {
footer #address li div p.tel {
margin-left: 0;
display: block;
margin-bottom: 10px;
}
}
@media screen and (max-width: 900px) {
footer #address li div p {
letter-spacing: 0.02em;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-size: 14px;
}
footer #address li div p.tel {
margin-left: 0;
margin-bottom: 15px;
display: block;
}
}
footer #copyright {
text-align: right;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-size: 11px;
line-height: 1.2em;
padding-bottom: 20px;
padding-top: 0;
padding-right: 30px;
}
@media screen and (max-width: 900px) {
footer #copyright {
text-align: center;
padding-top: 30px;
padding-bottom: 50px;
}
}
@media screen and (max-width: 900px) {
footer {
font-size: clamp(1.3rem, 3vw, 1.6rem);
}
}
@media screen and (max-width: 900px) and (max-width: 900px) {
footer .name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
outline: none;
}
footer .name::before {
content: "";
background: url(../new_img/footer_arrow.svg);
width: 16px;
height: 16px;
position: absolute;
top: calc(50% - 9px);
left: 0;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
footer .name.is-open::before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
top: calc(50% - 6px);
}
footer .acc-target {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.25s ease;
transition: max-height 0.25s ease;
}
footer .acc-target.is-open {
max-height: 200px; /* コンテンツに合わせて調整 */
}
}
footer .wrap #navidial p img {
max-width: 135px;
}
/*-------------------------
#page-ttl
-------------------------*/
#page-ttl {
width: 100%;
height: 430px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 90px;
}
@media screen and (max-width: 900px) {
#page-ttl {
height: 34vh;
min-height: 220px;
padding-top: 50px;
}
}
#page-ttl .inner {
padding: 0 0 0 0;
height: 130px;
position: relative;
}
@media screen and (max-width: 900px) {
#page-ttl .inner {
height: clamp(8rem, 15vw, 10rem);
}
}
#page-ttl .page-ttl__ttl {
font-size: clamp(5rem, 6.2vw, 6.5rem);
font-weight: 400;
line-height: 1;
}
@media screen and (max-width: 900px) {
#page-ttl .page-ttl__ttl {
font-size: clamp(3.2rem, 7.8vw, 5.2rem);
}
}
#page-ttl .breadcrumb__wrap {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
#page-ttl .breadcrumb__list {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.15rem;
margin: 0 0 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 900px) {
#page-ttl .breadcrumb__list {
font-size: clamp(1.2rem, 1.6vw, 1.5rem);
margin: 15px 0 0 0;
}
}
#page-ttl .breadcrumb__list::before {
display: inline-block;
content: "";
width: 13px;
height: 14px;
background: url(../images/icon_breadcrumb.svg) top left no-repeat;
background-size: contain;
margin-right: 2px;
}
@media screen and (max-width: 900px) {
#page-ttl .breadcrumb__list::before {
width: 11px;
height: 12px;
}
}
#page-ttl .breadcrumb__list li {
display: inline;
}
#page-ttl .breadcrumb__list li:not(:last-child):after {
display: inline-block;
content: "＞";
margin: 0 1px 0 1px;
}
/*-------------------------
accodion
-------------------------*/
.acd_area {
position: relative;
}
.acd_area .acd_tit {
position: relative;
}
.acd_area .acd_cont {
display: none;
}
.acd_area_sp_only {
position: relative;
}
.acd_area_sp_only .acd_tit_sp_only {
position: relative;
display: none;
}
@media screen and (max-width: 900px) {
.acd_area_sp_only .acd_tit_sp_only {
display: block;
}
}
.acd_area_sp_only .acd_cont_sp_only {
display: block;
}
@media screen and (max-width: 900px) {
.acd_area_sp_only .acd_cont_sp_only {
display: none;
}
}/*# sourceMappingURL=common.css.map */