@charset "utf-8";
/* CSS Document */

/* #################################################################
	 共通 ページ
##################################################################*/

/*=============================
    共通設定　　　             
=============================*/

@font-face {
    font-family: YuGothicM;
    src: local("Yu Gothic Medium");
}


*,*:before,*:after{box-sizing:inherit;}
/* ↑画面の計算方法　※必ず設定はする */
html{
	box-sizing: border-box;
	-webkit-box-sizing : border-box;
        scroll-behavior: smooth;
}

body{
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	color:#666;
	background-color:#fffff0;
	
}

img{
	max-width: 100%;
	height: auto;
	width /***/:auto;	/*IE8のみ適用*/
}

header{
	background-color:#fff;
	/* ↑カラーはあるけど今は画像優先 */
	background-size:cover;
	/*媒体によってサイズが変わってもカバーしてくれること*/
	background-repeat:no-repeat;
	/* ↑画像の繰り返しがいらない */
	background-image:url(../img/IMG_6864.jpg);
	/* ↑../はフォルダを見に行くの意味imgがフォルダ名で、/以降は画像名＆拡張子 */
	background-position:center;
	/* ↑背景画像をセンターにする（上下左右）*/
}

.blogtittle{
	/*TTMLで記載したクラスの意味は.で表示する*/
	max-width:800px;
	/* ↑比率を制限したい時に指定する */
	width:90%;
	/* ↑表示のサイズを全画面ではなく90％に指定する */
	margin:auto;
	/* ↑外側の余白を自動で設定する */	
	text-align:left;
	/* ↑文字を真ん中に設定する。その他、rightとleftも可 */
	padding:100px 0;
	/*↑titleの内側の余白を設定する（左上右下）の順に半角スペースで設定できる*/
	margin-bottom:5%;
	/*↑titleの外下側の余白を設定する（bottom=下のこと）*/
	font-size:50px;
	/*↑文字サイズ*/
	color:#fff;
}
.blogtittle h1 a{
	/*h1タグに対しての設定をする*/
	font-family: "Assistant", sans-serif;
 	font-optical-sizing: auto;
 	font-weight:bold;
 	font-style: normal;
	text-shadow: 1px 1px 2px black;
	/* ↑h1のtitleに影をつけた　最後が影の色 */
        color:#fff;
}
	/*文字スタイルの設定をする*/

.blogtittle p{
	/*Pタグに対しての設定をする*/
	margin-top:3%;
	margin-left:8%;
	font-size:15px;
}

.copy{
	background-color:#d3d3d3;
	text-align:center;
	padding:15px 5%;
	font-size:10px;
}	

.footer{
	background-color:#c0c0c0;

}
.footer ul{
	text-align:center;	
	padding:15px 0;
}

.footer li{
	display:inline-block;
	/* ↑文字だけにブロックをかける */
	/* ↓文字の左右の間隔を揃える */
	margin-right:2%;
	margin-left:2%;
	/* ↓内側の余白を調整する */
	padding:15px 0;
}

.footer a{
	color:black;
}

.main{
	max-width:1200px;
	/* ↑比率を制限したい時に指定する */
	width:90%;
	/* ↑表示のサイズを全画面ではなく90％に指定する */
	margin:auto;
	/* ↑外側の余白を自動で設定する */
	margin-bottom:8%;
	/* ↑下の余白を自動で設定する */
	display:flex;
	/* ↑メニューとサブを横並びにしたい */
	
}

.menu{
	width:70%;
	margin-right:5%;
	font-family: "Assistant", sans-serif;
}

.post h1{
/*↑postの中のh1の意味*/
	font-size:30px;
	/*↑文字サイズ*/
	color:#000;
	margin:10px 0px 20px 0px;
	/* ↑外側の余白を自動で設定する */
	border-bottom: dashed #a9a9a9;
	/* ↑下の線を設定する */
	padding-bottom:10px;
	/* ↑破線の隙間を設定する */
}

.post_date{
	display:flex;
	/* ↑横並びにして*/
	justify-content:flex-end;
	font-size:15px;
	/*↑文字サイズ*/
	color:#a9a9a9;
}

.post_date p{
	margin-left:3%;
	position:relative;
	/*↑親を決定する*/
	padding-left:18px;
}

