@charset "utf-8";

img {
  height: auto;
  max-width: 100%;
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", "Verdana", "Arial", "Helvetica", "メイリオ", "Meiryo", sans-serif;
    font-size: 14px;
    text-align: left;
}
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset {
    font-size: 14px;
}
* {
    box-sizing:border-box;
}
input[type="button"],
input[type="submit"] {
	background-color: #E6E6E6;
	border: 1px solid #333;
	-webkit-border-radius: 2px;
	border-radius: 5px;
	-webkit-box-shadow: none;
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	padding: 0.5em 2em;
	text-shadow: none;
        color: #000;
}
input[type="text"] {
	padding: 0.3em;
}


/* =======================================
   HEADER
======================================= */
header {
    border-bottom: 3px solid #99BD37;
  height: 95px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
}
.header-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1em;
}
header h1 {
    margin: 0;
}
header h1 img {
    vertical-align: bottom;
}

.sp-header,
header h1 img.sp-img {
    display: none;
}
.info-wrap {
    display: flex;
    align-items: flex-end;
    gap: 2em;
}
.shop-info p {
    color: #3D52A1;
    margin: 0;
    text-align: left;
    font-size: 14px;
}
.info-wrap .tel {
    background-image: url(../img/tel_ic.png);
    background-repeat: no-repeat;
    background-position: 0 center;
    font-weight: bold;
    font-size: 1.6rem;
    height: 30px;
    padding-left: 30px;
    color: #3D52A1;
}
.menu {
    margin-top: 0.5em;
}
.menu ul {
    display: flex;
    list-style: none;
    gap: 2em;
}
.menu ul li {

}
.menu ul li a:before {
    content: '|';
}
.menu ul li:last-child a:after {
    content: '|';
}
.menu ul li a {
    color: #3f3f3f;
    font-size: 14px;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 2em;
}



/* =======================================
   TOP
======================================= */

.container {
    max-width: 1200px;
    margin: 1em auto;
    padding-top: 100px;
}
.main-visual {
    margin-top: 1em;
}
.top-info-area {
    display: flex;
    max-width: 1200px;
    margin: 4em auto;
    align-items: center;
}
.top-info-box {
    max-width: 565px;
    margin-right: 2em;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    border-radius: 5px;
    width: 100%;
    text-align: left;
}
.top-info-box h2 {
    background-color: #E6E6E6;
    font-size: 1rem;
    padding: 0.3em 0 0.3em 1em;
    color: #444;
    margin: 0;
    font-weight: bold;
}
.info-txt-box-wrap {
    padding: 0.5em 1em;

}
.info-txt-box {
    height: 130px;
    overflow: auto;
    box-sizing: border-box;
}
.info-txt-box::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}
.info-txt-box::-webkit-scrollbar-track {
  border-radius: 20px;
  background: #F3F3F3;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.info-txt-box::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: #D3D3D3;
}
.info-txt {
    padding: 0 0.5em;
}
.info-txt-box ul {
    /*padding: 0 1em;*/
}
.info-txt-box ul li {
    margin-bottom: 0.5em;
    word-break: break-all;
}
.info-txt-box ul li a {
    text-decoration: underline;    
}
.info-txt-box ul li a:hover {
    text-decoration: none;    
}
.info-txt-box ul li p {
    margin: 0;
}
.sub-menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.sub-menu ul li {
    margin: 0 1em 0;
}
.footer-bunner {
    gap: 1em;
    margin: 6em 0;
}


/* お客様の声 */

#common {
    max-width: 960px;
    margin: 0 auto;
}
.voice-wrap {
    display: flex;
    gap: 3em;
    justify-content: space-between;
}
#recommend .con_left,
#recommend .con_right {
    float: none;
    text-align: left;
    max-width: 456px;
    width: 100%;
}
.voice-img-wrap {
    display: flex;
    gap: 2em;
    margin: 1em 0 2em;
    flex-wrap: wrap;
}
.title-img {
    flex: 1;
}
.man,
.woman {
    background-color: transparent;
    max-width: 456px;
    width: 100%;
}
.titlearea {
    display: flex;
    gap: 1em;
    align-items: flex-end;
}
.subtitle {
    position: unset;
    font-size: 1.2rem;
    margin-bottom: 0.5em;
}
.man .message {
    background-color: #D6FFFF;
    border-top: 2px solid #0FA5CC;
}
.woman .message {
    background-color: #FFE1F5;
    border-top: 2px solid #F54B7D;
}


