@charset "utf-8";

/*
Theme Name: lotus　テーマの名称。半角が無難。
Theme URI: https://web-creators-tips.com/SAMPLE/　　テーマのサイトURL。半角のみ
Description: Wordpressの練習サイト　テーマの説明。全角可。
Author: fukumoto 作成者名。全角可
Author URI: https://web-creators-tips.com/ 作成者のURL。半角のみ
*/


/*全デバイス共通のスタイルとスマートフォン向けレイアウトの指定*/


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


body{
	width:100%;/*画面幅いっぱいにWebページを表示させる*/
	font-size:100%;
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	line-height:1.6;
	 background-color: #fff;
	 color:#555;
}

h2{
font-size : 20px;
line-height : 1.2; /* 20px×1.2＝1行の高さ24px */
margin-bottom : 24px;
}

.level-font { 
font-weight:500; 
font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
 }

.top-font {
	font-size:20px; 
	text-shadow:1px 1px 3px #825b62; 
	color:#FFFFFF;
}

.font-color-pink {
	color:#d26478;
	}
	
.headline {
    font-size: 24px;
    margin: 10px 0 20px 0;
    text-align: center;
}

.headline-left {
    font-size: 24px;
    margin: 10px 0 20px 0;
}

.headline-left-type01 {
    font-size: 24px;
    margin: 0 0 20px 0;
		padding:0;
}

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

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


p { 
margin-bottom : 12px;
}


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


a:hover {
  color:#747474;
  text-decoration:underline;
}


/* hr ------------*/
hr {
    display:none;
}

div.line10 {
height:10px;
clear:both;
}

div.line80 {
height:80px;
clear:both;
}



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


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


.displayBlock {
	display:block;
}


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

header { 
padding:5px 0 5px;
overflow:hidden;
border-bottom: 1px solid #ddd;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
background-color:#fff;
}

header h1 {
font-size : 11px;
margin-bottom:10px;
text-align:center;/*h1を中央揃えにする*/
color:#fff;
font-weight:nomal;
}


header h1 a{
color:#747474;
font-weight:nomal;
}

header h1 a:hover{
	text-decoration:none;
	color:rgba(116,116,116,.8);
}

p#logo{
text-align:center;/*ロゴを中央揃えにする*/
}


/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/



#gnav ul {
	overflow:hidden; /*li要素のfloatの回り込みを解除*/
margin-bottom:0px;
margin-top:26px;
border-top: 1px solid #fd99ab;
background-color:#d26478;
}


/*メニュー１個ごとの設定*/
#gnav ul li {
	width: 33.3333%;/*画面幅（100％）の3分の1=33.3333％*/
	float : left;
	border-bottom: 1px solid #fd99ab;
	 border-right: 1px solid #fd99ab;
}

#gnav ul li a{
	display: block; /*高さを確保できる「ブロックレベル要素」へ変換*/
	text-align: center;
	text-decoration: none;
	font-size:14px;
	line-height:48px; /*高さを確保*/
	color:#fff;
	}
	

/*3の倍数番目のメニューの設定*/
#gnav ul li:nth-child(3n) {
     border-right: none;
}


/*==========================================
トップページのスタイル
===========================================*/


/*メインビジュアルと固定ページサブタイトルも共通*/


#top-image{
	position:relative;
  }


#top-image h2{
position: absolute;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
		top: 50%;	
  }
	
#top-image p{
margin:0;
  }

#top-image img{
	width: 100%;
  }
	
#sub-title {
	color:#fff;
	padding:35px 0 5px;
	text-align: center;
	background: radial-gradient(#f8d1d8, #f1a2b0);
}

	
/*コンテンツ部 ボックスを並べる=*/


.section-top {
	padding:25px 0;
	overflow:hidden;
	background:#fdf2f2;
}

/*各画像とh3 p を囲んでいる要素*/

/*スマホ表示では1段組みにする*/

.box-3colum {
text-align:center;/*この指定がないと画像が左に寄ってしまう。*/
float:none;/*PC表示の記述の後に追加。PC表示でfloatしているため、この指定がないと下側marginが効かない。*/
margin-bottom:20px;
background-color:#fff;
padding-bottom:20px;
}

/*width: 100%; の中のimg要素は左右に余白を作りたい。そのためフルードイメージのmax-width:100%;をこのimg要素のみ90%;に変更*/

.box-3colum img {
  max-width: 90%; 
} 

.box-3colum p {
  text-align: left;
  padding: 0 5%;
	font-size:13px;
}


/*ボックスを並べる*/

.box-2colum {
text-align:center;/*この指定がないと画像が左に寄ってしまう。*/
	float:none;/*PC表示の記述の後に追加。PC表示でfloatしているため、この指定がないと下側marginが効かない。*/
	margin-bottom:20px;
		padding-bottom:20px;
}

