@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*wpForo添付イメージリンク用*/
.wpforo-attached-file{
  position: relative;
}

.wpforo-attached-file .paperclip{
  position: absolute;
  font-size: 40px !important;
  opacity: 0.6;
  top: -12px;
  left: -13px;
}

/* PPPC 写真プリント絵カード */
img.pppcframe {
    max-width: 120px;
    max-height: 90px;
}

/* レイジーロード */
/* fade image in after load */
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}

/* タブ:li方式 */
.tabrow {
	text-align: left;
	list-style: none;
	margin: 20px 0 10px;
	padding: 0 20px;
	line-height: 24px;
	height: 26px;
	overflow: hidden; 
	/*
	overflow: hidden; 
	font-size: 12px;
	font-family: verdana;
	*/
	position: relative;
}
.tabrow li {
	border: 1px solid #AAA;
	background: #D1D1D1;
	background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	display: inline-block;
	position: relative;
	z-index: 0;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
	/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; */
	text-shadow: 0 1px #FFF;
	margin: 0 -5px;
	padding: 0 20px;
}
.tabrow a {
	color: #555;
	text-decoration: none;
}
.tabrow li.selected {
	background: #FFF;
	color: #333;
	z-index: 2;
	border-bottom-color: #FFF;
}
.tabrow:before {
	position: absolute;
	content: " ";
	width: 100%;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #AAA;
	z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
	border: 1px solid #AAA;
	position: absolute;
	bottom: -1px;
	width: 5px;
	height: 5px;
	content: " ";
}
.tabrow li:before {
	left: -6px;
	border-bottom-right-radius: 6px;
	border-width: 0 1px 1px 0;
	box-shadow: 2px 2px 0px #D1D1D1; /* 2px 2px 0 #D1D1D1; */
}
.tabrow li:after {
	right: -6px;
	border-bottom-left-radius: 6px;
	border-width: 0 0 1px 1px;
	box-shadow: -2px 2px 0px  #D1D1D1; /* -2px 2px 0 #D1D1D1; */
}
.tabrow li.selected:before {
	box-shadow: 2px 2px 0px #FFF; /*  2px 2px 0 #FFF; */
}
.tabrow li.selected:after {
	box-shadow: -2px 2px 0px #FFF; /*  -2px 2px 0 #FFF; */
}
/* タブ:li方式： ここまで */

/* タブ：ラジオボタン方式 */
		/* ▼タブ機能の掲載領域の装飾 */
		.tabbox {
			margin: 0px 0px 0px 0px;
			padding: 1em 0px 1em 0px;
			/* background-color: #f8f8ff; */
		}

		/* ▼タブ機能を制御するラジオボタン（非表示にする） */
		.tabbox input { display: none; }

		/* ▼タブ（共通装飾＋非選択状態の装飾） */
		.tab {
			display: inline-block;
			border-width: 1px 1px 0px 1px;
			border-style: solid;
			border-color: #AAA;
			border-radius: 6px 6px 0px 0px; /* 0.75em 0.75em 0px 0px; */
			padding: 2px 16px; /* 0.75em 1em; */
			margin: 0px -5px;
			color: black;
			background-color: #d1d1d1;
		    background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
			/* font-weight: bold; */
			text-shadow: 0 1px #FFF;
		}

		/* ▼タブにマウスポインタが載った際の装飾 */
		.tab:hover {
			/* background-color: #ffcccc; */
			/* color: green; */
			background: #ffcccc;
			cursor: pointer;
		}

		/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾（＝選択状態のタブ） */
		input:checked + .tab {
			color: black; /* red; */ 
			/* background-color: #ffffcc; */
			background: #FFF;
			position: relative;
			z-index: 10;
		}

		/* ▼タブの中身（共通装飾＋非選択状態の装飾） */
		.tabcontent {
			display: none;
			border: 1px solid #AAA;
			margin-top: -1px;
			margin-left: -5px; /**/
			margin-right: 0px;
			padding: 10px 2px 10px 1px;
			position: relative;
			z-index: 0;
			background-color: #FFF; /* #ffffcc; */
		}

		/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
		#tabcheck0:checked ~ #tabcontent0 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck1:checked ~ #tabcontent1 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck2:checked ~ #tabcontent2 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck3:checked ~ #tabcontent3 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck4:checked ~ #tabcontent4 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck5:checked ~ #tabcontent5 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck6:checked ~ #tabcontent6 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck7:checked ~ #tabcontent7 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck8:checked ~ #tabcontent8 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck9:checked ~ #tabcontent9 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck10:checked ~ #tabcontent10 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck11:checked ~ #tabcontent11 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck12:checked ~ #tabcontent12 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck13:checked ~ #tabcontent13 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck14:checked ~ #tabcontent14 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck15:checked ~ #tabcontent15 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck16:checked ~ #tabcontent16 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck17:checked ~ #tabcontent17 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck18:checked ~ #tabcontent18 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck19:checked ~ #tabcontent19 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck20:checked ~ #tabcontent20 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck21:checked ~ #tabcontent21 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck22:checked ~ #tabcontent22 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck23:checked ~ #tabcontent23 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck24:checked ~ #tabcontent24 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck25:checked ~ #tabcontent25 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck26:checked ~ #tabcontent26 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck27:checked ~ #tabcontent27 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck28:checked ~ #tabcontent28 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck29:checked ~ #tabcontent29 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck30:checked ~ #tabcontent30 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck31:checked ~ #tabcontent31 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck32:checked ~ #tabcontent32 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck33:checked ~ #tabcontent33 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck34:checked ~ #tabcontent34 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck35:checked ~ #tabcontent35 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck36:checked ~ #tabcontent36 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck37:checked ~ #tabcontent37 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck38:checked ~ #tabcontent38 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck39:checked ~ #tabcontent39 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck40:checked ~ #tabcontent40 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck41:checked ~ #tabcontent41 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck42:checked ~ #tabcontent42 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck43:checked ~ #tabcontent43 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck44:checked ~ #tabcontent44 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck45:checked ~ #tabcontent45 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck46:checked ~ #tabcontent46 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck47:checked ~ #tabcontent47 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck48:checked ~ #tabcontent48 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck49:checked ~ #tabcontent49 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck50:checked ~ #tabcontent50 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck51:checked ~ #tabcontent51 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck52:checked ~ #tabcontent52 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck53:checked ~ #tabcontent53 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck54:checked ~ #tabcontent54 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck55:checked ~ #tabcontent55 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck56:checked ~ #tabcontent56 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck57:checked ~ #tabcontent57 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck58:checked ~ #tabcontent58 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck59:checked ~ #tabcontent59 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck60:checked ~ #tabcontent60 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck61:checked ~ #tabcontent61 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck62:checked ~ #tabcontent62 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck63:checked ~ #tabcontent63 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck64:checked ~ #tabcontent64 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck65:checked ~ #tabcontent65 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck66:checked ~ #tabcontent66 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck67:checked ~ #tabcontent67 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck68:checked ~ #tabcontent68 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck69:checked ~ #tabcontent69 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck70:checked ~ #tabcontent70 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck71:checked ~ #tabcontent71 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck72:checked ~ #tabcontent72 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck73:checked ~ #tabcontent73 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck74:checked ~ #tabcontent74 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck75:checked ~ #tabcontent75 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck76:checked ~ #tabcontent76 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck77:checked ~ #tabcontent77 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck78:checked ~ #tabcontent78 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck79:checked ~ #tabcontent79 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
		#tabcheck80:checked ~ #tabcontent80 { display: block; opacity: 1; animation-duration: 1s; animation-name: fade-in; }
   @keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }
