@charset "UTF-8";
/*
CSS for: Jinterji
Site URL: http://patfit.jp/
Author: Amolti
Author URL: http://www.amolti.com/
*/

/* ---------------------------------------------FONTS*/

/* ---------------------------------------------body */

html,body{ min-width: 1000px; }
body { position: relative; background: url(../img/bg01.jpg) no-repeat top center; background-size: cover; }
#mainContents { display: none; }

/*--- FONT SIZE -----*/
* {	font-size:16px; }
header nav a { font-size: 20px !important; font-weight: bold;}
.column * { font-size: 14px; }
.head * { font-size: 16px;}
.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs30 { font-size: 3vw; }
.fs2vw { font-size: 2vw; }
#archive-single h1 { font-size: 2vw;}
#showcase h2 { font-size: 2vw; }
#showcase h2 span { font-size: 1vw; }
#solution h2 { font-size: 2vw; }
#contact h1 { font-size: 2vw; }
/*---------------------------------------------BASE*/

.head { width: 150px; flex-basis: 150px; text-align: center; }
.head * { padding: 30px 20px; font-weight: normal;}
.head h2 { padding-top: 350px; }
dl { line-height: 1.8em; padding: 30px 10px; }
dl dt { width: 100px; text-align: right; }
dl dd { padding-left: 105px; margin-top: -25px; }