/* ご契約の流れ */
.sp-titile,
.sp-titile-in {
    display: none;    
}

#contract .flow {
    display: flex;
    justify-content: space-between;
}

#contract .flow .step,
#contract .flow .info {
    float: none;
    width: 100%;
}
#contract .flow .step {
    max-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 1em;
}
#contract .flow .info {
    max-width: 880px;
}
.user-box {
    display: flex;
    gap: 1em;
    background-color: #ffffcc;
    padding: 0.5em;
}
#contract .flow .comment {
    margin: 0;
    padding: 10px 0;
    flex: 1;
}
#contract .under {
    margin: 15px 0 0 0;
}
.icon-wrap {
    display: flex;
    align-items: self-start;
    gap: 0.5em;
}


/* よくある質問 */

.QA_list ul {
    list-style: none;
}
.QA_list ul li {
    display: flex;
    gap: 1em;
    margin-bottom: 0.5em;
}
.q-txt a {
    width: 32px;
    height: 13px;
    color: #228B22;
    font-weight: bold;
}
.question {
    width: auto;
    display: flex;
    padding: 0.5em;
}
.question p.icon_q,
.answer p.icon_a {
    float: none;
}
.answer {
    display: flex;
    align-items: flex-start;
}
.answer p.flame_1,
.answer p.flame {
    width: auto;
    padding: 0.5em;
}
.answer div,
.answer p {
    float: none;
    width: auto;
}
.answer-txt {
    flex: 1;
}
.answer div table {
    width: 100%;
}
.answer p.flame br {
    display: none;
}

/* 会社概要 */
.wrapper {
    padding-bottom: 11em;
}
table.companyuBox {
    width: 100%;
    margin-left: 0;
}



/* 物件一覧 */
.plan_box ul {
    display: flex;
    gap: 1em;
}
#plan .plan_box li {
    float: none;
}
#plan .bukken_block {
    max-width: 960px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#plan .bukken_block .photo,
#plan .bukken_block .info,
#plan .bukken_block .button_area {
    float: none;
    width: unset;
}
#plan .bukken_block .madori {
    float: none;
}
#plan .bukken_block .info {
    flex: 1;
}
#plan .bukken_block .info li {
    background: transparent;
    text-indent: 0;
    gap: 0.5em;
    display: flex;
    height: auto;
}
#plan .bukken_block .info li:before {
    width: 63px;
    height: 18px;
}
#plan .label_address:before {
    content: url("../plan/pic/label_address.gif");
}
#plan .label_plan:before {
    content: url("../plan/pic/label_plan.gif");
}
#plan .label_madori:before {
    content: url("../plan/pic/label_madori.gif");
}
#plan .info .plan_a:before {
    content: url("../plan/pic/price_a.gif");
}
#plan .info .plan_b:before {
    content: url("../plan/pic/price_b.gif");
}
#plan .info .plan_c:before {
    content: url("../plan/pic/price_c.gif");
}



/* プライスシミュレーション */

#sim table {
    width: 100%;
}
table.price th.col_1,
#sim table.price td.col_2 {
    width: auto;
}

