@charset "utf-8";
/*
Theme Name: simple-members
Theme URI: https://web-creators-online.com/
Description: フリーランスワークをスマートにするWordPressテーマ
Author: fukumoto Tomoko
Author URI: https://web-creators-online.com/
*/


/*==========================================
 body
===========================================*/


body{
	-webkit-text-size-adjust : none;/*横向きにしたときに文字が大きくならないように*/
	width:100%;/*画面幅いっぱいにWebページを表示させる*/
	font-size:100%;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	 background-color: #fff;
	 color:#333;
}


/*==========================================
ユーザー一覧
===========================================*/

.writers{
    display:flex;
	margin-left: -32px;
}
.writer-profile{
	flex-grow: 0;
flex-shrink: 1;
flex-basis: calc((100% / 4) - 32px);
margin-left: 32px;
    min-height: 350px;
}

.eyecatch{
	border:1px solid #ccc;
}

.writer-profile .name{
    text-align:center;
    font-weight:bold;
    padding:10px 0;
    margin:0;
}
.writer-profile .description{
    font-size:0.8em;
	margin-bottom:16px;
}
.writer-profile .button a{
    font-size:0.8em;
}
.writer-profile .button a:after{
    content:' >';
}





/*==========================================
h1～h6 p aの共通の指定
===========================================*/

h1, h2, h3, h4, h5, h6{
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  color: inherit;
}

p { 
    margin: 0 0 1em 0;
}

/*画面幅1200px以上の場合ここから*/
@media only screen and (min-width: 1200px) {
p { 
    margin: 0 0 1.8em 0;
}
}
/*★ここまで*/


/*リンク色*/

a {
  color:#333;
  text-decoration:none;
}

a:hover {
	color:#333;
  text-decoration:underline;
	transition: 0.5s;	/*プロパティに変更があった際、一定時間でプロパティを変化させる機能。*/
}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
a:hover {
	color:#888;
	transition: 0.5s;	/*プロパティに変更があった際、一定時間でプロパティを変化させる機能。*/
}
}



/*==========================================
太字・border・行揃え用クラス・ボタン
===========================================*/

/*太字にする*/
.font-bold {
	font-weight:bold;
}



/*各行揃え用*/

.text-center {
	text-align:center;
}

.text-left {
	text-align:left;
}

.text-right {
	text-align:right;
}




/*==========================================
 フルードイメージ
===========================================*/


img{ 
max-width : 100%; /*幅の最大値を指定*/
height:auto; /*自動的に縦横を保ち拡大縮小*/
}


/*==========================================
 ヘッダーのスタイル
===========================================*/

header { 
padding:72px 0 16px;
text-align:center;
border-bottom: 1px solid #ddd;
background-color:#fff;
}

h1.site-title {
font-size : 24px;
float:none;
}

h1.site-title a{
color:#333;
}

h1.site-title a:hover{
	text-decoration:none;
	opacity:0.8;
}

h1.logo{
	line-height: 0;
	float:none;
}

h1.logo img{
max-width:80%;
}

header .inner{
	position:relative;
}


/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
	.dm-area{
		position:absolute;
		top:10px;
		right:0px;
		z-index:9999999;
	}
}

/*画面幅992px以上の場合ここから*/
@media only screen and (max-width: 991px) {
.dm-area{
		position:absolute;
		top:-66px;
		left:0px;
		z-index:9999999;
	}

}



.dm-area .btn-theme {
	white-space: normal;
	    text-decoration: none;
    height: 40px;
    line-height: 40px;/*テキストを垂直方向中央にするため高さと同じ値を入れる*/
    padding: 8px 24px;
	font-size:14px;
	color:#fff;
}

.dm-area .btn-theme:focus,
.dm-area .btn-theme:hover {
opacity:0.8; 
cursor:pointer; /*←これでカーソルを指先型に変化させる*/
	text-decoration: none;
}



/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
	
header {
padding:24px 0 16px;
text-align:left;
overflow:hidden;
}
	
h1.logo,
h1.site-title{
		float:left;
	}
	
h1.logo img{
max-width:50%;
}

	
}
/*★メディアクエリここまで*/




/*==========================================
 メインビジュアル
===========================================*/
#main-image{
	background-position:center center;
	background-size:cover;
	height:320px;
	display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
}



/*中央寄せにする*/

