OTEGARA.COM 今日八つの感謝

CSS

設定中のcss

2019.07.20

/*-------------------------------*/
/*------おしゃれな飾り囲み枠--------*/
/*-------------------------------*/
.sample_box3 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color:#b0e0e6;/*背景色*/
    color:#000000;/*文字色*/
}
.sample_box3 p {
    margin: 0; 
    padding: 0;
}
/*-------------------------------*/
/*----サルワカ 枠--------------- */
/*-------------------------------*/
.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}
.box5 p {
    margin: 0; 
    padding: 0;
}
/* --- 背景が上下左右に動くのBOX定義 ------------------------ */
.box {
  position   : relative;
  max-width  : 700px;                   /* 背景の大きさに変更 */
  height     : 200px;
  margin     : auto;
  background : #ffffff;
}

/* --- 背景が上下左右に動くの背景定義 ----------------------- */
.box::before {
  display    : block;
  content    : "";
  position   : absolute;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  background-image : url(http://otegara.com/wp-content/uploads/2019/07/5cc233b0-d12b-4e0a-8cf9-5afbf32dcbfd.jpg);  /* 使用する画像を指定 */
  animation  : bgAnime 15s linear infinite;
}
@keyframes bgAnime {
   0% { background-position: 0 0 }
                /* 使用する画像幅と画像高さのpxに変更ください */
 100% { background-position: 500px -103px }
}

/* --- 前面の文字定義(サンプルのため変更してください) ----- */
.boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  background : rgba(0, 127, 255, 0.7);          /* 半透明の青 */
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
}
/***********************************/
/********** 画像に文字を重ねる *****/
/********** 全体の枠(親要素) ******/
.image-text {
position: relative;
}

/* 重ねる文字(子要素) */
.text1 {
position: absolute;
top: 48px;
right: 49px;
width: 60%;
color: white;
background-color: #1222;
padding: 15px;
font-size: 30px;
line-height: 160%;
}
/**********************************/
/****Google MapYouTube*************/
/******レスポンシブ対応させる方法****/
/**********************************/
.google-map {
    position: relative;
    width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
    height: 0;
    padding-bottom: 56.25%;    /* padding-topでもOK */
    overflow: hidden;
}
.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    /* 必要であれば!importantを付けてください */
    height: 100%;    /* 必要であれば!importantを付けてください */
}
/*************wrapper-1**************/
/********文字を重ねて表示***********/
/*********クルーデザインsite********/
.wrapper {
  position:relative;
  display:inline-block;
}
.label {
  position:absolute;
  color:white;
  background:#24A0CF;
  padding:5px 23px;    
}
.label-left-top{
  left:50px;
  top:38px;
}
/******* 枠テンプレート*******/
.block {
    padding: 20px;
    background: #fff;
    border: 4px #66cdaa solid;
    position: relative;
    z-index: 5;
}

.block:before {
    content: "";
    position: absolute;
    background: #fff;
    margin: 3px;
    border: 2px #7accb0 solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}
/********** Wakatobi ************/
/*********** アコーディオン*******/
/*********** Wakatobi ***********/
.accordion{
	margin:0 0 35px 0;
}
.accordion_title{
	color:#fff;
	font-size:16px;
	font-weight:normal;
	text-align:left;
	background-color:#12212;
	padding:5px 15px;
	margin:0;
	border:1px solid #2a6a2a;
	border-radius:4px 4px 0 0;
}
.accordion_content{
	padding:10px 10px 10px 25px;
	margin:0;
	border:1px solid #2a4a2a;
	border-top:none;
	border-radius:0 0 4px 4px;
	box-shadow:2px 2px 1px rgba(0,0,0,0.1);
}
.accordion_title:hover{
	color:yellow;
	cursor:pointer;
}
/***************************/
/*********************************/
/******jQuery accordion-panel-****/
/*********************************/
#accordion-panel dt {
  cursor: pointer;
  margin-bottom: 1px;
}
 
#accordion-panel dd .inner {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  margin: 3px 0;
}
 
#accordion-panel dd {
  display: none;
}
 
.layer-1 dt {
  background-color: #9aabf3;
  padding: 5px 0;
  font-size: 1.25em;
  text-align: center;
  color: #0d2170;
}
 
.layer-2 dt {
  background-color: #b8c4f7;
  padding: 15px 0;
  font-size: 1.0em;
  text-align: center;
  color: #0d2170;
}
 
