@charset "UTF-8"; /*========================================================== 予約フォーム ==========================================================*/ #reserveArea { width:98%; max-width: 1200px; min-width: 900px; margin-left: auto; margin-right: auto; margin-top: 30px; position: relative; height:auto; font-size: clamp(0.813rem, 0.1rem + 1.2vw, 1rem);/*(13-16 950-1200)*/ background: #F7F4EE; outline: 4px double #F7F4EE; font-family: 'Noto Sans JP', serif; } #reserveinner{ width: 100%; min-width: 900px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; } @media only screen and ( max-width : 600px ) {/*スマホ用*/ #reserveArea { width: 90%; min-width: 0px; margin-top: 10px; margin-bottom: 20px; background: #251f45; outline: 4px double #251f45; color: #FFF; } #reserveinner{ min-width: 0; flex-direction: column !important; padding: 30px 10px 20px 10px; } } /*宿泊タイトル*/ #reserveinner h3{ margin-right: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 5px; font-size: clamp(1.563rem, 0.375rem + 2vw, 1.875rem);/*サイズ25px-30px/950px-1200px*/ text-align: center; border-right: 1px solid #E9E1D2; order: 1; font-family: 'Noto Serif JP', serif !important; line-height: clamp(1.563rem, 0.375rem + 2vw, 1.875rem);/*サイズ25px-30px/950px-1200px*/; flex-shrink: 1; } #reserveinner h3:last-of-type{ display: none; } #reserveinner .eng{ font-size: clamp(0.938rem, 0.716rem + 0.55vw, 1.125rem);/*サイズ15px-18px/650px-1200px*/ color: #bfbfbf; } @media only screen and ( max-width : 600px ) {/*スマホ用*/ #reserveinner h3{ margin-right: 0px; padding-right: 0px; padding-top: 0px; margin-bottom: 20px; padding-bottom: 10px; border-right: 0px solid #E9E1D2; border-bottom: 1px solid #E9E1D2; } #reserveinner h3:first-of-type{ display: none; } #reserveinner h3:last-of-type{ display: block; } #reserveinner .eng{ line-height: 2em; } } /*宿泊フォーム*/ #reserve_section { order: 2; margin-right: 30px; width: auto; flex-shrink: 3; } #reserveinner .reserve { padding-bottom: 15px; margin-bottom: 15px; width: 100%; display: flex; justify-content: space-between; align-items: stretch; border-bottom: 1px solid #E9E1D2; } @media only screen and ( max-width : 600px ) {/*スマホ用*/ #reserve_section { order: 4; margin-right: 0px; } #reserveinner .reserve { display: none; } } #nitteiArea{ margin-right: 10px!important; padding-right: 10px!important; border-right: 1px solid #E9E1D2; } #nitteiArea input[type=text], #nitteiArea2 select{ width: clamp(3.125rem, -1.625rem + 8vw, 4.375rem);/*サイズ50px-70px/950px-1200px*/ } #nitteiArea2{ margin-right: 10px; padding-right: 10px; border-right: 1px solid #E9E1D2; } #ninzuArea{ } #reserveinner .reservebtn{ } .br_input{display: none;} @media only screen and ( max-width : 1500px ) { .br_input{display: block;} } @media only screen and ( max-width : 600px ) {/*スマホ用*/ #reserveinner .reservebtn{ display: none; } } #reserveinner input{ /*width: 20%;*/ height: 30px; padding:4px 10px; border-radius: 4px; border:solid 1px #ccc; margin: 0 10px; font-size: clamp(0.813rem, 0.1rem + 1.2vw, 1rem);/*(13-16 950-1200)*/ } #reserveinner select { max-width: 100%; /*min-width: 10%;*/ height: 30px; padding:0 10px; border-radius: 4px; border:solid 1px #ccc; margin: 0 10px; background-color: #FFFFFF; font-size: clamp(0.813rem, 0.1rem + 1.2vw, 1rem);/*(13-16 950-1200)*/ } /*input.cmbARRY { width: 10em !important; }*/ /*会員*/ #member{ order: 2; } #member ul{ display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; font-size: clamp(0.813rem, 0.1rem + 1.2vw, 1rem);/*(13-16 950-1200)*/ } #member ul li{ margin-right: 20px; font-size: 14px; } #member ul li:last-child{ margin-right: 0px; } #member ul li::before{ font-family: "Font Awesome 5 Free"; content: '\f0da'; font-weight: 900; padding-right: 5px; font-size: 10px; color: #a69065; } #member ul li:hover a{ text-decoration: underline; } @media only screen and ( max-width : 600px ) {/*スマホ用*/ #member ul{ flex-wrap: wrap; justify-content: center; margin-bottom: 20px; } #member ul li{ margin-right: 15px; } #member ul li:first-child{ width: 100%; margin-right: 0px; margin-bottom: 5px; text-align: center; } #member ul li:last-child{ margin-bottom: 0px; } #member ul li a:link { color:#FFFFFF; } #member ul li a:visited { color: #FFFFFF; } #member ul li a:hover { color: #FFFFFF;} #member ul li a:active { color: #FFFFFF; } } /*予約ボタン*/ button { background: none; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0px; } #reserveinner .sideBtn_section{ order: 2; width: 100%; max-width: 200px; min-width: 120px; flex-shrink: 1; } #reserveinner .sideBtn_section .sideBtn { width: 100%; min-width: 0px; text-decoration: none!important; color: white; line-height: 1; text-align: center; transition: .4s; border: none; cursor: pointer; font-family: 'Noto Serif JP', serif !important; } #reserveinner .sideBtn_section .sideBtn:first-child{ background-color: #251f45; background-image: url(../../img/search.svg); outline: double 4px #251f45; margin-bottom: 15px; padding: 15px 5px 15px 12%; font-size: clamp(0.813rem, 0.1rem + 1.2vw, 1rem);/*(13-16 950-1200)*/ background-size: 8% auto; background-repeat: no-repeat; background-position: 10% center; } #reserveinner .sideBtn_section .sideBtn a { display: block; background: #998048; color: #FFF!important; transition: .4s; outline: double 4px #998048; padding: 15px 5px; } #reserveinner .sideBtn_section .sideBtn a:hover { background: #A88D4F; } #reserveinner .sideBtn_section .sideBtn:first-child:hover { background-color: #3e327c; color: white; } @media only screen and ( max-width : 600px ) {/*スマホ用*/ #reserveinner .sideBtn_section{max-width: 80%;} #reserveinner .sideBtn_section li:first-child{display: none;} #reserveinner .sideBtn_section .sideBtn{margin-bottom: 20px;} #reserveinner .sideBtn_section .sideBtn a { display: block; background: #a69065; color: #FFF!important; outline: none; font-size: 16px; outline: double 4px #998048; } #reserveinner .sideBtn_section .sideBtn a:link { color:#FFFFFF; text-decoration:none; } #reserveinner .sideBtn_section .sideBtn a:visited { color: #FFFFFF; text-decoration:none; } #reserveinner .sideBtn_section .sideBtn a:hover { color: #FFFFFF; text-decoration:none; background-color: #ad9152!important;} #reserveinner .sideBtn_section .sideBtn a:active { color: #FFFFFF; text-decoration:none; } }