/*
 * Natsu22固有のレイアウト。skeleton.css・base.cssの後に読み込む。
 * 共通部の下に979px以下の上書きを配置。SVGの寸法とメニュー配置もここで管理する。
 */
/*--------------------------------------------------------*/
/* ヘッダーと表示切替：.allmenuはSVG定義、.pc_view/.sp_viewはPC/SP用ナビ。 */
.allmenu{
display:none;
}
.pc_view{
	display:block;
}
.sp_view{
	display:none;
}
.wrapper{
margin:0vh 0px 0px 0px;
}

/* JSがiframeに付けるラッパー。本文・一覧とも16:9を基準とし、二重ラップはapp.jsで防ぐ。 */
.iframeWrap,
.media-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 15px;
}
.iframeWrap iframe,
.media-container iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

h1{
display: block ;
width: 100%;
text-align:right;
padding:20px 0;
}
h1 a{text-decoration: none !important;/*for opera*/}
h1 .logo{
	width:202px;
	height:67px;
}

/* 投稿一覧トップのみ、ロゴ領域に1画面分の高さを確保。SPでは後段で解除する。 */
.top_logo{
	height:100vh;
	padding:30vh 0px 0px 0px;
}


/* SVGナビ：個別の横幅は各symbolのviewBoxに対応。塗り色はfillで変更する。 */

.nav ul{
}
.nav ul li{
margin: 0 0 10px 0;
text-align:right;
}
.nav .menu_btn{
	height:20px;
	text-align:left;
	fill: #000; 
	transition: 0.5s;
}
.nav .menu_btn:hover{
	fill: #666; 
}


.m_news{width:68px;}
.m_portfolio{width:107px;}
.m_products{width:113px;}
.m_profile{width:81px;}
.m_contact{width:97px;}
.nav .menu_btn.m_insta{width:114px;height:26px;}



/*--------------------------------------------------------*/
/* 一覧カードの重ね文字。p-name固有の文字色は後段で上書きする。 */


.feature span{
color: rgb(255, 255, 255); 
color: rgba(255, 255, 255, 0.5); 
}

/*--------------------------------------------------------*/
/* コンテンツ：トップは.topwrap、下層ページはheader.phpの.thirteen.columns内に表示。 */

.topwrap{
	width: 960px;
	float: left ;
	display: inline;
}

article.index_article{}
article.single_article{}
article.list_article{}
aside{margin-left: 20px;}

/* 検索専用。画像の有無にかかわらず、タイトルと抜粋を縦に並べる。 */
.search-results {
	overflow-wrap: anywhere;
}
.search-results .search-result {
	padding: 20px 0;
	border-top: 1px solid #ddd;
}
.search-results .search-result-title {
	margin: 0 0 10px;
	padding: 0;
	font-size: 18px;
	line-height: 1.5;
}
.search-results .search-result-title a {
	text-decoration: none;
}
.search-results .search-result-excerpt {
	margin: 0;
	line-height: 1.7;
}

.single-main{
padding:30px 20px 30px;
margin: 0 0 30px 0;
background:rgba(255,255,255,0.9);
border-radius: 3px
}


/* 本文見出し。base.cssの汎用見出しより優先する。 */
.single-main h2,
.single-main h3,
.single-main h4,
.page h2{letter-spacing: 0.1em ;}


.single-main h2{
padding: 0 0 5px 19px ;
margin:0 0 20px 0 ;
clear: both ;
font-weight: bold ;
}
.single-main h3{
font-size: 22px;
padding: 8px 0 10px 11px ;
margin:45px 0 15px 0 ;
font-weight: bold ;
}
.single-main h4{ 
padding: 8px 0 3px 11px ;
font-size: 18px; 
line-height: 22px; 
margin:25px 0 15px 0 ;
color: #575757 ;
border-bottom: 1px solid #f5f5f5 ;
}

.page h2{
margin:0 0 25px 0 ;
}

.single-main h2 a,
.page h2 a{text-decoration: none ;}

/* 一覧画像と本文画像。縦横比を維持し、カード幅に収める。 */

#headerImage{margin-bottom: 0px ; }
#headerImage img{
max-width: 100% ;
height: auto ;
margin-top: 0 ;
}

.feature{position: relative;}
.feature span{
position: absolute ; 
bottom: 10px ; 
left: 10px ;
z-index: 1 ;
font-size: 9px ;
} 

.feature img,
.single-main img {
max-width: 100% ;
height:auto;
}
.index_article section{margin-bottom: 15px ;}

.index_article iframe{
width:100%;
}

/* 本文内のリスト・整形済みテキスト・タグ等。既存記事の装飾を引き継ぐ。 */

.single-main ul,
.single-main ol{margin:10px 0 10px 25px ;}
.single-main ul li{list-style-type: decimal; line-height: 14px ; margin: 10px 0 0 0 ;}
.single-main ol li{list-style-type: circle; line-height: 14px ; margin: 10px 0 0 0 ;}

pre{
font-size: 12px;
padding: 15px ;
margin: 0 ;
background: #f9f9f9 ;
border-left: 1px solid #ccc ;
line-height: 20px ;
overflow: auto ;
white-space: pre-wrap ;
word-wrap: break-word ;
margin:0 0 20px 0 ;
}

