
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}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}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{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}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

body {
  font-family: "Lucida Grande", "segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
a {
  color: #20777c;
  font-weight: bold;
}
.cf:after {
  content: "";
  display: block;
  height: 1px;
  clear: both;
  visibility: hidden;
}
#header {
  top: 0;left: 0;
  z-index: 100;
  width: 100%;
  border-top: 5px solid #20777c;
  border-bottom: 1px solid #666666;
  background-color: #ffffff;
}
#header .inner {
  margin: 0 auto;
  height: 8dvh;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#sitetitle {
  font-size: 4vw;
  font-weight: bold;
  display: inline-block;
}
#sitetitle a {
  color: #000000;
  text-decoration: none;
}
.sp-menu {
  width: 30px;
  cursor: pointer;
  z-index: 10;
}
.sp-menu span {
  background-color: #20777c;
  display: block;
  width: 95%;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 10px;
}
.sp-menu.open span:nth-of-type(1) {
  transform: translateY(10px) rotate(-50deg);
}
.sp-menu.open span:nth-of-type(2) {
  opacity: 0;
}
.sp-menu.open span:nth-of-type(3) {
  transform: translateY(-10px) rotate(50deg);
}
#mainnav {
  font-size: 14px;
  position: absolute;
  top: 8dvh;
  width: calc(100% - 15px * 2);
  z-index: 2;
  background-color: #ffffff;
  padding: 0 15px 15px;
  display: none;
}
.hamburger-menu {
  list-style: none;
}
.hamburger-menu li a {
  color: #20777c;
  font-weight: bold;
  text-decoration: none;
  display: block;
}
#breadWrap {
  background-color: #d3eaea;
}
#bread {
  width: 100%;
  margin: 0 auto;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
#bread li {
  display: inline-block;
}
#bread li.home:after {
  content: ">";
  margin: 0 5px 0 8px;
}
#bread li a {
  text-decoration: underline;
}
#footer {
  background-color: #20777c;
  padding: 20px 0 40px;
  width: 100%;
}
#footer .contact {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  color: #ffffff;
  padding: 10px;
}
.contact dt {
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.contact .tel {
  font-size: 36px;
  font-weight: bold;
}
.contact .tel span {
  font-size: 24px;
}
.contact .tel a {
  color: #ffffff;
}
.contact dd {
  font-size: 24px;
  font-weight: bold;
}
.contact .mail {
  letter-spacing: 0.1em;
}
.footer-left {
  font-size: 18px;
  line-height: 2em;
}
.footer-right {
  font-size: 4vw;
}
#copy {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #333333;
  font-size: 3vw;
}
#flow {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f2f2f2;
}
#flow li {
  float: left;
  width: calc((100% / 3) - 1px);
  text-align: center;
  color: #ffffff;
  font-size: 2.5vw;
  height: 30px;
  line-height: 30px;
  color: #20777c;
  border-left: 1px solid #ccc;
  font-weight: bold;
  letter-spacing: 0.1em;
}
#flow li.current {
  /* width: 319px; */
  background-color: #82bc00;
  color: #ffffff;
  border: none;
}

#content {
  width: 100%;
  margin: 0 auto;
  padding: 20px 5px 0;
}
#key {
  width: 100%;
}
#key .key-image {
  position: relative;
  height: 650px;
  background-image:url(../img/keyimage_2025_sp.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}
