/*
Theme Name:KOMATSU Theme
Theme URI: http://www.www.www/
Description: This is 10per-komatsu.com website theme.
*/

html,body {
	padding: 0;
	margin: 0;
-webkit-text-size-adjust: 100%;
}

html { overflow-y: scroll; }
body { overflow: hidden; }



ul { margin: 0;	padding: 0; }
li { list-style:none; }

a {
   text-decoration: none;
   outline: none;
    color: #888888;	 
}
img, table { border: 0; }
img { max-width: 100%; height: auto; }

.clear { clear:both; }
.fl { float:left; }
.fr { float:right; }

.sp { display:none; }

h3, h4, h5, p, li,th, td, input {
font-family: Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',"ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;

}

.inner {
    width: 980px;
    margin: auto;
    position: relative;
}

.Cardo,
.Cardo * {
    font-family: 'Cardo', serif;
}

#wrapper {
	margin: auto;
	width: 980px;
	overflow: hidden;
}
#global-header .inner {
	height: 80px;
}

#global-header h1 {
	float: left;
	height: 18px;
	width: 430px;
	margin: 38px 0 0 0;
}
#global-header h1 a {
	display:block;
	width:430px;
	height:0;
	padding-top:18px;
	overflow:hidden;
	background:url(image/top_logo.jpg) no-repeat;
	background-size:contain;
}


h2.pagetitle {
	font-family: "Cardo", serif;
	font-weight: normal;
	padding: 10px 0;
	font-size: 15pt;
	clear: both;
}
h2.pagetitle a { color:#000; }


/* menu */

#menu {
    position: absolute;
	right: 50px;
	margin-top: 43px;
	height: 12pt;
}
#menu ul li {
	float: left;
	height: 10pt;
	border-right: 1px solid #888888;
	line-height: 10pt;
	text-align: right;
	padding:0 5px;
}
#menu ul li:last-child { border-right: none; padding-right: 0; }

#menu ul li a{
	color: #999999;
	text-decoration: none;
	font-size: 8pt;
	padding-top: 5px;
	font-family: "Cardo", serif;
	letter-spacing: 1pt;
}
#menu ul li a:hover {
	color: #000;
}


/* social-nav */

#social-nav {
   position:absolute;
   top: 42px;
   right: 0;
}
#social-nav li {
	float:left;
	margin-left: 8px;
}
#social-nav li img:hover { opacity: 0.5; }



#container { overflow:hidden; }


/* footer */
#global-footer p {
	clear: both;
	font-size: 7pt;
	color: #888888;
	text-align: right;
	margin-top: 20px;
	/*letter-spacing: 1pt;*/
}

.current { color: #000000 !important; }




/* top */
#top_contents {
	width: 980px;
	clear: both;
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
}
h2#toph2 {
	margin: 0px;
	padding: 0px;
}
#top_contents ul {
	margin: 0px;
	padding: 0px;
}
#top_contents ul li {
	width: 980px;
	list-style-type: none;
}



/* information エリア */
#information_contents {
	/*height: 150px;*/
	width: 1020px;
	margin: 20px 0 0 -40px;
}
#information_contents .i_c_ttl {
	font-size: 15px;
    font-family: 'Cardo', serif;
	line-height: 1;
	clear: both;
    margin: 0 0 10px 40px;
}
#information_contents .i_c_wrap {
	overflow: hidden;
	margin-bottom: 15px;
}
#information_contents .more {
    font-size: 12px;
    font-family: 'Cardo', serif;
    text-align: right;
	margin: 0;
    clear: both;
}
.information_box {
	float: left;
	width: 300px;
	font-family: "Cardo", serif;
	margin-left: 40px;
}
#information_contents a:hover {
	color: #000;
	text-decoration: underline;
}

.information_box img {
	/*float: left;*/
	margin-top: 10px;
	margin-right: 10px;
       width: 100%;
      /* height: 75px; */
}

#information_contents .i_c_wrap .title_middle {
	margin:0 !important;
}
#information_contents .i_c_wrap table br {
	display: none;
}


/* top.html news.html publications.html  works個別ページ */
.news_title {
	border-bottom:solid 1px #000;
	height: 15pt;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}