/* ---------------------------------------------SECTION*/
main { }
section>h2{ padding: 50px; margin: 0 auto; text-align: center;}
section { width: 1000px; margin: 0 auto 50px auto; color: #fff; }
section:first-child { width: 1000px; margin-top: 0; }

#slide { position: absolute; top: 90px; width: 100%; height: 1000px; margin: 0; padding: 0; z-index: -1; overflow: hidden;}
#slide .slide { position: absolute; top:0; left:0; width: 100%; }
#slide #slide-cover { position: absolute; top:0; left:0; width: 100%; height: 1000px; background: url(../img/slide-cover.png); }
#slideInfo { width: 650px; margin-top: 50vw; padding: 0; background: rgba(0,0,0,0.5); }
#slideInfo .info { position: relative; min-width: 500px; padding: 10px; overflow: hidden;}
#slideInfo .slideInfo { position: absolute; top: -50px; left: 10px; }
#slideInfo .slideInfo:first-child { top: 10px; }
#slideInfo p.tl, #slideInfo p.tr { padding-top: 15px; }
#slideInfo #goLeft, #slideInfo #goRight { cursor: pointer; }


#recommends { background: rgba(0,0,0,0.5);}
#recommends h2 { font-weight: normal; }
#recommends .column { align-self: center; }
#recommends .info { flex-basis: 700px; }
#recommends article div { flex-basis: 400px; height: 350px; margin-left: 20px; }
#recommends #recommR img {float: none; }
#recommends article div h2 { background: #4A4A4A; }
#recommends article div h2 a { display: block; width: 100%; height: 200px; padding-top: 150px; text-align: center;}
#recommends article div h2 a:hover { background: #E89292; color: #4A4A4A;}
#recommends article.flex { justify-content: center;}
#recommends #recommR div { max-width: 250px; min-width: 200px; height: 300px; margin-left: 20px; }
#recommends #recommR div h2 { height: 50px; padding: 0; }
#recommends #recommR div h2 a { height: 20px; padding: 15px 0; }
#recommends .recommL div { width: 790px; height: 300px; margin: 0 auto; }
#recommends .recommL div h2 { width: 790px; height: 50px; padding: 0; }
#recommends .recommL div h2 a { height: 20px; padding: 15px 0; }

#outline dl dd.mapLink { margin-top: -10px; }
#partners div { width: 275px; float: left; margin-left: 10px; }
#partners article.bgGlayR { padding: 30px 0;}

#history dl dt, #archive dl dt { width: 100%; text-align: center; background: #4a4a4a; padding: 5px 0; margin-bottom: 10px; }
#history dl dd, #archive dl dd { margin-top: -55px; margin-left: 130px; padding-left: 0; background: #BCBCBC; margin-bottom: 10px; padding:10px; color: #5F5F5F; }
#history dl dd.month, #archive dl dd.month { margin-top: 0; margin-left: 0; width: 100px; text-align: center; background: #4f4f4f; color: #BCBCBC; }

#access #map { padding: 20px; }
#access #map iframe { width: 100%; height: 400px; border: none; }

#archive dl dt { background: #777; color: #BCBCBC; }
#archive dl dd { background: #4a4a4a; }
#archive dl dd p { padding: 0; color: #BCBCBC; }
#archive dl dd p.shopImg { width: 150px; height: 100px; margin-right: 20px; background: url() no-repeat top center; background-size: cover; }
#archive dl dd p.shopImg a { display: block; width: 150px; height: 100px; }
#archive dl dd p.shopImg a:hover { background: rgba(255,255,255,0.3); }
#archive dl dd p.shop { border-bottom: 1px dotted #999; }
#archive dl dd p.work { font-size: 10px; }
#archive dl dd p.prace { padding: 10px; background: #AFAFAF; color: #333333; }

#archive-single {}
#archive-single article:first-child { margin-bottom: 20px; }
#archive-single article:nth-of-type(2) { color: #888; }
#archive-single img { width: 100%; }
#archive-single .shopLogo { width: 200px ;}
#archive-single h1 { padding: 30px 10px 0 30px; border-bottom: 1px solid #555;}
#archive-single h1 span{ display: block; font-weight: normal; color: #888; }
#archive-single h2 { padding: 0 10px 30px 30px; font-weight: normal; color: #888;}
#archive-single .intro { padding: 30px; font-weight: normal; color: #777;}
#archive-single dl dt { padding: 10px; color: #BCBCBC; }
#archive-single dl dd { padding: 10px 10px 10px 120px; margin-top: -45px; border-bottom: 2px solid #777; }
#archive-single .bgWhite { padding-top: 30px; border-top: 1px solid #000; border-left: 1px solid #000;}

#solution h2 { padding: 20px 10px; text-align: center; }
#solution dl dt { margin: 0; padding: 10px; width: auto; text-align: left; border-bottom: 2px solid #777;color: #BCBCBC; font-weight: bold; }
#solution dl dd { margin: 0; padding: 10px; width: auto; }
#solution-img { background: #fff; padding: 30px 0; }

#concept .bgGlayR { padding-bottom: 30px; }
#concept p { padding: 20px 10px 0 ; color: #BCBCBC; line-height: 2em; }

#showcase #sc01 { background: url(../img/showcase_camelot.jpg) no-repeat top center; }
#showcase #sc02 { background: url(../img/showcase_qweenssteak.jpg) no-repeat top center; }
#showcase #sc01, #showcase #sc02 { padding-top: 200px; background-size: cover; margin-bottom: 30px;}
#showcase h2 { padding: 20px; }
#showcase h2 span { display: block; }
#showcase dl { padding: 10px; }

/* ---------------------------------------------Header Footer*/

header { width: 100%; padding: 10px 0; background: rgba( 0,0,0,0.6); text-align: center;z-index: 100;}
header img { width: 150px; padding-left: 20px; }
header nav { width: auto; margin: 0 auto; justify-content: center; }
header nav ul li { position: relative; padding: 20px; }
header nav ul li ul { position: absolute; top: 0; left: 0; margin-top: 60px; padding-top: 0; width: 100%; background: rgba(0,0,0,0.6); }
header .dis li { text-align: center; padding: 10px; }
header nav a { display: block; width: 100%; text-align: center; color: #ddd; }
header nav a:hover { color: #fff; }
header nav .column { text-align: center; }
.sp-app { display: none; }

footer { width: 100%; padding-top: 30px; background: #5F5F5F; }
footer section { margin-top: 0 !important; }
.copyright { width: 100%; background: #000; padding: 30px 0; font-size: 10px; text-align: center; }

#shopMap { }
#shopMap div { width: 500px; margin: 0 auto;}
#shopMap iframe { width: 500px; padding-left: calc( calc( 100% - 500px ) / 2 ); border: none; }

#contact {}
#contact h1 { padding-bottom: 20px; text-align: center; }

/* ---------------------------------------------FORM*/
form { width: 90% ; margin: 0 auto; }
input, textarea, #btn { padding: 20px; border: 1px solid #888; background: #777; width: 100%; box-sizing: border-box;font-family: 'Oswald','Mplus 1p', sans-serif, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic"; }
input:focus, textarea:focus { background: #B8B8B8; }
#email,#phone { width: 50%; float: left; }
#btn { width: 100%; background: #A1A1A1; }
#btn:hover { background: #EBEBEB; cursor: pointer; }
/* ---------------------------------------------CLASS*/

/*--- BOX -----*/
.moveImg { }
.flex {
	display:-webkit-box;/*--- Androidブラウザ用 ---*/
  display:-ms-flexbox;/*--- IE10 ---*/
  display:-webkit-flex;/*--- safari（PC）用 ---*/ 
	display:flex;
}
.column { height: auto; width: 100%; }

a.box { padding: 10px; border: #E89292 1px solid; }
a.box:hover { background: #E89292; color: #333; }

.w50p { width: 50%; margin: 0; }
.w1200 { width: 1200px; margin: 0 auto; }

/*--- COLOR -----*/
.fc555 { color: #555; }
.fcPink { color: #FF8E8E; }
.fcGlay { color: #5F5F5F; }

.bgBlueA { background: rgba(188,222,255,0.5); }
.bgGlayRRR { background: #343434; }
.bgGlayRR { background: #BCBCBC; }
.bgGlayR { background: #5F5F5F; }
.bgGlayD { background: #4f4f4f; }
.bgGlayDD { background: #343434; }
.bgGlayDD { background: #343434; }
.bgGlayDDD { background: #4a4a4a; }
.bgWhite { background: #fff; }
.bgBlackA { background: rgba(0,0,0,0.5); }

/*--- TEXT -----*/
.tImg { text-indent: -9999px; }
.b { font-weight: bold; }

/*--- FLOAT -----*/
.fl { float: left; }
.fr { float: right; }
.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.cl:after { display: block; content: ""; clear: both;}

/*---OTHER--*/
.app { display: block; }
.dis { display: none; }

/*---LOADER---*/
#loader { position: fixed; top:0; left: 0; width: 100vw; height: 55vh; padding-top: 45vh; background: #000; text-align: center; z-index: 9999;}
#mainContents { display: none; }

/*-----------------------------------------------------------------------------Phones */

@media screen and (max-width:800px){
	html,body{ min-width: 800px; }
	header .sp-dis { display: none; }
	header .sp-app { display: block; padding-top: 20px; }
	section,section:first-child { width: 800px; }
	#slide { top: 130px; }
	#slideInfo { margin-top: 300px; }
	#slideInfo .column * { font-size: 16px; }
	#slideInfo #goLeft img, #slideInfo #goRight img { height: 40px;}
	.flex .column img:not(footer img) { width: 100%; }
	#shopMap div { width: 380px; padding-left: 20px; }
	#shopMap iframe { width: 380px; padding-left: 20px; }
}