#key .key-image-area img {
  width: 100%;
}
#key .go-btn {
  padding: 20px 0;
}
#key #keyList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}
#key #keyList li {
  width: 180px;
  height: 160px;
  text-align: center;
  padding-top: 20px;
  font-size: 21px;
  color: #20777c;
  font-weight: bold;
  border-radius: 10px;
  border: 1px solid #ccc;
}
#key #keyList li img {
  border-radius: 10px;
}
#key #keyList li.item01 {
  background-image:url(../img/item01.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
#key #keyList li.item02 {
  background-image:url(../img/item02.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
#key #keyList li.item03 {
  background-image:url(../img/item03.png);
  background-repeat: no-repeat;
  background-position: 30px 0;
  background-size: contain;
  width: 240px;
}
#keyunder {
  margin: 30px auto;
  font-size: 16px;
  line-height: 1.75em;
  width: 95%;
}
.price-list-header {
  font-size: 21px;;
  display: flex;
  flex-wrap: wrap;
  gap: 0 15px;
}
.price-list-header span {
  font-size: 15px;
  vertical-align: bottom;
}
.price-list {
  overflow: scroll;
}
.price-list table {
  border: 2px solid #000000;
  margin: 13px 0;
  width: 600px;
}
.price-list tr {
  height: 30px;
}
.price-list th, .price-list td {
  text-align: center;
  border: #000000 1px solid;
  padding: 2px 0;
}
.price-list-confettti {
  background-color: #B8BFF1;
  line-height: normal;
}
.price-list-price {
  background-color: #ACF187;
}
.price-list-fee {
  background-color: #77D5D5;
}
.payment-type {
  background-color: #ACEDED;
  text-align: left !important;
  padding-left: 5px !important;
}
.tax {
  font-size: 12px;
}
.price-list-notice {
  font-size: 14px;
  line-height: initial;
}
.price-list-notice ul {
  margin-bottom: 10px;
}
#form-title {
  padding-top: 20px;

}
.headings {
  color: #20777c;
  font-size: 24px;
  font-weight: bold;
  padding-top: 40px;
  height: 60px;
  line-height: 1;
  text-align: center;
  background-color: #f2f2f2;
  border-top: 1px solid #20777c;
  width: 100%;
}
.headings.kiyaku {
  font-size: 5.5vw;
  line-height: 2;
  padding-top: 20px;
}
#form-leadTop {
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  border: 5px double #20777c;
  padding: 10px;
  font-size: 3vw;
  line-height: 2em;
  font-weight: bold;
  color: #4d4d4d;
  background-color: #efefef;
  border-radius: 10px;
}
#form-leadTop.error {
  text-align: center;
}
#form-leadTop a {
  color: #b71125;
  text-decoration: underline;
}
.table-title {
  font-size: 6vw;
  font-weight: bold;
  width: 100%;
  margin: 20px auto 10px;
  border-bottom: 5px double #20777c;
  padding-bottom: 5px
}
.formtable-wap {
  padding: 15px 20px;
  width: calc(95% - 20px);
  background-color: #fcfbf0;
  margin: 0 auto 0;
  border-radius: 10px;
}
.formtable {
  width: 95%;
  display: flex;
  gap: 5px;
  flex-direction: column;
  font-size: 5vw;
}
.formtable-border {
  border-bottom: 1px dotted #666666;
}
.formtable-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 5px 0;
  min-height: 45px;
}
.d-none {
  display: none;
}
.formtable-label {
  font-weight: bold;
  letter-spacing: 0.1em;
  vertical-align: top;
}
.formtable-label span {
  font-size: 13px;
  display: inline-block;
}
.formtable-input {
  width: 95%;
}
.date-input{
  width: 30vw;
}
.label-wap {
  display: inline-block;
  margin-right: 15px;
}
.formtable-input label {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.formtable-input input[type=text],
.formtable-input input[type=checkbox],
.formtable-input textarea,
.formtable-input select {
  height: 36px;
  border-radius: 5px;
  border: 1px solid #bababa;
  padding-left: 10px;
}
.formtable-input select[name=industry_type] {
  width: 100%;
}
.commitment-label {
  align-items: center !important;
}
.send-to-original-address {
  margin-top: 12px;
}
.input-address-area li {
  margin-top: 7px;
}
.input-address-area input[name=zip_1],
.input-address-area input[name=zip_2],
.input-address-area input[name=shop_zip_1],
.input-address-area input[name=shop_zip_2] {
  width: 4rem;
}
.accept-other-model-caution {
  background-color: #cccccc;
  margin: 10px;
  padding: 10px;
}
.accept-other-model-caution p {
  margin-bottom: 10px;
}
.addspace-s {
  margin-right: 10px;
}
.addspace {
  display: inline-block;
  width: 5.5rem;
}
input.w80 {
  width: 4rem;
}
input.w120 {
  width: 5rem;
}
input.w500 {
  width: 100%;
}
textarea.mokuteki {
  height: 80px;
  width: 90%;
  overflow: auto;
  resize: none;
  border: 1px solid #bababa;
  padding: 10px 20px;
}
.form-note {
  margin-bottom: 7px;
  font-size: 4.5vw;
}
.date {
  font-weight: bold;
  font-size: 5vw;
}
th.border-none,
td.border-none {
  border: none;
}
button[type="submit"] {
  display: block;
  width: 85vw;
  height: 60px;
  text-align: center;
  margin: 20px auto 10px;
  border-radius: 30px;
  border: none;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  background: rgb(169,214,55); /* Old browsers */
  background: -moz-linear-gradient(top,  rgb(169,214,55) 0%, rgb(141,168,23) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgb(169,214,55) 0%,rgb(141,168,23) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgb(169,214,55) 0%,rgb(141,168,23) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9d637', endColorstr='#8da817',GradientType=0 ); /* IE6-9 */
}
.go-btn {
  padding-top: 20px;
  clear: both;
}
.go-btn a {
  display: block;
  width: 265px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 0 auto;
  border-radius: 5px;
  border: none;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-decoration: none;
  background: rgb(169,214,55); /* Old browsers */
  background: -moz-linear-gradient(top,  rgb(169,214,55) 0%, rgb(141,168,23) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgb(169,214,55) 0%,rgb(141,168,23) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgb(169,214,55) 0%,rgb(141,168,23) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9d637', endColorstr='#8da817',GradientType=0 ); /* IE6-9 */
}
.go-btn a:hover {
  opacity: 0.8;
}
#kiyaku {
  padding: 20px;
  height: 200px;
  margin: 40px 10px 20px;
  overflow: auto;
  border: 1px solid #cccccc;
}
#kiyakulong {
  padding: 20px 40px;
  border: 1px solid #cccccc;
}
#kiyakulong .kiyaku-sec.last {
  border: none;
}
#kiyaku-title {
  font-size: 14px;
  font-weight: bold;
  color: #20777c;
  padding-bottom: 5px;
  border-bottom: 1px solid #20777c;
  text-align: center;
  margin-bottom: 20px;
}
#kiyakulong dl dd {
  line-height: 1.5;
  font-size: 13px;
  margin-bottom: 5px;
}