.layer-3 dt {
  background-color: #d7ddfa;
  margin-bottom: 1px;
  padding: 5px 0;
  font-size: 0.8em;
  text-align: center;
  color: #0d2171;
}
/******************************/
/******************************/
/******************************/
h3 {
  position: relative;
  color: black;
  background: #d0ecff;
  line-height: 1.4;
  padding: 0.25em 0.5em;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

h3:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f00c Check';
  background: #2196F3;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em
}
/******************************/
/**************** SPIN ********/
/******************************/
.spin {
  animation: spin_5111 3.5s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes spin_5111 {
  0% { transform:rotate(0deg) }
  42.85714% { transform:rotate(359deg) }
  100% { transform:rotate(359deg) }
}
/******************************/
/****** Font Awesome 5 ********/
/******************************/
.my-gray {color: gray}
.my-skyblue {color: skyblue}
.my-blue {color: #4072b3}
.my-orange {color: #fecb81}
.my-red {color: #ff0000}
.my-red2 {color: #d685b0}
.my-green {color: #b3d3ac}
/******************************/
/*******************************/
/*画像と文字を重ねる*/
/*******************************/
.absolute {
    position: absolute;
    bottom: 580px;
    color: #fff;
    background: rgba(0,0,0,.3);
    width: 30%;
    max-width: 300px;
    padding: 1em 0;
}
.absolute p {
    margin: 0;
    padding: 0 0.8em;
    font-size: 150%;
    text-align: center;
}
/**************************************/
/******float with Youtube**************/
/********* 大隅半島 投稿基本-1 ********/
.float-right{
  float:right;
  width:50%;
}
.float-left{
  float:left;
  width:50%;
}
.wrap:after{
display:block;
clear:both;
content:"";
}
/**************************************/
/************* 動画を再生 **************/
/*--------------トップ ---------------*/
.top {
	height: 100%;
	background: none;
	position: relative;
}

.top video {
	display: white;
	width: 100%;
}

.headline {
	position: absolute;
  text-align: center;
	top: 35%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.headline h1 {
	margin: 0;
    font-size: 60px;
    color: #fff;
	}

.headline p {
	color: #fff;
	font-weight: 100;
}
/****************************/
/***** YouTube の動画 *******/
/***************************/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 10px;
    height: 0;
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
}
 
/* サムネイル画像をリスト状に並べる(「display-posts」ショートコード対応版)*/
.boxlist ul.display-posts-listing {
    padding-left: 0 !important;
    text-align: left;
}
 
.boxlist ul.display-posts-listing li {
    list-style: none;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    word-wrap: normal;
    font-size: 12px;
    line-height: 1.2;
    margin: 0;
    padding: 2px;
}
 
.boxlist ul.display-posts-listing li a {
    font-weight: bold;
}
 
#ie7 .boxlist ul.display-posts-listing li {
    display: inline;
    position: relative;
    width: 500px;
}
/*
.boxlist ul.display-posts-listing li img {
    display: block !important;
    border: 1px solid #d0a600 !important;
    width: 80px !important;
    max-width: 100% !important;
    height: auto !important;
    float: left !important;
    margin: -2px 4px 4px 2px !important;
    padding: 2px !important;
}
*/
 
@media (max-width: 767px) {
    .boxlist ul.display-posts-listing li .excerpt {
        width: 93%;
    }
}
 
.boxlist ul.display-posts-listing li .excerpt a {
    font-size: 11px;
    float: right;
}
 
.boxlist.w100 ul.display-posts-listing > li {
    width: 100%;
}
 
.boxlist.w50 ul.display-posts-listing > li {
    width: 45.5%;
    margin-left: 1.5% !important;
}
 
.boxlist.w33 ul.display-posts-listing > li {
    width: 31%;
    margin-left: 1.5% !important;
}
 
@media screen and (max-width : 980px) {
    .boxlist.w33 ul.display-posts-listing > li {
        width: 45.5%;
        margin-left: 1.5% !important;
    }
}
 
@media (max-width: 767px) {
    .boxlist.w50 ul.display-posts-listing > li,.boxlist.w33 ul.display-posts-listing > li {
        width: 100%;
    }
 
    .boxlist.w50 ul.display-posts-listing,.boxlist.w33 ul.display-posts-listing {
        margin: 0 1em 1.625em;
    }
}
/**************************************/
/********* Font Awesome ***************/
/**************************************/
.container{
  padding-top: 20px;
}
.entry-title:before{
    content: '\f046';
    display: inline-block;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/**************************************/
/*Google map レスポンシブ*/
/**************************************/
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/**************************************/
/*TABLEで背景色を交互*/
/**************************************/
.s-tbl {
	border-collapse: collapse;
}
.s-tbl th, .s-tbl td {
	border: 1px solid #000;
}
.s-tbl tr:nth-child(even) {
	background: #3ee;
}
.s-tbl tr:hover {
	background: #0f0;
}
/**************************************/
block {
    padding: 20px;
    background: #fff;
    border: 4px #14d7e5 solid;
    position: relative;
    z-index: 10;
}

block:before {
    content: "";
    position: absolute;
    background: #fff;
    margin: 3px;
    border: 2px #14d7e5 solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}
 img{
  float: left;
  margin: 0 20px 10px 0;
}
/**************************************/
/**************************************/
.button {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #777;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 20px;
    padding: 6px 12px;
    text-decoration: none;
}
/**************************************/
.defaultlist
,.defaultlist li{
	padding:10px;
	margin:10px;
}
 .defaultlist
,.defaultlist li{
    padding:10px;
    margin:50px;
}
  
.defaultlist li{
    list-style-type:none !important;
    list-style-image:none !important;
    margin: 0px 0px 10px 10px !important;
}
/**********************************/ 
/*********** list10 ***************/
/**********************************/
.list10{
    counter-reset:li;   
}
  
.list10 li{
    position:relative;
    display: block;
    padding: 0px 0px  0px  0px; 
    margin-left: 0px !important;
}
  
li.list10-count:after{
    counter-increment: li;
    content: counter(li) ".";
    position: absolute; 
    display: block;
    text-align: center;
    font-style: italic;
    left: -30px;
    top: 0px;
    font-size: 29px;
    color:#bbb;
    font-family:'Goudy Bookletter 1911',Georgia,serif; 
}
/*************************************/
/*************************************/
/*************************************/      
.a:hover img {
position:relative;
top:5px;
left:10px;
}

#menu li {
  list-style-type: none;
  width: 800px;
  margin: 0;
  padding: 0;
  border-top: 1px dotted #777;
}
#menu a {
  text-decoration: none;
  display: block;
  padding:2px 10px;
}
#menu a:hover {
  background: #fff;
}
div.imgArea p {    
    display: table-cell;    
    vertical-align: middle;    
    margin: 0;    
}    
/**********************************/
/******google_map***********/
/**********************************/
.google_map{
    position:relative;
    width:100%;
    height:10;
    padding-top:80%;
}
.google_map iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
p .migi {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}
/**********************************/
/*見出し-常用***********/
/**********************************/
.sample {
  position:relative;
  padding:26px 50px;
  border:5px solid #81c2fa;
}
.sample:after {
  content:"Content";
  position:absolute;
  top: -23px;
  left: 10px;
  background:#fff;
  font-size:55px;
  font-weight:bold;
  color:#81c2fa;
  padding:03px;
}
/**********************************/
/*********** LIST-6 ***************/
/**********************************/
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 0px 0px !important;
}
 
.list6 li{
	position:relative;
	padding-left:10px;
}
 
.list6 li:after{
	content:'';
	display:block; 
	position:absolute; 
	background:#aaa;
	width:9px;
	height:9px; 
	top:9px; 
	left:-15px; /*文字とひし間隔*/
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
/**********************************/
/***** 四国八十八ヶ所リスト**********/
/**********************************/
a.cp_btn {
position: relative;
display: block;
width: 200px;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #fff;
background: #14d7e5;
border:solid 1px #fff;
overflow: hidden;
}
a.cp_btn:before {
content:"";
position: absolute;
top: -35px;
left: -20px;
height:90px;
width:20px;
background : #fff;
opacity: 0.3;
transform: rotate(40deg);
transition: 0.3s;
}
a.cp_btn:hover:before {
left:98%;
}
/*----------------------*/
/*---------Gallery------*/
/*---------------------*/
* { margin: 0; padding: 0; }
body {
  font-family: Arial, sans-serif;
  background-image: url('./img/w-stone14.jpg');
  background-repeat: repeat;
} 
#gallery {
  width: 60%;
  margin: 1em auto;
  display: flex;/* 親要素 flexコンテナ */
  flex-flow: wrap;/* 折り返し */
}
#gallery img {
  width: 100%;
  height: auto;
  border: none;
  max-width: 380px;/* 大きくなり過ぎないように */
  margin: 1em 0;
  padding: 18px; /* 写真外枠を白フチに */
  background: #fff;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.7);
}
#gallery p {
  flex: 260px;/* 子要素 flexアイテム */
}
.pic-r1 {
  z-index: 2;
  transform: rotate(-10deg);
}
.pic-r2 {
  z-index: 5;
  transform: rotate(15deg);
}
.pic-r3 {
  z-index: 3;
  transform: rotate(5deg);
}
.pic-r4 {
  z-index: 5;
  transform: rotate(-3deg);
}
.pic-r5 {
  z-index: 5;
  animation: animation-1 4s infinite ease 1s both;
}              /* アニメでお遊びです */
@keyframes animation-1 {
  from {
    transform: rotate(8deg);
  }
  to {
    transform: rotate(-15deg);
  }
}
/*********20190301********/
/*******content-wrap*******/
/**************************/
.contents-wrap {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}
.contents-wrap:nth-child(odd) {
	flex-direction: row-reverse;
}

.contents-text {
	width: 60%; /*flex: 2;*/
}
.contents-img {
	width: 100%; /*flex: 1;*/
}

.contents-text h2 {
	margin-bottom: 1rem;
	font-size: 2.2rem;
}

.contents-img img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px){
	.contents-wrap,
	.contents-wrap:nth-child(odd)  {
		flex-direction: column;
	}

	.contents-text,
	.contents-img {
		width: 100%; /*flex: 1;*/
	}

	.contents-text {
		padding: 0.5rem;
	}

	.contents-text h2 {
		text-align: center;
	}
}
/**********************************/
/** トグル表示ボタン***般若心経**/
/**********************************/
.toggle-wrap .toggle-button {
  display: block;
  cursor: pointer;
  padding: 3px 10px;
  background-color: #fff;
  border: 1px solid #777;
  text-align: center;
  margin-bottom: 1em;
  border-radius: 3px;
}