/*********************************************************/
.news_title h3 {
/*
	font-family: 'Cardo', serif;
*/
	font-size: 10pt;
	color: #000;
	font-weight: normal;
	float: left;
	margin: 0px;
	display: block;
	padding: 0 0 0 1px;
}
.title_middle  {
	font-size: 8pt;
	color: #000;
	line-height: 8pt;
	font-weight: normal;
	margin: 2pt 0 0 10px;
}
.date {
	font-family: 'Cardo', serif;
	font-size: 8pt;
	font-style: italic;
	color: #888888;
	padding: 0px;
	display: block;
	float: right;
	line-height: 10pt;

	margin: 2pt 3px 0;
}
.information_table td {
	font-size: 8pt;
	width: 190px;
	line-height: 12pt;
	padding: 10px 0 0 10px;
	vertical-align: top;
}
.information_table th {
	vertical-align: top;
	width: 100px;
}







/* news.html , publications.html */
#news_contents { overflow: hidden; }
.news_list {
    width: 320px;
    float: left;
    border-left:solid 1px #666;
    margin-left: 20px;
    padding-left: 20px;
    box-sizing: border-box;
}
.news_list:first-child {
   width: 300px;
   border: none;
   margin-left: 0;
   padding-left: 0;
}

.news_list a { letter-spacing: 1pt; }
.news_list a:hover {
     color: #000000;
     text-decoration: underline;
}

.news_box {
    height: 170px;
    overflow: hidden;
}
.news_box_table {
    padding-top: 10px;
    width: 100%;
}
.news_box_table img { width:100px; }

.news_box_table td {
    font-size: 8pt;
    line-height: 12pt;
    vertical-align: top;
    padding: 0;
}
.news_box_table th {
    vertical-align: top;
    width: 100px;
    padding-left: 5px;
    letter-spacing: 1pt;
}

#arrow_box {
   margin: 20px auto 30px;
   clear: both;
   overflow:hidden;
}
#arrow_box .arrow {
   width: 50px;
   cursor: pointer;
   font-size: 8pt; 
   font-family: "Cardo", serif;
}
#next_arrow { text-align: right; }
#preview_arrow { display: none; }



/* publication用 */
.pub_thum {
  display:none;
}
.pub_thum img {
  border:solid 1px #cccccc;
}
#pub_more {
  display:none;
  position:absolute;
  z-index:200;
  width:1004px;
  height:900px;
  overflow:hidden;
  top:160px;
  margin-left:-20px;
  background-color:#ffffff;
}
#pub_more img {
  float:left;
  margin-left:20px;
  margin-bottom:20px;
}
#pub_more .news_title { padding-left:20px; }
#news_text {
  font-size:8pt;
  margin-left:20px;
}
#news_close {
  font-size:8pt;
  width:60px;
  text-align:center;
  cursor:pointer;
  margin-left:940px;
}

.news_box .img_more:hover,
.news_box a img:hover {
  opacity:0.5;
  cursor:pointer;
}


/****************************/



/* works.html */
#works_contents {
	width: 810px;
	/*height: 1200px;*/
	float: right;
}

#works_all {
	width: 810px;
	/* height 1200 padding 0 margin:0  20140204 */
}
/*
#works_house, #works_interior, #works_projects, #works_products {
	height: 800px;
	width: 810px;
	display: none;
	padding: 0;
	margin: 0;
}
*/

#works_side {
	float: left;
	width: 170px;
	height: 200px;
	position: fixed;
	color: #888888;
}
#works_side ul {
	margin: 0px;
	padding: 0px;
}
#works_side ul li {
	font-family: 'Cardo', serif;
	list-style-type: none;
	font-size: 10pt;
	display: block;
	width: 60px;
	margin-top: 5px;
}
#works_side ul li#wsall:hover,
#works_side ul li#wshouse:hover,
#works_side ul li#wsinterior:hover,
#works_side ul li#wsprojects:hover {
	color: #000;
	font-weight: bold;
	cursor: pointer;
}
.workscurrent {
	color: #000000;
	font-weight: bold;
}
.works_select {
	cursor:pointer;
}


