/*
Theme Name:tokidoki2020
Theme URL: https://www.google.com/
Description:tokidoki.blue
Author: tokidoki.blue
Version: 1.1.1
*/


/****************************************************/
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora&display=swap');

* {
	margin: 0;
	padding: 0;
}

html {
	overflow-y: scroll;
	overflow-x: hidden;
}

body{
	font-size:1em;
	line-height:1.8em;
	font-family: "Lora", "georgia", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP',"MS P明朝", "MS PMincho", serif;
/**/
	background-color:#fff;
	color:#222;
}


/****************************************************************
　基本
*****************************************************************/

/*全体*/

#wrapper{
	width:100%;
	text-align: center;
}

#contents{
	width:100%;
}

/*menu #page_menu*/

#menunav{
	position:fixed;
	left:0px;
	right:0px;
	top:0px;

	color:#222;

	font-size:1em;
	height:33px;
	padding:13px 8px 0px 8px;
	text-align:left;
	
  /*box-shadow:2px 2px 13px 2px rgba(162,162,162,4);*/

border-bottom: #222 solid 0px;

  display:none;/*block none*/
	z-index:1997;  

}

#page_menu a{
	font-weight:normal;
}


#menuicon{
	color:#000;
	cursor:pointer;
	font-size:200%;
	position:fixed;
	right:0px;
	top:10px;
	z-index:1996;
  opacity: 0.5;
  }

#menuicon2{
	color:#000;
	cursor:pointer;
	font-size:100%;
	position:fixed;
	right:0px;
	top:10px;
	z-index:1999;
}



/************************
記事用
************************/

/*article*/

#article{
	width:50%;
	margin:100px auto 250px auto;
}

/*スマホ用*/
@media screen and (max-width:689px){
#article{
	width:90%;
}
}/*スマホ用*/



/************************
インデックス用
************************/


#index{
	max-height:80%;
	margin:0px auto 250px auto;
/*	background-color:#eee;*/
	color:#222;
	/*
	background-color:#222;
	color:#eee;
	*/
}

/*スマホ用*/
@media screen and (max-width:689px){
#index{
	width:90%;
}
}/*スマホ用*/


.indeximage{
	width:50%;
	margin:22px auto;
}

/*スマホ用*/
@media screen and (max-width:689px){
.indeximage{
	width:80%;
}
}/*スマホ用*/


#index0{
	text-align: center;
	padding:55px 5px 55px 5px;

/*	
	background-color:#222;
	color:#eee;
	background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);*/
	/*https://webgradients.com/*/
	font-size: 0.9em;
}

#index0 a{
  color:#eee;
}

#index0 .fas{
  margin-top:30px;
  opacity: 1;
}


.index_txt{
	text-align: left;
	padding:90px 15% 90px 15% ;
}

/*スマホ用*/
@media screen and (max-width:689px){
.index_txt{
	padding:30px 1% 30px 1% ;
}
}/*スマホ用*/



.description{
	font-size:0.9em;
	line-height:1.5em;
	margin:auto 30%;
}

.description2{
	font-size:0.9em;
font-weight:bold;
	line-height:1.5em;
	margin:auto 30%;
}


/*スマホ用*/
@media screen and (max-width:689px){
.description{
	margin:auto 20%;
}
}/*スマホ用*/


.index_kiji_title{
	text-align:center;
	margin:20px auto 10px auto;
}


.index_setumei_txt{
	text-align:left;
	font-size:0.8em;
	line-height:1.5em;
	margin:30px 20% 30px 20%;
}

/*スマホ用*/
@media screen and (max-width:689px){
.index_setumei_txt{
	text-align:left;
	font-size:0.7em;
	line-height:1.5em;
	margin:30px 10% 30px 10%;
}
}/*スマホ用*/

/********/

#indexmenu_dom{
  display:none;
  width:50%;
  text-align: center;
  padding:15px 5px 15px 5px;
margin:50px auto;
  color:#fff;
  font-size: 1em;
  border:#fff solid 4px;
  border-radius:7px;
}