.box-2colum-contents{
	text-align:center;/*この指定がないと画像が左に寄ってしまう。*/
	float:none;/*PC表示の記述の後に追加。PC表示でfloatしているため、この指定がないと下側marginが効かない。*/
}


.box-2colum-contents h3,
.box-2colum-contents p {
	text-align:left;
}


.box-2colum p {
  text-align: center;
  padding: 0 10px;
	font-size:13px;
}

/*各セクションを囲む枠*/

.section-wrap {
	padding:48px 0 30px;
	width : 90%;
	margin : 0 auto;
}


/* News お知らせ*/



dl#newinfo {
    padding-left: 0px;
    margin:0 0 20px;
overflow:hidden;
}

dl#newinfo dt {
    font-weight: bold;
padding-top:0.8em;
color:#d26478;
font-size:14px;
}

dl#newinfo dd {
    border-bottom: 1px dotted #ccc;
padding-top:1em;
padding-bottom:1em;
}


#newinfo dd a{
display:block;
}
	
	
/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/


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


	
#contents #main {
   margin:0 10px 80px;
	 } 
	 
	 

/*1つの投稿記事を囲む枠*/

section.post {
	margin-bottom : 50px;
	padding-bottom:50px;
		border-bottom: 1px solid #eee;
		overflow:hidden;
}

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

.post-thumb{
	float:none;
}



.post-thumb img,
.post-top img {
	border: solid 10px #ddd;
	max-width:100%;
    height:auto;
		display:block;
}


/*投稿タイトル・本文抜粋*/

.post-contant {
	float:none;
}


/*投稿タイトル*/

.title {
    font-size: 22px;
		margin: 0 0 15px 0;
    line-height: 160%;
}


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

.title-archive {
    font-size: 24px;
    font-weight: bold;
     border-bottom: dotted 1px #666; 
    margin-bottom: 40px;
    padding-bottom: 16px;
		line-height: 160%;
}


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

.title-post{
    font-size: 32px;
		margin: 0 0 30px 0;
    line-height: 160%;
}



/*投稿日・カテゴリ名・タグ*/


ul.post-data li {
     margin: 0 0 5px;
     display: inline-block;
     padding-right: 3px;
     font-size: 12px;
}



/*続きを読むボタン*/

p.more{
	text-align:right;
}

p.more a{
	float:right;
	font-size:12px;
  border-radius: 2px;/*角丸にする*/
  padding:5px;
  color:#fff;
  background: #d26478;
	display:block;
}


/* ボタンをマウスオーバーした時 */

p.more a:hover{
    background-color: rgba( 210, 100, 120, 0.55 );
    color: #fff;
			text-decoration:none;
}


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

.post-body p {
    line-height: 2;
    margin: 0 0 30px 0;
}



.page-type01 {
	margin-top:80px;
}

/*メニューページ　プライス*/

p.price {
	background: #f7f2ee;
    padding: 10px;
    text-align: center;
}


/*画像フレーム*/

.frame {
	display: inline-block;
	position: relative;
}
.frame:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient( /* ここで光を作っている */
	  -120deg, 
	  rgba(255, 250, 250, 0.1) 0, 
	  rgba(255, 250, 250, 0.5) 240px,
	  rgba(255, 250, 250, 0) 90px);
}



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

		
.botomNav {
margin-top:100px;
  text-align: center;
  padding: 10px 5px;
  width: 100%;
background-color:#fff0f3;
	border:1px solid #faaab8;
font-size:13px;
}
.navitop {
  float:none;
  text-align:center;
 padding: 10px 0;
}
.navileft {
  float:none;
padding: 10px 0;
}
.naviright {
 float:none;
padding: 10px 0;
}

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

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
margin-bottom:50px;
}
 
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}
 
.pagination a:hover{
color:#fff;
background-color: rgba( 210, 100, 120, 0.55 );
}
 
.pagination .current{
padding:6px 9px 5px 9px;
background: #d26478;
color:#fff;
}


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

#sub {
	margin-bottom:24px;
}

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

.side-widget {
    margin: 0 0 50px 0;
    font-size: 12px;
}


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

.side-title{
font-size: 14px;
    margin: 0 0 0 0;
    padding: 16px 0;
    font-weight: bold;
		border-bottom:1px dotted #666;
}





/*サイドバーのリスト*/

/*.side-widget ul{
	margin:0;
		padding:0 14px;
		list-style:none;
	}*/

.side-widget ul li{
	font-size:13px;
padding: 14px 0;
border-bottom:1px dashed #eee;
}


.side-widget ul li ul.children {
padding-top:5px;
padding-left:12px;
    list-style:none;
}

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