#sim .step {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#sim .step img {
    float: none;
}
#sim .item {
    float: none;
    width: auto;
    flex: 1;
    margin-left: 1.5em;
}
#sim .child .left,
#sim .child .right {
    float: none;
    width: auto;
}
#sim .child,
.basic .child  {
    display: flex;
    gap: 2.5em;
}
#sim .child .left,
.basic .child .left {
    flex: 1;
}
#sim .child .right,
.basic .child .right {
    flex: 2;
}
#sim .postscript {
    margin: 0 0 30px 0;
}
.select-wrapper {
    display: flex;
    align-items: center;
    gap: 1em;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0.5em 2em 0.5em 0.8em;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    line-height: 1.5; 
}
.select-wrapper div {
    position: relative; 
    display: flex;
    gap: 1em;
    align-items: center;
}
#sim .child .box,
.basic .child .box {
    position: relative; 
}
.select-wrapper div:after,
#sim .child .box:after,
.row .select-wrapper div:after,
.basic .child .box:after {
    content: "";
    position: absolute;
    top: 12px;
    right: 36px;
    width: 5px;
    height: 5px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
}
.select-wrapper div.from:after {
    content: none;
}
.select-wrapper select:focus {
    border-color: #007bff;
    outline: none;
}
#sim .child select,
.basic .child select {
    width: 100%;
}
#sim .child .box:after,
.basic .child .box:after {
    top: 23px;
    right: 18px;
}
.row select {
    width: auto;
}
.row .select-wrapper div:after {
    right: 7px;
}
.important {
    margin-top: 0.5em;
}


/* シミュレーション結果画面 */

#sim .submit_area {
    margin: 1em 0;
}
#sim .submit_area .submit {
    padding: 2em;
}
#sim .submit_area .submit p {
    line-height: 1.8;
    text-align: center;
    margin: 0;
}


/* ご予約手続き */

#reservation .bukken {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}
#reservation .bukken .color_area {
    width: 740px;
    background-color: #FFFFB4;
    padding: 10px 0;
}
#reservation .bukken dt {
    clear: both;
    float: left;
    line-height: 130%;
    padding-left: 15px;
    background: url("../sec/reservation2/pic/icon.gif") left 4px no-repeat;
    width: 140px;
    position: relative;
}
#reservation .bukken .color_area dl {
    margin: 0 10px;
}
#reservation .bukken dd {
    line-height: 130%;
    float: left;
    width: 500px;
    padding-left: 3px;
}
#reservation .bukken dt span {
    position: absolute;
    right: 20px;
    top: 0px;
    color: #000;
}
#reservation .bukken .back_area {
    margin-left: 2em;
}
#reservation .bukken dt,
#reservation .bukken dd {
    margin: 0.3em 0;
}
#reservation .last {
    border-bottom: 1px solid #EACD9B;
}
#reservation table {
    max-width: 960px;
    width: 100%;
    padding: 0;
    border-spacing: 0;
    border: 1px solid #EACD9B;
    margin: 1em 0;
}
#reservation table td {
    vertical-align: top;
    padding: 0.5em;
}
#reservation table td.cream {
    background-color: #ffc;
    width: 100px;
    border-right: 1px solid #EACD9B;
    border-spacing: 0;
}
.item-sell {
    display: flex;
    margin-bottom: 1em;
}
.item-sell .left_sell_1,
.item-sell .right_sell_1 {
    display: flex;
}
.item-sell .right_sell_1 {
    margin-left: 2em;
    gap: 1em;
}
.item-sell .left_sell_1 p {
    width: 105px;
}
#reservation .cation {
    color: #f00;
    margin-bottom: 10px;
}
.item-two div {
    display: flex;
    gap: 0.5em;
}
p.notes {
    margin: 0.3em 0;
}
.copy-btn {
    margin-bottom: 2em;
}
p.zip,
p.mail1 {
   margin-bottom: 1em;
}
#reservation table p.notice {
    margin-bottom: 10px;
    color: #f00;
}
table .wrap {
    display: flex;
}
.colspan {
    margin-bottom: 1em;
}
.checkbox_area ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.checkbox_area ul li {
    display: flex;
    gap: 0.3em;
    margin-bottom: 0.5em;
}
.textarea {
    width: 100%;
}
.center {
    margin: 3em auto 4em;
    text-align: center;
}
.center input[type="button"] {
    margin-right: 3em;
}

