/*
Theme Name: responcive
Theme URI: http://makoto-web.sub.jp/ezuko-park/wp-content/themes/responcive
Author: A-ONE
Author URI: http://makoto-web.sub.jp/ezuko-park/
Description: ＊＊＊＊＊＊＊＊＊＊＊＊
Version: 1.2
Tags: 
*/


@charset "utf-8";


/* -----------------------------------------------------------------------------
共通レイアウト
------------------------------------------------------------------------------ */
#container {
    border-top: 6px solid #b4d465;
    background: url(img/base/bg_footer.gif) no-repeat bottom;
}
/*全体幅指定*/
.Inner {
	width: 1000px;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width: 768px){
	.Inner{
		width: 100%;
		float: none;
	}
	#container{
		margin-top: 62px;
	}
}/*max-width: 768px*/

@media screen and (max-width: 480px){
	#container{
		margin-top: 84px;
	}
}/*max-width: 480px*/

/* -----------------------------------------------------------------------------
ブログカードをレスポンシブ対応に
------------------------------------------------------------------------------ */
.wp-embedded-content {
width: 100%;
}

/* -----------------------------------------------------------------------------
フォトギャラリーを最大幅で表示させるため
------------------------------------------------------------------------------ */
.footer_insta {
	margin: 0 calc(50% - 50vw);
	background-color: #dfd8c8;
}

/*左コラム*/
#con_left {
    width: 220px;
    float: left;
}
#con_left #logo {
    margin-top: 65px;
    margin-bottom: 22px;
}
#con_left ul#gnavi {
    margin-bottom: 15px;
    background: #fff;
    border: 2px solid #b4d465;
    border-radius: 5px;
}
#con_left ul#gnavi li a {
    color: #5f4b3e;
    font-size: 14px;
    font-weight: bold;
    display: block;
    padding: 10px;
    border-bottom: 1px dotted #ccc;
    background: url(img_common/gnaviBg_off.gif) no-repeat 0 0.8em;
    background-position-x: right;
}
#con_left ul#gnavi li a:hover {
	color: #b4d465;
	background: url(img_common/gnaviBg_on.gif) no-repeat 0  0.8em;
	 background-position-x: right;
}
#con_left ul#bannerEria {
    text-align: center;
}
#con_left ul#bannerEria li {
	margin-bottom: 15px;
}
/*右コラム*/
#con_right {
    width: 750px;
    float: right;
    margin-top: 60px;
}
@media screen and (max-width: 768px){
	#con_right,
	#con_left{
		width: 100%;
		float: none;
		margin:0 auto;
		display: block;
	    padding: 0px;
	    box-sizing: border-box;
	}
	#con_left{padding: 0px 10px;}
}/*max-width: 768px*/

/*フッター*/
#footer {
	padding-top: 20px;
	}
	#footer p.pagetop {
	    position: fixed;
	    bottom: 20px;
	    right: 20px;
	}
	#footer p.pagetop img {
	    width: 60px;
	    height: 60px;
	    opacity: 0.8;
	}
	#footer dl dt {
		font-weight: bold;
		font-size: 116.7%;
		padding-bottom: 6px;
	}
	#footer dl dd a:hover {
		text-decoration: none;
		color: #ff8232;
	}
	#footer dl dd a {
		cursor: pointer;
		text-decoration: underline;
		color: #ff6400;
	}
	#footer p#flink {
	    text-align: right;
	    margin-bottom: 10px;
	}
	#footer p#flink a:hover {
		text-decoration: none;
		color: #7f6f64;
	}
	#footer p#flink a {
	    cursor: pointer;
	    text-decoration: underline;
	    color: #5f4b3e;
	    border-left: 1px solid #555;
	    padding: 0px 11px;
	    line-height: 20px;
	}
	#footer .absolute{
		bottom: 10px;
	}
	#footer li.tRight{
		margin-right: 130px;
	    margin-bottom: 10px;
	}
	#footer .copyright {
	    text-align: right;
}

