@charset "UTF-8";

body { font-size: 1.6rem; }
.sp { display: none}

.fl { width: 50%; float: left } .fr { width: 50%; float: right }.hf { width: 50%; }
.nanabu .fl { width: 70% }
.nanabu .fr { width: calc(30% - 50px); padding-top: 25px }
.rokubu .fl { width: 60% }
.rokubu .fr { width: calc(40% - 50px); padding-top: 25px }
.clearfix:after { content: '';display: block;clear: both; }
.clearfix { zoom: 1; /* for IE6/7 */ }

#phbg { background-size: cover; background-position: top center; background-repeat: no-repeat; background-color: hsla(0,0%,0%,.1) }
body#index #phbg { background-image: url("../phbg/index.jpg"); background-position: center center; }

body#about #phbg { background-size: cover; background-image: url("../phbg/about.jpg"); }
body#subsidy #phbg { background-size: cover; background-image: url("../phbg/subsidy.jpg"); }
body#hotel #phbg { background-size: cover; background-image: url("../phbg/hotel.jpg"); }
body#idea #phbg { background-size: cover; background-image: url("../phbg/idea.jpg"); }
body#overview #phbg { background-size: cover; background-image: url("../phbg/overview.jpg"); }
body#design #phbg { background-size: cover; background-image: url("../phbg/design.jpg"); }
body#contact #phbg { background-size: cover; background-image: url("../phbg/contact.jpg"); }

.breadcrumb-area { position: absolute; z-index: 2; left: 50px; top: 10px; font-size: .5em; }
body.htmlpage .breadcrumb-area { left: 60px; }

section { padding: 0 0 100px 0}

.narrowmax { position: relative; max-width: 1260px; margin: 0 auto; }
.read { font-size: 1.0em; line-height: 2.2em; fposition: relative; max-width: 800px; margin: 0 auto; }

#zoomslider1 { width: 100%; min-height: 70vh; }

.thumbs { width: calc(16.6666% - 40px); padding: 20px 48px 20px 0 }
.thumbs:nth-child(6) { padding: 20px 0px 20px 0 }

.videothumb .thumbs { width:  calc(33.3333% - 40px); padding: 30px 60px 30px 0 }
.videothumb .thumbs:nth-child(3) ,
.videothumb .thumbs:nth-child(6) { padding: 30px 0 30px 0 }
.tvcm { width:  calc(64% - 0); padding: 30px 18% 30px }

figure {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

header#fixed-header {
  background: hsla(0,0%,100%,.95);
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.3s ease 0s;
  transform: translateY(-80px);
  z-index: 100;
}

header#fixed-header nav { margin: 0 30px }
header#fixed-header nav p { font-size: .6em; display: inline-block; }
header#fixed-header nav p.fl { letter-spacing: .2em }
header#fixed-header nav p.fl img { height: 30px; vertical-align: -1.2em; padding-right: 1em; }
header#fixed-header nav p.fl a:hover { opacity: .5 }
header#fixed-header nav p.cont a { display: inline-block; padding: 10px 0 1px 0; letter-spacing: .15em; color: #000; margin: 0 0 0 20px; }
header#fixed-header nav p.cont a { border-bottom: hsla(0,0%,0%,.00) solid 3px; }
header#fixed-header nav p a.hit, header#fixed-header nav p.cont a:hover
{ border-bottom: hsla(0,0%,0%,1) solid 3px; }

header#fixed-header nav .fl { width: 20%; float: left } 
header#fixed-header nav .fr { width: 80%; float: right; text-align: right; }

@-webkit-keyframes wideBgEx{0%{width:0vw}to{width:calc(50vw - 50px)}}@keyframes wideBgEx{0%{width:0vw}to{width:calc(50vw - 50px)}}.wideBgEx{-webkit-animation-name:wideBgEx;animation-name:wideBgEx}

@-webkit-keyframes wideEx{0%{width:0%}to{width:30%}}@keyframes wideEx{0%{width:0%}to{width:30%}}.wideEx{-webkit-animation-name:wideEx;animation-name:wideEx}