/* works.html サムネイル */
.works_box {
	float: left;
	width: 250px;
	margin-left: 20px;
	margin-bottom: 20px;
	height: 180px;
        display: none; /*20140204*/
}
.works_box a:hover { opacity: 0.5; }

.works_box h3 {
	font-size: 8pt;
	font-weight: normal;
	padding: 0px;
	margin: 5px 0 0;
	line-height: 1em;
        color: #000;
}

.worksitalic {
	font-style: italic;
	color: #888888;
	float: right;
	font-size: 8pt;
	font-family: "Cardo", serif;
	font-weight: normal;
	}


.noItem {
	font-size: 8pt;
	font-weight: normal;
	padding: 0px;
	line-height: 1em;
        color: #000;
}


/* works 個別ページ */
#works-detail {
    overflow:hidden;
    position: relative;
}
#works-detail .fl { width: 190px; }
#works-detail .fr {
    width: 773px;
    height: 593px;
}


.ws_title {
	font-weight: normal;
	padding-bottom: 1px;
	line-height: 10pt;
}

.ws_title h3 {
	font-size: 8pt;
	color: #000;
	font-weight: normal;
	display: block;
	letter-spacing: 0;
	line-height: 10pt;
	border-bottom: solid 1px #000;
	margin: 0px;
	padding: 0;
}

.ws_menu {
	height: 70px;
}
.ws_menu li {
	height: 10px;
	padding-top: 4px;
	font-size: 8pt;
        font-family: Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',"ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
	letter-spacing: 1pt;
	list-style-type: none;
}
.entitle {
	font-family: 'Cardo', serif;
	font-size: 8pt;
	font-style: italic;
	color: #888888;
	float: right;
	line-height: 8pt;
	padding: 0px;
	margin: 2pt 0 0;
}
#worksimage_thumb {
	width: 200px;
	margin-top: 4px;
	margin-left: -10px;
}

#worksimage_thumb .thumb {
    float: left;
    margin: 8px 0 0 10px;
    overflow:hidden;
    width: 90px;
    height: 55px;
}
#worksimage_thumb .thumb.blank { background:#ccc; }
#worksimage_thumb .thumb img:hover { opacity: 0.5; }

#worksimage {
	/* height: 580px; */
	width: 773px;
	text-align: center;
	position: absolute;
      bottom:0;
    display: none;
}



#worksimage img { vertical-align: bottom; }
/*
#worksimage img:first-child { display: inline-block; }
*/

#conceptimage,
.backimage {
    display:none;
}
.liconcept,
.backimage {
	color: #F90;
}

.liconcept:hover,
.backimage:hover {
	color: #DDD;
	cursor: pointer;
}



#worksbtm {
	padding-top:5px;
}
#worksbtm .concept-txt {
     font-size: 8pt;
     letter-spacing: 1pt;
     line-height: 2em;
	 margin: 10px 0 0 0;
}
#worksbtm .photoby {
     font-size: 10px;
	 margin: 0;
	 color: #888;
	 text-align:right;
}

#movieArea {
    width: 773px;
    padding: 31px 0;
    background: #000;
    position: absolute;
    right: 0;
    bottom: 0;
}
#movieArea .mv-in {
    position: relative;
    height: 0;
    padding-top: 56.2%;
}
#movie-player {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}



/*  about */
#aboutPage .fl{
	width: 450px;
	border-right:solid 1px #666;
}
#address_ja {
	width: 400px;
	/*height: 200px;*/
   }

#address_ja h3,
#profile_ja h3{
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	font-size: 11pt;
        line-height: 1;
}
#address_ja h4,
#profile_ja h4  {
	font-size: 8pt;
	font-weight: normal;
	line-height: 1;
	margin: 10px 0 40px;
}

#address_ja table tr th {
	font-size: 8pt;
	font-weight: normal;
	text-align: left;
	padding-right: 5px;
	vertical-align: top;
}
#address_ja table tr td{
	font-size: 8pt;
	padding-bottom: 10px;
	vertical-align: top;
}
#address_en {
	width: 400px;
	margin: 30px 0 40px;
	font-family: "Cardo", serif;
}
#address_en p{
	font-size: 8pt;
	line-height: 10pt;
}