.post_date p:before{
	content:"";
	/*beforeとcontentはセットで指定する*/
	position:absolute;
	left:0;
	top:50%;
	width:12px;
	/* ↑表示のサイズの12％指定する */
	height:12px;
	margin-top:-6px;
	background-image:url(../img/icon-post.png);
	/* ↑../はフォルダを見に行くの意味imgがフォルダ名で、/以降は画像名＆拡張子 */
	background-size:contain;
	/* ↑12px×12pxの中に収まるように設定する */
}

.post_date .icon2:before{
	background-image:url(../img/icon-update.png);
	/* ↑dateの後ろのスペースは子ども繋げる時に開ける。icon2にもクラスがあるので.を付ける
		親<div class="post_date">
		子<p class="icon2"> */
}

.post_category{
	background-color:#ffa500;
	font-size:14px;
	/*↑位置指定*/
	display:inline-block;
	padding:5px 10px;
	color:#fff;
	border-radius:8px;
	/*↑角丸にする*/
}

.blog-img{
	padding-bottom:5%;
}

.mokuji{
	margin:5% auto 0;
	/* ↑外側の余白を設定 */
	width:100%;
	/* ↑表示のサイズを指定する */
	max-width:600px;
	text-align:left;
	/* ↑文字を真ん中に設定する。その他、rightとleftも可 */
 	background-color:#faebd7;
	/* ↑背景塗りつぶしの枠を設定する*/
	padding:15px 5%;
}

.mokujititle{
	text-align:center;
	padding-bottom:2%;
	letter-spacing:20px;
	/* ↑文字の間隔を開ける*/
	font-size:20px;
}

.mokujilist{
	letter-spacing:2px;
	counter-reset:listnumber;
	/* ↑番号をリセットする。目次に番号を設定する*/
	
}

.mokujilist li{
	padding-bottom:2%;
}

.mokujilist li a{
	color:#000;
}

.mokujilist li:before{
	counter-increment:listnumber;
	/* 目次リストの前に番号を降りたいので、beforeを設定する*/
	content:counter(listnumber)".";
	/* ↑番号の次に”．”を付けるという意味*/
	color:#808080;
	font-family:roboto;
	/* ↑書体の設定*/
	font-size:18px;
	font-weight:bold;
}

.midashi{
	margin-top:3%;
        margin-bottom:5%;
	color: #6d5353;
	/*文字色*/
    font-size: 20px;
	/*文字サイズ*/
    padding: 20px;
	/*文字回りの余白（上下左右）*/
    display: block;
    border: 1px solid #816930;
	/*囲み線（太さ 実線 色）*/
    position: relative;
}

.midashi:after {
    content: '';
    background:#efece0;
	/*背景色*/
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    position: absolute;
    top: 5px;
	/*背景の上下位置ずらし*/
    left: 5px;
	/*背景の左右位置ずらし*/
    z-index: -1;
}

.komidashi{
    color: #6d5353;
	/*文字色*/
    font-size: 15px;
	/*文字サイズ*/
    padding: 10px 15px;
	/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
    border-left: 8px solid #816930;
	/*左線上側（太さ 実線 色）*/
}

.komidashi:before {
    position: absolute;
    content: '';
    left: -8px;
    bottom: 0;
    width: 8px;
	/*左線下側の太さ（幅）*/
    height: 50%;
	/*左線下側の高さ*/
    background-color: #cbb276;
	/*左線下側の色*/
}

.honbun{
	margin-top:3%;
	margin-bottom:2%;
	line-height:1.7;
/* ↑文章の間隔を調整する */
}

.gallery {
	display:flex;
	/* ↑横並びにして*/
}

.gallery p{
	width: 48%;
	padding:1%;
}

.gallery p:only-child{
	width: 100%;
	padding:0%;
}

.blog-item1.rink .samune{
	/* ↑.でclassにする*/
	width: 40%;
	/* ↑画像を小さく表示でOKなので20％に設定する*/
}

.blog-item1.rink .blog-item1-text{
	/* ↑rink先の表示を変更する*/
	width: 60%;
	/* ↑テキストを画像と合わせて100％にする*/
}

.blog-item1.rink .blog-item1-text h2{
	font-size:15px;
	/* ↑rink先の文字サイズを変更する*/
}