.main-image-inner {
width : 90%;
margin : 0 auto 0px; /*画面の左右に余白を作る*/
background: rgba(255,255,255,0.8);
padding:24px 16px;
text-align:center;
border:1px solid #fff;
}

/*画面幅1200px以上の場合ここから*/
@media only screen and (min-width: 1200px) {
.main-image-inner{
	width:1200px;/*1200px以上は固定レイアウト*/
	margin:0 auto;
	padding:40px;
}
}
/*★メディアクエリここまで*/

.main-title{
font-size: 20px;
	margin-bottom:16px;
	line-height: 1.2;
}


.main-desc{
	line-height:1.6;
}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
#main-image{
	height:480px;
	}
	
	.main-title{
font-size: 32px;
}
}




.btn-theme {
	white-space: normal;
	    text-decoration: none;
    height: 48px;
    line-height: 48px;/*テキストを垂直方向中央にするため高さと同じ値を入れる*/
    padding: 16px 48px;
	font-size:14px;
	color:#fff;
}

.btn-theme:focus,
.btn-theme:hover {
opacity:0.8; 
cursor:pointer; /*←これでカーソルを指先型に変化させる*/
	text-decoration: none;
}

/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/

/*ページの全体を中央寄せにする*/

.inner {
width : 90%;
margin : 0 auto 0px; /*画面の左右に余白を作る*/
}

 /*スマホ表示 meanmenuになった時の調整*/
.mean-nav .inner {
width : 100%;
	line-height:1.6;
}

/*画面幅1200px以上の場合ここから*/
@media only screen and (min-width: 1200px) {
.inner {
	width: 98%;
    max-width: 1200px;
	margin:0 auto;
}
}
/*★メディアクエリここまで*/



/*2カラムレイアウトの場合*/

#contents {
        width : 96%;/*画面の左右に余白を作る*/
				margin : 0 auto 56px; 
				padding-top:40px;
}

#contents #main-1column,
#contents #main{
   margin:0 10px 40px;
	 } 


#contents #sub {
   margin:0 10px 0;
	 } 

/*2カラムレイアウトのサイドバー*/

#contents #sub {
	margin-bottom:24px;
}


/*画面幅1200px以上の場合ここから*/
@media only screen and (min-width: 1200px) {
#contents {
    overflow:hidden;
	padding-top:56px;
	width: 98%;
    max-width: 1200px;
  }
	
#contents #main-1column{
margin:0 0 40px;
	 } 
	
#contents #main {
width : 848px;
   float : left;
margin:0 0 40px;
	 } 
	
#contents #sub {
   width : 320px;
   float : right;
   margin:0;
	 } 
}
/*★メディアクエリここまで*/



/*==========================================
フッター部グリッド
===========================================*/

/*親*/

.footer-container {
 display: block;
margin-top:20px;
}

.footer-grid {
margin-top: 20px;
} 

@media screen and (min-width: 992px) {
	
.footer-container {
 display: flex;
  margin-left: -32px;
}

.footer-grid {
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc((100% / 3) - 32px);
margin-left: 32px;
} 
}
/*★メディアクエリここまで*/

/*==========================================
サブページ　パンくずリスト
===========================================*/

.breadcrumb {
	padding:20px 0 0 0;
}

.breadcrumb li {
	display: inline-block;/*横並びにする　幅や高さを作らないなら値はinlineでもOK*/
	font-size:12px;
	padding: 4px 4px 4px 0;
	line-height:1.6;
}


.breadcrumb li a {
    text-decoration: none;
}


/*最初のliにはホームアイコンを表示させる*/
.breadcrumb li:first-child a:before{
font-family: "Font Awesome 5 Free";
	font-weight: 900;
  content: '\f015';
	padding-right:4px;
}

.breadcrumb li a:hover {
    text-decoration: none;
}

/*==========================================
タイトル用クラス
===========================================*/

.headline {
    font-size: 26px;
    margin: 8px 0 16px 0;
	font-weight:500;
}

/*画面幅768px以上の場合ここから*/
@media only screen and (min-width: 768px) {
.headline {
    font-size: 32px;
		margin: 16px 0 16px 0;
}
}
/*★ここまで*/


/*小さ目タイトル*/
.headline-small {
	    font-size: 24px;
    margin: 10px 0 5px 0;
	font-weight:bold;
}