#kiyaku p.title,
#kiyakulong p.title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0 10px;
}
#kiyakulong dd ul {
  padding-left: 20px;
}
#kiyakulong .kiyaku-sec {
  padding-bottom: 20px;
  border-bottom: 1px dotted #666;
}
#kiyaku dl dt,
#kiyakulong dl dt {
  color: #20777c;
  font-weight: bold;
  margin-bottom: 5px;
}
#kiyaku dl dd,
#kiyakulong dl dd {
  line-height: 1.75;
  padding-bottom: 10px;
}
#voicesArea {
  margin: 30px 10px 60px;
  width: calc(100% - 20px);
}
.voices-list {
  font-size: 16px;
  line-height: 40px;
  margin-bottom: 40px;
}
.voices-list li {
  border-bottom: 1px dotted #CCC;
  margin-bottom: 5px;
  padding-bottom: 5px;
}
#faqArea {
  margin: 60px auto 120px;
  padding: 0 10px;
}
.faqlist {
  border-bottom: 1px dotted #808080;
}
.faqlist dt {
  font-size: 16px;
}
.faqlist dd {
  line-height: 1.75;
  padding: 10px 40px 10px 0;
  color: #444444;
  font-size: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.faqlist dt a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 0;
  text-decoration: none;
}
.faqlist dt a:after {
  content: "+";
  position: absolute;
  right: 5px;
  display: block;
  width: 40px;
  font-size: 24px;
  text-align: center;
}
.faqlist dt a:hover {
  background-color: #f2f2f2;
}
.faqlist dt span {
  display: inline-block;
  min-width: 60px;
  height: 60px;
  border-radius: 30px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  background-color: #20777c;
  line-height: 60px;
  text-align: center;
  margin-right: 10px;
}
.faqlist dt p {
  width: 70%;
}
.faqlist dd span {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  background-color: #7caf69;
  line-height: 60px;
  text-align: center;
}
.faqlist dd a {
  color: #444444;
  font-weight: 400;
}
#aboutArea {
  margin: 0 auto;
  padding-top: 30px;
  width: 95%;
}
.about-title {
  font-size: 16px;
  font-weight: bold;
  color: #20777c;
  line-height: 2em;
  letter-spacing: 0.1em;
  text-align: center;
}
.about-contents {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.about-contents img {
  width: 100%;
}
.about-content-slogan {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin: 50px auto;
}
.about-spec {
  width: 95%;
  border-top: 1px dotted #ccc;
}
.about-spec th {
  font-weight: bold;
  width: 60px;
}
.about-spec th,
.about-spec td {
  border-bottom: 1px dotted #ccc;
  font-size: 14px;
  padding: 20px 10px;
}
.about-payment-spec {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.about-payment-spec span {
  display: inline-block;
}
.about-payment-spec span::after {
  content: ' /';
}
.about-payment-spec span:last-child::after {
  content: '';
}
.about-link {
  text-align: center;
  margin: 25px;
  font-size: 15px;
}
td.border-none {
  border: none;
}
.about-notes {
  margin: 30px auto;
}
.about-notes dt {
  margin-bottom: 5px;
}
.about-notes dd {
  margin-bottom: 5px;
}
.about-notes dt {
  color: #B3272D;
}
#flow-area {
  margin: 0 auto;
  padding: 30px 0 70px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 95%;
}
.flow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}
.flow-img {
  width: 15%;
  min-width: 80px;
  padding: 5px;
}
.flow-img img {
  width: 95%;
}
.right-box {
  max-width: calc(100% - 80px);
}
.right-box > dl {
  border-left: 5px solid #20777c;
  padding-left: 10px;
}
.right-box > dl dt {
  font-size: 18px;
  color: #20777c;
  font-weight: bold;
  margin-bottom: 10px;
}
.right-box dd {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.right-box .caution {
  background-color: #f2f2f2;
  padding: 15px;
}
.right-box .caution dt {
  color: #b3272d;
  font-size: 12px;
  margin-bottom: 5px;
}
.right-box .caution dd {
  font-size: 12px;
}
.flow-left {
  width: 190px;
  height: 1000px;
  float: left;
}
.rental {
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.rental .tel {
  font-size: 17px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 10px;
}
.rental .tel a {
  color: #000000;
}
.rental li .go-btn {
  padding-top: 0;
}
.rental li .go-btn a {
  margin: 0 0;
  width: 14rem;
  font-size: 13px;
  height: 2.5rem;
  line-height: 2.5rem;
}
.rental li {
  float: left;
}
.receipt-contents {
  color: #0074c8;
  font-weight: bold;
}
.receipt-contents ul {
  list-style-type: disc;
  padding-left: 20px;
}
.color-r {
  color: #b3272d;
  font-weight: bold;
}
.color-b li {
  color: #0074c8;
  display: inline-block;
  margin-right: 20px;
  font-weight: bold;
}
.color-b li:before {
  content: "?ｿｽE";
}
.lead-undertext {
  font-size: 14px;
  padding: 20px 20px 0;
  text-align: center;
}
.lead-undertext span {
  font-weight: bold;
}
#pagetopBtn {
  position: fixed;
  bottom: 5dvh;
  right: 10vw;
}
#pagetopBtn a {
  display: block;
  width: 60px;
  height: 60px;
  background: url(../img/pagetop.png) no-repeat 0 0;
}
#consent {
  height: 200px;
  border: 1px solid #cccccc;
  margin: 0 10px 60px;
  overflow: auto;
  padding: 20px;
}
.contact-title {
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}
#consent dl {
  padding: 10px 0;
}
#consent dl dt {
  font-weight: bold;
  color: #20777c;
}
#consent .text-right {
  text-align: right;
}
/* レンタル基本料金キャッシュバックキャンペーン 20170421-0531 */
.camp-banner {
  width: 986px;
  margin: 0 auto 40px;
}
.camp-banner > img {
  width: 95%;
}
/* 長期休暇の案内 */
.announce_long_vacation > p {
  background-color: #fcf8ca;
  margin: 10px 10px 20px;
  padding: 10px 15px;
  border-radius: 10px;
}
