@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*ページ全体*/
#main {
	border:none;
	padding-top: 10px;
}
.content {
	margin-top: 0px; 
}
.breadcrumb { 
	margin-top: -20px; 
}

/*シャギーを防ぐ指定*/
#main, #navi, aside, .text-pc, .search-edit {
	transform: rotate(0.04deg);
}

/*タイトル・メニュー*/
.site-name-text {
	color:#773c30;
	font-weight: 500;
}
.tagline {
	margin-top: 0px;
	margin-bottom: 0px;
	color:#773c30;
	font-weight: 500;
	font-size: 1rem;
}
.item-label {
	font-weight: 500;
}
.menu-header .menu-item {
	border-bottom:3px solid #88cb7f; /*線の太さ色 old:#32cd32*/
}
.menu-header .menu-item:hover {
	border-bottom:5px solid #c3d825; /*線の太さ色 old:#7cfc00*/
	transition: all .3s; /*線が出てくる時間*/
}
.entry-content {
	margin-top: -40px; /*タイトル下の余白を取る 2021.1.4 -50pxから変更 2023.10.5 -40pxに変更 */
}
/*見出し*/
h1,h2,h3,h4,h5 {
	color: #6c2c2f;
}
#main h1 {
	padding-left: 0px;
	padding-right: 0px;
}

/*お知らせ表示*/
.oshirase_disp {
	margin-top: -5px;
	text-align: center;
	line-height: 1.2
}

/*PR表示*/
.pr_disp {
	margin-top: -15px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	text-align: right;
}

/*AMP用画像*/
amp-img {
	margin-bottom: 12px;
}

/*CTAボックス*/
.cta-box {
	/*border: solid 1px #9d9d9d;*/
	/*border-radius: 8px;*/
	background-color: #f3f3f3;
	color: #040404;
}

/*目次*/
.article .toc-list > li {
    font-weight: 600;
}
.article .toc-list > li li {
    font-weight: 400;
    list-style: none;
	margin-left: -20px;
}
.toc-list > li li ::before {
    display: inline-block;
    position: relative;
    content: '';
    width: 5px;
    height: 5px;
    left: -6px; /*横(左)の位置*/
    margin-bottom: 3px; /*下の余白*/
    border-radius: 100%;
    background: #cdcdcd; /*・の色*/
}

/*ナビゲーションメニュー*/
.widget_nav_menu ul { 
	margin-top: -15px;
	margin-bottom: 20px;
}
.widget_nav_menu ul li a{ 
	border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
	padding: 7px;
}
.widget_nav_menu ul li a::before{
	font-family: FontAwesome;
	content: "\f022"; /* FontAwesomeのユニコード */
	color: #aacf53; /*#5FB3F5;*/ /* アイコンの色 */
	padding-right: 6px;
}

/*親カテゴリ*/
.widget_categories ul { 
	margin-top: -15px;
	margin-bottom: 20px;
}
.widget_categories ul li a{ 
	border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
	padding: 7px;
}
.widget_categories ul li a::before{
	font-family: FontAwesome;
	content: "\f07b"; /* FontAwesomeのユニコード */
	color: #aacf53; /*#5FB3F5;*/ /* アイコンの色 */
	padding-right: 6px;
}
.widget_categories > ul > li > a:first-child{ 
	border-top: none;
}

/*子カテゴリ*/
.widget_categories ul li ul li a::before{
	font-family: FontAwesome;
	content: "\f114"; /* FontAwesomeのユニコード */
	color: #aacf53; /* アイコンの色 */
	padding-right: 6px;
}