#aboutPage .fr {
     width: 495px;
     position: relative;
}
#profile_ja {
    width: 500px;
    margin-bottom:50px;
}
#pro-img {
   position: absolute;
   right: 15px;
   top: 75px;
}
#aboutPage .fr table tr th {
	font-size: 8pt;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	width: 55px;
	padding-bottom: 10px;
}
#aboutPage .fr table tr td {
	font-size: 8pt;
	vertical-align: top;
}
#address_en h3 {
	font-weight: normal;
}
#profile_en h3 {
	font-weight: normal;
	letter-spacing: 1pt;
}
#proja {
	width: 500px;

}

#profile_en {
	clear: both;
	font-family: "Cardo", serif;
}
#profile_en h4 {
	line-height: 1px;
	font-weight: normal;
	margin-bottom: 40px;
	font-size: 8pt;
}





/* contact */
#contactPage {
	text-align: left;
	width: 500px;
	font-size: 8pt;
	margin: 20px auto;
}
#contact_end {
	text-align: left;
	width: 500px;
	height: 400px;
	font-size: 8pt;
	margin: 20px auto;
}

textarea {
	height: 300px;
	width: 400px;
}
#send,
#check,
#reset {
    line-height: 30px;
    width: 60px;
    padding: 0px;
    border: none;
    cursor: pointer;
    background: #ccc;
}
#check:hover { opacity:0.5; }

.error {
	font-size: 8pt;
	color: #F00;
	display: none;
}
.contact_font {
	font-size: 9pt;
}

/*--------------------------------------
    work flow
---------------------------------------*/
#pageWorkflow .fl {
   width: 400px;
   padding-right:50px;
  border-right:solid 1px #666;
}

#pageWorkflow .fr { width: 495px; }

#pageWorkflow h3 {
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	font-size: 8pt;
}
#pageWorkflow p{
	font-size: 8pt;
	line-height: 1.5;
}

#pageWorkflow .fl .top{
  border: solid 1px #ccc;
  width: 300px;
  height:190px;
  padding: 10px;
  margin: 27px 0;
}

#pageWorkflow .fl .top li {
	font-size:8pt;
	width:250px;
	margin-bottom: 10px;
        background:url(image/line.png) center;
	position:relative;
	height:15px;
	line-height:15px;
}
#pageWorkflow .fl .top li span { 
  position:absolute;
  display:block;
  background:#fff;
  font-size:8pt !important;
}
.back_none {
   background:none !important;
}

#pageWorkflow .fl .btm li,
#pageWorkflow .fr li { margin-bottom: 30px; position:relative; }

#pageWorkflow .top01 {
	 top:0;left:0; padding-right:10px;
 }
#pageWorkflow .top02 { top:0;right:0; padding-left:10px;}



/*===========================================
    travel
=============================================*/
#travel-contents {
	width: 810px;
	/*height: 1200px;*/
	float: right;
}

#travel-all {
	width: 810px;
	/* height 1200 padding 0 margin:0  20140204 */
}

#sidebar {
	float: left;
	width: 170px;
	height: 200px;
	position: fixed;
	color: #888888;
}
#sidebar ul {
	margin: 0px;
	padding: 0px;
}
#sidebar ul li {
	font-family: 'Cardo', serif;
	list-style-type: none;
	font-size: 10pt;
	display: block;
	width: 120px;
	margin-top: 5px;
	cursor:pointer;
}
#sidebar ul li:hover {
	color: #000;
	cursor: pointer;
}
.travel-current {
	color: #000000;
	font-weight: bold;
}

.travel-box {
	float: left;
	width: 250px;
	margin:0 0 20px 20px;
	height: 180px;
    display: none; /*20140204*/
}
.travel-box:hover { opacity:0.5; }

.travel-box h3 {
        color: #000;
	font-size: 8pt;
	font-weight: normal;
	padding: 0px;
	margin: 5px 0 0;
	line-height: 1em;
}

.travel-italic {
	font-style: italic;
	color: #888888;
	float: right;
	font-size: 8pt;
	font-family: "Cardo", serif;
	font-weight: normal;
}



/* travel 個別ページ */
#travel-detail {
    overflow:hidden;
    position: relative;
}
#travel-detail .fl { width: 190px; }
#travel-detail .fr {
    width: 773px;
    height: 617px;
	position:relative;
}