.post.hukidashi{
	display:flex;
	/* ↑横並びにして*/
	margin:5% auto;
	/* ↑外側の余白を上下5％で左右は自動調整にする */
	width:100%;
	/* ↑表示のサイズを指定する */
	max-width:600px;
/* ↑横幅が1000に対して600までしか行かない＝自動で真ん中にくる */
}

.hukidashi_img{
	width: 20%;
}

.comment{
	width: 80%;
	background-color:#f5f5f5;
	padding:5%;
	height: 100%;
	/*画像に対してコメント幅があるので、コメントに対しての高さを設定*/
	position:relative;
	/*↑親を決定する*/
}

.comment:before{
	content:"";
	/*↑前に記号を入れる*/
	position:absolute;
	/*↑親を基準とした状態で自由にできるという意味*/
	top:15px;
	left:-25px;
	border:12px solid transparent;
	/*↑12px三角形の実践を設定する＆4つ三角形ごとに透明を設定*/
	border-right:25px solid #f5f5f5;
	z-index:3;

}

.map iframe{
	width:100%;
	height:400px;
        margin-bottom:5%;
}

.awasete{
	position:absolute;
	/* ↑親を基準に自由に移動できる */
	display: inline-block;
        top:-18px;
	left:5px;
	transform: rotate(-5deg);
/* ↑回転させる */
	background: #faebd7;
	padding:2%;
	font-size:12px;
}

.blog-item1{
	display:block;
	/*↑文字以外のものでも反応するようにブロックに指定する*/
	/*他にタグみたいな小さいブロックで反応する為にはinline brockに指定する*/
	box-shadow: 10px 10px 15px -10px #c0c0c0;
	padding:15px 10px;
	/*隙間設定　上　右　下　左*/
	color:#000000;
	width:100%;
	/* ↑表示のサイズを全画面でに指定する */
	margin:auto;
	/* ↑外側の余白を自動で設定する */
	margin-bottom:3%;
	/* ↑下の余白を自動で設定する */
	background-color:#fff;
	position:relative;
}

.blog-item1 a{
	display:flex;
	/* ↑横並びにして*/
}

.category{
	position:absolute;
	/*↑親を基準とした状態で自由にできるという意味*/
	top:10px;
	left:10px;
	background-color:#c0c0c0;
	font-size:14px;
	/*↓文字だけに適用するようにする*/
	display:inline-block;
	padding:5px 10px;
	color:#fff;
}

.samune{
	width: 45%;
        aspect-ratio: 4 / 3;
	overflow:hidden;
}

.samune img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	display:block;
 	border-radius:8px;
}	

.blog-item1-text{
	width: 55%;
	color:#696969;
	padding:2% 5%;
}

.date1{
	margin-bottom:2%;

}
.blog-item1-text h2{
	font-size:25px;
}
.caption{
	margin-top:2%;
	line-height:1.5;
/* ↑文章の間隔を調整する */
}

.table{
	width:100%;
/* ↑横幅を指定する */
	border:1px solid #ddd;
	/* ↑線を設定する */
	margin-bottom:5%;
/* ↑外側に隙間を設定する */
}

.table th{
	width:30%;
/* ↑項目の横幅を指定する*/
	background-color:#faebd7;
	/* ↑背景塗りつぶしの枠を設定する*/
	padding:2%;
	border-bottom:1px solid #ddd;
	/* ↑下の線を設定する */
	vertical-align:middle;
	
}

.table td{
	width:70%;
/* ↑内容の横幅を指定する*/
	background-color:#fff;
	/* ↑背景塗りつぶしの色を設定する*/
	padding:2%;
	border-bottom:1px solid #ddd;
	/* ↑下の線を設定する */
}

.tokki{
        margin-top:5%;
	padding:15px;
	background-color:#f5f5f5;
	/* ↑背景塗りつぶしの色を設定する*/
		margin-bottom:5%;
	/* ↑外側に隙間を設定する */
	font-size:13px;
	line-height:1.7;
}

.kanren{
	display:flex;
	/* ↑横並びにして*/
}

.kanren li{
	width:30%;
	margin:auto;
	box-shadow: 10px 10px 15px -10px #c0c0c0;
	/* ↑影をつける*/
}