/*画面幅768px以上の場合ここから*/
@media only screen and (min-width: 768px) {
.headline-small {
    margin: 8px 0 8px 0;
}
}

/*★メディアクエリここまで*/



/*==========================================
tableのスタイル
===========================================*/

.table {
	width:100%;
	border:1px solid #e3e3e3;
}

.table td{
	padding:16px;
	border:1px solid #e3e3e3;
}
.title-cell {
	background-color: #F3F3F3;
}
/*※border-collapseやborder-spacingといった
隣合うセルのボーダーや間隔はreset.cssに指定しています。
こちらも確認してみて下さい。*/
    


/*==========================================
WordPress
===========================================*/

/*==========記事一覧用 サムネイル+タイトルのセット1行並び*/

.a-div:focus,
.a-div:hover {
opacity:1; 
	text-decoration: none;
	display:block;
}
@media screen and (min-width: 768px) {
.a-div:focus,
.a-div:hover {
opacity:0.6; 
}	
}
.archive-list{
	width:100%;
display:flex;
	margin-bottom:16px;
border-bottom:1px solid #ddd;
	padding-bottom:16px;
}
.archive-list-thumbnail{
width:160px;
	position:relative;
}

.archive-list-post-category{
	position:absolute;
	top:0;
	left:0;
	color:#fff; 
font-size:11px; 
text-align:center; 
display:inline-block; 
padding:4px; 
	z-index: 100;
}

.archive-list-post-category a{
color:#fff; 
	text-decoration: none;
}

.archive-list-post{
	padding-left:16px;
	width: calc(100% - 160px);/*幅100%から画像分を引く marginを設定している場合はmargin分も含める*/
}

.archive-list-post-title{
	font-size:16px;
	font-weight:bold;
	line-height:1.2;
}

@media screen and (min-width: 768px) {
	
	.archive-list-thumbnail{
width:240px;
	position:relative;
}
	
.archive-list-post{
	padding-left:16px;
	width: calc(100% - 240px);/*幅100%から画像分を引く marginを設定している場合はmargin分も含める*/
}
	
	.archive-list-post-title{
	font-size:24px;
}

}
/*==========記事一覧用 2カラム*/

/*flex-flowは2つをまとめて記述できるショートハンド。
flex-direction:row（左から右に配置）flex-wrap:wrap(折り返しあり)を指定。
記述順は flex-direction → flex-wrapの順番*/

.archive-container {
 display: flex;
 flex-flow: row wrap;
margin-top: -8px;
  margin-left: -8px;
}


/*記事一つ分のカラムの幅を指定
calc(幅 / カラム数) ショートハンドではflex: 0 1 calc((100% / 2) - 8px);*/

.archive-grid {
flex-grow: 0;/*フレックスコンテナの主軸の幅に余白がある場合の、フレックスアイテムの伸び率*/
flex-shrink: 1;/*コンテナが収縮するにつれてアイテムも縮小　自動的に幅を調節して一行に収める*/
flex-basis: calc((100% / 2) - 8px);/* フレックスアイテムの基本の幅　カラム間の隙間の分を引く */
  padding: 8px 8px 24px;
  margin-top: 8px; /* カラム間の隙間 */
  margin-left: 8px; /* カラム間の隙間 */
border:1px solid #ddd;
} 



@media screen and (min-width: 992px) {


.archive-container {
  margin-left: -16px;
}
	
.archive-grid {
flex-basis: calc((100% / 2) - 16px);/* フレックスアイテムの基本の幅　カラム間の隙間の分を引く */
padding: 12px 12px 24px;
  margin-top: 16px; /* カラム間の隙間 */
  margin-left: 16px; /* カラム間の隙間 */
} 
#index-area{
  margin: 8px 0 32px;
} 
	
.archive-grid:nth-child(-n+2){
  margin-top: 0px;
} 
}

/*IE11向け*/

*::-ms-backdrop,.archive-container {
margin-top: -14px;
  margin-left: -14px;
}

*::-ms-backdrop, .archive-grid  {
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc((90% / 2) - 14px);
	padding: 10px;
border:1px solid #ddd;
}


/*アイキャッチ画像*/
.post-thumbnail {
 position: relative;
}
/*アイキャッチ画像に重なるカテゴリ名*/

.post-data-category {
	position: absolute;
	top:0;
	left:0;
color:#fff; 
font-size:11px; 
text-align:center; 
display:inline-block; 
padding:4px; 
	z-index: 100;
}