.travel-title {
	font-weight: normal;
	border-bottom: solid 1px #000;
}

.travel-title-ja {
/*
	font-family: 'Hiragino Kaku Gothic ProN',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
*/
	font-size: 13px;
	font-weight: normal;
	margin: 0px;
	padding: 0;
}
.travel-title-en {
	font-family: 'Cardo', serif;
	font-size: 8pt;
	font-style: italic;
        font-weight: normal;
	color: #888888;
	margin: 2pt 0 0;
}

.travel-menu {}
.travel-menu li {
	height: 10px;
	padding-top: 4px;
	font-size: 11px;
	letter-spacing: 0.05em;
	list-style-type: none;
}

#travel-thumb {
	width: 200px;
	margin: 4px 0 0 -10px;
}

#travel-thumb .thumb {
    float: left;
    margin: 8px 0 0 10px;
    overflow:hidden;
    width: 90px;
    height: 55px;
}
#travel-thumb .thumb.blank { background:#ccc; }
#travel-thumb .thumb img:hover { opacity: 0.5; }

#travel-image {
    /* height: 580px; */
    width: 773px;
    text-align: center;
    position: absolute;
    bottom: 0;
    display: none;
}
#travel-image img { vertical-align: bottom; }


#travelbtm p {
	font-size: 8pt;
	letter-spacing: 1pt;
	line-height: 2em;
	padding-top: 10px;
}



/*========================
  blog
===========================*/
#blog-container {
     overflow:hidden;
     margin-bottom: 50px;
     padding-bottom: 10px;
}
#blog-contents {
    width: 700px;
    float: left;
    
}

#bread-nav {
   overflow:hidden;
   margin-bottom: 30px;
}
#bread-nav li {
   float: left;
   margin-right: 10px;
   font-size: 13px !important;
   line-height:1.5;
}
#blog-contents .blog-title {
	font-family: 'Cardo', serif;
	font-size: 11pt;
	font-weight: normal;
	margin: 0px;
}


#blog-contents p {
/*
   font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
*/
   margin:0;
}

#archive-list .thumb {
    width: 150px;
    height:150px;
    overflow:hidden;
    text-align: center;
    line-height: 150px;
   /* background: #eee; */
}
#archive-list .thumb img { max-width: none; }

#archive-list li {
   overflow:hidden;
   position: relative;
   padding-bottom: 30px;
   margin-bottom: 30px;
   border-bottom: dotted 1px #222;
}

#archive-list li .fr {
    width: 530px;
}

.blog-title {
    font-size: 16px;
}
#archive-list li .sub {
   overflow: hidden;
   margin:5px 0 10px;
}
#archive-list li .sub span {
    font-size: 9pt;
    font-family: "Cardo", serif;
    font-style: italic;
    color: #888;
    float:left;
    margin-right:10px;
}
.blog-date {
}
.cat {
   font-size: 15px;
}
.cat a:hover {
   color:#000;
   text-decoration: underline;
}


.blog-excerpt {
   clear:both;
   font-size: 13px;
   line-height:1.5;
}

#blog-detail p,
#blog-detail div {
   font-size: 13px;
   line-height:2;
}
#blog-detail .sub {
   overflow: hidden;
   margin:5px 0 10px;
}
#blog-detail .sub span {
    font-size: 9pt;
    font-style: italic;
    font-family: "Cardo", serif;
    color: #888;
    float:left;
    margin-right:10px;
}

#blog-detail img {
   margin:20px 0;
   max-width: 100%;
   height:auto;
}

#blog-detail img.aligncenter {
       display: block;
       margin: 20px auto;
}

#article-pager {
   overflow:hidden;
   margin: 50px 0;
}


#archive-list li .more {
   font-size: 11px;
   border:solid 1px #ccc;
   padding: 3px 10px;
   position: absolute;
   right:0;
   bottom: 30px;
}
#archive-list li .more:hover {
   background: #000;
   color: #fff;
}

.wp-pagenavi a,
.wp-pagenavi span {
   display: inline-block;
   font-size: 13px !important;
}