@media screen and (max-width: 768px){
	#footer{
		background:none;
	}
	#footer .pc7 {
	    background: #caf0f4;
	    display: none;
	}
	#footer p#flink {
	    padding: 0px 10px;
	    margin-bottom: 5px;
	}
	#footer p#flink a {
	    background: #76c9d1;
	    display: block;
	    border-bottom: 2px dotted #caf0f4;
	    border-left: none;
	    padding: 5px 10px;
	    text-align: left;
	    color: #fff;
	    text-decoration: none;
	}
	#footer p#flink a:before {
	    content: "\f0da";
	    font-family: FontAwesome;
	    margin-right: 10px;
	    font-size: medium;
	    color: #fff;
	}
	#footer .absolute {
	    position: inherit;
	}
	#footer .copyright{
		text-align: center;
	}
	#footer li.tRight {
	    margin: 5px 0px;
	    text-align: left;
	}
	#footer p.pagetop {
	   
	}
	#footer .flexbox dl dt,
	#footer .flexbox dl dd {
	    text-align: center;
	}
}/*max-width: 768px*/



/* -----------------------------------------------------------------------------
スマホメニュー　(主な指定は meanmenu.css に記載)
------------------------------------------------------------------------------ */
/*PC非表示*/
header.spmenu{display: none;}

/*タブレットサイズから表示*/
@media screen and (max-width: 768px){
	header.spmenu {
		display: block;
	    /*position: relative;*/
	    top: 0;
	    position: fixed;
	    padding: 10px;
	    height: 40px;
	    width: 90px;
	    z-index: 1200;
	}
	#spmenu {
	    /*position: absolute;*/
	    position: fixed;
	    top: 0px;
	    width: 100%;
	    z-index: 1100;
	    background: #fff;
	}
}/*max-width: 768px*/

@media screen and (max-width: 480px){
	#sptel {
	    background: #555;
	    position: fixed;
	    top: 64px;
	    width: 100%;
	    color: #fff;
	    text-align: center;
	    z-index: 99999999;
	}
	#sptel .sp4 {
	    margin: 0px;
	    padding: 0px;
	    box-sizing: border-box;
	}
	#sptel .tel a {
	    background: #d46d2f;
	}
	#sptel .map a {
	    background: #259c35;
	}
	#sptel .facebook a {
	    background: #3b5999;
	}
	#sptel li {
	    border-right: 1px solid #fff;
	}
	#sptel li:last-child{
	    border-right: none;
	}
	#sptel li a {
	    display: block;
	    color: #fff;
	    padding: 5px;
	}
	#sptel i {
	    font-size: 22px;
	    vertical-align: sub;
	    padding-right: 6px;
	}
}/*max-width: 480px*/


/* -----------------------------------------------------------------------------
共通パーツ
------------------------------------------------------------------------------ */
h1 {
    font-size: 83.4%;
    font-weight: normal;
    width: 750px;
    position: absolute;
    top: 0px;
    box-sizing: border-box;
    padding: 5px 10px;
    left: 250px;
    z-index: 1000;
    margin: 10px;
    background: #fff;
}

@media screen and (max-width: 768px){
	h1{display: none;}
}/*max-width: 480px*/

.pagetitle {
    background: url(img/base/bg_h2title.png) no-repeat;
    background-position-x: right;
    height: 130px;
}
.pagetitle h2 {
    font-family: 'Sawarabi Gothic';
    line-height: 1.2em;
    font-size: 35px;
    color: #5f4b3e;
    font-weight: bold;
    padding: 40px 0px 10px 0px;
}
@media screen and (max-width: 480px){
	.pagetitle h2 {
	    font-size: 25px;
	}
}/*max-width: 480px*/


/* -----------------------------------------------------------------------------
各ページ別 (top)
------------------------------------------------------------------------------ */

