@charset "UTF-8";
/* ===== CSS Initialize Property ===== */
html { font-family: sans-serif; margin: 0; padding: 0; text-align: center; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; text-align: center; }
article, aside, details, div, figcaption, figure, footer, header, hgroup, main, nav, section, summary { box-sizing: border-box; display: block; }
/* HACK: overflow: hidden;がSliderproと当たってる？ */
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
h1, h2, h3, h4, h5, h6, p, dt, dd, figcaption, th, td, code, kbd, pre, samp, time { color: #666666; font-size: 16px; font-weight: 200; letter-spacing: .3px; line-height: 150%; margin: 0; padding: 0; } /* MEMO: 旧メニューの都合でliを外しています */
code, kbd, pre, samp, time { font-family: monospace, monospace; }
a { background: transparent; }
a:active, a:hover { outline: 0; }
img { border: 0; margin: 0; outline: 0; padding: 0; vertical-align: bottom;}
svg:not(:root) { overflow: hidden; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
/* NOTICE: "button, input, optgroup, select, textarea" property "font-size: 16px;" is for iOS. Editing below 16px causes "Unnecessary zoom" issues in form actions. */
button, input, optgroup, select, textarea { color: inherit; font-size: 16px; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
/* ===== [END] CSS Initialize Property ===== */

/*
MEMO: Edit the user properties to the following lines.
Property coding rule is the "Mobile First Design". First, properties of "Mobile Device such as Smartphones". "Middle size Screen Device such as Tablet and Laptop Computer", and finally "Desktop Computer (Large Screen)".
Then use media queries to change the layout.
""Coding order""
1. Mobile Device
[Media Query] => 2. Tablet such as Laptop Computer.
[Media Query] => 3... Add other devices as needed.
[Media Query] => Last. Desctop Computer.
*/

.fbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

/* ===== Colors ===== */
:root {
  --landGreen: #02703e;
  --noticeRed: #d0104c;
  --schwarz: #666666;
  --bgright: #ffffff;
  --bgleft: #ffffff;
}

/* ===== Navigations ===== */

.breadCrumbsNavi {
  margin: 80px auto 20px auto;
  text-align: left;
  width: 86%;
  max-width: 920px;
}
.breadCrumbsNavi p {
  font-size: .75rem;
}
.breadCrumbsNavi a {
  background-color: #ffffff;
  border-bottom: 1px dotted var(--landGreen);
  color: var(--landGreen);
  padding: 0 0 1px 0;
  text-decoration: none;
}
.breadCrumbsNavi a:hover {
  border-bottom: #ffffff;
  color: #999999;
}

/* "Click to Page top" Button */
.rtt {
  background-color: #ffffff;
  border: 3px solid var(--landGreen);
  border-radius: 50%;
  color: var(--landGreen);
  display: block;
  font-size: .9rem;
  font-weight: bold;
  height: 60px;
  position: fixed;
    bottom: 20px;
    right: 7%;
  text-decoration: none;
  width: 60px;
  z-index: 7;
}
.rtt:hover {
  background-color: var(--landGreen);
  border: 3px solid var(--landGreen);
  color: #ffffff;
}

/* ===== Fonts ===== */

.hl1 {
  color: #659A5E;
  font-size: 2.8rem;
  font-weight: 200;
  line-height: 1.3em;
  margin: 40px auto 10px auto;
}

.hl2 {
  color: #659A5E;
  font-size: 1.4rem;
  font-weight: 200;
  margin: 0 auto 40px auto;
  padding: 0 0 6px 0;
  width: 100%;
}

.hl3 {
  border-bottom: .99px dotted var(--schwarz);
  color: var(--schwarz);
  font-size: 1.2rem;
  margin: 20px auto 10px auto;
  padding: 0 0 6px 0;
  width: 100%;
}

.hl4 {
  color: var(--landGreen);
  font-size: 1rem;
  margin: 20px auto 10px auto;
  width: 100%;
}

.builder-name {
  display: block;
  font-size: .9rem;
  font-weight: 200;
  margin-bottom: -5px;
}

p {
  color: var(--schwarz);
  font-size: .9rem;
  margin: 5px 0 20px 0;
}

th, td {
  color: var(--schwarz);
  font-size: .9rem;
  margin: 5px 0 20px 0;
}

.list-style {
  margin: 5px 0 20px 0;
}

.list-style dt {
  border-bottom: .99px dotted var(--landGreen);
  color: var(--schwarz);
  font-size: .9rem;
  font-weight: 200;
  margin: 5px 0 10px 0;
  padding: 0 0 5px 0;
}

.list-style dd {
  color: var(--schwarz);
  font-size: .9rem;
  margin: 5px 0 10px 15px;
}
.list-style dd::before {
  content: "○";
  margin-right: 10px;
}

.table-style {
  list-style: none;
  margin: 10px auto 20px auto;
}
.table-style dt {
  border: .99px solid #CCCCCC;
  border-bottom: 0;
  box-sizing: border-box;
  display: block;
  font-size: .9rem;
  margin: 0;
  padding: 5px 10px;
  width: 40%;
}
.table-style dd {
  border: .99px solid #CCCCCC;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  display: block;
  font-size: .9rem;
  margin: 0;
  padding: 5px 10px;
  width: 60%;
}
.table-style dt:last-of-type {
  border-bottom: .99px solid #CCCCCC;
}
.table-style dd:last-of-type {
  border-bottom: .99px solid #CCCCCC;
}

.price-table {
  border: .99px solid #CCCCCC;
  margin: 10px auto;
  width: 100%;
}
.price-table th {
  border: .99px solid #CCCCCC;
  padding: 10px;
  width: 70%;
}
.price-table td {
  border: .99px solid #CCCCCC;
  padding: 10px;
  width: 30%;
}
.price-table tr {
  transition: .4s;
}
.price-table tr:hover {
  background-color: #ececec;
  cursor: pointer;
}

.price {
  font-size: 1.1rem;
  margin: 0;
}

.redColor {
  color: var(--noticeRed);
}

.notice {
  font-size: .75rem;
}

figcaption {
  font-size: .75rem;
  margin: 5px auto;
  width: 86%;
}

.spec {
  color: var(--schwarz);
  font-size: .8rem;
  font-weight: 200;
  margin: 5px 0 20px 0;
}

.imgCaption {
  margin: 10px auto;
  text-align: left;
  width: 86%;
  max-width: 800px;
}

dfn {
  font-size: .75rem;
}

small {
  font-size: .75rem;
}

time {
  font-size: .8rem;
  margin: 10px 0;
}

/* ===== Layout ===== */
section {
  box-sizing: border-box;
  margin: 30px auto 90px auto;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 86%;
  max-width: 800px;
}

.recom-logo {
  margin: 0 0 40px 7%;
  width: 160px;
}
.top-section {
  margin: 60px auto 60px auto;
  width: 100%;
  max-width: 100%;
}
.head-area {
  box-sizing: border-box;
  margin: 0 auto 60px auto;
  overflow: hidden;
  width: 100%;
}
.title-logo {
  margin: 0 0 60px 0;
  width: 40%;
}
.read-area {
  background-color: var(--bgright);
  box-sizing: border-box;
  margin: 60px 0 0 0;
  overflow: hidden;
  padding: 60px 0 50px 0;
  width: 100%;
}
.read-area > p {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 auto 10px auto;
  width: 86%;
  max-width: 800px;
}
.image-area {
  box-sizing: border-box;
  margin: 60px auto 40px auto;
  overflow: hidden;
  text-align: left;
  width: 100%;
  max-width: 800px;
}
.sub {
  margin: 0 auto 60px auto;
}
.main-image {
  display: block;
  margin: 0 auto;
  width: 100%;
}
.main-image img {
  width: 100%;
}
.prologue-area {
  background-color: var(--bgleft);
  box-sizing: border-box;
  overflow: hidden;
  padding: 60px 0 50px 0;
  width: 100%;
}
.prologue-area > p {
  margin: 0 auto 10px auto;
  width: 86%;
  max-width: 800px;
}

.cnt {
  margin: 60px auto 160px auto;
}

.cnt-left {
  margin: 10px 0;
  width: 100%;
}
.cnt-left img {
  width: 100%;
}

.cnt-right {
  width: 100%;
}
.cnt-half {
  margin: 0;
  width: 45%;
}
.cnt-half img {
  bottom: 0;
  margin: 20px auto;
  width: 100%;
}

.contents-front {
  max-width: 920px;
}

.item-list {
  margin: 40px auto;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.grid-item {
  overflow: hidden;
}
.grid-item img {
  margin: 0 0 10px 0;
  width: 100%;
}

.info-button {
  background-color: var(--schwarz);
  border: 3px solid var(--schwarz);
  border-radius: 10px;
  box-sizing: border-box;
  color: #ffffff;
  display: block;
  margin: 60px auto;
  padding: 10px;
  width: 90%;
}
.info-button:hover {
  background-color: #ffffff;
  color: var(--schwarz);
}

.jump-to-top-button {
  background-color: var(--landGreen);
  border: 3px solid var(--landGreen);
  border-radius: 10px;
  box-sizing: border-box;
  color: #ffffff;
  display: block;
  margin: 60px auto;
  padding: 10px;
  width: 86%;
  max-width: 540px;
}

.jump-to-top-button:hover {
  background-color: #ffffff;
  color: var(--landGreen);
}

.contact-button {
  background-color: var(--landGreen);
  border: 3px solid var(--landGreen);
  border-radius: 10px;
  box-sizing: border-box;
  color: #ffffff;
  display: block;
  margin: 60px auto;
  padding: 10px;
  width: 86%;
  max-width: 540px;
}

.contact-button:hover {
  background-color: #ffffff;
  color: var(--landGreen);
}

.subcontents {
  box-sizing: border-box;
  margin: 0 0 30px 0;
  overflow: hidden;
}


/* ===== footer ===== */
footer {
  background-color: #ffffff;
  border-top: .99px solid var(--landGreen);
  margin: 0;
  padding: 26px 0 0 0;
  text-align: center;
  width: 100%;
}

.footerAddGroup {
  margin: 0 auto;
  width: 86%;
  max-width: 920px;
}

.footerAdd {
  margin: 0 0 26px 0;
  width: 100%;
}

.footerAdd h3 {
  border-bottom: .99px dotted #333333;
  font-size: 1rem;
  margin: 0 0 6px 0;
  padding: 0 0 2px 0;
}

.footerAdd address {
  font-style: normal;
}

.footerAddLine {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footerAddLine dt {
  display: inline-block;
  font-size: .75rem;
  width: 20%;
}
.footerAddLine dd {
  display: inline-block;
  font-size: .75rem;
  width: 77%;
}

.footerCopyright {
  background-color: var(--landGreen);
  box-sizing: border-box;
  color: #ffffff;
  display: block;
  margin: 0;
  padding: 3px 0;
  text-align: center;
  width: 100%;
}
.footerCopyright small {
  font-size: .7rem;
}

/* ====== Media Query ====== */
@media screen and (min-width: 490px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 760px) {
  .hl1 { font-size: 2rem; }
  .hl2 { font-size: 1.6rem; }
  p, dt, dd { font-size: .93rem; }
  .list-style dt, .list-style dd { font-size: .93rem; }
  .price { font-size: 1.2rem; }
  .notice { font-size: .8rem; }
  small { font-size: .8rem; }
  dfn { font-size: .8rem; }
  .breadCrumbsNavi p { font-size: .85rem; }
  .contact-button { font-size: 1.4rem; margin: 60px auto 100px auto;}
  .footerAdd { width: 48%; }
  .footerAdd h3 { font-size: 1.2rem; margin: 0 0 12px 0; padding: 0 0 5px 0; }
  .footerAddLine dt { font-size: .8rem; }
  .footerAddLine dd { font-size: .8rem; }
  section { margin: 20px auto 80px auto; }
  .cnt-left { width: 55%; }
  .cnt-right { width: 40%; }
  .main-image { width: 100%; max-width: 800px; }
  .info-button { width: 100%; }
  .item-list { gap: 40px; }
}
@media screen and (min-width: 800px) {
  .recom-logo { margin-left: 0; width: 200px; }
  figcaption { margin-left: 0; width: 100%; }
}