/*webフォント読み込み*/
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

/*@import url(https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap);*/

@media (max-width: 400px) {
	video {
	  width: 100%;
	  height: auto;
	}
}

html {	
	height: 100%;
	margin: 0;
}

body{
	margin:0;
	font-family:"Rounded M+ 1c","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	overflow:auto;
	background-image:url(img/bg.gif);
}

/*全体*/
#wraper{;
}

/*メイン部分*/
#main{	
	background-color: rgba(255,255,255,0.7);
	padding:5% 5%
}

#main-blog{	
	background-color: rgba(255,255,255,0.7);
}

/* メニュー部分 */
header{
	padding:0 2%;
}

#menu {
	width:90%;
	margin:auto;
	display:flex;
	justify-content:space-between;
}
#menu>:first-child{
}

#square_btn {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.3em;
	margin:3% 0%;
	border-radius:5px;
	text-decoration: none;
	transition: .4s;
	}

#square_btn:hover {
	background: #663333;
	color: white;
}

/*日記部分*/
article{
	border-top:1px solid;
	border-bottom:1px solid;
	margin:10% 0;
	padding:5% 5%
}

/*サイドメニュー*/
.sidemenu{
	display:none;
}


/*更新履歴用アイフレーム*/
iframe{	
	border: 1px solid;
	height:20%;
	width:90%;
	overflow:auto;
	 -webkit-overflow-scrolling:touch;
  }

/* フッター*/
footer{
	padding:1% 0;
	color:white;
	background-color: #663333;
}
	footer a:link{
		color:white;
	}
	footer a:visited{
	color: #B3A57E; 
	}
	footer a:hover{
	color: #B3A57E; 
	text-decoration: none;
}

/* フッターメニュー */
#footermenu {
	display:flex;
	width:40%;
	justify-content:space-between;
	margin:0 auto;
	}

/* コピーライト */
#copyright {
	width:90%;
	margin:0 auto;
	text-align: center;
	}


/*小説用*/
.novel {
	position: relative;
	background-image:
	linear-gradient(rgba(203,194,185,0.4) .1em, transparent .1em);
	background-size: 100% 1.5em;
	line-height:1.5em;
}

.mobile_none{
	display:none;
}

/*画像関係*/
img{	

}

.dimg{
	max-width:100%;
}
.log{
	width:90px;
	height:90px;
	object-fit:cover;
	padding-bottom:5px;
}

.center{	
	text-align:center;
}

.picture{	
	max-width:100%;
	margin-top:5%;
}

.icon{	
	margin:0px 1px 5px 1px;
	width:40px;
	height:40px;
}

/*offline*/
.s-half{
	margin-top:5%;
}
#book{	
	max-width:290px;
	border: 1px solid;
}


/*リンク関係*/
a {
  transition: color 0.5s ease -0.1s;
}
a:link{	
	color: #693C34; 
}
a:visited{
	color: #B3A57E; 
} 
a:hover{
	color: #B3A57E; 
	text-decoration: none;
}

hr{
	margin:0;
}


/*テーブル設定*/
table , td, th {
	border: 1px solid #663333;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 320px;	
	background: #fff;
}
th {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}

/*その他装飾*/
#maintitle{
	font-family: 'Sawarabi Mincho', 'Vidaloka', serif;
	text-align:center;
	color:#444;
	position:static;
	display:block;
	font-size:30px;
	line-height:55px;
	letter-spacing:-4px;
	text-decoration: none;
}

.description{
display:block;
font-size:18px;
line-height:10px;
letter-spacing:1px;
}

p{
}

.mark{
	font-size:150%;
	background: linear-gradient(transparent 70%, #ffff66 60%);/*マーカーの色*/
}

.space{
	padding:2% 0%;
}
/*リスト関係*/
ul{	
	list-style: none;
	padding:0;
}

li{	

}

/*メニューボタン*/
#menubtn {
	display:inline-block;
	cursor: pointer;
	background: rgba(255,255,255,0.5);
	text-decoration: none;
	width: 100px;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	border: 1px solid #265A4A;
}

/*上にスクロールするボタン*/
#page-top {
	position: fixed;
	bottom: 0%;
	right: 10%;
	font-size: 77%;
	z-index:2;	
}
#page-top a {
    background: rgba(102,51,51,0.6);
    text-decoration: none;
    color: #fff;
    width: 60px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 42px;
}
#page-top a::before{
	content: "";
	position: absolute;
	top: 40%;
	left: 33%;	
	width: 15px;
	height: 15px;
	border-top: 5px solid #fff;
	border-right: 5px solid #fff;
	transform: rotate(-45deg);	
}

#page-top a:active {
    text-decoration: none;
    background: rgba(102,51,51,0.3);
}

/*見出し*/

h1 {
	position: relative;
	padding-bottom: .3em;
}
h1::before,
h1::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	height: 4px;
}
h1::before {
	z-index: 2;
	width: 15%;
	background-color: #444;
}
h1::after {
	width: 100%;
	background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
	background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    border-radius:  2px;        /* 角丸指定 */
}

.head_test-point {
    background-color: #2196F3;  /* 背景色指定 */
    border-radius:  50%;        /* 丸くする */
    padding:  10px;             /* 余白指定 */
    font-size: 40px;            /* 文字サイズ指定 */
    color: #fff;                /* 文字色指定 */
    margin-right: 5px;          /* 周りの余白指定 */
}

h2{
	color: #663333;

}
h2:first-letter{
	font-size: 1.5em;
	/*color: #54a58d;*/
}

/*日記のタイトル表示*/
.dtitle{
	padding-left:60px;

}