/************************/
#indexmenunav{
	color:#fff;
  font-size:1em;
	padding:13px 8px 0px 8px;
	text-align:center;
	  /*box-shadow:2px 2px 13px 2px rgba(162,162,162,4);*/
  border-bottom: #fff solid 0px;
  display:none;/*block none*/
	z-index:8;  
}

#indexmenuicon{
	color:#fff;
	cursor:pointer;
	z-index:7;
  opacity: 0.5;
  }

#indexmenuicon2{
	color:#fff;
	cursor:pointer;
	z-index:9;
  display:none;/*block none*/
}


#discription{
	font-size:0.6em;
	line-height:1.8em;
	padding:10px 5px 10px 5px;
	text-align:center;
}

/************************
インデックス系ここまで
************************/


/********************/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  background-image: linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%);
  background-image: linear-gradient(-225deg, #20E2D7 0%, #F9FEA5 100%);
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  /*https://webgradients.com/*/
  z-index: 9999;
}

#loader-bg a{
  color:#eee;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}
/********************/

/*main*/

#main{
/*	background-color:#eee;*/
	color:#222;
	font-size:1em;
	line-height:1.8em;
	padding:80px 5px 80px 5px;
	text-align:left;
	}

#footer{

	font-size:0.6em;
	text-align:center;
	font-weight:bold;
	border-top: #222 solid 0px;
	height:30px;
	padding:5px 11px 3px 11px;
	margin:150px auto 0px auto;

	position:relative;
	right:0px;
	left:0px;
	bottom:0px;
	display:block;
	z-index:990;  

}


#pagetop{
	cursor:pointer;
	text-align:right;
	position:fixed;
	left:3px;/* 左寄せleft 右寄せright ここで指定*/
	bottom:3px;
	display:block;
	z-index:996;  
}


#pagetop .fas{
  font-size:50px;
  opacity: 0.2;
}

#pagetop .fas:hover{
  font-size:50px;
  opacity: 0.5;
}

/*************************/
#about{
margin:30px 10px 300px 10px;
}

#about p{
margin:30px 20px 60px 20px;
font-size:0.9em;
line-height:1.7em;
}

/*************************/
#archive{
	margin:120px 20px 60px 20px;
	font-size:0.8em;
	line-height:1.9em;
}


/*************************/
#setting{
font-size:0.9em;
color:#fff;
padding:130px 15px 800px 15px;
background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
text-align: left;
}


#setting fas{
opacity: 1;
}


/***************************************************
　リンク
****************************************************/

a,
a:link {

  color:#414141;
	text-decoration: none;
		font-weight:bold;
}

a:visited {
  color:#414141;
	text-decoration: none;
}

a:hover {
color:#aaaaaa;
		font-weight:bold;
}
a:focus {
	color:#aaaaaa;
	outline: none;
    font-weight:bold;
}

#about a{
 color:#000;
	text-decoration: none;
		font-weight:normal;
}



/************************************/

/*list リスト*/
ul,ol{
	/*list-style: none disc circle square decimal upper-alpha lower-alpha upper-roman lower-roman
	cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha */
	list-style: none;
	list-style-position: inside;

	font-size:0.9em;	
	line-height:1.7;
	margin:50px 20px 50px 20px ;

}

li{
	/*list-style: none disc circle square decimal upper-alpha lower-alpha upper-roman lower-roman
	cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha */
	list-style: none;
	list-style-position: outside;
	margin:5px 10%;
}

li::before{
  font-family: "Font Awesome 5 Free";
  content: '\f14a'; /*unicode*/
  margin-right: 5px;
  }


#index0 li{
	list-style: none;
	list-style-position: outside;

padding:2px;
margin:3px auto;
border-bottom:#fff dotted 1px;
border-radius:0px;
}

.index_txt li{
	list-style: none;
	list-style-position: outside;

	padding:20px;
	margin:13px auto;
	border:#0ba360 dotted 0px;
	border-radius:7px;
}