/*白抜き・タブ・付箋風ボックス*/
.blank-box {
	border-width: 2px;
}
.blank-box.border-none {
	border: none;
}
.blank-box.border-brown {
	border-color: #6c2c2f;
}
.blank-box.border-blue {
	border-color: #84b9cb;
}
.blank-box.border-yellow {
	border-color: #f8b500;
}
.blank-box.border-black {
	border-color: #1f3134;
}
.blank-box.back-blue {
	background-color: #eaf4fc;
}
.blank-box.back-pink {
	background-color: #fef4f4;
}
.blank-box.back-yellow {
	background-color: #f8f4e6;
}
.blank-box.back-darkyellow {
	background-color: #f8e58c;
}
.blank-box.back-black {
	color: white;
	background-color: #2c4f54;
}
/*アイコンボックス*/
.alert-box {
	background-color: #fef4f4;
	border-color: #f6bfbc;
}
.alert-box-text {
	margin-bottom: 10px;
}
.bad-box {
	background-color: #fef4f4;
	border-color: #f6bfbc;
}
.good-box {
	background-color: #d6e9ca;
	border-color: #82ae46;
}
.memo-box {
	background-color: #d6e9ca;
	border-color: #82ae46;
}
.information-box {
	background-color: #eaf4fc;
	border-color: #89c3eb;
}

/*案内ボックス*/
.primary-box.back-darkyellow {
	background-color: #f8e58c;
}

/*ボタン*/
.btn-l {
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 0.95rem;
}

/*トグルボックス・マイクロバルーン*/
/*GUIでカスタム色に変更、AMPにも対応している*/

/*強調表示*/
.kyouchou-box {
	text-align: center;
	padding-bottom: 12px;
	padding-top: 12px;
	font-weight: bold;
	font-size: 1.4rem;
	border-bottom-style: solid;
	border-bottom-width: 4px;
	border-bottom-color: #dcdddd;
}
.kyouchou-box.back-red {
	color: white;
	background-color: #e83929;
}
.kyouchou-box.back-green {
	color: white;
	background-color: #82ae46;
}
.kyouchou-bold {
	font-weight: bold;
}
.kyouchou-bold.big {
	font-size: 1.2rem;
}
.kyouchou-bold.bigbig {
	font-size: 1.4rem;
}
.kyouchou-bold.bigbigbig {
	font-size: 1.5rem;
}
.kyouchou-bold.fore-red {
	color: #e83929;
}
.kyouchou-bold.fore-brown {
	color: #6c2c2f;
}

/*控え目表示*/
.hikaeme-gray {
	color: #949495;
}
.hikaeme-small {
	font-size: 0.95rem;	
}
.hikaeme-gray.small {
	font-size: 0.95rem;	
}

/*長文の省略*/
.shortcut {
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* ハミ出した部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
}

/*見出しボックス*/
#main .midashi-box {
	text-align: left;
	padding: 15px 0px 15px 10px;
	font-weight: bold;
	font-size: 1.25rem;
}
.midashi-box.back-black {
	color: white;
	background-color: #2c4f54;
}
.midashi-box.back-brown {
	color: white;
	background-color: #8d6449;
}
#main .midashi-box-small {
	text-align: center;
	margin-bottom: 5px;
	padding: 3px 5px 3px 5px;
	font-weight: bold;
	font-size: 1.15rem;
}
.midashi-box-small.back-black {
	color: white;
	background-color: #2c4f54;
}
.midashi-box-small.back-brown {
	color: white;
	background-color: #8d6449;
}
#main .midashi-box-sub-small {
	text-align: left;
	margin-bottom: 5px;
	padding: 3px 5px 3px 5px;
	font-weight: bold;
	font-size: 1rem;
	border-bottom: 1px dashed #6c2c2f;
}