#blog-sidebar {
   width: 200px;
   float: right;
}
#blog-sidebar .side-box { padding-bottom: 30px; }
#blog-sidebar .side-title {
   font-size: 13px;
   font-family: "Cardo", serif;
   padding: 10px;
   margin:0 0 20px;
   border-top: solid 2px #000;
   border-bottom: dotted 1px #000;
}

#blog-sidebar .side-list li {
   padding-left: 10px;
}

#blog-sidebar #blog-archive li { font-size: 13px; line-height: 1.3; }
#blog-sidebar #side-archive-list li { font-size:12px; line-height: 1.3;}

#blog-sidebar #side-archive-list .date-year {
    font-size: 12px;
    font-weight: normal;
    line-height: 1.3;
    margin:0;
    cursor: pointer;
}
#blog-sidebar #side-archive-list li .date-year:before {
    display: inline-block;
    content:'▼';
    margin-right: 3px;
	transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);

-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#blog-sidebar #side-archive-list li.active .date-year:before {
	transform: rotate(0);
        -moz-transform: rotate(0);
	-webkit-transform: rotate(0);
	-o-transform: rotate(0);
	-ms-transform: rotate(0);
}

#blog-sidebar #side-archive-list .cat-level01 > li { padding-bottom: 3px; }

#blog-sidebar #side-archive-list .cat-level02 { padding-left: 5px; margin-top:3px; display:none; }
#blog-sidebar #side-archive-list .cat-level02 a { color: #888; margin-right: 3px; }

#blog-sidebar #side-archive-list li.active .cat-level02 { display:block; }


.thumb a img:hover {
  opacity:0.5;
  cursor:pointer;
}

/*===============================================

   sp style

================================================*/
@media (max-width: 480px) {
   .sp { display: block; }
   .pc { display: none; }

   #wrapper {
       width: 100%;
       min-width: 320px;
       box-sizing:border-box;
       padding: 60px 10px 0 10px;
   }

   #global-header,
   #blog-contents,
   #blog-sidebar,
   #global-footer,
   .inner {
      width: 100%;
      float:none;
   }

   #global-header {
        position: fixed;
        z-index: 1000;
        top:0;
        left:0;
        height: 40px;
        background: #fff;
   }
   #global-header.active { z-index: 2000; }

   #global-header h1 {
       width: 280px;
       margin:0;
       float:none;
       position: fixed;
       top: 15px;
       left: 10px;
       z-index: 1100;
   }
   #global-header h1 a {
       width: 280px;      
   }
   #menu-btn {
       width: 20px;
       height: 20px;
       position: fixed;
       right: 10px;
       top: 10px;
       background:url(image/menu_btn.png) no-repeat;
       background-size: cover;
       z-index: 1100;
   }

   #global-header #menu {
       position: fixed;
       margin-top: 0;
       height: auto;
       top: 40px;
       width: 100%;
       background:#fff;
       z-index: 1100;
       opacity: 0;
       visibility: hidden;
       right: -480px;