/*日記の日付*/
.day{
	font-family: 'Vidaloka', serif;
	color:white;
	background: #663333;
	position:absolute;
	border:solid 0px #663333;
	margin-top:15px;
	padding-top:3px;
	width:45px;
	height:60px;
	line-height:18px;
	display: inline-block;
	text-align: center;
}

.month{
	font-size:14pt;
}
.date{
	margin-top:2px;
	font-size:18pt;
}
.year{
	font-size:8pt;
}


/**/
h3 {	
	border-left: 8px solid #663333;
	border-bottom:dotted 3px #663333;
	width:100%;
	padding:0 0 0 1%;
	margin:0;
	line-height:180%;
	font-weight: 400;
	font-size:20px;
	color:#663333;
}
h4 {	
	line-height:200%;
	font-weight:400;
	margin:0 0 25px 0;
	font-size:18px;
	border-bottom:double 2px #663333; 
	color:#663333;
}

.diary{
	background: url(img/i_diary.gif) no-repeat left center;
	padding-left: 35px;		
}

.wing{
	background: url(img/i_link.gif) no-repeat left center;
	padding-left: 35px;		
}

.leaf {	
	background: url(img/i02.gif) no-repeat left center;
	padding-left: 35px;		
	line-height:200%;
	font-weight:400;
	font-size:18px;
	border-bottom:double 2px #663333; 
	color:#663333;
}

/*フォーム周り*/
textarea{	
	margin:auto;
	width:95%;
	border: 1px #663333 solid; 
	font-size:16px;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}

input[type="text"] {
	margin:auto;
	width:90%;
	background-color: #ffffff;
	border: 1px #663333 solid; 	
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}

input[type="submit"] {
	-webkit-appearance: none;
	font-size:16px;
	margin:auto;
	width:100%;
	height:70px;
	position: relative;
	background-color:#deb887;
	border-radius: 10px;
	border: solid 1px #ccba8f;
	color: #fff;
	line-height: 52px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 rgb(190, 154, 105);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
input[type="submit"]:hover {
	top: -4px;
	box-shadow: 0 7px 0 rgb(190, 154, 105);
}
input[type="submit"]:active {
	top: 3px;
	box-shadow: none;
}

/**/
/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}


/*==================================
 画面の横幅が479~769px(タブレット用) 
/*----------------------------------------------------------*/
@media screen and (min-width:479px) and (max-width:768px) {

/*全体*/
#wraper{
	margin:auto;
	padding:0 5%;
	background-color: rgba(255,255,255,0);	
	}

/*メイン部分*/
#main{
}

#main-blog{	
	padding:5% 5%;
}


/* メニュー部分 */
#menu {
	display:flex;
	justify-content:flex-end;
	margin-left:50%;
	align-items: center;
	margin:auto;
	padding:3% 4% 0% 4%;
}
#menu>:first-child{
	/*margin-right:auto;*/
}

/*メニューボタン*/
#menubtn {
}

/*サイドメニュー*/
.sidemenu{
	display:none;
}

article{
	padding:0%
}

/*offline*/
/*サンプル用分割*/
.s-half{
	margin-top:5%;
	display:flex;
	justify-content: space-around;
}
#book{
	max-width:300px;
}

.info{
	width:46%;
}

/*更新履歴用アイフレーム*/
iframe{	
	width:80%;
	height:100px;
	background-color:rgba(255,255,255,0.9);
}

/*サイトタイトル*/
.maintitle{
	position:absolute;
	text-align:right;
	top:10px;
	left:15%;
}

/*フォーム周り*/
textarea{
	font-size:16px;	
	width:70%;
}
input[type="text"] {
	font-size:14px;
	width:40%;
}
input[type="submit"] {
	font-size:14px;
	width:100px;
	height:60px;
	position: relative;
	background-color:#deb887;
	border-radius: 4px;
	border: solid 1px #ccba8f;
	color: #fff;
	line-height: 52px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 rgb(190, 154, 105);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
input[type="submit"]:hover {
	top: -4px;
	box-shadow: 0 7px 0 rgb(190, 154, 105);
}
input[type="submit"]:active {
	top: 3px;
	box-shadow: none;
}

}
/*==================================
画面の横幅が768px以上（PC用）
================================*/
@media screen and (min-width: 769px){

/*全体*/
#wraper{
	margin:auto;
	height:100%;
	width:80%;
	border-right:1px #663333 solid;
	border-left:1px #663333 solid;
}

header{
	background-color: rgba(255,255,255,0.7);
}

/*メイン部分*/
#main{
	padding:3% 7%;
}

#main-blog{	
	padding:3% 7%;
}

/* メニュー部分 */
#menu {
	display:flex;
	justify-content:flex-end;
	margin-right:auto;
	align-items: center;
	margin:auto;
	padding:2% 4% 1% 4%;
}
/*
#menu>:first-child{
	margin-right:auto;
}
*/

/*メニューボタン*/
#menubtn {
	display:none;
}

/*サイトタイトル*/
#maintitle{
	position:absolute;
	text-align:right;
	top:5px;
	left:15%;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


/*二分割*/
.half{
	display:flex;
	width:86%;
	flex-direction:row-reverse;
}

.sidemenu{
	display:block;
	border-left:1px dotted;
	padding-left:3%;
	width:200px;
}

.contents{
	padding-right:5%;
	flex:1;
}

article{
	padding:0%
}

/*offline*/
/*サンプル用分割*/
.s-half{
	margin-top:5%;
	display:flex;
	justify-content: space-around;
}
#book{
	max-width:300px;
}

.info{
	width:60%;
}


/*更新履歴用アイフレーム*/
iframe{
	height:100px;
}


video {
    max-width: 500px;
    height: auto;
  }

}