.post-data-category a{
color:#fff; 
	text-decoration: none;
}

.post-title {
    font-size: 16px;
		margin: 4px 0 16px 0;
    line-height: 1.4;
	font-weight:bold;
}

@media screen and (min-width: 992px) {
	.post-title {
    font-size: 20px;
}
}
	
.post-title a {
 text-decoration: none;
}

.post-title a:hover,
.post-title a:focus,
.post-title a:active {
opacity:0.8}




/*==================アーカイブタイトル*/

h2.title-archive {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 16px;
    padding: 0 0 16px;
line-height:1;
}


/*　カテゴリ名・日付*/

.post-data li {
     margin: 0 8px 0 0;
     display: inline-block;
     font-size: 12px;
}

/*投稿日にアイコンを表示させる*/
.post-data li.date:before{
font-family: "Font Awesome 5 Free";
	font-weight: 900;
  content: '\f073';
	padding-right: 4px;
}

/*タグにアイコンを表示させる*/
.post-data li.tag:before{
font-family: "Font Awesome 5 Free";
	font-weight: 900;
  content: '\f02b';
	padding-right: 4px;
}

/*カテゴリ名*/

.post-data li.category {
color:#fff; 
text-align:center; 
display:inline-block; 
padding:4px; 
}

.post-data li.category a{
color:#fff; 
	text-decoration: none;
}


/*==========================================
WordPress　投稿ページ・固定ページ　
===========================================*/

/*投稿・固定ページタイトル*/

.post-top h2{
	    font-size: 32px;
		margin: 0 0 40px 0;
    line-height: 1.4;
	font-weight:bold;
}

/*アイキャッチ画像*/

.post-top-img {
	margin:16px 0 40px;
}



/* 段落と見出し */

.post-body p {
    line-height: 2;
    margin: 0 0 1.8em 0;
}

.post-body h1, 
.post-body h2, 
.post-body h3, 
.post-body h4, 
.post-body h5, 
.post-body h6 { 
	clear:both; 
	line-height:1.4; 
	font-weight:bold; 
}

.post-body h2{
	margin:3.5em 0 1.8em;
}
.post-body h3{
	margin:3em 0 1.5em;
}
.post-body h4{
	margin:2.5em 2px 1.2em;
}
.post-body h5{
	margin:2em 0 1em;
}


.post-body h1 { 
	font-size:160%;
	border-top:2px solid #666;
	padding-top:20px;
}
.post-body h2 {
	font-size:150%;
	background: #eeeeee;
	padding:20px;
}
.post-body h3 {
	font-size:140%;
	border-left:8px solid #333;
	padding:8px 0 8px 16px;
}
.post-body h4 {
	font-size:130%;
	padding:0.5em 0;
}
.post-body h5 {
	font-size:120%; 
}
.post-body h6 {
	font-size:110%;
}


/* リスト */
.post-body li, 
.post-body dt, 
.post-body dd { 
	line-height:2.2; 
}
.post-body ul, 
.post-body ol, 
.post-body dl {
	margin: 1em 0 1.8em 0;
}
.post-body ol { 
	list-style:decimal; 
	margin-left:1em; 
}
.post-body ul { 
	list-style:disc; 
	margin-left:1.3em; 
}

.post-body ul li { 
padding-left:0;
}

.post-body li > ul, 
.post-body li > ol {
	margin:0; 
}

.post-body dt {
	font-weight:bold;
}

.post-body dd { 
	margin-bottom:1em; 
}

/* block quote */
.post-body blockquote,
.post-body .waku{ 
	margin: 0 0 24px 0; 
	padding: 1em 8px; 
	border: 1px solid #ccc; 
	box-shadow: 0px 4px 0px 0px #f3f3f3; 
}

blockquote p:last-child {
	margin-bottom:0;
}

/*画面幅767px以上の場合ここから*/
@media only screen and (min-width: 767px) {
	
.post-body blockquote,
.post-body .waku { 
	padding: 1em 32px; 
	}
}
/*★ここまで*/

/* テキストリンク */

.post-body a{
  text-decoration:underline;
}

.post-body a:hover{
	opacity:0.5;
}

/*==========================================
投稿ページ前後の記事へのリンク
===========================================*/

		
.prev-next-wrap {
margin:80px 0 48px 0;
/*	padding:20px 0;*/
	overflow: hidden;
	font-size:14px;
	background:#ddd;
}