aside.tags{
margin-top: 30px ;
}
aside.tags ul{
margin-left: 0 ;
}
.tags ul li{list-style-type: none ;}
.tags ul li a{
padding: 2px 5px ; 
background: #f1f1f1 ; 
border: 1px solid #d1d1d1 ; 
text-decoration: none ; 
border-radius: 3px ;
}
.tags ul li a:hover{
background: #d9d9d9 ; 
color: #262626 ;
}
.single-main p{
word-wrap: break-word;
line-height: 20px ;
margin-bottom: 20px ;
}

.p-name{
font-size: 10px ;
color: #6a6a6a ;
padding-left: 5px ;
}
address span{
font-size: 11px ;
color: #6a6a6a ;
vertical-align: middle ;
}

/* ページ送り。.fl/.frは各一覧テンプレートの前後リンクに対応。 */

nav .fl{float: left ;}
nav .fr{float: right ;}
.navigation{padding:20px 0px 0px 0px;}
.navigation a {
font-weight:bold;
padding: 8px 10px;
background: rgb(241, 241, 241); 
background: rgba(241, 241, 241, 0.9);  
text-decoration: none ; 
border-radius: 4px;
}

/*--------------------------------------------------------*/
/* フッター・既存ウィジェット向けスタイル。ウィジェット出力の有無はテンプレート側で決まる。 */

.footer{
display: block ;
margin-top: 20px ;
padding-top: 5px ;
height: auto ;
text-align:center;
margin-bottom: 10px ;
}
footer input#s{width: 150px ;}
footer input{
float: left ;
padding: 0 ; 
margin: 0 ;
}
.copyright{
font-weight:bold;
margin: 2px 0 ;
line-height: 18px ;
}

.widget h2,
.widget h3,
footer h3{
padding: 0 0 5px 5px ;
margin: 0 0 15px 0 ;
font-size: 14px ;
font-weight: bold ;
width: 100% ;
}

/* app.jsでスクロール量に応じて表示。アイコンはFont Awesomeを使用する。 */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 350%;
}
#page-top a {
	text-decoration: none;
	color: rgb(241, 241, 241); 
	color: rgba(241, 241, 241, 0.8);  
	text-align: center;
	display: block;
	transition: 0.5s;
}
#page-top a:hover {
	text-decoration: none;
	color: rgba(255, 255, 255, 1);
}

/*--------------------------------------------------------*/

/*--------------------------------------------------------*/
/* 404と検索0件の共通表示。両テンプレートで.noresultsを使用する。 */

.noresults{
width: 100% ;
height: auto ;
margin: 100px 0 150px ; 
padding: 0 ;
}
.noresults h2{/*404*/
text-align: center ;
font-size: 55px ;
background: none ;
padding: 30px 0 5px 0 ;
}
.noresults p{text-align: center ;}


/*--------------------------------------------------------*/
/* 旧Facebookページ用の互換スタイル等。Canvas SDK自体は現在使用していない。 */

.fb_fangate_file header {margin: 5px 0 5px ;}
.fb_fangate_file header h1{font-size: 12px ;text-align:left ;}
h2.fangate_h2{text-align: center ;margin: 5px 0 5px ;}

.overlay {
display: block ;
width: 100% ;
margin: 0 ;
background: #fff ;    
position: fixed ;
top: 0px ;
bottom: 0px ;
left: 0px ;
right: 0px ;
z-index: 1000 ;
opacity: 0.98 ;
}
.overlay .content {margin: 10px ;}

.modal {
margin: 0 ;
padding: 0 ;
}
ul.tabs-content{
margin: 0 ;
padding: 0 ;
}
ul.tabs-content li{
list-style-type: none ;
line-height: 20px ;
}




/* 979px以下：背景・ナビ・カードをSP用に切替。skeleton.cssと同じ境界で固定幅のはみ出しを防ぐ。 */
@media only screen and (max-width: 979px) {
body:before {
	background:url('../images/bg_sp2.jpg') no-repeat center top;
	background-size: 100% auto;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 108px;
	content: "";
	z-index: -1;
} 
	
.pc_view{
	display:none;
}
.sp_view{
	display:block;
}
.top_logo{
	height:auto;
	padding:0 0;
}
.topwrap{
	width: 100%;
}
/* トップのカードを2列にする。左右paddingを含めた横幅で調整する。 */
.topwrap .four.columns{
	width: 45%;
	padding:0px 2% 0px;
}
	
.nav a {
padding: 12px 6px 5px;
background: rgb(241, 241, 241); 
background: rgba(241, 241, 241, 0.9);  
text-decoration: none ; 
border-radius: 3px;
transition: 0.5s;
}
.nav a:hover {
color: #8b8b8b ;
background: rgb(255, 255, 255) ; 
background: rgba(255, 255, 255, 0.7) ; 
}
.nav ul{background: none !important;
margin: 0;
}
.nav ul li{
margin: 2px;
	display: block;
	margin: 0;
	text-align: center ;
	margin-bottom: 0px ;
	width: 100% ;
	padding: 2px 0 ;
}
.nav ul li a{
	display: block;
	width: 97% ;
}
.widget{
border-bottom: 1px solid #e9e9e9 ;
padding: 30px 0 ;
font-size: 11px ;
}



.tags ul li a{
font-size: 10px ;
margin-bottom: 3px ;
}

.noresults h2{font-size: 40px ;}
.copyright{
font-size: 11px ;
margin-top: 20px ;
}
}