#top #con_right h2 {
	position: absolute;
	left:0;
	top: 360px;
	z-index: 1000;
	}
	#top h1{background: none;}
	#top .pagename {
	    font-size: 83.4%;
	    font-weight: bold;
	    color: #5f4b3e;
	    margin-bottom: 5px;
	}
	#top #con_right {
	    margin-top: 0px;
	}
	#top #infoEria dl {
	    width: 100%;
	}
	#top #infoEria dl dt {
	    width: 115px;
	    float: left;
	}
	#top #infoEria dl dd {
	    float: left;
	}
	#top .top_slider {
	    position: relative;
	}
	#to #infoEria a {
	    color: #9ac52e;
	    font-size: 14px;
	    font-weight: normal;
	}
	#top h3 {
	    background: url(img/access/bk_dotted.gif) repeat-x bottom;
	    padding: 10px;
	    font-weight: bold;
	    font-size: 160%;
	    margin-bottom: 15px;
	}
	#top .glt-elm{display: none;}
	#top #infoEria {
		padding: 15px;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 10px;
	}
	#top .bx-wrapper .bx-prev,
	#top .bx-wrapper .bx-next,
	#top .bx-wrapper .bx-controls-auto .bx-start,
	#top .bx-wrapper .bx-controls-auto .bx-stop{
		display: none;
	}
	#top .sp5,#top .sp7 {
	    float: left;
	    box-sizing: border-box;
	}
	@media screen and (max-width: 768px){
		#top .sliderContent,
		#top .sliderContent .item,
		#top #sliderBox,
		#top #infoEria,
		#top #infoEria ul#link_area,
		#top #infoEria dl,
		#top #infoEria dl dd,
		#top #infoEria dl dt{
			width: 100%;
		}
		#top .slider {
		    width: 100%;
		    height: 460px;
		    position: relative;
	    }
		#top #con_right h2 {
			position: initial;
		}
		#top #infoEria dl{
			margin-left:0px;
			margin-right:0px;
		}
}/*max-width: 768px*/
.hrinfoeria {
	height: 15px;
	background-color: #f4f3e8;
	width: calc(100% + 30px);
	border: none;
	margin: 0 -15px 15px -15px;
}
/* -----------------------------------------------------------------------------
各ページ別 (about_s)
------------------------------------------------------------------------------ */

#about_s .bx-wrapper {
	margin-bottom: 30px;
	}
	#about_s .bx-wrapper .bx-pager {
		bottom: -5%;
	}
	#about_s ul#chiku_anchor li a {
	    background: #2c1908;
	    color: #fff;
	    display: block;
	    text-align: center;
	    border: 1px solid #555;
	    border-radius: 5px;
	}
	@media screen and (max-width: 768px){
		#about_s .bx-wrapper .bx-pager {
		    bottom: -15px;
		    text-align: center;
		}
}/*max-width: 768px*/


/* -----------------------------------------------------------------------------
各ページ別 (sansaku)
------------------------------------------------------------------------------ */
#sansaku .galleryList h4 {
	    font-size: 20px;
	    padding: 0px 0px 0px 15px;
	}
	#sansaku .galleryList h4 span{
	    float: right;
	    font-size: 11px;
	    font-weight: normal;
	}
	#sansaku .sansakumap a {
	    text-decoration: underline;
	    color: #8cb722;
	}
	@media screen and (max-width: 480px){
		#sansaku .galleryList .flexbox{
			display: block;
		}
}/*max-width: 480px*/



/* -----------------------------------------------------------------------------
各ページ別 (info)
------------------------------------------------------------------------------ */

#info.kiji dl {
	    padding: 0 0 20px;
	    background: url(img/info/bk_info.gif) no-repeat bottom;
	}
	#info.kiji  dl dt {
	}
	#info.kiji dl dd {
		font-size: 116.7%;
	}
	#info.kiji dl dt p {
	    padding: 3px 10px;
	    font-size: 100%;
	    background: #ecfbc8;
	    text-align: center;
	}
	#info.kiji dl dd a {
		color: #5f4b3e;
	}
	@media screen and (max-width: 768px){
		#info.kiji dl {
		    padding: 5px 0 10px 0;
		    margin-bottom: 0px;
		}
		#info.kiji dl dt p {
		   	display: inline-block;
	    	padding: 0px 5px;
		}
}/*max-width: 768px*/