.toggle-wrap .toggle-button:hover {
  border-color: red;
}

.toggle-wrap .toggle-content,
.toggle-wrap > input[type="checkbox"] {
  display: none;
}

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content {
  display: block;
}
/*hiddenbox全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
/**********************************/
/******* saruwaka balloon3 ********/
/**********************************/
.balloon3-right-btm {
 	position: relative;
	display: inline-block;
	margin: 1.5em 15px 1.5em 0;
	padding: 0 5px;
	width: 90px;
	height: 90px;
	line-height: 90px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	background: #a4eb84;
	border-radius: 50%;
	box-sizing: border-box;
}

.balloon3-right-btm:before{
	content: "";
	position: absolute;
	bottom: -8px;
	right: -8px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid #a4eb84;
	z-index: 0;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
/**********************************/
 /*googlemapレスポンシブ*/
/**********************************/
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*cp-tag05*/
.cp_tag05 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
					transform: translate(-50%,-50%);
}
.cp_tag05 li {
	position: relative;
	display: inline-block;
	margin: 0 10px 8px 10px;
	list-style: none;
}
.cp_tag05 a {
	position: relative;
	display: inline-block;
	height: auto;
	margin: 0.5em 0 0.5em 20px;
	-webkit-transition: margin 500ms ease-in-out;
	        transition: margin 500ms ease-in-out;
	text-align: center;
	text-decoration: none;
	color: #666666;
}
.cp_tag05 .text {
	position: relative;
	z-index: 4;
	height: 26px;
	padding: 5px 15px;
	border-width: 1px 3px 1px 1px;
	border-style: solid;
	border-color: #dadada #E91E63 #d2d2d2 #c5c5c5;
	border-radius: 3px 0 0 3px;
	background: #ffffff;
}
.cp_tag05 a::after {
	position: absolute;
	top: -1px;
	right: 4px;
	z-index: 99;
	display: inline-block;
	height: 114%;
	content: '';
	border-right: 1px solid #E91E63;
}
.cp_tag05 .count {
	font-size: 0.8em;
	line-height: 26px;
	position: absolute;
	z-index: 3;
	top: -1px;
	right: -9px;
	display: block;
	width: 45px;
	height: 26px;
	padding-right: 5px;
	-webkit-transition: right 500ms ease-in-out;
	        transition: right 500ms ease-in-out;
	color: #ffffff;
	background: #f06292;
}
.cp_tag05 .count::before, .cp_tag05 .count::after {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	display: block;
	width: 0;
	height: 0;
	content: '';
}
.cp_tag05 .count::after {
	z-index: 2;
	right: -1px;
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 8px 13px 0;
	border-color: transparent #fafcfc transparent transparent;/*背景色*/
}
.cp_tag05 a:hover {
	margin-right: 30px;
}
.cp_tag05 a:hover .count {
	right: -40px;
}
/*cp-tag03*/
.cp_tag03 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 70%;
	left: 35%;
	-webkit-transform: translate(-50%,-50%);
					transform: translate(-50%,-50%);
}
.cp_tag03 li {
	position: relative;
	display: inline-block;
	margin: 0 20px 8px 20px;
	list-style: none;
}
.cp_tag03 a, .cp_tag03 span {
	display: block;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tag03 a {
	line-height: 25px;
	height: 26px;
	padding: 0 13px 0 10px;
	text-decoration: none;
	color: #ffffff;
	border-style: solid;
	border-width: 1px 0 1px 1px;
	border-color: #00BCD4 #fafafa #00ACC1 #0097a7;
	border-radius: 50px 0 0 50px;
	background: #26c6da;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
.cp_tag03 a::after {
	position: absolute;
	z-index: 2;
	top: 10px;
	right: -1px;
	content: '';
	opacity: 0.95;
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3px;
	border-radius: 10px 0 0 10px;
	border-color: #fafafa;
	-webkit-transition: 0.3s ease-out;
	        transition: 0.3s ease-out;
}
.cp_tag03 a:hover:after {
	border-color: #FF7043;
}
.cp_tag03 span {
	font-size: 0.8em;
	line-height: 25px;
	position: absolute;
	top: 0;
	left: 100%;
	overflow: hidden;
	height: 26px;
	max-width: 40px;
	padding: 0 7px 0 6px;
	color: #555555;
	border-width: 1px 1px 1px 0;
	border-style: solid;
	border-color: #dadada #d2d2d2 #c5c5c5;
	border-radius: 0 12px 12px 0;
	background: #fafafa;
	text-shadow: 0 1px #ffffff;
	-webkit-transition: 0.3s ease-out;
	        transition: 0.3s ease-out;
}
.cp_tag03 li:hover span {
	color: #ffffff;
	border-color: #FF7043 #FF5722 #D84315;
	background: #FF7043;
	text-shadow: 0 1px #FF7043;
}
/**********************************/
/*gallery*/
/**********************************/
/*iframe*/
iframe {
width: 900px;
height: 900px;
}

iframe.example1 { border: none; }
iframe.example2 { border: 0px #008000 solid; }
iframe.example3 { border: 0px #008000 dashed; }
/**********************************/
/***********スマートホン************/
.iframeWrap {position: relative;padding-bottom: 90%;height: 0;overflow: hidden;}
.iframeWrap iframe {position: absolute;top: 0;left: 0;width: 102% !important;height: 620% !important;}
/*画像の上に文字列*/
.photo2 {
	width:		100%;
	margin:		0;
	padding:	0;
	position:	relative;
	overflow:	hidden;
}
.photo2 img {
	width:		100%;
}
.text2 {
	position:	absolute;
	font-size:	180%;
	white-space:	nowrap;
	bottom:		36px;
	margin:		0;
	color:		#fff;
	animation: 	slide2 16s linear 0s infinite;
}
@keyframes slide2 {
	0% { right:	-570px; }
	100% { right:	680px; }
}
/*文字を重ねる*/
.absolute {
    position: absolute;
    bottom: 80px;
    color: #fff;
    background: rgba(0,0,0,.6);
    width: 100%;
    max-width: 600px;
    padding: 1em 0;
}
.absolute p {
    margin: 0;
    padding: 0 0.1em;
    font-size: 150%;
    text-align: center;
}
/*Responsive Image Gallery*/
div.gallery {
    margin: 0px;
    border: 0px solid #ccc;
    float: left;
    width: 280px;
}
 
div.gallery:hover {
    border: 0px solid #777;
}
 
div.gallery img {
    width: 200%;
    height: auto;
}
 
div.desc {
    padding: 12px;
    text-align: center;
}
/**********************************/
/******* SNS*********/
/**********************************/
.follow-me {
  list-style: none;
  margin: 0 0 -8px;
  overflow: hidden;
  padding: 0;
}
.follow-me li {
  float: left;
  margin: 0 8px 8px 0;
  padding: 0;
}
.follow-me li a::before {
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 42px; /* Button height */
  line-height: 42px; /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  width: 42px; /* Button width */
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before         { border-color: #ff9900; background-color: #ff9900; content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { border-color: #000000; background-color: #000000; content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { border-color: #3399ff; background-color: #3399ff; content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { border-color: #05cc47; background-color: #05cc47; content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { border-color: #000000; background-color: #000000; content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { border-color: #000000; background-color: #ea4c89; content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { border-color: #007ee5; background-color: #007ee5; content: "\f16b"; }
.follow-me li a[href*="facebook.com"]::before       { border-color: #3b5998; background-color: #3b5998; content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { border-color: #6cc655; background-color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { border-color: #0063cc; background-color: #0063dc; content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { border-color: #f94877; background-color: #f94877; content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { border-color: #181717; background-color: #181717; content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { border-color: #dc4e41; background-color: #dc4e41; content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { border-color: #008fde; background-color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { border-color: #125688; background-color: #125688; content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { border-color: #d51007; background-color: #d51007; content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { border-color: #0077b5; background-color: #0077b5; content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { border-color: #eaeaea; background-color: #eaeaea; content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { border-color: #bd081c; background-color: #bd081c; content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { border-color: #ef3f56; background-color: #ef3f56; content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { border-color: #ff4500; background-color: #ff4500; content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { border-color: #00aff0; background-color: #00aff0; content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { border-color: #2d2d2d; background-color: #2d2d2d; content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { border-color: #84bd00; background-color: #84bd00; content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { border-color: #171a21; background-color: #171a21; content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { border-color: #eb4929; background-color: #eb4929; content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { border-color: #36465d; background-color: #36465d; content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { border-color: #6441a5; background-color: #6441a5; content: "\f1e8"; }
.follow-me li a[href*="twitter.com"]::before        { border-color: #55acee; background-color: #55acee; content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { border-color: #1ab7ea; background-color: #1ab7ea; content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { border-color: #11b58a; background-color: #11b58a; content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { border-color: #e6162d; background-color: #e6162d; content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { border-color: #64d548; background-color: #64d548; content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { border-color: #21759b; background-color: #21759b; content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { border-color: #cd201f; background-color: #cd201f; content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { border-color: #ffa500; background-color: #ffa500; content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { border-color: #363636; background-color: #363636; content: "\f000"; font-family: blogicon; }
.follow-me li a:hover::before {
  background-color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before         { color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { color: #363636; }
/****Buttons Generator******/
ul.share-buttons{
  list-style: none;
  padding: 0;
}

ul.share-buttons li{
  display: inline;
}

ul.share-buttons .sr-only{
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

ul.share-buttons img{
  width: 38px;
}
/*------------------------*/
/***gallery-container**ok*/
/*-----------------------*/
.gallery-container {
  width: 860px;
  margin-left: auto;
  margin-right: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns:(1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  grid-gap: .5em
}

.gallery-img {
  display: block;
  max-width: 100%;
  cursor: pointer
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  display: -ms-flexbox;
  display: flex;
  z-index: 1
}

.lightbox-container {
  position: relative;
  margin: auto;
  background: #fff;
  padding: 1em;
  border-radius: .2em
}

.close-modal {
  background: tomato;
  color: #fff;
  position: absolute;
  width: 1.8em;
  height: 1.8em;
  text-align: center;
  line-height: 1.8em;
  top: -.9em;
  right: -.9em;
  border-radius: 50%;
  cursor: pointer
}

.lightbox-description {
  text-align: center;
  font-size: 1.1em
}

.lightbox-navigation {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: .9em;
  opacity: .8
}

.lightbox-navigation__button {
  text-decoration: none;
  color: tomato
}
/****************************/
/******* inline frame   *****/
/****************************/
.inlineframe    {
background-color:#FFFFFF;
height:150px;
overflow:auto;
overflow-y:scroll;
overflow-x:hidden;
}
/**********************************/
/**********************************/
img{
  float: left;
  margin: 0 20px 10px 0;
}
/****************************/
/****************************/
PAGETOP
Copyright © OTEGARA.COM 今日八つの感謝 All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.