/* fonts
--------------------------------------------------------------------- */
/*
@font-face { font-family: "Soge5"; src: url("../fonts/Soge5.woff") format('woff'); }
*/

/* html
--------------------------------------------------------------------- */
* {
  margin:0 auto;
  padding:0;
  font-weight:normal;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
html { position:relative; overflow: auto; height:100%; font-size: 62.5%; }
body {
  margin: 0 auto;
  padding: 0;
  height:100%;
  font-size: 1.4rem;
  font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
/*
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  font-family: "Hiragino Maru Gothic ProN", "HG丸ｺﾞｼｯｸM-PRO", HGMaruGothicMPRO, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
*/
  text-align: center;
  line-height: 1.6;
  color:#333333;
  background: url(img/back.jpg) left top repeat #FFFFFF;
  background-size:contain;
  background-attachment: fixed;
}
a { color:#FFFFFF; text-decoration:none; }
a:hover { color:#f2f2f2; text-decoration:underline; }

h1 { margin:4% auto 4% auto; }
h3 {
  padding:8px 0;
  width:60%;
  font-size:2.1rem;
  text-align: left;
}

ul, ol { list-style-type:none; }

input[type=text], select, textarea { display:inline-block; padding:3px 8px; width:100%; font-size:1.4rem; }
input + br { margin-bottom:10px; }

section:after { clear:both; content:""; display:block; }
figure:after { clear:both; content:""; display:block; }

.clear {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}


/* レイアウト
--------------------------------------------------------------------- */
#contents {
/*  overflow: hidden; */
  width: 3920px; /* =ページ幅×ページ数 */
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  height:100%;
}
div.section {
  display:block;
  width: 980px;
  height: 100%;
  float: left;
  position:relative;
}

footer {
  position:fixed;
  left:0;
  bottom:0;
  padding:12px 0;
  width:100%;
  height:55px;
  background-color:rgba(0, 0, 0, 0.9);
  z-index:500;
}
#nav {
  width:50%;
  list-style: none;
}
#nav li {
  float:left;
  width:25%;
  text-align: center;
}
#nav li a { color: #fff; }
#nav li img { width:51px; height:auto !important; }

.row { margin-left:auto; margin-right:auto; }

/* 左右メニュー */
#toLeft { position:absolute; left:16px; top:50%; z-index:999; }
#toRight { position:absolute; right:16px; top:50%; z-index:999; }
.navFlow img, .img50 img { width:50%; height:auto !important; }


/* HOME(s01)
--------------------------------------------------------------------- */
h1 img { width:525px; height:auto !important; }
#s01 {
  color:#FFFFFF;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  background-repeat: no-repeat, no-repeat;
}
#s01 h3 { width:668px; }
#s01 article { width:668px; text-align: left; letter-spacing:0rem; }
#s01 article p { margin-bottom:30px; }
#s01 #beans { position:absolute; left:0; top:0; }
#s01 #beans img { width:300px; height:auto !important; }
#s01 #coffee { position:absolute; left:86%; top:0; }
#s01 #coffee img { width:360px; height:auto !important; }
#s01 #headphone { position:absolute; left:50%; top:60%; }
#s01 #headphone img { position:absolute; left:334px; width:130px; height:auto !important; }


/* Guest(s02)
--------------------------------------------------------------------- */
#s02 .wrap {
  position:relative;
  padding:0px 3%;
  width:795px;
  background: url(img/s2/cripbord.png) center top no-repeat;
  background-size: 100%;
  text-align: left;
}
#s02 h2 { padding-top:70px; padding-left:18px; width:100%; }
#s02 h2 img { width:130px; height:auto !important; }
#s02 section {
  margin-top:3%;
  width:90%;
}
#s02 dl { font-size:1.2rem; }
#s02 dt { color:#956134; }
#s02 dd { line-height:1.6; }
#pen { position:absolute; left:682px; top:280px; }
#pen img { width:313px; height:auto !important; }


/* OA(s03)
--------------------------------------------------------------------- */
#s03 .wrap { position:relative; width:767px; z-index:99; }
#s03 h2 img { width:130px; height:auto !important; }
#s03 .oa {
  background: url(img/s3/paper.png) center top no-repeat;
  background-size:cover;
  font-size:1.3rem;
}
#s03 section:first-of-type { position:relative; padding:29px 80px; text-align:left; z-index:99; }
#s03 dl { padding:30px 0; }
#s03 dl:first-of-type { border-bottom:1px dotted #333333; }
#s03 dl dd { font-size:1.0rem; text-align:center; }
#s03 .audio img { margin-bottom:5px; width:45px; height:auto !important; }
#s03 .blogtitle img { margin-bottom:10px; width:88px; height:auto !important; }
#s03 .history { color:#FFFFFF; }
#s03 .history li { margin-bottom:3px; }
#s03 #radio { position:absolute; left:90%; top:90%; }
#s03 #radio img { width:180px; height:auto !important; }
#s03 a { color:#333333; }
#s03 #beans01 { position:absolute; left:-30px; bottom:0; z-index:1; }
#s03 #beans01 img { width:278px; height:auto !important; }


/* Profile(s04)
--------------------------------------------------------------------- */
#s04 { color:#FFFFFF; }
#s04 section { position:relative; width:723px; padding:20px 30px; text-align:left; border:4px solid #FFFFFF; z-index:99; }
#s04 h2 img { width:160px; height:auto !important; }
#s04 h4 { margin-bottom:30px; font-size:1.8rem; }
#s04 article { padding:40px 55px; }
#s04 ul { padding-left:2.0rem; list-style-type:disc; }
#s04 ul li { margin-bottom:16px; }
#s04 .youtube { text-align:right; }
#s04 .youtube img { width:120px; height:auto !important; vertical-align:-80%; }
#s04 #photo { position:absolute; left:80%; top:-2%; z-index:20; }
#s04 #photo img { width:216px; height:auto !important; }
#s04 #beans02 { position:absolute; left:0; bottom:0; z-index:1; }
#s04 #beans02 img { width:274px; height:auto !important; }