.kanren li .category{
	position:absolute;
	/*↑親を基準とした状態で自由にできるという意味*/
	top:0px;
	left:0px;
	background-color:#c0c0c0;
	font-size:12px;
	/*↓文字だけに適用するようにする*/
	display:inline-block;
	padding:5px 10px;
	color:#fff;
}

.kanren a{
	position: relative;
	width:100%;
	background:#fff;
	display:block;
	/* ↑どこ押しても反応してのやつ*/
	
}

.kanren .osusume-img{
	width:100%;
	/* ↑画像を100％にする*/
       aspect-ratio: 4 / 3;
       overflow:hidden;
}
	
.kanren .osusume-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border-radius:0px;
	/* ↑角丸をなくす*/
}

.kanren .tittle{
	width:100%;
	padding:5%;
	padding-bottom:8%;
}

.kanren h3{
	font-size:14px;
	color:#000;
	font-weight:normal;
}

.kanrentitle{
	position: relative;
 	display: inline-block;
 	padding: 0 45px;
        margin-top:5%;
	margin-bottom:3%;
}

.kanrentitle:before, .kanrentitle:after{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.kanrentitle:before{
	left:0;
}

.kanrentitle:after{
	right:0;
/* ↑こんな記事もおすすめに/を設定する*/
}

.kakosaishin{
	display:flex;
	/* ↑横並びにして*/
	padding:5%;
	justify-content:space-between;
/* ↑両端に寄せて、間のスペースは自動調整*/
}

.kakosaishin li{
	width:45%;
	margin:0;
	box-shadow: 10px 10px 15px -10px #c0c0c0;
	/* ↑影をつける*/
}

.kakosaishin a{
	width:100%;
	background:#fff;
	display:block;
	/* ↑どこ押しても反応してのやつ*/
	display:flex;
	/* ↑横並びにして*/
        flex-wrap: wrap;
	color:#000;
}

.kakosaishintitle{
       width:100%;
       margin-bottom:5px;
       font-size:14px;
}

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

.kakosaishin .osusume-img{
	width:35%;
	/* ↑画像を35％にする*/
       aspect-ratio: 4 / 3;
      overflow:hidden;
}
	
.kakosaishin .osusume-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	border-radius:0px;
	display:block;
}

.kakosaishin .tittle{
	width:65%;
	padding:5%;
	padding-bottom:8%;
	font-size:13px;
	
}

.kakosaishin .tittle h3{
	font-weight:normal;
	/* ↑太字を消してほしい*/
}

.privacy p{
	line-height: 1.7;
}

.contact p{
	line-height: 1.7;
}

.contact a{
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  border: solid 1px #333;
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}
.contact a:hover {
  color: #fff;
  background: #333;
  transition: all 0.3s;
}


.sub{
	width:25%;
/* ↑widthのところのメニューとサブ＆余白で合計100％になるようにする */
	background-color:#fff;
	padding:2%;
}
	
.subtitle{
	background-color:#ffa500;
	padding:10px 3%;
	color:#fff;
	margin-bottom:2%;
/*↑カテゴリーの下に隙間がほしいので追加 */
}

.osusume a{
	display:block;
	/*↑文字以外のものでも反応するようにブロックに指定する*/
	/*他にタグみたいな小さいブロックで反応する為にはinline brockに指定する*/
	box-shadow: 10px 10px 15px -10px #c0c0c0;
	padding:10px 0px 10px 0px;
	/*隙間設定　上　右　下　左*/
	color:#000000;
	width:100%;
	/* ↑表示のサイズを全画面ではなく70％に指定する */
	margin:auto;
	/* ↑外側の余白を自動で設定する */
	margin-bottom:8%;
	/* ↑下の余白を自動で設定する */
	display:flex;
	width: 100%;
 	border-radius:8px;
 	/*↑角丸*/
}

.osusume-img{
	width:40%;
/*↑おすすめの画像を全体の40％に指定する*/
        aspect-ratio: 4 / 3;
	overflow:hidden;
}

.osusume-img img{
	width: 100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	border-radius:0px;
	display:block;
 	border-radius:8px;
 	/*↑画像を角丸にする*/
}