.prev-next-wrap a{
 display:block; 
	padding:20px; 
	text-decoration:none;
}

.prev-post a {
 padding-left:40px; 
}

.next-post a {
 padding-right:40px; 
}


.prev-post a:before { 
font-family: "Font Awesome 5 Free";
	font-weight: 900;
  content: '\f104';
	position: absolute;
	top:33%;
left:16px; 
text-align:left; 
}

.next-post a:after { 
font-family: "Font Awesome 5 Free";
	font-weight: 900;
  content: '\f105';
	position: absolute;
	top:33%;
right:16px; 
text-align:right; 
}



.prev-post { 
	float:none; 
	position: relative;
}

.next-post { 
	float:none; 
	position: relative;
	margin-top:8px;
}

/*画面幅767px以上の場合ここから*/
@media only screen and (min-width: 767px) {
	.prev-post { 
	float:left; 
	width:49%; 
}

.next-post { 
	float:right; 
	width:49%; 
	margin-top:0;
}
	}
/*★ここまで*/



/*==========================================
投稿ページ関連記事へのリンク　3カラム
===========================================*/

.related-post {
	margin-top:56px;
}

.related-post h2{
    font-size: 20px;
     border-bottom: solid 1px #666; 
    margin-bottom: 16px;
    padding: 0 0 16px;
	font-weight:bold;
}

.related-post ul{
display: -webkit-flex;
  display: flex;
	flex-wrap: wrap; /* 折り返し */
	margin: 0 -1% 16px;
}

.related-post li{
	font-size:13px;
flex: 0 1 48%;/*flex-grow（子要素の伸びる比率）flex-shrink（子要素の縮む比率）flex-basis（子要素のベースとなる幅の指定）をまとめて指定*/
  margin: 0 1% 16px;
}

.related-post li p{
margin-bottom:0;
	line-height:1.6;
}
.related-post li img{
	margin-bottom:4px;
}
.related-post li a{
	text-decoration: none;
}





/*画面幅640px以上の場合ここから*/
@media only screen and (min-width: 640px) {
	

.related-post li{
flex: 0 1 23%;
}


	}
/*★ここまで*/



/*==========================================
 ページネーションのスタイル
===========================================*/

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
margin-bottom:48px;
}
 
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:8px;
text-decoration:none;
width:auto;
color:#fff;
background: #ddd;
}
 
.pagination a:hover{
color:#fff;
opacity: 0.5;
}
 
.pagination .current{
padding:8px;
color:#fff;
}




/* コンタクトフォーム 　送信メッセージの色*/

.wpcf7 .wpcf7-response-output {
    padding: 15px;
    margin-bottom: 18px;
border: 1px solid transparent;
    border-radius: 4px;
}
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output {
    color: #a94442;
       background-color: #f2dede;
    border-color: #ebccd1;
}
.wpcf7 .wpcf7-mail-sent-ok {
    color: #31708f;
    background-color: #d9edf7;
border-color: #bce8f1;
}
.req{
    font-size:11px;
    font-weight: normal;
}



/*==========================================
 サイドバーのスタイル
===========================================*/


/*サイドバーの各ウィジェットを囲むdiv*/

.side-widget {
    margin: 0 0 32px 0;
}


/*サイドバーのタイトル*/

.side-title{
/*font-size: 15px;*/
    margin: 0 0 16px 0;
    padding: 0 0 16px;
    font-weight: bold;
}

.side-widget li{
	font-size:14px;
	padding: 16px 0;
border-bottom:1px solid #eee;
	margin-left: 1em;/*1文字分、左に寄せる*/
	line-height:1.2;
}

.side-widget li a:before {
font-family: "Font Awesome 5 Free";
	font-weight: 900;
        content: "\f105";
padding-right: 0.5em;
	 color: #ddd;
	margin-left: -1em;/*1文字分、左に寄せる*/
}

/*最初のli要素の調整*/
.side-widget li:first-child {
  padding: 0 0 16px;/*上のpaddingを0にする*/
}

.side-widget li:last-child {
  border:none;/*最後のli要素の下のborderを非表示にする*/
}

.side-widget li a{
	display: block;
	text-decoration: none;
}


.side-widget ul li ul.children {
padding-top:4px;
padding-left:1.5em;
    list-style:none;
}

