@charset "utf-8";
@import url(drawerMenu.css);

/**********************************************************************　スマホ　*******************************************************************************/
body { margin: 0 0 0 0;} 
.qr-box, .pc, .footer-box, .print-slide {display: none!important;}
.print { display: none!important;}

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

section { padding: 51px 0 0 }
body#index section { padding: 51px 0 30px }
main { padding: 0 20px }
body.categ main { padding: 0 }
body.detail main { border-top: #ccc 1px solid; padding: 20px 20px 0; }
.thumbs .palette-box .palette { width: calc(33.3333% - 10px); }
.thumbs .palette-box .palette { padding: 0 15px 20px 0 }
.thumbs .palette-box .palette:nth-child(3n), 
.thumbs .palette-box .palette.spnopad
{ padding: 0 0 15px 0 }
body.categ .thumbs { display: none }

article { margin: 20px 0 0; }
article.h1-box h1 { padding: 50px 0 0 0px; }

.read { margin: 20px auto 50px; }

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

.topthumb h3 { font-size: 1.2em; line-height: 1.2em ; padding: 5px 0 5px ; margin: 0 }
.thumb-box h3 a, .thumb-box h3 a:hover 
{ display: block; margin: 0 0 20px; border-top: 3px #222 solid; padding: 10px 0 0 25px; background-position: left 13px; background-size: 15px;  }
.topthumb img { width: 100%; height: auto; padding: 0 0 10px 0 ;  }
.bttxt { display: block; padding-bottom: 20px }

.thumb-box { padding: 20px 30px 20px; background-color: hsla(0,0%,0%,.05 ); margin-bottom: 30px }
.exam { width: 100%; text-align: left; font-size: .8em ; line-height: 1.0em; margin-bottom: 10px; } 
.exam img { width: 32px; height: auto; padding-right: 8px }
.exam .faciname { top: 10px; left: 46px; padding: 0 0 0 0; }

body.detail .tt, body.categ .tt, body.overview .tt, body#index .tt
{ width: 30px; top: 10px; left: 20px; font-size: .0em; line-height: 1em; }
body.detail .tt img, body.categ .tt img, body.overview .tt img, body#index .tt img
{ position: absolute;top: 0; left: 0px; width: 22px; height: auto; }
body.detail .tt.aim, body.categ .tt.aim, body.overview .tt.aim , body#index .tt.aim
{ width: 40px; top: 10px ; left:55px; font-size: .0em; line-height: .9em; }
body.detail .tt.aim img, body.categ .tt.aim img, body.overview .tt.aim img, body#index .tt img
{ width: 25px; height: auto; }

.ttsp { position: absolute; text-align: center; width: 100%; font-size: 0.9em; line-height: 1.2em; }
/*
body#index .tt { width: 22vw; top: 20px ; left: 25vw; font-size: 2.4vw; line-height: 2.8vw; }
body#index .tt img { width: 18vw; height: auto; padding: 0vw 0vw .8vw 0vw; }
body#index .tt.aim { width: 18vw; top: 20px ; left:55vw; font-size: 3.5vw; line-height: 2.8vw; }
body#index .tt.aim img { width: 20vw; height: auto; padding: 2vw 0vw .5vw 0vw; }
body#index .tt a { color: #fff }
*/
.ft img { width: 35px; height: auto; padding-bottom: 0px; }
.ft img.iao { width: 32px; padding-right: 20px; padding-bottom: 2px; }

.read { text-align: justify; padding-left: 5%;padding-right: 5%; }

.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: 21px;height: 30px; }

footer { font-size: 0.8em; line-height: 1.5em }

nav#org ul  { background-color: hsla(0,0%,90%,.94); }
nav#org ul li  { padding: 0 }
nav#org ul li a { font-size: 1.2em ;line-height: 1em; padding: 18px 0; border-bottom: #fff 1px solid; }
nav#org ul li a span.eng { display: none; }

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#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
{ background-color: hsla(0,0%,70%,.94); color: #fff }

.prof-box { margin: 0 10px 40px; font-size: 0.9em; }
.prof-box .f-l { width: 100%; text-align: center }
.prof-box .f-r { width: 100% }

.prof-box h2 { margin: 0 0 10px 0 !important; padding: 0!important; text-align: center; }
.prof-box ul { border-top: 1px #ccc solid; margin: 10px 0 30px; text-align: left; }
.prof-box ul li { vertical-align: middle; }
.prof-box ul li.thlike { width: 100%; border-bottom: 1px #ccc dotted; padding: 5px 0 0px; }
.prof-box ul li.tdlike { width: 100%; border-bottom: 1px #ccc solid; padding: 3px 0 5px; }
.prof-box ul li.thlike2 { width: 100%; border-bottom: 1px #ccc dotted; padding: 5px 0 0px; }
.prof-box ul li.tdlike2 { width: 100%; border-bottom: 1px #ccc solid; padding: 3px 0 5px; }
#contact .prof-box ul li.thlike { border-bottom: 0px #ccc dotted; padding: 8px 0 0; }
#contact .prof-box ul li.thlike.naiyo { height: 30px; }
#contact .prof-box ul li.thlike2 { border-bottom: 0px #ccc dotted; padding: 8px 0 0; }
#contact .prof-box ul li.thlike2.naiyo { height: 30px; }

.face { text-align: center }
.face img { width: 50%; height: auto; padding: 10px 0; }

.cresit { font-size: 0.5em; padding: 20px 0 }
.mail img { width: 30px; height: auto; padding-top: 0px; margin-bottom: 30px }

body { background-color: hsla(0,0%,82%,.0)}
.ttsp { left: 0; top: 10px; }

#contact .prof-box ul li { height: 30px; }
#contact .prof-box ul li.naiyo { height: 130px; }
#contact .prof-box ul li.soushin { height: 50px; }
#contact input { height: 20px; }
#contact input.mido { width: 300px; }
#contact input.maxx { width: 100%; }
#contact textarea.maxx { height: 100px; width: 100%; }

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

.detail-box { clear: both ; padding: 0 0 20px 0 }
.recruit-box { padding: 10px; font-size: 1.0em; line-height: 1.9em;  }
body#contact .recruit-box h2 { font-size: 1.2em;line-height: 1.8em; padding-bottom: 10px; text-align: left; }
body#contact .recruit-box h3 { font-size: 1.1em; text-align: left; }

h1.h1image { width: 100%; margin: 0 0%; 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.4em; line-height: 1em; }
h1.h1image span.eng { display: block; padding: 1em 0 0; font-size: .7em; line-height: 1em; letter-spacing: .3em; text-transform: uppercase; }
#aim h1.h1image span.eng { text-transform: lowercase; }

.recthlike { display: block; border-width: 0px 0px 0px 1px; }
.rectdlike { display: block; border-width: 0px 0px 1px 1px; }
.recthlike { padding: 5px 10px 5px; }
.rectdlike { padding: 5px 10px 5px; }

@media only screen/*縦向き*/
and (orientation:portrait){
.ttsp { left: 0; top: 10px; }
/*body { background-color: hsla(0,0%,72%,.00)}*/
}

@media only screen/*iPad 横向き*/
    and (min-device-width:768px) 
    and (max-device-width:1024px) 
    and (orientation:landscape) {
/*body { background-color: hsla(359,100%,87%,.00)}*/

}

@media only screen/*iPad 縦向き*/
    and (min-device-width:768px) 
    and (max-device-width:1024px) 
    and (orientation:portrait){
/*body { background-color: hsla(21,100%,87%,.00)}*/
.ttsp { left: 0; top: 17px; }
.kg { display: inline}

}

@media only screen/*iPhone 5*/
    and (min-device-width:320px) 
    and (max-device-width:568px) {
/*	body { background-color: hsla(137,100%,87%,.00)}*/
.kg { display: block }
footer span { display: block; padding: .2em 0; width: 100% }
}

@media only screen/*iPhone 横向き*/
    and (min-device-width:320px) 
    and (max-device-width:480px) 
    and (orientation:landscape) {
/*body { background-color: hsla(231,100%,87%,.00)}*/
.ttsp { left: 0; top: 15px; }
.kg { display: inline}
html { font-size: 62.5%; }
body { font-size: 1.4rem;; }
footer span { display: inline; }

}

@media only screen/*iPhone 縦向き*/
    and (max-device-width:320px)
    and (orientation:portrait){
/*body { background-color: hsla(137,100%,87%,1.00)}*/

}