/*
	Theme Name: diver_child
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
  Version: 20.2.14
 */

/* カスタマイズする場合にはこれより下に追記してください  */

.more-link{
display:none;
}


/* 印刷時のCSS  */
@media print {
	#sidebar {display:none;}
	#content {float:none; width:100%;}
	#onlynav{display:none;}
	#footer{display:none;}
}

/* カテゴリーページのリンクデコレーションを解除  */
.clear_text a {
    background: initial !important;
    white-space: initial !important;
    border: initial !important;
    padding: initial !important;
    margin: initial !important;
    display: initial !important;
    border-radius: initial !important;
    color: #2196F3 !important;     /* 文字色指定 */
}

/* グローバルナビ  */
#onlynav ul li{
width: 145px; /*メニュー１つ分の幅*/
}

/* BOX css  */
.box10 {
    margin: 2em 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box10 .box-title {
    font-size: 1.2em;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box20 {
    margin: 2em 0;
    border: solid 3px;
    border-radius: 8px;
}
.box20 .box-title {
    font-size: 1.2em;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.box30 {
 position:relative;
 padding: 35px 20px 15px;
 margin: 2.5em auto;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #e8ddbd;
 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}
.box30 .box-title{
 position: absolute;
 top: -15px;
 left: 30px;
 padding: 4px 20px;
 color: #FFF;
 font-weight: bold;
 font-size: 0.8em;
 background-color: rgba(255,255,255,.4);
 border-left: 2px dotted rgba(0,0,0,.1);
 border-right: 2px dotted rgba(0,0,0,.1);
 box-shadow: 0 0 5px rgba(0,0,0,0.2); 
 transform: rotate(-5deg);
}

.box10 p,
.box20 p,
.box30 p,
.box40 p,
.box50 p,
.boxcard p {
    padding: 20px;
    color: black;
    margin: 10;
}
.box-content {
  padding: 20px;
}

/*　カード型 */
.boxcard {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}
img.card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.box-title {
  font-size: 20px;
  margin-bottom: 0px;
  text-align: center;
  color: #333;
}

	/*-- 見出し --*/
title10 {
  position: relative;
}

title10:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

	/*------- 画像 frame -------*/
/* 1.画像 差し込んだ風 画像高さ指定 */
.frame1 {
	display: inline-block;
	position: relative;
	overflow: hidden; /* 不要部分を消す */
	padding: 6px; /* 6px だけは写真からはみ出す */
}
.frame1 img {
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.frame1:before,
.frame1:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 97px;
	height: 50px;
	background: #fff; /* 背景色 */
	transform: rotate(-30deg);
}
.frame1:before {
	box-shadow: 0 10px 8px -12px rgba(0, 0, 0, 0.8);
	top: -24px;
	bottom: auto;
	right: auto;
	left: -26px;

}
.frame1:after {
	box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.7);
	top: auto;
	bottom: -22px;
	right: -25px;
	left: auto;
}

/* 2.重なった風 */
.frame2 {
	display: inline-block;
	position: relative;
}
.frame2:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	transform: rotate(3deg); /* 回転させる */
	background: #fff;
	z-index: -1;
}

/* 3.フェード */
.frame3 {
	display: inline-block;
	transform: rotate(3deg);
}

/* 4.カラー調整　 */
.frame4 {
	display: inline-block;
	position: relative;
}
.frame4:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5),
		inset 0 0 100px rgba(0, 0, 0, 0.2);
	background: rgba(0, 255, 0, 0.1); /* カラーを重ねる */
}

/* 5.めくれた風　 */
.frame5 {
	display: inline-block;
	position: relative;
}
.frame5:after {
	position: absolute;
	content: "";
	box-shadow: 0 15px 10px rgba(0,0,0, .5); /* シャドウ */
	transform: rotate(3deg); /* 回転させる */
	right: 5px;
	left: auto;
	top: auto;
	bottom: 15px;
	z-index: -1;
	width: 50%;
	height: 20%;
}

/* 6.マル　 */
.frame6 img {
border-radius: 50%;
}


/* 画像の高さ指定300 */
img.high {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

	/*-- 文字の装飾 --*/
.under {
  background: linear-gradient(transparent 70%, #ff99ab 70%);
}

	/*-- 文字の中央 --*/
div.relative {
    position: relative;
}
span.absolute{
    position: absolute;
    top: 40%;
    margin: -0.5em;
}


.card {
  margin: 30px auto;
  width: 350px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}
.cards-img {
  border-radius: 5px 5px 0 0;
  max-width: 100%;
  height: auto;
}
.card-content {
  padding: 20px;
  height:200px;
}
.card-title {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}
.card-text {
  color: #777;
  font-size: 14px;
  line-height: 1.5;
}
.card-link {
  text-align: center;
  border-top: 1px solid #eee;
  padding: 20px;
}
.card-link a {
  text-decoration: none;
  color: #0bd;
  margin: 0 10px;
}
.card-link a:hover {
  color: #0090aa;
}

/*********************************
* 画像に文字載せ
*********************************/
.relative {
position: relative;
overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
}

.relative-p {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:10px 0;
color:#ffffff;
width: 100%;
word-wrap: break-word;
text-shadow: 1px 2px 3px #808080;
text-align:center;
}


/*********************************
* メタスライダー（プラグイン）
*********************************/
@media screen and (min-width: 960px) {
.metaslider .caption p {
	font-size: 140%; /*文字サイズ*/
	font-weight: bold;
	line-height: 1.5;
	color: #fff;
	text-decoration: none;
	transition: .3s;
	margin: 25px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.8);
}

.metaslider .caption p :hover{
	color: #0076ff;
}
.metaslider .caption-wrap {
	left: 0;
	opacity: 1!important;
	background: rgba(0,0,0,0.3)!important;
}
}