/*
Last Updated: 2022-11-14
Author: order-office
*/
article{
font-family:'貂ｸ繧ｴ繧ｷ繝�け菴�', 'Yu Gothic', YuGothic,'繝｡繧､繝ｪ繧ｪ',Meiryo,'繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3','Hiragino Kaku Gothic Pro','�ｭ�ｳ 繧ｴ繧ｷ繝�け',sans-serif;
color: #221815;
}
.yugo{
font-family:'貂ｸ繧ｴ繧ｷ繝�け菴�', 'Yu Gothic', YuGothic,'繝｡繧､繝ｪ繧ｪ',Meiryo,'繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3','Hiragino Kaku Gothic Pro','�ｭ�ｳ 繧ｴ繧ｷ繝�け',sans-serif;
}
.yumin{
font-family:'貂ｸ譏取悃菴�','Yu Mincho','繝偵Λ繧ｮ繝取�譛� Pro W3', 'Hiragino Mincho Pro','�ｭ�ｳ �ｰ譏取悃','�ｭ�ｳ 譏取悃','Sawarabi Mincho',serif;
}
.meiryo{
font-family:'繝｡繧､繝ｪ繧ｪ',Meiryo,'繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3','Hiragino Kaku Gothic Pro','�ｭ�ｳ 繧ｴ繧ｷ繝�け',sans-serif;
}
.text_right{ text-align: right; }
@media print, screen and (max-width: 599px){
.text_right{
text-align: left;
}
}
/*----------------------------------------
繝ｬ繧､繧｢繧ｦ繝�
----------------------------------------*/
.pagenavi {
background-color: #24282f;
color: #d9d6d2;
line-height:2.5;
font-size:1rem;
}
.pagenavi a{
color: #d9d6d2;
}
.text_brown{
color:#5d3d2f;
}
@media print, screen and (min-width: 1030px){
.inner_frame {
width: 990px;
margin-right: auto;
margin-left: auto;
}
}
.mv{
position:relative;
}
.mv_copy{
position:absolute;
top:50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
}
.mv_copy img{
max-width:885px;
}
.mv_deco01{
position:absolute;
top:0;
left:0;
width:100%;
}
.mv_deco02{
position:absolute;
bottom:0;
left:0;
width:100%;
}
.over_h{
overflow:visible;
position:relative;
}
.c_box_left{
width:85%;
max-width:526px;
float:left;
padding-right:10px;
padding-left:10px;
}
.c_box_right{
width:85%;
max-width:526px;
float:right;
padding-right:10px;
padding-left:10px;
}
.border_b{
border-bottom:1px solid #eeeeee;
}
.photo_area {
width: 20%;
float: left;
}
.photo_frame {
position: relative;
overflow: hidden;
background: #eee;
width: 100%;
height: 100%;
padding: 75% 0 0;
}
.photo_frame img {
width: 100%;
height: auto !important;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.entry_data {
float: right;
width: 76.5%;
}
aside .inner{
width:85%;
margin:0 auto;
max-width:402px;
}
.foot_bg_tel{
background:url(./images/foot_tel_bg.jpg) center top / cover no-repeat;
}
.foot_bg_mail{
background:url(./images/foot_mail_bg.jpg) center top / cover no-repeat;
}
.foot_bg_tel,.foot_bg_mail{
max-height:250px;
min-height:212px;
}
.f_tex_area{
background:#fff;
text-align:center;
padding:3px 10px;
}
.btn_tya{
background:#bbad83;
text-align:center;
padding:12px;
}
.bg_gray{
background:#eeeeee;
position:relative;
}
#top_info{ clear:both; }
.copy{ background: #01579a; }
table{
width: 100%;
max-width: 563px;
margin: 0 auto;
line-height: 1.8;
font-size: 1.6rem;
color: #000;
}
th,
td{
font-weight: normal;
padding: 12px 10px 12px 0;
text-align: left;
box-sizing: border-box;
border: #000 1px solid;
color: #000;
}
th{
width: 32%;
padding-left: 10px;
border-left: none;
white-space: nowrap;
/*
text-align-last: justify��
*/
}
td{
padding-left: 7%;
border-right: none;
}
.main_frame{
max-width: 1350px;
margin-left: auto;
margin-right: auto;
position: relative;
}
@media screen and (max-width: 768px){
.main_frame{
padding-left: 3.5%;
padding-right: 3.5%;
}
}
@media screen and (max-width: 479px){
.main_frame{
padding-left: 3.2%;
padding-right: 3.2%;
}
}
@media screen and (max-width: 599px){
th{
width: 30%;
}
}
@media screen and (max-width: 399px){
table{
font-size: 1.4rem;
}
th{
width: 36%;
}
}
@media print, screen and (min-width: 769px) {
.pc_inner{
float: left;
width: 63.05%;
box-sizing: border-box;
padding: 18px 15px 0 18px;
}
.pc_img{
float: right;
width: 36.95%;
}
}/*END*/
@media screen and (max-width: 1199px){
.box_l35,.box_r65,.box_r35,.box_l65{
width:100%; /* 繧ｳ繝ｳ繧ｻ繝励ヨ繝壹�繧ｸ縲荳区ｮｵBox */
}
.pagenavi{
padding-left: 3%;
}
.c_box_right{
width:94%;
float:none;
padding-right:4%;
padding-left:4%;
margin: 0 auto;
}
.c_box_left{
width:94%;
float:none;
padding-right:4%;
padding-left:4%;
margin: 0 auto;
}
}/*END*/
@media screen and (max-width: 768px){
.pc_inner{ padding: 15px 4%; }
.pc_img{
display: block;
margin-right: auto;
margin-left: auto;
width: 40%;
}
.contact a{
display: block;
text-align: center;
width: 70%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
.mv_copy {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin-left: 0;
width: 65%;
}
/*
.top .mv{
height: 450px;
}
*/
.mv_copy img {
max-width:100%;
}
.c_box_right{
width:auto;
float:none;
padding-right:4%;
padding-left:4%;
}
.c_box_left{
width:auto;
float:none;
padding-right:4%;
padding-left:4%;
}
.page_mv_area{
margin-right:1.3%;
margin-left:1.3%;
margin-top:-85px !important;
height:200px;
width: 97.4%;
box-sizing: border-box;
}
}/*END*/
@media screen and (max-width: 478px){
.pagenavi {
background-color: #24282e;
color: #505153;
line-height: 2.5;
font-size: 1rem;
}
.pagenavi a{
color: #505153;
}
.c_box_left{
padding-right: 3.6%;
padding-left: 3.6%;
}
.c_box_right{
padding-right: 3.6%;
padding-left: 3.6%;
}
.sp_left{
text-align: left;
}
}/*END*/
@media screen and (max-width: 478px) and (min-width: 401px) {
}/*END*/
@media screen and (max-width: 479px){
.copy_pc{ display: none; }
.contact a{ width: 100%; }
/*
th,td{
display: block;
}
*/
th{
padding: 8px 2% 0 2%;
font-weight: normal;
}
td{ padding: 2% 2% 8px 2%; }
.mv_copy {
left: 50%;
width: 76%;
}
.foot_bg_tel, .foot_bg_mail {
max-height: 250px;
min-height: 100px;
}
}/*END*/
/*----------------------------------------
list box
----------------------------------------*/
.list_two,
.list_three{
margin-left:-2%;
}
.list_four{
margin-left: -1.85%;
}
.list_two li,
.list_three li,
.list_four li{
position: relative;
float: left;
margin-bottom: 20px;
box-sizing: border-box;
margin-left:2%;
}
.list_two li{ width: 48%; }
.list_four li{
width: 23.14%;
margin-left: 1.85%;
}
@media print, screen and (min-width: 769px) {
.list_three li{ width: 31.3%; }
.list_two li:nth-child(2n+1),
.list_three li:nth-child(3n+1),
.list_four li:nth-child(4n+1){ clear: both; }
}/*END*/
@media screen and (max-width: 768px){
.list_three li{ width: 48%; }
.list_two li:nth-child(2n+1),
.list_three li:nth-child(2n+1),
.list_four---- li:nth-child(2n+1){ clear: both; }
.list_four li{
width: 48%;
margin-bottom: 20px;
}
.list_four li:nth-child(3n+1){ clear: both !important; } /* SP3繧ｫ繝ｩ繝� */
.list_four li{
width: 31.4%;
margin-bottom: 15px;
}
.list_three li p, .list_four li p{
line-height:1.5;
}
}/*END*/
@media screen and (max-width: 479px){
.list_two,
.list_three{
margin-left:0;
}
.list_two li,
.list_three li{
/*float: none;
width: 100%;
margin-left:0;*/
}
}/*END*/
/*----------------------------------------
iframe荳ｭ螟ｮ驟咲ｽｮ
----------------------------------------*/
/*iframe豈皮紫邯ｭ謖�*/
.map{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
padding: 37% 0 0;
text-align: center;
}
.map iframe{
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.map iframe:not(:target){
left: 0\9;
top: 0\9;
}
.map iframe{
left: 0\9;
top: 0\9;
}
@media all and (-ms-high-contrast: none) {
.map iframe{
left: 50%\9 !important;
top: 50%\9 !important;
}
}
.map{ z-index: 2; }/*chrome蟇ｾ遲�*/
@media screen and (max-width: 768px){
.map{ padding: 50% 0 0; }
}/*END*/
@media screen and (max-width: 479px){
.map {
padding: 70% 0 0;
width: 92%;
margin: 0 auto 30px auto;
}
}/*END*/
/*----------------------------------------
flex
----------------------------------------*/
.flex_list{
/*padding: 10px;*/
display: flex; /* 繝輔Ξ繝�け繧ｹ繝懊ャ繧ｯ繧ｹ縺ｫ縺吶ｋ */
flex-wrap: wrap; /* 謚倥ｊ霑斐＠謖�ｮ� */
justify-content: space-between; /* 蝮�ｭ� */
}
.li_three li{
margin-bottom:65px;
width: 33%;
text-align: center;
}
.li_four_wh li{
box-sizing: border-box;
background:#fff;
padding:10px 12px;
width: 24%;
margin-bottom:10px;
text-align: left;
}
a.btn_color_pink{
background: #fe655e;
color:#fff;
}
.bg_custom{
background: url(./images/custom_bg.jpg) center center / cover no-repeat;
padding-top: calc(620 / 1310 * 100%);
position: relative;
}
@media print, screen and (min-width: 479px) {
.flex_list_L{
display: flex;
flex-wrap: wrap;/* 謚倥ｊ霑斐＠謖�ｮ� */
justify-content: space-between; /* 蝮�ｭ� */
flex-direction: row; /* 蟄占ｦ∫ｴ�繧貞ｷｦ縺九ｉ蜿ｳ縺ｫ驟咲ｽｮ */
}
.flex_list_R{
display: flex;
flex-wrap: wrap;/* 謚倥ｊ霑斐＠謖�ｮ� */
justify-content: space-between; /* 蝮�ｭ� */
flex-direction: row-reverse; /* 蟄占ｦ∫ｴ�繧貞承縺九ｉ蟾ｦ縺ｫ驟咲ｽｮ */
}
}/*END*/
@media screen and (max-width: 1079px) and (min-width: 769px){
}/*END*/
@media screen and (max-width: 1199px){
.page .mv{
margin-top:65px;
padding: 0 1.3% 0 1.3%;
}
}/*END*/
@media screen and (max-width: 768px){
.page .mv{
margin-top:60px;
/*margin-bottom: 5px;*/
padding: 0 1.3% 0 1.3%;
}
.page header{
padding-bottom:3px;
}
.li_three li {
width: 29%;
padding: 0 15px;
}
.li_four_wh li {
width: 48%;
margin-bottom: 20px;
}
.li_four_wh .figure{
text-align:center;
}
}/*END*/
@media screen and (max-width: 479px){
.li_three li {
/*width: 45.6%;*/ width: 100%;
padding: 0;
/*margin-right: 28px;*/ margin-right: 0;
margin-bottom:20px;
}
.li_four_wh li {
width: 100%;
margin-bottom:10px;
}
.li_four_wh li .figure{
text-align:center;
}
.bg_custom {
padding: 70px 0 40px 0;
}
}/*END*/
/*----------------------------------------
contents
----------------------------------------*/
.marker{
background: linear-gradient(transparent 75%, #fff100 75%);
line-height: 1;
display: inline-block;
}
.base_bg{
background: #f1f0ef;
}
.ttlimg img{
max-width:555px;
}
.copy_img{
max-width:472px;
}
img.subttl{
max-width:328px;
}
.border_bm{
border-bottom:1px solid #cecdcc;
}
.rela{
position: relative;
}
.rela_z{
position: relative;
z-index:3;
}
.over_img_l{
display: block;
width: 50vw;
margin: 0 calc(100% - 50vw);
max-width: 1000px;
}
.over_img_r{
display: block;
width: 50vw;
max-width: 680px;
}
.over_img_l2{
display: block;
width: 60vw;
margin: 0 calc(100% - 950px);
max-width: 950px;
}
.over_img_r2{
display: block;
width: 60vw;
max-width: 950px;
}
@media screen and (min-width: 480px){
.box_l40{
width:39%;
}
.box_r40{
width:39%;
}
.box_r60{
width:60%;
}
.box_l60{
width:60%;
}
}/*END*/
@media screen and (max-width: 479px){
.box_l50,.box_r50{
width:100%;
}
.over_img_r,.over_img_l, .over_img_r2,.over_img_l2{
width: 100%;
margin:auto;
}
}/*END*/
@media screen and (min-width: 599px){
.pc_block{
display: block;
}
.sp_block{
display: none;
}
}/*END*/
@media screen and (max-width: 599px){
.pc_block{
display: none;
}
.sp_block{
display: block;
}
}/*END*/
/*莠育ｴ��繧ｿ繝ｳ*/
.btn_venue{
display: block;
}
.btn_venue a{
display: block;
text-align: center;
}
/* slider */
.about_slide {
position: relative;
margin: 0;
padding: 0;
}
.about_slide .item {
position: relative;
height: 100%;
}
.about_slide .item::before {
display: block;
padding-top: 70%;
content: "";
position: relative;
overflow: hidden;
}
.about_slide .item img {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 100%;
}
.about_slide > .slick-list,
.about_slide > .slick-list > .slick-track,
.about_slide > .slick-list > .slick-track > .slick-slide > div {
position: relative;
height: 100%;
}
/* slide-navigation */
.about_slide-navigation {
position: relative;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 1.28%;
margin-top: 20px;
}
.about_slide-navigation .item {
position: relative;
cursor: pointer;
overflow: hidden;
width: 15.6%;
height: 100%;
/*margin: 0.5%;*/
padding: 0;
}
.about_slide-navigation .item::before {
display: block;
padding-top: 70%;
content: "";
}
.about_slide-navigation .item img {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 100%;
}
.about_slide-navigation .current::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: "";
opacity: 0.5;
background: #000;
}
.about_slide .slide-arrow{
width: 7%;
max-width: 28px;
height: auto;
position: absolute;
top: 50%;
cursor: pointer;
z-index: 2;
}
.about_slide .next-arrow{
right: -15%;
}
.about_slide .prev-arrow{
left: -15%;
}
.slick-slider{
max-width: 760px;
margin: 0 auto;
}
@media screen and (max-width: 599px){
.about_slide .next-arrow{
right: -3%;
}
.about_slide .prev-arrow{
left: -3%;
}
}/*END*/
/*----------------------------------------
STREET HOUSE
----------------------------------------*/
.max480 {
max-width: 480px;
}
.m_center {
margin-left: auto;
margin-right: auto;
}
.concept_bg {
background-image: url("images/concept_bg.jpg");
background-color: #faf7d8;
background-position: top center;
background-size: 100%;
background-repeat: no-repeat;
}
.point_bg {
background-image: url(images/point_bg.jpg);
background-color: #5565a1;
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
}
.room_bg {
background-image: url(images/room_bg.jpg);
background-position: top center;
background-size: 120%;
background-repeat: no-repeat;
}
@media screen and (max-width: 599px) {
.room_bg {
background-repeat: repeat;
}
}
.sky_bg {
background-image: url(images/sky_bg.jpg);
background-position: top center;
background-size: contain;
}
.gallery_bg {
background-image: url("images/gallery_bg.jpg");
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
}
.blue_bg {
background-image: url(images/blue_bg.jpg);
background-position: top center;
background-size: contain;
}
.contact_bg {
background-image: url("images/contact_bg.jpg");
background-color: #faf7d8;
background-repeat: no-repeat;
background-size: contain;
background-position: top;
}
/*concept*/
@media screen and (min-width: 1200px) {
.concept_over_l img{
width: 130%;
margin-left: -35%;
margin-top: -40px;
}
}
/*point*/
.point_n_margin {
margin-bottom: -10%;
}
@media screen and (min-width: 1200px) {
.point_n_margin_l {
margin-left: -130px;
}
}
/*room*/
@media screen and (min-width: 750px) {
.room_n_margin_l {
margin-left: -130px;
}
.room_n_margin_r {
margin-left: -50px;
}
}
@media screen and (min-width: 1200px) {
.room_over_r img{
width: 125%;
}
.room_over_l img{
width: 125%;
margin-left: -25%;
}
.room_n_margin_t {
margin-top: -100px;
}
}
@media screen and (max-width: 599px) {
.room_even_ttl {
transform: translateX(16%);
}
}
@media screen and (max-width: 599px) {
.room_even_ttl {
transform: translateX(16%);
}
}
/*reserve_area*/
.reserve_img {
margin-top: -106px;
}
@media screen and (max-width: 820px) {
.reserve_img {
margin-top: -60px;
}
}
@media screen and (max-width: 598px) {
.reserve_img {
margin-top: 0px;
}
}