/* -----------------------------------------------------------------------------
各ページ別 (ezukompeg)
------------------------------------------------------------------------------ */

.youtube-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.youtube-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* -----------------------------------------------------------------------------
ギャラリー部分
------------------------------------------------------------------------------ */
.galleryList .pc5k {
		padding:5px;
}
.galleryList img {
	width: 100%;
}
.glt-elm{
	position: absolute;
    width: 280px;
    color: #fff;
    opacity: 0.9;
    visibility: hidden;
    top: 0px;
    right: 0px;
	titleOffsetX : 10;
	titleOffsetY : 10;
	fadeInTitle : true;
	fadeOutTitle : true;
	fadeStartLevel : 0.9;
}
.glt-elm p{
	background: #1E90FF;
	margin: 0.6;
	padding: 0.6em;
	font-size: 1.8em;
}
.glt-elm img{
	display: block;
}
and this CSS for IE, if you want to use transparency:

.glt-elm{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

/* -----------------------------------------------------------------------------
投稿ページ
------------------------------------------------------------------------------ */

#wp_toukou.kiji .title {
    background: url(img/access/bk_dotted.gif) repeat-x bottom;
    padding: 10px 0px 0px 0px;
    margin-bottom: 20px;
}
#wp_toukou.kiji .title h3 {
    font-size: 180%;
    line-height: 1.2em;
    float: left;
    background: none;
    padding: 0px;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
}
#wp_toukou.kiji  time {
    padding: 0 8px;
    font-weight: bold;
    color: #5f4b3e;
    background: #ecfbc8;
    float: right;
}
#wp_toukou.kiji #fbtn_all {
    width: 100%;
    padding: 30px 0px;
    text-align: center;
    background: url(img/info/bk_info.gif) no-repeat top;
}
#wp_toukou.kiji .blogBox {
    margin-bottom: 40px;
}
@media screen and (max-width: 768px){
	#wp_toukou.kiji .title h3 {
	   margin-bottom:5px;
	}
}/*max-width: 768px*/


.archive-blog #wp_toukou.kiji .title {
	background: url(img/access/bk_dotted.gif) repeat-x top;
    padding: 40px 0px 0px 0px;
    margin-bottom: 10px;
}

.hlink {
	font-size:1.2em;
	text-decoration: underline;
	font-weight:bold;
}

.paging {
    border-top: 1px dotted #555;
    margin-top: 20px;
    padding-top: 15px;
}
.paging a {
    text-decoration: underline;
    color: #44b853;
}

/* ----------------------------------------
 背景色の変更
----------------------------------------- */
.wpcf7c-conf {
    background-color: #F5F5F5; /* 背景色 */
    color: black; /* 文字色 */
    border: 1px solid #AEAEAE; /* 周りの線: 太さ　線種 線の色 */
}

/* ----------------------------------------
 ボタンのデザイン変更
------------------------------------------*/
input.wpcf7c-btn-back, 
input.wpcf7-submit,
input.wpcf7-confirm {
    width: 8em; /* ボタンの横幅: 8文字分の大きさ */
    height: 2em; /* ボタンの高さ: 2文字分の高さ */
}
input.wpcf7-confirm, 
input.wpcf7-submit {
    background: green;	/* 背景色を緑に */
    color: #fff;	/* 文字色を白に */
    border-color: #9ABB9A #80B577 #80B577 #9ABB9A;
    /* 周りの線を緑系に */
}
input.wpcf7c-btn-back {
    background: lightgray;
}

/* -----------------------------------------
　戻るボタンと送信ボタンの間の余白を調整
-------------------------------------------*/
input.wpcf7c-btn-back {
    margin-right: 1em;
}