/* 確認画面 */
#reservation table.confirm td {
    padding: 10px;
    border-bottom: 1px solid #EACD9B;
    vertical-align: middle;
}
#reservation table.confirm tr:last-child td {
    border-bottom: none;
}
#reservation table.confirm td.cream {
    width: 110px;
    vertical-align: top;
}
#reservation table.ryoukin td.w_nbsp1 {
    border-right: 2px dotted #EACD9B;
    width: 20px;
}
#reservation table.ryoukin td.sum {
    font-size: 15px;
    font-weight: bold;
    color: #c00;
    padding-bottom: 10px;
}
.fee-wrap {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #EACD9B;
}
.fee-wrap div p {
    margin-bottom: 1em;
}
.fee-wrap .option {
    border-left: 2px dotted #EACD9B;
    padding-left: 1em;
}
.totle {
    display: flex;
    justify-content: flex-end;
    padding: 1em 2em 0;
    text-align: right;
    gap: 2em;
}
.totle div p {
    font-size: 15px;
    font-weight: bold;
    color: #c00;
    padding-bottom: 10px;
    line-height: 1.8;
}
table.confirm .item-sell {
    gap: 2em;
}
table.confirm .item-sell .left_sell_1,
table.confirm .item-sell .right_sell_1 {
    flex: 1;
    gap: 2em;
}

table.confirm .item-sell .left_sell_1 p {
    width: auto;
}
.pay {
    text-align: right;
    padding-right: 1em;
}
.fee,
.option-wrap {
    display: flex;
    width: 50%;
    justify-content: space-between;
}
.border {
    border-bottom: 1px solid #EACD9B;
    padding-bottom: 1em;
}
table.confirm .border .right_sell_1 {
    border-left: 2px dotted #EACD9B;
    margin-left: 0;
    padding-left: 1em;
}
table.confirm .border:last-of-type {
    padding-bottom: 0;
} 
table.confirm .item-sell:last-of-type {
    margin-bottom: 0;
}
#reservation .yakkan .scroll {
    overflow: scroll;
    max-width: 960px;
    height: 250px;
    border: 1px solid #ccc;
    background-color: #E8FAFA;
}
#reservation .yakkan .scroll .scroll_area {
    padding: 10px;
    line-height: 130%;
}
#reservation .doui {
    text-align: center;
    margin-top: 10px;
}
#reservation .doui input {
    vertical-align: middle;
}

#reservation .important {
    width: 335px;
    height: 190px;
    background: url("../sec/reservation2/pic/roma_confirm.gif") left top no-repeat;
    margin-top: 0;
    order: 2;
}
#reservation .important p {
    width: 249px;
    padding-top: 57px;
    padding-left: 35px;
}
#reservation .roma {
    max-width: 631px;
}
.important-box {
    display: flex;
}
.yakkan {
    margin-top: 2em;
}
.w_700 br {
   display: none;
}
#reservation .ok {
    max-width: 900px;
    display: flex;
    margin: 2em auto 13em;
}
#reservation .ok .wrap_left,
#reservation .ok .wrap_right {
    width: 50%;
    background: #FFFFB4;
}
#reservation .ok .wrap_right {
    position: relative;
}
#reservation .ok p.not_yet {
    width: 200px;
    font-size: 14px;
    padding-top: 4em;
    padding-left: 0.3em;
}
#reservation .ok p {
    text-align:left;
    font-size:17px;
    margin-left:30px;
}
#reservation .ok p.receive {
    color:#FF550A;
    padding-top:40px;
    font-weight:bold;
    font-size:19px;
}
#reservation .ok p.send {
    padding-top:30px;
}
#reservation .ok p.thanks {
    padding-top:30px;
}
.right-bg {
    margin-top: 40px;
    margin-left: 30px;
    background: url("../sec/reservation2/pic/roma_ok.gif") no-repeat;
    height: 231px;
}

/* 物件詳細画面 */

.containerInner {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 0.5em;
    margin-bottom: 2em;
}
.arrows {
    display: none;
}
#plan #detail table.basic th.col_1 {
   width: 110px;
}
.select-wrapper div.end:after {
    content: none;
}
.detail-wrap .info {
    display: flex;
    align-items: flex-start;
}
#plan #detail table.basic,
#plan .side,
#plan #detail .notes,
#plan #detail .child .left,
#plan #detail .child .right,
#plan #detail .child .inputarea select {
    float: none;
}
#plan .side {
    margin-left: 1em;
}
#plan #detail .notes {
    margin-left: 2em;
}
#plan #detail .child select {
    width: 100%;
}
#plan #detail .child .left,
#plan #detail .child .right {
    width: auto;
}
#plan .photo_group {
    gap: 3em;
}
#plan .photo_group li {
    width: auto;
}
#plan #detail .madori {
    float: none;
    padding: 2em 0.5em 0.5em;
}
#plan .side .madori .inner {
    margin: 0 auto;
}
#plan .side .button a {
    margin-left: 0;
}
#price table {
    width: 100%;
}
table.price th.col_1_1 {
    width: auto;
}
.plan-list-btn {
    margin: 4em auto 7em;
    text-align: center;
}