/*位置調整*/
.centering {
	text-align: center;
}
.righting {
	text-align: right;
}
.padding-top-5px {
	padding-top: 5px;
}
.padding-top-10px {
	padding-top: 10px;
}
.padding-top-15px {
	padding-top: 15px;
}
.padding-top-20px {
	padding-top: 20px;
}
.padding-top-30px {
	padding-top: 30px;
}
.padding-top-50px {
	padding-top: 50px;
}
.padding-bottom-5px {
	padding-bottom: 5px;
}
.padding-bottom-10px {
	padding-bottom: 10px;
}
.padding-bottom-15px {
	padding-bottom: 15px;
}
.padding-bottom-20px {
	padding-bottom: 20px;
}
.padding-left-10px {
	padding-left: 10px;
}
.padding-left-15px {
	padding-left: 15px;
}
.padding-left-20px {
	padding-left: 20px;
}
.padding-bottom-m10px {
	padding-bottom: -10px;
}
.padding-bottom-m15px {
	padding-bottom: -15px;
}
.padding-bottom-m20px {
	padding-bottom: -20px;
}
.margin-top-m5px {
	margin-top: -5px;
}
.margin-top-m10px {
	margin-top: -10px;
}
.margin-top-m15px {
	margin-top: -15px;
}
.margin-top-m20px {
	margin-top: -20px;
}
.margin-top-m30px {
	margin-top: -30px;
}
.margin-bottom-m10px {
	margin-bottom: -10px;
}
.margin-bottom-m15px {
	margin-bottom: -15px;
}
.margin-bottom-m20px {
	margin-bottom: -20px;
}

/*案件情報*/
.ankeninfo-outerdiv {
}
.ankeninfo-flexbox {
	display: flex; 
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
	margin: 0px;
    padding: 0px;
	align-items: center;
	justify-content: space-around;
	background-color: #eaf4fc;
}
.ankeninfo-box-item {
    padding: 8px 3px 5px 3px;
}
.ankeninfo-box-item.left {
	line-height: 1.5rem;
}
.ankeninfo-box-item.right {
	line-height: 1.2rem;
}
.ankeninfo-current-reward {
	color: #eb6101;
}
.ankeninfo-max-reward {
	color: #eb6101;
}
.ankeninfo-recent-reward {
	color: #ea5506;
}
.ankeninfo-footer {
	margin-top: 10px;
	padding: 0px 3px 0px 3px;
	line-height: 1.5rem;
}
.ankeninfo-a {
	color: #6c2c2f;
}

/*TopN（ポイントサイト比較の総合ランキングでも使用）*/
.topN-outerdiv {
	font-size: 0.95rem;
	line-height: 1.2rem;
}
.topN-flexbox {
	display: flex; 
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 0px;
	align-items: center;
	border-bottom: 1px dashed #6c2c2f;
}
.topN-box-item {
    padding: 15px 3px 5px 3px;
}
.topN-ranking {
	white-space: nowrap;
	padding-right: 5px;
}
.top1:before {
	font-family: FontAwesome;
	content: "\f091"; /* FontAwesomeのユニコード */
	color: #e6b422; /* アイコンの色 */
	padding-right: 5px;
	font-size: 2rem;
}
.top2:before {
	font-family: FontAwesome;
	content: "\f091"; /* FontAwesomeのユニコード */
	color: #c0c0c0; /* アイコンの色 */
	padding-right: 5px;
	font-size: 2rem;
}
.top3:before {
	font-family: FontAwesome;
	content: "\f091"; /* FontAwesomeのユニコード */
	color: #BA6E40; /* アイコンの色 */
	padding-right: 5px;
	font-size: 2rem;
}
.topN:before {
	font-family: FontAwesome;
	content: "\f091"; /* FontAwesomeのユニコード */
	color: #2ca9e1; /* アイコンの色 */
	padding-right: 5px;
	font-size: 2rem;
}
.topZ:before {
	font-family: FontAwesome;
	content: "\f091"; /* FontAwesomeのユニコード */
	color: #FFFFFF; /* アイコンの色 */
	padding-right: 5px;
	font-size: 2rem;
}
.topN-arrow:before {
	font-family: FontAwesome;
	content: "\f101"; /* FontAwesomeのユニコード */
	padding-left: 2px;
	padding-right: 5px;
	font-size: 1.2rem;
	font-weight: 500;
}
.topN-a {
	color: #6c2c2f;
	text-decoration: none;
}
.topN-notice {
	margin-bottom: 20px;
	padding: 10px 5px 10px 10px;
	font-size: 0.95rem;	
	font-weight: bold;
	color: #e2041b;
	background-color: #f8f4e6;
    border-left: double 7px #e2041b;
    border-right: double 7px #e2041b;
}