/*
       left:0;
       right: initial;
*/
-moz-transition-duration: 300ms;
-webkit-transition-duration: 300ms;
-o-transition-duration: 300ms;
-ms-transition-duration: 300ms;
transition-duration: 300ms;
   }

   #global-header.active #menu {
       opacity: 1;
       right: 0;
       visibility: visible;
   }
   #menu ul {
       background: #fff;
       padding: 0 10px 10px;
   }
   #menu ul li {
       float:none;
       height: auto;
       line-height: initial;
       padding:0;
       border-bottom: dotted 1px #ccc;
       border-right: none;
   }
   #global-header #menu ul li a {
       display: block;
       padding: 5px;
       font-size: 14px;
   }

   
   #blog-contents { margin-bottom: 50px; }

   #archive-list li .fl { width: 35%; }
   #archive-list li .fr { width: 60%; }
   #archive-list .thumb {
       width: auto;
       height: auto;
       line-height: initial
   }
   #archive-list .thumb img {
        max-width: 150px;
        width: 100%;
        height: auto;
   }





   /*--------------------
      TOP
   ----------------------*/
   #top_contents {
       height: auto;
       width: 100%;
   }
   #top_contents ul li,
   #top_contents .bx-wrapper img {
       width: auto;
       height: auto;
   }
   #information_contents {
       height: auto;
       width: 100%;
       margin: 20px auto 50px;
       clear: both;
   }
   #information_contents .i_c_ttl {
		margin: 0 0 20px 0;
	}
   #information_contents .information_box {
       float: none;
       height: auto;
       width: 100%;
       margin: 0 auto 20px;
   }
   #information_contents .information_table { width: 100%; }
   #information_contents .information_table th { width: 40%; }
   #information_contents .information_table th img {
       width: 100%;
       height: auto;
   }
   #information_contents .information_table td {
       width: 60%;
       box-sizing: border-box;
   }

   /*--------------------
      about
   ----------------------*/
   #aboutPage .fl,
   #aboutPage .fr,
   #address_ja,
   #address_en,
   .profile_image_box iframe,
   #profile_ja,
   #profile_ja table {
       width: 100%;
       border-right: none;
       float: none;
   }
   #aboutPage #profile_ja { margin-top: 70px; }
   #pro-img {
       right: 0;
       top: -50px;
       width: 80px;
   }


   /*--------------------
      news, publications
   ----------------------*/
   .news_list {
      width: 100% !important;
      float: none;
      border-left:none;
      margin-left: auto;
      padding-left: 0;
  }

   .news_box {
      height: auto;
      margin-bottom: 30px;
      padding-bottom: 30px;
      border-bottom: dotted 1px #ccc;
   }

   #pub_more {
       position: fixed;
       width: 100%;
       height: 100%;
       overflow-y: scroll;
       top: 0;
       left: 0;
       box-sizing: border-box;
       padding: 50px 10px 0;
       margin-left: 0;
       z-index: 3000;
    }
   #news_close {
        margin-left: 0;
        float: right;
   }
   #pub_more img {
       float: none;
       margin-left: 0;
       width: 100%;
   }
   #pub_more .news_title { padding-left: 0; }
   #news_text { margin-left: 0; }

   /*--------------------
      works, travel
   ----------------------*/
    /* 一覧 */
    #works_side,
    #sidebar {
       float: none;
       width: 100%;
       height: auto;
       padding-bottom: 10px;
       text-align: center;
       top: 40px;
       left: 0;
       background: #fff;
       z-index: 1000;
    }
    #works_side ul li,
    #sidebar ul li {
       display: inline;
       width: auto;
       margin: 0 5px;
       font-size: 13px;
       -webkit-text-size-adjust: 100%;
    }

    #works_contents,
    #works_all,
    #travel-contents,
    #travel-all {
       width: 100%;
       float: none;
    }

    #works_contents,
    #travel-contents {
        overflow: hidden;
    }
    .works_box,
    .travel-box {
        width: 46%;
        height: auto;
        min-height: 160px;
        margin: 0 2% 20px;
    }

    .works_box h3,
    .travel-box h3 { line-height: initial; }
    .worksitalic,
    .travel-italic {
       float: none;
       display: block;
       text-align: right;
    }

    /* 詳細 */
    #works-detail .fl,
    #works-detail .fr,
    #travel-detail .fl,
    #travel-detail .fr {
       width: auto;
       height: auto;
       float: none;
   }
   #spimage-list { margin-top: 20px; }
   #spimage-list li { margin-bottom: 15px; }
   #spimage-list li img {
       width: 100%;
       max-width: initial;
   }


	#movieArea {
		display:block !important;
        width: 100%;
		padding: 0;
		position: initial;
	}

 
   /*--------------------
        contact
   ----------------------*/
    #pageWorkflow .fl,
    #pageWorkflow .fr { 
         width: 100%;
         float: none;
    }
    #pageWorkflow .fl .top {
       width: 100%;
       height: auto;
       box-sizing: border-box;
    }

   /*--------------------
        contact
   ----------------------*/
    #contactPage { width: auto; }
    #contactPage input[type=email],
    #contactPage input[type=text],
    #contactPage textarea {
         box-sizing: border-box;
         border: solid 1px #ccc;
         width: 100%;
         font-size: 16px;
    }
}


@media (max-width: 320px) {
   #global-header h1,
   #global-header h1 a {
       width: 260px !important;
   }

   #archive-list li { padding-bottom: 40px; }
}