/* タブ：ラジオボタン方式： ここまで */


/*
 * アコーディオン
 *http://web-gimmick.com/jquery/863/
 * 要 jquery
 */
/*ACCORDION*/
div.accordion {
  width: 100%;
}
div.accordion > ul {
	list-style-type: none;
	margin: 0 0 0 0;
	padding: 0;
}
div.accordion > ul > li > a {
  display: block;
  color: #000;
  font-size: 66%; /* font-size: 16px; */
  text-decoration: none;
  background-color: #ffffe0; /* #6ab5c8; */
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #FFBF00;
  border-radius: 16px 16px 0px 0px;
  cursor: pointer;
  margin: 8px 0 0 0; /* margin: 10px 0 0 0; */
  padding: 2px 12px; /* padding: 2px 12px; */
  position: relative;
}
div.accordion > ul > li > a > strong{
  color: #339966;
  font-size: 135%; /* font-size: 100%; */

}
div.accordion > ul > li > a:hover{
  background-color: #FFEBCD; /* #5997a7; */
}
div.accordion > ul > li > a:after,
div.accordion > ul > li > a.active:after{
  font-size: 135%; /* font-size: 12px; */
  position: absolute;
  right: 8px;
  bottom: 2px;
  color: #2f7f99;
}
div.accordion > ul > li > a:after{
  content: "開▼";
}
div.accordion > ul > li > a.active:after{
  content: "閉▲";
}
div.accordion > ul > li > ul {
  display: none;
}
div.accordion > ul > li > div {
  display: none;
  font-size: 90%; /* font-size: 100%; */
  background-color: #ffffe0;
  padding: 2% 4% 2% 4%;
  border-width: 0 1px 1px 1px;
  border-right: 1px solid #FFBF00;
  border-style: solid;
  border-color: #FFBF00;
  border-radius: 0 0 16px 16px;
  margin: 0 0 10px 0;
}
div.accordion > ul > li > ul > li > a{
  display: block;
  color: #fff;
  font-size: 14px;
  background-color: #79c9b8;
  border-bottom: 1px solid #fff;
  padding: 6px 12px;
  position: relative;
}

div.accordion > ul > li > ul > li > a:hover{
  background-color: #67ab9c;
}

/* アコーディオン：終わり */

/* ローディング画像 */

#loading{
    border:1px dashed #999;
    padding:15px;
    position: fixed;
    /* margin: 0 auto; */
    /* width: 160px; */
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
    background-color:#FFF;
    filter: alpha(opacity=85);
    -moz-opacity:0.85;
    opacity:0.85;
}
 
#loading .loadingMsg{
    text-align:center;
    padding-top:100px;
    width:100px;
    background-image:url("/app/gif-load.gif");
    background-position: center top;
    background-repeat: no-repeat;
}

/* ローディング画像: 終わり */