#about ul{
	margin:20px auto;
}


#about li{
	list-style: none;
	list-style-position: outside;
	padding:2px 18px;
}

#about li::before{
	font-family: FontAwesome;
	content: '\f054'; /*unicode*/
	margin-right: 3px;
	color:#0ba360;
}

/************************************/

/*段落*/
p {
	margin-bottom:2.0em;
/*	padding:0px 10% 0px 10%;*/
}

/*スマホ用*/
@media screen and (max-width:689px){
	p {
	margin-bottom:2.0em;
/*	padding:0px 10px 0px 10px;*/
	}
}/*スマホ用*/


/************************************/

/*見出し*/

h1{
	font-size:150%;
	line-height:1.8em;
	margin:35px 0px 35px 0px;
	text-align:center;
}

.site_title{
	margin:35px 0px 15px 0px;
	font-size:4.1em;
	font-family: "Lora", "georgia", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP',"MS P明朝", "MS PMincho", serif;
	font-weight:normal;
	color:#444;
}

/*スマホ用*/
@media screen and (max-width:689px){
.site_title{
	font-size:2em;
}
}/*スマホ用*/

h2{
	font-size:100%;
	line-height:1.8em;
	margin:60px 0px 60px 0px;
	text-align:center;
	border-bottom:1px solid #222;
	padding:3px 0px 0px 0px;
	font-weight:bold;
}


h2::before{
  /*
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  padding-right : 5px;
  color: #f89174;
  */
}

#article_title{
	margin:20px 0px 120px 0px;
}


#article h2{
	margin-top:120px;
}


#article h2::before{
  font-family: "Font Awesome 5 Free";
  content: "\f249";
  padding-right : 5px;
}


h3{
	font-size:100%;
	line-height:1.8em;
	margin:100px 10% 60px 10%;
	border-bottom:1px dotted #222;
	text-align:center;
}

h3::before{
	content:"";
}






h4{
	font-size:0.9em;
	line-height:1.8em;
	margin:100px 10% 60px 10%;
	border-bottom:1px dotted #222;
	text-align:center;
}

h4::before{
	content:"";
}


/************************************/

/*主な要素*/

hr{
	margin:70px auto;
border:1px dotted #9fad9c;
}

input,button{
	margin:30px;
	padding:12px;
	background-color:#777;
	color:#fff;
	border-radius:7px;

}

/*画像*/

#index img{
	max-width:90%;
	height:auto;
	margin:50px 20px;
	/*  box-shadow:3px 3px 13px 3px rgba(162,162,162,4);*/
}

#indeximage img{
  max-width:100%;
  height:auto;
	margin:0px 0px 0px 0px;
  box-shadow:0px 0px 0px 0px rgba(162,162,162,4);
  
}



#main img{
	max-width:90%;
	height:auto;
	margin:50px 20px;
	box-shadow:3px 3px 13px 3px rgba(162,162,162,4);
}


blockquote{
/*	background-color:#ddd;*/
	margin:50px 10px 50px 20px ;
	padding:50px 20px 50px 20px ;
	border-radius:7px;
	border:1px solid #222;
}

pre{

	margin:50px 10px 50px 20px ;
	padding:50px 20px 50px 20px ;

}


code{

}


/************************
フォーム、ボタン系
************************/

form{
	margin:80px auto;
	padding:40px 15px;
	border-radius: 11px;
	border:#222 solid 1px;
	background-color:#222;
	color:#eee;
	font-size:0.7em;
}

/*スマホ用*/
@media screen and (max-width:689px){
form{
	margin:80px 2% 80px 2%;
	padding:20px 5px;
}


}/*スマホ用*/


input{
	margin:6px;
	padding:4px 12px 4px 12px;
	background-color:#fff;
	color:#000;
	border-radius:2px;
	font-size:0.7em;

}

.formbtn{
margin:5px auto;
padding:5px;
border-radius: 11px;
border:#fff solid 3px;
width:200px;
text-align: center;
}