/*キャンペーンバナー*/
.campaign-banner {
	display: flex; 
}
.campaign-banner > div {
	width: 50%;
}
.campaign-banner-l {
	padding-right: 5px;
}
.campaign-banner-r {
	padding-left: 5px;
}

/*案件ミニ情報*/
.ankenmini-flexbox {
	display: flex; 
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 5px 5px 5px 5px;
	align-items: start;
	justify-content: space-around;
}
.ankenmini-box-item {
    width: 50%;
}
.ankenmini-box-item.left {
	padding-right: 5px;
}
.ankenmini-box-item.right {
	padding-left: 5px;
}
.ankenmini-outerdiv {
	font-size: 0.95rem;
	line-height: 1.5rem;
	color: #6c2c2f;
    padding: 10px 10px 10px 10px;
	border: 1px solid #6c2c2f;
}
.ankenmini-name {
}
.ankenmini-reward {
	color: #eb6101;
	padding-top: 5px;
	padding-bottom: 5px;
}
.ankenmini-a {
	text-decoration: none;
}
.ankenmini-a div:hover {
	background-color: #f3f3f3;
}

/*ポイントサイトランキング（一部はポイントサイト比較・案件リスト・1位案件リストでも使用）*/
#main .ranking-table {
	color: #6c2c2f;
	border: none;
	margin: auto;
	font-size: 0.95rem;
	width: 100%;
}
#main .ranking-head {
	color: white;
	background-color: #2c4f54;
	font-weight: normal;
	padding: 1px 10px 1px 10px;
	border: none;
	border-bottom: solid 2px #ffffffff;
}
#main .ranking-1 {
	background-color: #f6bfbc;
	font-weight: bold;
}
#main .ranking-2 {
	background-color: #a0d8ef;
	font-weight: bold;
}
#main .ranking-3 {
	background-color: #c3d825;
	font-weight: bold;
}
#main .ranking-other {
}
#main .ranking-rank {
	text-align: center;
	padding: 1px 10px 1px 10px;
	border: none;
}
#main .ranking-reward {
	text-align: right;
	padding: 1px 10px 1px 10px;
	border: none;
}
#main .ranking-pointsite {
	padding: 1px 10px 1px 10px;
	border: none;
}
#main .ranking-anken {
	padding: 1px 10px 1px 10px;
	border: none;
}
.ranking-a {
	color: #6c2c2f;
}

/*ポイントサイト比較*/
#main .pscomparison-rank {
	text-align: center;
	padding: 0px 10px 0px 10px;
	border: none;
}
#main .pscomparison-pointsite {
	padding: 0px 10px 0px 10px;
	border: none;
}
#main .pscomparison-value {
	text-align: right;
	padding: 0px 10px 0px 10px;
	border: none;
}

/*ポイント数1位・2位*/
.highest {
	color: white;
	background-color: #8d6449;
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	padding-bottom: 3px;
	padding-top: 3px;
}
.highest-a {
	color: white;
}
.blank-box.highest-detail {
	border-color: #84b9cb;
	background-color: #eaf4fc;
}

/*現在・過去ポイント表示*/
.teibankako {
	text-align: center;
	margin-top: -20px;
	padding-bottom: 10px;
	padding-top: 10px;
    font-weight: bold;
	font-size: 1.2rem;
}
.teibankako-current {
	color: white;
	background-color: #e83929;
}
.teibankako-max {
	color: white;
	background-color: #82ae46;
}
.teibankako-3weeks {
	color: white;
	background-color: #2c4f54;
}
.teibankako-midashi {
	text-align: center;
	padding-bottom: 0px;
	padding-top: 10px;
    font-weight: bold;
}
.teibankako-3column {
	margin-top: -20px;
}

/*獲得できるポイント数*/
.pointnum-p {
	margin-top: -20px;
}

/*実績*/
.jisseki {
	border: none;
	background-color: #f8f4e6;
}