.printarea {
    min-width: unset;
    max-width: 960px;
    width: 100%;
}
#price table.car th,
#price table.car td {
    width: auto;
}


/* =======================================
   FOOTER
======================================= */

.footer {
    background-color: #8ABF1F;
    padding: 2em 1em 1em;
    color: #fff;
    margin-top: 3em;
}
.footer h1 {
    text-align: center;
    margin: 1em 0;
}
.footer-info {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.footer-info p {
    margin: 0;
    text-align: left;
    color: #fff;
}
.footer-tel {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
}
.footer-tel:before {
  content: "";
  margin-left: 10px;
  padding-left: 30px;
  background-image: url("../img/footer_tel_icon.png");
  background-repeat: no-repeat;
  background-position: left center;
  font-weight: bold;
}
#bottom {
    padding-bottom: 4em;
    text-align: center;
}

@media screen and (min-width: 1221px) {
table.companyuBox {
    margin-left: 107px;
}
}



@media screen and (max-width: 1270px) {
.menu-wrap {
    display: none;
}
.sp-header {
    display: block;
}
.hamburger {
  display : block;
  position: fixed;
  z-index : 200;
  right : 13px;
  top   : 17px;
  width : 50px;
  height: 50px;
  cursor: pointer;
  text-align: center;
    background-color: #000;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 3px ;
  left    : 10px;
  background : #fff;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition   : 0.5s ease-in-out;
  transition        : 0.5s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 8px;
}
.hamburger span:nth-child(2) {
  top: 17px;
}
.hamburger span:nth-child(3) {
  top: 26px;
}
.hamburger span:nth-child(4) {
    background: transparent;
    top: 32px;
    color: #fff;
    left: 7px;
    font-size: 0.8em;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 17px;
  left: 9px;
  -webkit-transform: rotate(315deg);
  -moz-transform   : rotate(315deg);
  transform        : rotate(315deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 17px;
  -webkit-transform: rotate(-315deg);
  -moz-transform   : rotate(-315deg);
  transform        : rotate(-315deg);
}

.globalMenuSp {
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
    z-index: 100;
}

.globalMenuSp ul {
  margin: 0 auto;
  padding: 0 0 1em;
  width: 100%;
}

.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
    border-bottom: solid 1px #204385;
   margin: 0.5em 0;
   padding: 0.5em 0;
}
.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.globalMenuSp ul li:hover{

}

.globalMenuSp ul li a {
  display: block;
  color: #000;
  padding: 0.5em 0;
  text-decoration :none;
}
.globalMenuSp.active {
    opacity: 1;
    visibility: visible;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.globalMenuSp nav {
    position: relative;
    text-align: center;
    height: 100%;
    padding-top: 3em;
}
.top-info-area {
    padding: 0 1em;
}
.top-info-box {
    max-width: 100%;
}
.info-txt-box {
    height: 330px;
}
.sub-menu ul {
    width: 100%;
}

}
@media screen and (max-width: 1199px) {
.container {
   padding: 100px 0.5em 0;
}
}
@media screen and (max-width: 1073px) {
#sim .total {
    text-align: left;
}
#sim .print {
    text-align: center;
    margin-bottom: 2em;
}
#sim .print input[type="button"],
#sim .back input[type="button"] {
    display: block;
    margin: 0 auto;
}

}
@media screen and (max-width: 1024px) {
.top-info-area {
    align-items: unset;
}
.sub-menu ul li:first-child {
    margin: 0 1em 1.5em;
}
}
@media screen and (max-width: 834px) {
.detail-wrap .select-wrapper {
    flex-wrap: wrap;
}
.select-wrapper div.from,
.detail-wrap .select-wrapper div.from {
    width: 100%;
}
}