/*==========================================
 フッターのスタイル
===========================================*/


/* ページトップへのボタンの指定 */
#page-top {
    position: fixed;
    bottom: 0px;
    right: 20px;
    font-size: 80%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;
    border-radius: 10px;
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 {
	margin-top:160px;
	text-align:center;
	padding : 24px 0 0;
	background-color: rgba(0,0,0,0.05);
    background-image: url(images/common/foot-bg.png);
    /*background-size: cover;*/
    background-position: center bottom;
    background-repeat: no-repeat;
}

.foot-logo {
	margin-top:40px;
}

.foot-outer {
	background-color: rgba(0,0,0,0.5);
	color:#fff;
	line-height:40px;
}
	
footer small {
	font-size:11px;
	padding-top:20px;
}


#footer a {
color:#fff;
}

#footer a:hover {
text-decoration:none;
}


/*グーグルマップ　レスポンシブ対応*/

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



/* 【メディアクエリ】タブレット向けレイアウトの指定：768px以上の指定 */
@media screen and (min-width:768px) {
	
	

header {
	background-color: rgba(0,0,0,0.05);
    background-image: url(images/common/foot-bg.png);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/*font*/

.top-font {
	font-size:52px;
	line-height:1.6;
}

.sub-font {
	font-size:36px;
}

.headline {
    font-size: 34px;
		margin: 20px 0 20px 0;
}

.headline-left {
    font-size: 34px;
}

.headline-left-type01 {
   font-size: 34px;
}

}


/* 【メディアクエリ】PC向けレイアウトの指定：1140px以上では固定レイアウト */
@media screen and (min-width:1140px) {

/* ここに1140px以上の場合のCSSを記述 */


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

.inner {
	width:1140px;
	margin:0 auto;
}


/* ヘッダー */


header h1 {
text-align:left;/*h1を左揃えにする*/
}


/* ロゴ */

#logo {
	float:left;/*ロゴを左に回り込ませる*/
}


#logo img{
	display:block;
}

/* グローバルナビゲーション */

/*ナビゲーション全体を右に回り込ませる*/


#gnav {
	float:right;
}


#gnav ul {
	border:none;/*スマホ表示の場合の上線を表示させない*/
	background-color: rgba(0,0,0,0);
	margin-bottom:24px;
	}
	
#gnav ul li{
	width:140px;/*メニュー1つの幅を指定すると均等になる*/
	border:none;
	}
	
	
#gnav ul li a{
	line-height:40px; /*高さを確保*/
	color:#747474;
	}
	

	#gnav ul li a:hover{
		color:rgba(116,116,116,.8);
	border-bottom: 1px dotted #d26478;
	}
	
	
/*==========================================
ボックスを3つ並べる
===========================================*/


.section-top {
	padding:60px 0;
}

/*3つめの.postの右側marginを調整するため*/
.post-cover-3colum{
	margin-right:-30px;
}

/*PC表示では画像を左寄せ（float）にして3つ並べる
floatする場合は、幅も指定する*/

.box-3colum {
    width: 360px;
		margin:0 30px 0 0;
		float:left;
  }

/*スマホ表示で90%にしたものをPC表示では100%に戻す*/

.box-3colum img {
    max-width: 100%;
} 


.box-3colum p {
  text-align: left;
  padding: 0 10px;
	font-size:13px;
}


/*==========================================
ボックスを2つ並べる
===========================================*/


.post-cover-2colum{
	margin-right:-30px;
	overflow:hidden;
}

/*PC表示では画像を左寄せ（float）にして2つ並べる
floatする場合は、幅も指定する*/

.box-2colum-contents,
.box-2colum {
    width: 540px;
		margin:0 30px 0 0;
		float:left;
  }


.box-2colum-contents p {
  text-align: left;
  padding: 0;
}

.box-2colum p {
  text-align: center;
  padding: 0 10px;
	font-size:13px;
}



/*コンテンツエリア*/

#contents {
    width: 1140px;
    overflow:hidden;
  }
	

	
	
#contents #main {
   width : 750px;
   float : left;
   margin:0 10px;
	 } 




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

.post-thumb{
	float:left;
	 width: 320px;
  margin-right:20px;
}


/*投稿タイトル・本文抜粋*/

.post-contant {
	float:left;
	width: 400px;
}



#contents #sub {
   width : 330px;
   float : right;
   margin:0 10px;
	 } 
	 
	 

/*投稿 前後の記事*/

.botomNav {
  padding: 20px 10px;
overflow:hidden;
}

.navitop {
  float:left;
  width:14%;
  text-align:center;
}
.navileft {
  float:left;
  width:43%;
  text-align:left;
}
.naviright {
  float:right;
  width:43%;
  text-align:right;
}

}