.side-widget ul li ul.children li{
	font-size:12px;
padding:16px 0 4px 0px;
border:none;
}

.side-widget li:last-child {
  border:none;
}

/*検索フォーム*/

#searchform {
position: relative;
}
#s {
font-size: 14px;
width:100%;
margin: 0;
padding: 8px;
border: solid 1px #bbb;
border-radius: 4px;
background-color: #f1f1f1;
}
#searchsubmit {
font-family: "Font Awesome 5 Free";
	font-weight: 900;
font-size: 1em;
position: absolute;
top: -16%;
right: 8%;
margin-top: 16px;
padding: 0;
cursor: pointer;
border: none;
background: transparent;
	color:#ccc;
}
#searchsubmit:hover {
opacity: .6;
}

/*tag*/

.tagcloud a {
	font-size: 14px !important; /* 文字サイズ */
	line-height: 1em;
	background: #cccccc; /* 背景色 */
	color: #fff; /* 文字色 */
	display: inline-block;
	white-space: nowrap;
	padding: 8px 8px; /* 文字周り余白 */
	margin-top: 4px; /* タグ余白 */
	border-radius: 4px; /* 角を丸くする */
	text-decoration: none;
}
.tagcloud a:hover {
 	background: #ddd; /* マウスホバー背景色 */
	color: #6ba5d2 !important; /* マウスホバー文字色*/
}

/* アイコンを入れる「Font Awesome」*/

.tagcloud a:before {
font-family: "Font Awesome 5 Free";
	font-weight: 900;
        content: "\f02b";
	padding-right: 4px;
}


/*==========================================
フッターSNS
===========================================*/


.foot-sns{
	border-top:1px solid #ddd;
	padding:8px 0;
	text-align:center;
}

.foot-sns li{
	display: inline-block;
}
.foot-sns a{
    display: inline-block;
	color:#333;
	font-size:26px;
	margin-left: 24px;
}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
	
.foot-sns a{
	font-size:18px;
}
	}
/*★ここまで*/

.foot-sns a:hover {
	opacity:0.8;
}

/*==========================================
ページトップへのボタンの指定　common.jsと連動
===========================================*/

#page-top {
    position: fixed;
    bottom: 8px;
    right: 16px;
	z-index:9999;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 48px;
    padding: 8px 0;
    text-align: center;
    display: block;
opacity: 0.8;/*要素の透明度を指定 0.0（完全に透明）～1.0（完全に不透明）の範囲で指定する（初期値は1）*/
}

#page-top a:hover {
    text-decoration: none;
    background: rgba(0,0,0,.8);/*マウスオーバー時の背景色を指定。このrgbaは、RGBカラーモデルのred・green・blueに、alphaが加わったもの。 alphaは色の透明度を表す。
		それぞれrgbの値をカンマで区切り、最後にalfaの値（透明度）を0（完全に透明）～1（完全に不透明）の数値で指定。*/
}


/*==========================================
 フッターのスタイル
===========================================*/
#footer {
	padding : 16px 0 0;
	border-top:1px solid #e3e3e3;
font-size:14px;
}


#footer p {
margin: 0;
	padding:0 0 4px;
}


#footer small {
	font-size:11px;
	padding-top:16px;
}



/*フッターメニューのタイトル*/

.foot-title{
	font-weight: bold;
	margin-bottom: 16px;
	font-size:16px;
	padding:0 0 16px;
	border-bottom: 1px solid #ccc;
}

/*フッターメニュー*/

.foot-menu {
}
.foot-menu li{
	border-bottom: 1px solid #eee;
}



.foot-menu li:last-child {
 border: none;
}

.foot-menu li a{
		display: block;
	padding:16px 0;
	text-decoration: none;
	color:#333;
}
.foot-menu li:first-child a{
  padding: 0 0 16px;/*上のpaddingを0にする*/
}

.foot-menu li a:before {
font-family: "Font Awesome 5 Free";
	font-weight: 900;
        content: "\f105";
padding-right: 1em;
	 color: #ddd;
}

.foot-menu li a:hover{
	text-decoration: none;
}

.foot-menu ul.sub-menu {
padding-left:1.5em;
    list-style:none;
}

.foot-menu ul.sub-menu li{
border:none;
}

.foot-menu ul.sub-menu li a{
padding:10px 0;
}

.foot-menu li:last-child {
  border:none;
}

/*フッターSNSアイコン*/