@media screen and (max-width: 768px) {
header {
    height: 80px;
}

.footer-info {
    flex-wrap: wrap;
}
.footer-tel {
    margin-top: 0.5em;
    color: #fff;
    text-align: left;
}
.footer-tel a {
    color: #fff;
}
.footer-tel:before {
    margin-left: 0;
    padding-left: 0;
    width: 24px;
    display: inline-block;
    height: 24px;
    vertical-align: middle;
    margin-right: 0.3em;
}
.plan_box ul {
    flex-wrap: wrap;
}
#plan .bukken_block {
    flex-wrap: wrap;
}
#plan .bukken_block .button_area {
    width: 100%;
    display: flex;
    gap: 2em;
    justify-content: center;
    margin: 2em auto;
}
#plan .button_area a {
    text-indent: 0;
}
#plan .button_area a.sim,
#plan .button_area a.reserve {
    width: unset;
    height: auto;
    padding: 1em;
    color: #fff;
    font-weight: bold;
    border-radius: 15px;
    font-size: 1.1rem;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
#plan .button_area a.sim {
    background: #00A292;
    background: linear-gradient(180deg,rgba(0, 162, 146, 1) 0%, rgba(0, 125, 103, 1) 100%);
}
#plan .button_area a.sim:hover {
    background: #00E1C3;
    background: linear-gradient(180deg, rgba(0, 225, 195, 1) 0%, rgba(0, 201, 146, 1) 100%);
}
#plan .button_area a.reserve {
    background: #0097C8;
    background: linear-gradient(180deg,rgba(0, 151, 200, 1) 0%, rgba(0, 68, 152, 1) 100%);
}
#plan .button_area a.reserve:hover {
    background: #00E0F4;
    background: linear-gradient(180deg, rgba(0, 224, 244, 1) 0%, rgba(0, 165, 227, 1) 100%);
}
#reservation .bukken {
    flex-wrap: wrap;
    justify-content: center;
}
#reservation .bukken dd {
    width: auto;
}
#reservation .bukken .back_area {
    margin-left: 0;
    margin-top: 2em;
}
#reservation table td {
    display: block;
    width: 100%;
}
#reservation table td.cream {
    border-bottom: 1px solid #EACD9B;
    width: 100%;
    border-right: none;
}
.item-sell .right_sell_1 {
    margin-left: 0.5em;
}
#reservation table td.cream span br {
    display: none;
}
#reservation table.confirm td.cream {
    width: 100%;
    border-bottom: 1px solid #EACD9B;
}
.basic .child {
    flex-wrap: wrap;
    gap: 1em;
}
.basic .child .left,
.basic .child .right {
    flex: none;
}
table.price th.col_1_1 {
    width: 90px;
}
table.price td.col_2 {
    width: 150px;
}
}

@media screen and (max-width: 600px) {
header {
    height: 71px;
}
header h1 {
    width: 70%;
}
.hamburger {
    top: 10px;
}
.header-wrap {
    padding: 0.5em;
}
header h1 img.sp-img {
    display: block;
}
header h1 img.pc-img {
    display: none;
}
.container {
    padding: 70px 0.5em 0;
}
.top-info-area {
    display: block;
    padding: 0 1em;
}

.top-info-area {
    margin: 1em auto;
}
.top-info-box {
    margin-right: 0;
}
.info-txt-box {
    height: 150px;
}
.sub-menu {
    margin-top: 2em;
    width: 100%;
}
.sub-menu ul {
    justify-content: center;
}
.sub-menu ul li {
    margin: 0 0.5em 1em;
}
.side_menu-wrap {
    display: none;
}
.footer-bunner {
    flex-wrap: wrap;
}
#bottom {
    padding-bottom: 4em;
}
.footer-info {
     justify-content: flex-start;
}
.voice-wrap {
    gap: 0;
    flex-wrap: wrap;
}
.pc-img {
    display: none;    
}
.sp-titile {
    display: block;
    font-size: 18px;
    line-height: 20px;
    color: #fff;
    font-weight: bold;
    background-color: #FF550A;
    padding: 5px 10px;
    margin: 10px 0;    
}
.user-box {
    display: block;
}
.question {
   align-items: flex-start;
}
.answer {
    display: block;
}
.answer p.flame br {
    display: block;
}
.answer-txt {
    padding: 0.5em;
}
.answer div table td.w_10em {
    width: auto;
    padding: 5px;
}
.answer div table td {
    display: block;
}
.answer div table td:nth-child(2) {
    display: none;
}
.answer div table td:nth-child(3) {
    border-bottom: 1px solid #FF550A;
    padding: 0 5px 5px
}
.answer div table tr:last-child td:nth-child(3) {
    border-bottom: none;
}
.wrapper {
    padding-bottom: 2em;
}
table.price,
table.price th.col_1_1,
table.price th.room_type,
table.price td.col_2,
table.price td.col_3,
#price table.option,
#price table.option th,
#price table.option td {
    width: 100%;
}