.formbtn:hover{
  border:#fff solid 5px;
font-weight: bold;
}



#setting form{
font-size:0.9em;
line-height:1.7em;
margin:55px auto;
padding:27px 10px;
border-radius: 11px;
border:#fff solid 1px;
}

/**************/
.fas{
opacity: 0.5;
margin:1px 7px;
}

.fas:hover{
opacity: 1.0;
}


.loadingimg{
  width:150px;
}

/**************************/


.center{
   text-align:center;
}

.left{
   text-align:left;
}

.right{
   text-align:right;
}

.pointer{
  cursor: pointer;
}

.bold{
  font-weight:bold;
}

.normal{
  font-weight:normal;
}


/**************/
.nextpage{
  text-align:center;
  cursor: pointer;
  opacity:1;
  margin:150px auto;
}



/********************************************/

/*縦書き*/
.tate{
	font-size:100%;
	margin-top:20px;
	margin-bottom:220px;
}

.tate p{
	font-size:100%;
}

/*縦書内段落設定（必要）*/
.tate p {
	margin-bottom:2.0em;
	padding:0px;
}

/*スマホ用*/
@media screen and (max-width:689px){
.tate p {
	margin-bottom:2.0em;
	padding:0px;
	}
}/*スマホ用*/




/********************************************/


/*テーブル*/

table{

margin:150px auto 150px auto ;
width: 90%;
border-collapse: collapse;

font-size:90%;
line-height: 1.5;

border: 7px solid #222;

/* box-shadow 
box-shadow:rgba(0, 0, 0, 0.34902) 3px 3px 17px 1px;
-webkit-box-shadow:rgba(0, 0, 0, 0.34902) 3px 3px 17px 1px;
-moz-box-shadow:rgba(0, 0, 0, 0.34902) 3px 3px 17px 1px;
*/
}

th{
width: 25%;
padding: 6px;
text-align: left;
vertical-align: top;
border: 1px solid #222;
}

td{
padding: 5px 10px 5px 10px ;
border: 1px solid #222;
}

caption{
padding: 5px 10px 35px 10px ;

}

/***************************************/

/*ワードプレス用*/


.article_list{
	text-align:center;
	font-size:0.67em;
	line-height:1.5em;
}


.article_list h3{
  text-align:center;
	font-size:1.3em;
margin:50px 10% 10px 10% ;
}

.setumei_single{
	text-align:right;
	font-size:0.8em;
	line-height:1.5em;
	margin:-110px 3px 50px 3px;
}

.setumei2_single{
	text-align:right;
	font-size:0.8em;
	line-height:1.5em;
	margin:110px 3px 50px 3px;
}


.article_single{
	margin:50px auto;
}


/*スマホ用*/
@media screen and (max-width:689px){
.article_single{
	font-size:1em;
}
}/*スマホ用*/


.prevnext{
	margin:90px auto 5px auto;
	text-align:center;
	font-size:0.6em;
}



/*記事ページ　アイキャッチ画像*/


/*シングルページ用*/
.eyecatch_img{
    width:50%;
	height:150px;
	border-radius:1px;
		-webkit-border-radius:1px;
		-moz-border-radius:1px;

    margin:-130px 3px 30px 3px ;

    display: inline-block;
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;

    border:0px solid #222;

	box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
		-webkit-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
		-moz-box-shadow:rgba(64, 65, 66, 0.368627) 1px 1px 3px 1px;
}

/*スマホ用*/
@media screen and (max-width:689px){
.eyecatch_img{
    margin:3px 3px 0px 3px ;
    width:50%;
    height:150px;
}
}/*スマホ用*/



.fontsize05em{
	font-size:0.5em;
}


/************************************************/

.waku{
background-color:#222;
color:#fff;
padding:50px 20px;
margin:40px auto;
border-radius:3px;
border:solid 1px #aaa;
font-size:0.9em;
}

/*スマホ用*/
@media screen and (max-width:689px){
.waku{
padding:20px 10px;
margin:20px auto;
}
}/*スマホ用*/