.h1box, .h2box { padding: 50px 0 50px; text-align: center; }
.h1box h1 { font-size: 2.5em; line-height: 1em; letter-spacing: 0em  }

.linebox { width: 30%; margin-left: 35% }
.allicon { right: calc(37% - 20px); top: 12px; }
.allicon { width: 16px; }

.online { top: 0; left: 0; }

.sqr, .sqrg { width: 300px; height: 55px;padding: 20px 0 0; margin: 0 auto 20px; }
.sqr .Spartan, .sqrg .Spartan { font-size: .8em; line-height: 1em; padding-top: 12px; }
.sqr:hover { filter: brightness(130%); width: 330px;}

.absobox { bottom: 0vw; left: 0; width:50vw; overflow-x: hidden; position: absolute; }

.bgtxtbox { width:calc(50vw - 50px); }
.txtbox { padding: 50px; font-size: .9em; line-height: 1.8em; }

.palletbox { display: table; border-collapse: collapse; border-spacing: 0; width: 100% }
.palletbox.qtr .pallet { width: 16.6666666666667% }
.pallet { display: table-cell; }
.palletbox.cardbox { border-collapse: separate; border-spacing: 20px; }
.pallet.card { border: #ccc 1px solid; padding: 10px }
.borderbox { border: #ccc 1px solid; padding: 10px; margin: 0 20px 20px; }
.borderbox .card { float: left; }
.borderbox .card.th { float: left; }
.borderbox .card.td { float: left; }
.borderbox .card { float: left; }

.workbox  { width: 90%; margin: 0 auto; }
.workbox div.works { float: left; width: 16.66666666666%; }
.workbox div.works { padding: 20px; box-sizing: border-box; position: relative }
.workbox .works img { overflow: hidden; z-index: 1 }
.workbox .works img { border-radius: 30px 0px 30px 30px; }
.workbox .works span { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: .5em; }
.workbox .works a:hover { opacity: .5 }

.thumbs span { display: block; padding-top: 10px; text-align: center; }

body.htmlpage .infobox { max-width: 600px; margin: 0 auto; width: 90%; }

.nagura { background-image: url("../images/nagura.jpg"); background-size: 25% auto; background-position: right top; background-repeat: no-repeat;  }
.nagura ul.tbl { width: 70%; }

body.childpage .infobox ul { padding: 0; margin: 0 0 30px 0; }
body.childpage .infobox ul li { float: left; border-bottom: 1px solid hsla(0,0%,0%,.2); padding: 5px 5px; }
body.childpage .infobox ul li.thl { width: 120px; }
body.childpage .infobox ul li.thl.nobo { border-bottom: 1px solid hsla(0,0%,0%,0) }
body.childpage .infobox ul li.tdl { width: calc(100% - 140px); }

/*tate*/
.palt { -moz-font-feature-settings: 'palt' 1; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1;  }
.pkna { -moz-font-feature-settings: 'pkna' 1; -webkit-font-feature-settings: 'pkna' 1; font-feature-settings: 'pkna' 1;  }
.halt { -moz-font-feature-settings: 'halt' 1; -webkit-font-feature-settings: 'halt' 1; font-feature-settings: 'halt' 1;  }


.block-content { padding: 50px 20px; height: 300px }
.block.tate { border-left: none; }
.block.col { width: 100%; }

.tate .tl-head {  }

.txt-content-tate {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  float: right;
}
.vertical__part { text-orientation: upright; }
	
.tal {text-align: left}
.tac {text-align: center}
.tar {text-align: right}

.sup{ font-size: 60%; vertical-align: super; }

footer.org { padding: 30px 0 30px 0; }
footer.org li { font-size: .9em; }
footer.org li a { margin: 0 3px 0 0; }
footer.org li a { padding: 0 10px 0 10px; }
footer.org i { padding-right: 1em; }

/************************* info ***************************/

dl.toiawase dt ,dl.toiawase dd { float: left ; padding: 20px 0 0 0 ; margin: 0 0 0 0 ; height: 60px }
dl.toiawase dt.yubin ,dl.toiawase dd.yubin { height: 80px!important }

dl.toiawase dt.bikou ,dl.toiawase dd.bikou { height: 130px }
dl.toiawase dt.clear-box ,dl.toiawase dd.clear-box { float: none; clear: both ;width: 100%  }

dl.toiawase dt{ width: 25% }
dl.toiawase dd{ width: 74% }

dl.toiawase dt, 
dl.toiawase dd
{ border-bottom: 1px dashed #ccc }
dl.toiawase dt.bono, 
dl.toiawase dd.bono
{ border-bottom: 1px dashed #fff ; height: 30px }

dl.toiawase dd input.meru{ width: 60% !important; }
dl.toiawase dd input.nama{ width: 40% !important; }
dl.toiawase dd input.pos{ width: 30% !important; }
dl.toiawase dd input.add{ width: 80% !important; }
dl.toiawase dd textarea.you{ width: 90% !important; }
dl.toiawase dd textarea.you{ height: 100px !important; }

div.formatt ul li { font-size: .9em; line-height: 1.4em; }


.fulheight { height: 60vh; }

#admark_sp { display: none; }
#admark { right: 0; top: 1px; width: 60vh; height: 60vh; ; opacity: 1 }
body#index #admark { width: 80vh; height: 80vh; right: 0; top: 20.05vh; }

#admark { background-color: hsla(359,100%,84%,.0); font-size: 1em; line-height: 1em; }
#admark { position: absolute; z-index: 1; }
#admark img { width: 100%; height: auto; }

#admark .adbox { position: relative; width: 100%; height: 100%; }
#admark .adbox span { position: absolute; z-index: 1; display: block; overflow: hidden; text-align: left; }

#admark .adbox span.ad1 { right: 0; top: 0; width: 0%; height: 100%; background-color: hsla(223,100%,84%,0.0); background: url("../img/1.png"); background-size: 100%; background-position: center; background-repeat: no-repeat; }
#admark .adbox span.ad2 { left: 0; top: 50%; width: 50%; height: 50%; background-color: hsla(359,100%,84%,0.0); }
#admark .adbox span.ad3 { left: 0; top: 25%; width: 50%; height: 25%; background-color: hsla(54,100%,84%,0.0); }

#admark .adbox span.ad2 img { padding: 100% 0 0 0; }
#admark .adbox span.ad3 img { padding: 100% 0 0 0; }


#logo { left: 5%; top: 50px; font-size: 1.1em; }
#navtop { left: 5%; top: 80px; width: 400px; }

body#index .fulheight { height: 100vh; overflow: hidden }
body#index #logo { left: 10%; top: 25vh; font-size: 1.6em; }
body#index #navtop { left: 10%; top: calc(25vh + 50px); }
.kokorozasi { font-size: 5vw; line-height: 1em; letter-spacing: .2em; top: 19vh; right: 40vh; text-align: right; background-color: hsla(112,100%,55%,0.000); margin: -5vw 0 0 }
.rubi { font-size: .7em; line-height: 1em; letter-spacing: 0em; top: 19vh; right: 40vh; text-align: right; margin: -6.5vw 2em 0 }

#logo a { display: block; background-size: auto 30px; padding: 7px 0 0 40px; height: 30px; }
body#index #logo a { background-size: auto 50px; padding: 15px 0 0 70px; height: 50px }

@media only screen and (min-width: 1460px) {/*大型*/

body { background-color: hsla(41,100%,55%,.000); }


}

@media only screen and (max-width: 1459px) {/*中型*/

body { background-color: hsla(112,100%,55%,0.000); }

}

@media only screen and (max-width: 1199px) {/*小型*/

body { background-color: hsla(199,100%,72%,0.000); }

section.narrowmax { padding: 20px 60px; }

footer.org { padding: 30px 0 30px 0; }
footer.org li { font-size: 1em; }
footer.org li a { margin: 0 3px 6px 0; }
footer.org li a { padding: 0 10px 0 10px; }
footer.org i { padding-right: .0em; }

}

@media only screen and (max-width: 1023px) {

body { background-color: hsla(41,100%,55%,.000); }

}


@media only screen and (max-width: 768px) {/**タブレット縦**/

body { background-color: hsla(304,100%,55%,0.00); }

}