table thead {
    display: none;
}
table.price td:before {
    content: attr(label);
     color: #FF550A;
}
#price table td, 
#price table th,
#sim table td, 
#sim table th {
    display: block;
    padding: 10px;
}
table.price td {
    border-left: none;
     border-right: none;
}
table.price th.col_1_1 {
    font-size: 1.1rem;
    font-weight: bold;
}
#price table th a {
    margin-left: 1em;
}
#price a.sim {
    background: #00A292;
    background: linear-gradient(180deg,rgba(0, 162, 146, 1) 0%, rgba(0, 125, 103, 1) 100%);
    width: 100%;
    height: auto;
    display: block;
    text-indent: 0;
    color: #fff;
    border-radius: 15px;
    padding: 0.5em;
    font-weight: bold;
}
#price a.sim:hover {
    background: #3C9483;
}
#price table.option th p br,
#price table th br {
    display: none;
}
#price table.option th p {
    float: none;
}
#price table.option td {
    text-align: left;
}
#plan .bukken_block {
    justify-content: center;
}
#plan h2.index span.sp {
    display: block;
    margin-left: 0;
    margin-top: 0.5em;
}
#plan h2.index span.sp span {
    display: none;    
}
#plan .bukken_block .photo {
    flex: 1;
}
#plan .bukken_block .info {
    flex: 2;
}
#plan .bukken_block .photo .nyukyo {
    background: transparent;
    text-indent: 0;
}
#plan .bukken_block .photo .nyukyo:before {
    content: url("../plan/pic/nyukyo.gif");
    width: 60px;
    height: 17px;
    display: block;
}
#menu a, 
#menu p {
    margin: 0 auto 1em;
    float: none;
}
#plan .bukken_block .button_area {
   flex-wrap: wrap;
   gap: 1.5em;
}
#plan .button_area a.sim, 
#plan .button_area a.reserve {
    width: 95%;
    text-align: center;
    padding: 0.5em 1em;
}
#sim .step {
    display: block;
}
#sim .item {
    margin-left: 0;
    padding: 0.5em 0.5em 1em;
}
.select-wrapper {
    flex-wrap: wrap;
    margin: 0.5em 0;
}
select {
    font-size: 1.1rem;
}
.select-wrapper div:after {
    top: 17px;
    right: 38px;
}
#sim .child {
    display: block;
}
.row .select-wrapper div:after {
    top: 16px;
}
#sim table.result th.col_1,
#sim table.result td.col_2,
#sim table.result td.col_3 {
    width: 100%;
    border-bottom: none;
}
#sim table.result th.col_1,
#sim table.result td.col_3 {
    border-left: none;
    border-right: none;
}
#sim table.option th.col_1 {
    border-left: 1px solid #EACD9B;
    border-right: 1px solid #EACD9B;
}
#sim table.result tr:last-child td.col_2:last-child {
    border-bottom: 1px solid #EACD9B;
}
#sim .total span.block,
#sim .total .label {
    display: block;
}
#sim table.option td,
#sim .submit_area .submit p {
    text-align: left;
}
.item-sell,
.item-sell .left_sell_1,
.item-sell .right_sell_1,
table .wrap {
    display: block;
}
input[type="text"] {
    width: 100%;
}
input[type="text"] {
    padding: 0.5em 0.3em;
}
.item-sell .right_sell_1 {
    margin-left: 0;
}
.right_sell p.date {
    display: flex;
    gap: 0.5em;
}
.checkbox_area ul li {
    flex-wrap: wrap;
}
.copy-btn input[type="button"] {
    padding: 0.5em;
}