.tittle{
	width:60%;
	padding:0px 20px 10px 5px;
}

.date{
	color:#696969;
	margin-bottom:3%;
	
}

.osusume li{
	position:relative;
}


.osusume li:after{
	 content:"";
	 position:absolute;
	 width:8px;
	 height:8px;
	 top:50%;
	 margin-top:-5px;
	 right:10px;
	 border-right: 3px solid #ffd700;
	 border-top: 3px solid #ffd700;
	 /*↑の太さと色を変更させる*/
	 transform: rotate(45deg);
	 /*↑45°回転させる*/
}

/*【質問】↓ランキングを入れたけど●が下にいる。そしてタイトルの幅が大きくなった*/

.Rankstyle-svg {
	counter-reset:ctr-ranking;           /* カウンターをリセット */
	text-align:left;                     /* 左寄せ */
	margin-left:20px;                    /* 左の余白高さ */
}
.Rankstyle-svg li {
	position   : relative;               /* 指定した分だけ相対的に移動 */
}
.Rankstyle-svg li:nth-child(-n+3) {
	list-style-type : none ;             /* リストマーク消す */
}
.Rankstyle-svg li:nth-child(-n+3):before {
	position: absolute;                  /* 親要素を基準 */
	top: 0;                              /* 上限より表示 */
	left:0;                              /* 箇条書きリストの左側に表示 */
	content: counter(ctr-ranking, decimal); /* カウンタ追加 */
	counter-increment: ctr-ranking;      /* カウンタの増分指定 */
	background-color:#c1a470;		   	/* 背景ゴールド */
	border-radius:50%;
 	/*↑角丸*/
	color: #000;                         /* 文字の色の指定 */
	font-size: 10px;                     /* 文字サイズの指定 */
	padding: 5px 10px; 						/* 余白の指定 */
	z-index:2;
}
.categorylist a{
	display:block;
/*↑文字以外のものでも反応するようにブロックに指定する*/
/*他にタグみたいな小さいブロックで反応する為にはinline brockに指定する*/
	padding:10px 0Px 10px 20px;
	/*隙間設定　上　右　左　下*/
	color:#666;
}


.categorylist li{
	border-bottom:1px dashed #ff7f50;
/*↑下線を付ける　太さ、種類 カラー*/
	position:relative;
	/*↑親を決定する*/
}

.categorylist li:before{
	content:"◆";
	/*↑カテゴリーの前に記号を入れる*/
	position:absolute;
	/*↑親を基準とした状態で自由にできるという意味*/
	top:50%;
	left:0;
	margin-top:-5px;
	color:#ff6347;
	font-size:10px;
	/*↑位置指定*/
}

.categorylist li:last-child{
/*↑liの最後の部分という意味　最初の場合はfast-childを使用する*/
	border-bottom:0;
/*↑一番下の破線はいらないという意味*/
}

/* 自己紹介部分の設定 */
.jikosyoukai{
	max-width:100px;
	/* ↑比率を制限したい時に指定する */
	width:50%;
	/* ↑表示のサイズを全画面ではなく50％に指定する */
	margin:auto;
	/* ↑外側の余白を自動で設定する */
}

.jikosyoukai {
  line-height: 2;
  letter-spacing: 0.05em;
}

.mb5{
 margin-bottom:5%!important;
 	/* ↑最優先で、サブカテゴリの下スペースを一定に設定する */
}

.wp-pagenavi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}

.wp-pagenavi a,
.wp-pagenavi span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.wp-pagenavi a:hover {
  background: #f7f7f7;
  border-color: #bdbdbd;
  color: #111;
  transform: translateY(-1px);
}

.wp-pagenavi .current {
  background: #333;
  border-color: #333;
  color: #fff;
  font-weight: 700;
}

.wp-pagenavi .pages,
.wp-pagenavi .extend {
  min-width: auto;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: #888;
  display:none;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
  padding: 0 18px;
  font-weight: 600;
}

@media screen and (max-width: 767px) {
  .wp-pagenavi {
    gap: 6px;
    margin-top: 32px;
  }

  .wp-pagenavi a,
  .wp-pagenavi span {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }

  .wp-pagenavi .previouspostslink,
  .wp-pagenavi .nextpostslink {
    padding: 0 14px;
  }
}