@charset "UTF-8";
@import url("https://use.typekit.net/gdf1fdf.css");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital@1&display=swap");
html { overflow-y: scroll; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

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

fieldset, img { border: 0; }

img { vertical-align: bottom; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

li { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

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

abbr, acronym { border: 0; font-variant: normal; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }

/*to enable resizing for IE*/
input, textarea, select { *font-size: 100%; }

/*because legend doesn't inherit in IE */
legend { color: #000; }

del, ins { text-decoration: none; }

.dummy-head, .dummy-footer { background: #888; text-align: center; color: #bbb; font-size: 20px; line-height: 1.5; }

.dummy-head { padding: 40px 0; }

.dummy-footer { padding: 500px 0; }

/*$color1: #41889e;*/
/*$color1: #0094e3;*/
/******************************************************

base

******************************************************/
#equipment { overflow-x: hidden; }
#equipment .sp { display: none; }
@media screen and (max-width: 600px) { #equipment .pc { display: none; }
  #equipment .sp { display: block; } }

.page-midashi { padding-bottom: 4rem; }

.midashi { z-index: 1; margin-bottom: 2.5rem; }

#container img { width: 100%; height: auto; line-height: 1; vertical-align: middle; }

.img .note { text-align: right; margin-bottom: 0; }

/******************************************************

page

******************************************************/
#block01 { padding-top: 4rem; }
#block01 .page-midashi { margin-top: 3rem; }

#equipment .equipment-nav ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
#equipment .equipment-nav li { border: 1px solid #7dc1d5; }
#equipment .equipment-nav li a { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 10px 10px 24px; position: relative; color: #7dc1d5; transition: background-color .3s linear; }
#equipment .equipment-nav li a::before { background-color: #7dc1d5; content: ''; width: 100%; height: 12px; position: absolute; bottom: 0; left: 0; border-top: 1px solid #fff; }
#equipment .equipment-nav li a::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: #FFFFFF transparent transparent transparent; position: absolute; bottom: 2px; left: 50%; translate: -50% 0; }
#equipment .equipment-nav li a .name-en { font-family: "alternate-gothic-atf", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.2em; font-size: 18px; letter-spacing: 0.1em; }
#equipment .equipment-nav li a .name-jp { font-family: "游ゴシック Medium","YuGothic,YuGothicM","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-size: 10px; }
#equipment .equipment-nav li a:hover { background-color: #7dc1d5; color: #fff; }
#equipment .section { margin-top: 60px; }
#equipment .section-header { background-color: #7dc1d5; color: #fff; display: flex; align-items: center; padding: 5px 20px; gap: 10px; font-size: 28px; }
#equipment .section-header .name-en { font-family: "alternate-gothic-atf", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.2em; letter-spacing: 0.1em; }
#equipment .section-header .name-jp { font-family: "游ゴシック Medium","YuGothic,YuGothicM","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-size: 53.57%; font-feature-settings: "palt"; letter-spacing: 0.02em; }
#equipment .unit-list { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 30px; }
#equipment .unit-list.box4 .unit { width: 23%; }
#equipment .unit-list.box4 .unit.herf { width: 48%; }
#equipment .unit-list.box4::after { display: inline-block; content: ""; width: 23%; }
@media screen and (max-width: 768px) { #equipment .unit-list.box4 .unit { width: 48%; }
  #equipment .unit-list.box4 .unit.herf { width: 100%; } }
#equipment .unit { width: 31.5%; margin-bottom: 30px; }
@media screen and (max-width: 768px) { #equipment .unit { width: 48%; } }
#equipment .unit .img .note { position: static; margin-top: 5px; }
#equipment .unit .img:has(> .note) + .name { margin-top: 2px; }
#equipment .unit.w100 { width: 100%; }
#equipment .name { color: #7dc1d5; font-size: 16px; font-weight: bold; margin-top: 15px; line-height: 1.4; letter-spacing: -0.1em; }
#equipment .name .note { font-size: 81.25%; }
#equipment .text { font-size: 15px; color: #262520; margin-top: 8px; }
#equipment .text + .note { margin-top: 10px; }

#amenity .fiorestone { display: flex; justify-content: space-between; flex-wrap: wrap; }
#amenity .fiorestone .img { width: 49.6%; }
#amenity .fiorestone h5, #amenity .fiorestone p { width: 100%; }
@media screen and (max-width: 768px) { #amenity .unit:nth-of-type(1) { order: 1; }
  #amenity .unit:nth-of-type(2) { order: 2; }
  #amenity .unit:nth-of-type(3) { order: 3; }
  #amenity .unit:nth-of-type(4) { order: 5; }
  #amenity .unit:nth-of-type(5) { order: 4; }
  #amenity .unit:nth-of-type(6) { order: 6; }
  #amenity .unit:nth-of-type(7) { order: 7; } }

#structure { margin-bottom: 5rem; }
#structure .unit-list.box4::after { width: 48.5%; }

@media screen and (max-width: 768px) { #equipment .equipment-nav ul { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #equipment .section { margin-top: 40px; } }
@media screen and (max-width: 600px) { #equipment .section-header { font-size: 24px; padding: 5px 15px; gap: 10px; } }