table.confirm .border .right_sell_1 {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
    margin-top: 1em;
}
#reservation .important {
    order: unset;
    margin-bottom: 1em;
}
.fee-wrap {
    flex-wrap: wrap;
}
.fee, 
.option-wrap {
    width: 100%;
}
.fee-wrap .option {
    border-left: none;
    padding-left: 0;
}
.pay {
    padding-right: 0;
}
.totle {
    padding: 1em 0 0;
}
.important-box {
    flex-wrap: wrap;
}
.w_700 br {
   display: block;
}
#reservation .ok {
    flex-wrap: wrap;
}
#reservation .ok .wrap_left, 
#reservation .ok .wrap_right {
    width: 100%;
}
#plan h2.index span.dot {
    display: none;
}
#plan h2.index span.key_color {
    display: block;
    margin-top: 0.5em;
    margin-left: 0;
}
.detail-wrap .info {
    display: block;
}
#plan #detail table.basic {
    width: 100%;
}
#plan table.basic th,
#plan table.basic td,
#plan #detail table.basic th.col_1,
#plan #detail table.price_list th,
#plan #detail table.price_list td {
    width: 100%;
    display: block;
}
#plan #detail table.basic th.col_1,
#plan #detail td.col_3 {
    border-bottom: none;
}
#plan #detail tr:last-child td.col_3 {
    border-bottom: 1px solid #EACD9B;
}
#plan #detail .madori {
    margin: 0 auto;
}
#plan .button a.sim,
#plan .button a.reserve {
     text-indent: 0;
     display: block;
    height: auto;
    color: #fff;
    font-weight: bold;
    border-radius: 15px;
    font-size: 1.1rem;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    width: 95%;
    text-align: center;
    padding: 0.5em 1em;
}
#plan .button a.sim {
    background: #00A292;
    background: linear-gradient(180deg,rgba(0, 162, 146, 1) 0%, rgba(0, 125, 103, 1) 100%);
    margin-bottom: 1em;
}
#plan .button a.sim:hover {
    background: #00E1C3;
    background: linear-gradient(180deg, rgba(0, 225, 195, 1) 0%, rgba(0, 201, 146, 1) 100%);
}
#plan .button a.reserve {
    background: #0097C8;
    background: linear-gradient(180deg,rgba(0, 151, 200, 1) 0%, rgba(0, 68, 152, 1) 100%);
}
#plan .button a.reserve:hover {
    background: #00E0F4;
    background: linear-gradient(180deg, rgba(0, 224, 244, 1) 0%, rgba(0, 165, 227, 1) 100%);
}
.containerInner {
    display: block;
    width: 80%;
    height: 80%;
    margin: auto;
}
.containerInner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slick-prev:before,
.slick-next:before {
  color: black;
}
.slick-dots li button:before {
  font-size: 18px;
  top: 6px;
}
.yourElement {
    margin-bottom: 5em;
}
#plan #detail .notes {
    margin-left: 0;
}
#plan .photo_group {
    margin: 0 1em;
    gap: 2em;
}
#plan .photo_group li,
#plan .photo_group li:nth-child(4n) {
    width: calc(90%/ 2);
}
#plan .photo_group li p {
    width: auto;
}
#plan #detail a.gmap_view {
    float: none;
}
.select-wrapper div.end,
#plan #detail table.input_area td {
    width: 100%;
}
#plan #detail table.input_area th.col_1 br {
    display: none;
}
.sp-titile-in {
    display: block;
}
#plan #detail .child .left, 
#plan #detail .child .right {
    width: 100%;
}
}



@media print {
header,
.footer,
.side_menu-wrap,
#bottom {
    display: none;    
}
}