#footer .sns {
	font-size:20px;
}

#footer .sns a{
    display: inline-block;
	color:#333;
	font-size:20px;
	margin-right: 8px;
}

#footer .sns a:hover {
	color:#d0475e;
opacity: 0.5;
}


/*フッター最下部 コピーライト表記部分*/
.foot-outer {
		margin-top:56px;
	text-align: center;
	padding:16px 0;
	color:#fff;
}
.foot-outer a{
	color:#fff;
}


.clone-nav{
	display:none;
}


@media only screen and (min-width: 992px) {
.global-nav {
	background:#fff;
	}

	.global-menu {
		font-size:0;/*改行を半角スペースとして読み込んでしまっているinline-blockの仕様でli要素の隙間ができる。これを防ぐため。*/
			position: relative;
z-index:1000;
	}
	
.global-menu li {
width: 16.666%; 
 display: inline-block; /*メニューを横並びにする*/
	position: relative;/*子メニューの基準*/
text-align:center;
}
	
/*孫メニューに影響しない記述法*/	
.global-menu > li{
		border-right:1px solid #ddd;
	}
	
.global-menu > li:first-child{
		border-left:1px solid #ddd;
	}
	
.global-menu li a {
  display: block;
  margin: 0;
  padding: 17px 0;/*幅を指定しない場合は左右のpaddingで幅調整*/
  font-size: 14px;
  line-height: 1;/*=14px*/
	text-decoration: none;
}
	

	
	
/*子、孫、ひ孫メニュー*/
	
/*子、孫、ひ孫メニューに共通する設定*/
	
.global-menu li ul.sub-menu {
  list-style: none;
  position: absolute;
	z-index:99999;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
.global-menu li ul.sub-menu li {
  overflow: hidden;
  width: 120%;
  height: 0;/*ここでは表示させずマウスを乗せたときに高さを持たせることで表示させる。*/
  color: #fff;
  transition: .2s;
}

/*開いた状態の子メニュー*/

.global-menu li ul.sub-menu li a {
  padding: 17px 16px 16px;
  background: #e9e9e9;
  text-align: left;
  font-weight: normal; 
border-bottom:1px solid #fff;
}


/*マウスをのせた時*/

/*	親*/
.global-menu > li:hover > a {  background:rgba(250, 250, 250, 0.5); }
	/*子*/
.global-menu > li:hover li:hover > a {  background:#f4f4f4;}
	
	
.global-menu > li:hover > ul > li {
  overflow: visible;
  height:48px;
}



/*下の階層にメニューがあることを示す矢印をつける*/
.global-menu li.menu-item-has-children:after {
position: absolute;
  content: "";
	top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #555;
margin-top: -3px;/*アイコンサイズの半分の高さのネガティヴマージンを付与*/
}

	


	
/* スクロールされたら表示させるナビゲーション common.jsにて指定*/

/*固定表示用のアニメーション指定*/
.clone-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    transition: .3s;
    transform: translateY(-100%);
	opacity: 0.9;
  }

	
/*ナビゲーションが表示するタイミング*/
  .is-show {
    transform: translateY(0);
  }

}

/*form関連*/

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
/* ここまで */

input[type="text"] ,
input[type="email"],
textarea {
		width:100%;
	padding:8px 4px;
	margin:0 auto;
	color:#666;
	font-size:16px;
	line-height: 16px;
	border: solid 1px #ccc;
	/*テキストエリア内にシャドウをつける。最初にbackground初期化が必要*/
    background: #fff;
	-webkit-box-shadow: 2px 3px 5px -2px #ddd inset;
	-moz-box-shadow: 2px 3px 5px -2px #ddd inset;
	box-shadow: 2px 3px 5px -2px #ddd inset;
	/*角丸にする*/
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
}


label{
	line-height:1.6;
}


/*送信・リセットボタンの体裁を指定（[type="○○"]で属性の値でセレクト）*/

.wpcf7-submit{
	width:100%;
padding:8px 0px;
margin: 0;
	border:0;
	font-size:16px;
	font-weight:bold;
	border-radius:4px;
	color:#fff;
}


.wpcf7-submit:hover{ 
opacity:0.8; 
cursor:pointer; /*←これでカーソルを指先型に変化させる*/
	transition: 0.5s;	/*プロパティに変更があった際、一定時間でプロパティを変化させる機能。*/
}