/*ポイントUP*/
.pointup {
	color: white;
	background-color: #2c4f54;
	border-color: #1f3134;
	font-weight: bold;
	font-size: 1.4rem;
}

/*案件リスト（1位案件リストでも使用）*/
#main .ankenlist-table {
	color: #6c2c2f;
	border: none;
	margin: auto auto auto 0;
	font-size: 0.95rem;
}

/*稼ぎやすさランキング*/
.kasegi-title {
	font-weight: bold;
}
.kasegi-rank {
	font-weight: bold;
	font-size: 2rem;
	margin-top: -35px;
	margin-bottom: -5px;
}
.kasegi-rank:before {
	font-family: FontAwesome;
	content: "\f091"; /* FontAwesomeのユニコード */
	padding-right: 15px;
	font-size: 2.5rem;
}
.kasegi-rank.rank1:before {
	color: #e6b422; /* アイコンの色 */
}
.kasegi-rank.rank2:before {
	color: #c0c0c0; /* アイコンの色 */
}
.kasegi-rank.rank3:before {
	color: #BA6E40; /* アイコンの色 */
}
.kasegi-rank.rankN:before {
	color: #2ca9e1; /* アイコンの色 */
}
#main .kasegi-table {
	margin-bottom: 20px;
}
#main .kasegi-table tr:nth-child(even) {
	background-color: #d6e9ca;
}
#main .kasegi-table tr:nth-child(odd) {
	background-color: #fdeff2;
}
#main .kasegi-table td, .kasegi-table2 td {
	border: none;
	padding: 0px 10px 0px 10px;
}
#main .kasegi-table3 th, .kasegi-table3 td {
	padding: 0px 10px 0px 10px;
}

/*各ポイントサイトの詳細情報へのリンク*/
.psdetail-link {
	font-size: 0.95rem;
}
.psdetail-link span {
	display: inline-block;
}
.psdetail-link a {
	color: #6c2c2f;
	text-decoration: none;
}
.psdetail-link a:hover {
	background-color: #f3f3f3;
}

/*動画*/
.movie {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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

/*1030px以下*/
@media screen and (max-width: 1030px) {
	/*必要ならばここにコードを書く*/
	#main {
		padding-top: 0px;
	}
	#main h1 {
		margin-top: -25px;
	}
}

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

/*599(元は480)px以下*/
@media screen and (max-width: 599px) {
	/*必要ならばここにコードを書く*/
	/*見出し*/
	#main h2, #main h3, #main h4, #main h5 {
		font-size: 1.05rem;
	}

	/*2column*/
	.container .column-wrap > div {
    	padding: 4px 0;
	}

	/*強調表示*/
	.kyouchou-box {
		font-size: 1.05rem;
	}
	.kyouchou-bold.big {
		font-size: 1.05rem;
	}
	.kyouchou-bold.bigbig {
		font-size: 1.1rem;
	}
	.kyouchou-bold.bigbigbig {
		font-size: 1.25rem;
	}

	/*見出しボックス*/
	#main .midashi-box {
		font-size: 1.05rem;
	}

	/*ポイントサイトランキング*/
	#main .ranking-table {
		font-size: 0.95rem;
	}

	/*ポイント数1位・2位*/
	.highest {
		font-size: 1rem;
	}

	/*ポイントUP*/
	.pointup {
		font-size: 1.1rem;
	}
}


/*ホテル記事*/
.hotel-tab-box .tab-caption-box-content {
    padding: 0.4em 2em !important;
}
h1.hotel-h1 {
  padding: 0.5em 10px !important;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}
h3.hotel-h3{
  position: relative;
  padding: 10px 0 10px 15px;
  background: #ff894f;
  color: white;
  border-bottom: none !important;
}

h3.hotel-h3 ::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgba(198,155,134,0.95);
}

h4.hotel-h4 {
  position: relative;
  padding: 0.6em;
  background: #FFEEE5;
  border-bottom: none !important;
}

h4.hotel-h4:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #FFEEE5;
  width: 0;
  height: 0;
}
h5.hotel-h5 {
   border-bottom: double 5px #FFC778;
}