@charset "utf-8";

html { font-size: 62.5%; }
body { font-size: 1.4rem;; }

body.categ .thumb-box, .sp, .print-slide { display: none!important; }
.print { display: none!important;}

a { transition-property: all;transition: 0.3s linear; }
a:focus, *:focus { rgba(255,255,255,0) }
a:active, *:active { rgba(255,255,255,0) }

/**********************************************************************　大枠デザイン　*******************************************************************************/

header {  } /**max-width: 1280px; width: 98%; margin: 0 auto;**/
body.detail .swiper { width: 77%; margin: 0 1.5% 0 0 }

.thumb-box { margin: 200px 0 0; width: 75%; }
.thumb-box h3 a { display: block; }
.thumb-box h3 a, .thumb-box h3 a:hover 
{ margin: 0 0 20px; border-top: 3px #222 solid; padding: 10px 0 0 25px; background-position: left 12px; background-size: 15px;  }

header .ttwrap { position: relative; }

body#design section,
body#contact section,
body.detail section,
body.detail section,
body.profile section,
body.detail header .ttwrap,
body.profile header .ttwrap,
body.detail section .ttwrap,
body.profile section .ttwrap
{ max-width: 1280px; width: 98%; margin: 0 auto; }

main { width: 90%; margin: 0 auto; }
.categ main { max-width: 1000px }

/**********************************************************************　デザイン　*******************************************************************************/

.read { width: calc(50% - 40px); margin: 40px auto 50px; }
.read { font-size: 1em; line-height: 1.8em; }

.f-l { float: left } .f-r { float: right}

.swiper-container { width: 100%; margin: 0 auto; padding: 0 0 10px 0; background-color: #fff }
.swiper-container-horizontal > .swiper-pagination { bottom: 0px;}
.pagination-num { bottom:0px; font-size: .9em }
.swiper-pagination-bullet,
.pagination-num p { width: 20px;height: 30px; }

main.f-r { width: 74% ; margin: 0 1.5% 0 0 }
.f-l { width: 18% ;padding: 0 0 0 1.5% }

.detail-box { clear: both ; padding: 0 0 20px 0 }
.detail-box ul { padding-top: 20px }

h1 { font-size: 1.5em;line-height: 1.5em ; padding: 0 0 10px ; margin: 0 }
h2 { font-size: 1.2em;line-height: 1.6em }
h3 { font-size: 1.1em;line-height: 1.3em ; padding: 0 0 10px ; margin: 0 }

.h1-box { padding: 0 }
body.detail .h1-box { padding: 40px 0 20px }
h1.h1image { width: 46%; margin: 0 27%; text-align: center; font-size: 1em; }
h1.h1image span.ja { display: block; padding: .5em 0; border-bottom: hsla(0,0%,0%,.3) solid 1px; font-size: 1.6em; line-height: 1em; }
h1.h1image span.eng { display: block; padding: 1em 0 0; font-size: .9em; line-height: 1em; letter-spacing: .3em; text-transform: uppercase; }
#aim h1.h1image span.eng { text-transform: lowercase; }

#index h1.h1image { width: 100%; margin: 0 0; color: #fff }
#index h1.h1image.abso { top: 26vw; z-index: 100; font-size: 1.3vw; }/* 1.4em */

.prof-box { margin-bottom: 80px; font-size: 0.9em; }
.prof-box .f-l { width: 75% }
.prof-box .f-r { width: 20% }

body.detail h1 { font-size: 1.5em;line-height: 1.5em ; text-align: center ; margin: 0; padding: 0 }
body.detail h2 { font-size: 1.2em;line-height: 1.2em ; text-align: center ; padding: 10px 0 20px 0 ; margin: 0 0 20px 0 }
body#contact h2 { padding: 0; margin: 0 }

.recruit-box { padding: 30px; font-size: 1.1em; line-height: 1.9em; }
body#contact .recruit-box h2 { font-size: 1.4em; padding-bottom: 10px; text-align: left; }
body#contact .recruit-box h3 { font-size: 1.1em; text-align: left; }

.palette h4 { font-size: 1.0em;line-height: 1.0em ; border: 1px solid #ccc ; margin: 0 0 10px ; padding: 0.8em 0 0 1em ; height: 1.5em }
h4.h4foot { font-size: 1.0em;line-height: 1.0em ; margin: 20px 0 10px ; }

.prof-box h2 { margin: 0 0 0 0 ; font-size: 1.3em; }
.prof-box ul { border-top: 1px #ccc solid; margin: 10px 0 30px }
#contact .prof-box ul { border-top: 1px #ccc dotted; margin: 10px 0 30px }
.prof-box ul li { float: left; padding: 7px 0; border-bottom: 1px #ccc solid; }
#contact .prof-box ul li { padding: 10px 0; border-bottom: 1px #ccc dotted; }
.prof-box ul li.thlike { width: 19%; padding-left: 1%; }
.prof-box ul li.tdlike { width: 80%; }
.prof-box ul li.tdlike2 { width: 90%; }
.prof-box ul li.thlike2 { width: 9%; padding-left: 1%; }
#contact .prof-box ul li { height: 30px; }
#contact .prof-box ul li.naiyo { height: 130px; }
#contact .prof-box ul li.soushin { height: 50px; }
#contact .prof-box ul li.thlike { width: 19%; padding-left: 1%; }
#contact .prof-box ul li.thlike2 { width: 19%; padding-left: 1%; }
#contact input { height: 20px; }
#contact input.mido { width: 300px; }
#contact input.maxx { width: 90%; }
#contact textarea.maxx { height: 100px; width: 90%; }

.whtpc { color: #fff }

.exam { width: 100%; text-align: left; font-size: .8em ; line-height: 1.0em; margin-bottom: 12px; } 
.exam img { width: 32px; height: auto; padding-right: 8px }
.exam .faciname { top: 10px; left: 46px; padding: 0 0 0 0; }

.detail-r ul.maru { padding-top: 0 !important; }

.topthumb h3 { font-size: 1.2em; line-height: 1.2em ; padding: 5px 0 5px; margin: 0 }
.topthumb img { width: 100%; height: auto; padding: 0 0 10px 0;  }
.bttxt { display: block }

.palette-box.topthumb .palette { width: 33.33333333% }

.urll a { font-size: 0.8em; line-height: 1.0em }
.cresit { font-size: 0.7em; padding-top: 7px }

/**********************************************************************  パレット  *******************************************************************************/

.palette { padding: 1.5%; font-size: 0.9em ; line-height: 1.8em }

.palette-box { width: 100%; display:table; border-spacing: 0 0; }
#welfare .palette-box, #other .palette-box { width: 80%; margin: 0 8% 0 12.5%; }
#welfare .palette-box .palette, #other .palette-box .palette { width: 20%;}
.palette { display:table-cell; vertical-align: top}

.palette------- { width: 20% }/*width: calc( 25% - 2px )*/
.categ .palette { width: 20% }

.topthumb .palette { width: 30.333333333%; }

.detail-box { font-size: 1.0em; line-height: 1.9em }
body.detail .thumbs .palette-box .palette { width: 30.333333333%; }
body.categ .thumbs .palette-box .palette { width: calc(20% - 30px ); }
body.categ .thumbs .palette-box .palette img { padding-bottom: 5px }

.palette.left-pad { width: 60%; }
.palette.right-pad { width: 40%; }

/*********************************************************************** ヘッダー *****************************************************************************
*/
body.homes header#togglebox { height: 0px; }

body.cld header#togglebox { height: 85px; margin: 0 auto 20px; }
body.profile header#togglebox { height: 120px; margin: 0 auto 20px; }

nav#org { width: 100%; margin: 0 auto; height: 60px; position: relative; background-color: hsla(0,0%,0%,.3) }
body.detail nav#org { background-color: hsla(0,0%,0%,.0) }

body.homes nav#org a { color: #fff; }

nav#org ul { width: 100%; position: absolute; top: 0; left: 0; }
nav#org ul li { float: left; display: inline-block; text-align: center; width: 10%; background-color: hsla(0,0%,0%,.0); }

/*
nav#org ul li:nth-child(1) { width: 10% } 
nav#org ul li:nth-child(2) { width: 12% } 
nav#org ul li:nth-child(3) { width: 16% } 
nav#org ul li:nth-child(4) { width: 12% } 
nav#org ul li:nth-child(5) { width: 12% } 
nav#org ul li:nth-child(6) { width: 16% } 
nav#org ul li:nth-child(7) { width: 10% } 
nav#org ul li:nth-child(8) { width: 10% } 
nav#org ul li:nth-child(9) { width: 12%;  display: none; } 
*/

nav#org ul li a { border-top: 0px solid #fff; color: #000; display: block; margin-top: 0px;border-top: 10px solid hsla(0,0%,0%,0);  }
nav#org ul li a { padding: 20px 0 0; height: 50px;  }
nav#org ul li:nth-child(3) a, 
nav#org ul li:nth-child(6) a 
{ padding: 10px 0 0 }

/*ナビカレント表示*/

nav#org ul li a:hover,
body#index nav#org ul li:nth-child(1) a,
body.ryokan nav#org ul li:nth-child(2) a,
body.businesshotel nav#org ul li:nth-child(3) a,
body.welfare nav#org ul li:nth-child(4) a,
body.other nav#org ul li:nth-child(5) a,
body#design nav#org ul li:nth-child(6) a,
body#career nav#org ul li:nth-child(7) a,
body#overview nav#org ul li:nth-child(8) a,
body#contact.contact nav#org ul li:nth-child(9) a,
body#contact.recruit nav#org ul li:nth-child(10) a
{ border-top: 10px solid hsla(0,0%,0%,.5); }

body.homes nav#org ul li a:hover,
body#index nav#org ul li:nth-child(1) a,
body.ryokan.categ nav#org ul li:nth-child(2) a,
body.businesshotel.categ nav#org ul li:nth-child(3) a,
body.welfare.categ nav#org ul li:nth-child(4) a,
body.other.categ nav#org ul li:nth-child(5) a,
body#aim.categ nav#org ul li:nth-child(6) a
{ border-top: 10px solid hsla(0,0%,100%,.5); }

nav#org a span.eng { font-size: 1.0em; line-height: 1.2em; display: block; text-transform: uppercase; letter-spacing: .1em; } 
nav#org a span.jp { font-size: 0.8em; line-height: 1.0em; display: none; }

footer { margin: 50px auto 0; }

.mail img { width: 30px; height: auto; padding-top: 10px }
.qr-box { font-size: .7em; line-height: 1.0em; }
.qr-box img { width: 60px; height: auto; padding: 50px 0 10px; }

.footer-box { width: 100%; margin: 50px auto 0; font-size: .9em; line-height: 1.0em;  padding: 0 }
.footer-box ul { margin: 0px auto; padding: 0px; max-width: 1280px; width: 98%; display: table; }
.footer-box ul { }
.footer-box ul li { list-style: none; padding: 0; display: table-cell; }
.footer-box ul li a { padding: 20px 10px; display: block }
.footer-box ul li a:hover,
body#index .footer-box ul li:nth-child(1) a,
body.ryokan .footer-box ul li:nth-child(2) a,
body.businesshotel .footer-box ul li:nth-child(3) a,
body.welfare .footer-box ul li:nth-child(4) a,
body.other .footer-box ul li:nth-child(5) a,
body#aim .footer-box ul li:nth-child(6) a,
body#career .footer-box ul li:nth-child(7) a,
body#overview .footer-box ul li:nth-child(8) a,
body#contact.contact .footer-box ul li:nth-child(9) a,
body#contact.recruit .footer-box ul li:nth-child(10) a
{ background-color: #ccc; color: #000 }

.ft img { width: 55px; height: auto; padding-bottom: 10px; }
.ft img.iao { width: 50px; padding-right: 30px; padding-bottom: 12px; }
body.homes .tt a { color: #fff; }
.tt a:hover { opacity: .5; }

body.detail .tt { width: 8vw; top: 100px; left: 20px; font-size: .8em; line-height: .9em; }
body.detail .tt img { width: 65px; height: auto; padding: 0vw 0vw .5vw 0vw; }
body.detail .tt.aim { width: 100px; left: 10vw; font-size: .9em; line-height: .9em; }
body.detail .tt.aim img { width: 70px; height: auto; padding: .5vw 0vw .5vw 0vw; }
/*
body.overview .tt { width: 12vw; top: 8vw; left: 4vw; font-size: .8vw; line-height: 1.2vw; }
body.overview .tt img { width: 5.8vw; height: auto; padding: 0vw 0vw .5vw 0vw; }
body.overview .tt.aim { width: 8vw; top: 8vw; left:16vw; font-size: 1.2vw; line-height: 1.2vw; }
body.overview .tt.aim img { width: 6vw; height: auto; padding: 1vw 0vw .5vw 0vw; }
*/
body.homes .tt { width: 12vw; top: 80px; left: 4vw; font-size: .8vw; line-height: 1.0vw; }
body.homes .tt img { width: 5.8vw; height: auto; padding: 0vw 0vw .5vw 0vw; }
body.homes .tt.aim { width: 8vw; left:14vw; font-size: 1.2vw; line-height: 1.2vw; }
body.homes .tt.aim img { width: 6vw; height: auto; padding: .5vw 0vw .5vw 0vw; }
/*
body#index .tt { width: 15vw; top: 8vw; left: 4vw; font-size: 1.2vw; line-height: 1.4vw; }
body#index .tt img { width: 10vw; height: auto; padding: 0vw 0vw .8vw 0vw; }
body#index .tt.aim { width: 10vw; top: 8vw; left:22vw; font-size: 1.5vw; line-height: 1.8vw; }
body#index .tt.aim img { width: 10vw; height: auto; padding: 2vw 0vw .5vw 0vw; }
*/
body.profile main { width: 70%; margin: 0 0 0 30%; }

table.specifi { font-size: 0.8em; }
.face img { width: 90%; height: auto; padding-top: 10px }

#flash04, .homes #flash01, #togglebox , .homes #flash02, .overview #flash01, .overview #flash02, #aim #flash01, #aim #flash02, #flash10, #flash11 { opacity: 0 }

.rectrlike { display: table; width: 100%}
.recthlike, .rectdlike { border-width: 0px 0px 0px 1px; }
.recthlike.btmb, .rectdlike.btmb { border-width: 0px 0px 1px 1px; }
.recthlike { display: table-cell; width: 20%; padding: 15px 30px }
.rectdlike { display: table-cell; width: 80%; padding: 15px 30px }