@charset "UTF-8";
@import url("https://unusual-web/wp/wp-content/themes/cocoon-child-master/countries.css");

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** 基本設定（General Setting）
************************************/
/* リンク<a>装飾 */
a {
  	text-decoration: none;
}
a:hover{
color:#b56767;
}
/* アイキャッチカテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label{
  display: none;
}
/* カテゴリー、タグ、タクソノミーラベル */
.entry-footer-categories-tags{
	text-align:right;
}
.entry-footer-categories,
.entry-footer-tags{
	margin-right:0.5em;
}
.entry-footer-categories a,
.entry-footer-tags a{
	background:none;
	border:none;
    border-bottom: 1px solid #e5e6e7;
	color:#222;
}
.cat-link,
.tag-link{
	padding:0;
	border-radius:0;
}
.cat-link ::before,
.tag-link ::before{
	display:none;
}
.entry-footer-tw a,
.entry-footer-region a{
	color:#222;
    display: inline-block;
    font-size: 12px;
    word-break: break-all;
	border-bottom:1px solid #c6c7c6;
}
.entry-footer-region a{
    border-bottom:1px solid #d8d0bb;
}

/* ページネーション */
.pagination-next {
  display: none;
}
.page-numbers {
  	border-radius: 50%;
    border: none;
	background: #f6f6f6;
}
.pagination a:hover {
	background-color: #e4ecf2;
}
/* コメント欄 */
.comment-btn {
    background-color: #F2F2F2;
    border: none;
    color: #000020;
}
#commentform .comment-form-comment #comment,
#commentform #siteguard_captcha{
	background-color:#f9f9f9;
	border:none;
}
#commentform .form-submit input[type='submit']{
	border:none;
	background-color:#eee;	
    width: 60%;
    padding: 1.2em 1em;
}
#commentform .form-submit input[type='submit']:hover{
	opacity:0.7;
}
#commentform .form-submit{
	text-align:center
}
/* テーブルの枠線をなしにする */
.table_option td,
.table_option th{
border:none;
}
/* テーブルの横スクロール */
.scroll-table {
  overflow: auto;
  white-space: nowrap;
}
/*国リストウィジェットの階層*/
#lct-widget-region ul{
	padding-left: 20px;
}
#lct-widget-region{
	font-size:15px;
}
/*人気ランキングウィジェット表示*/
.widget-entry-cards.ranking-visible .card-thumb::before {
    background-color: transparent !important;
	color:#333;
    font-family: 'ZCOOL XiaoWei';
	font-size: 15px;
	font-style: italic;
}
.widget-entry-cards.ranking-visible .card-thumb::after{
	content: "";
    border-bottom: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 24px solid #EFECE9;
    border-left: 24px solid #EFECE9;
    opacity: 0.9;
    top: 0;
    position: absolute;
}
/*記事一覧系ウィジェットの文字サイズと中央揃え解除*/
.new-entry-cards, .widget-related-entry-cards {
    text-align: inherit;
}
.widget-entry-card {
    font-size: 0.8em;
	font-weight: 500;
}
/*トップに戻るボタンを丸く*/
.go-to-top-button{
border-radius:20px;	
}
/*目次toc*/
.toc{
	border:none;
    background-color: #f7f7f7;
}
.toc-content {
    transition: all .3s ease-out;
}
.toc ul li a:before{
    content: '- ';
}
.toc ul li ul li a:before{
	content: '・ ';
}
.toc ul li ul li ul li a:before{
	content: ' ';
}
/*エントリーカード系ホバー時*/
.a-wrap:hover {
	background-color: #2052a11f;
	opacity:0.8;
	transform:translateY(-2px);
	box-shadow: 2px 2px 6px 0 #f7f7f7;
}
/*固定ページの非表示設定*/
.page .sns-share,
.page .sns-follow,
.page .date-tags,
.page .author-info{
    display: none;
}
/*サイドバーウィジェット中央揃え*/
#sidebar #lct-widget-region{
	margin-left: auto;
    margin-right: auto;
	max-width: 320px;
}
/*引用スタイル*/
blockquote {
    border: 0;
}
/************************************
** 検索ボックス
************************************/
.search-box{
	max-width:480px;
	margin-left: auto;
    margin-right: auto;
}
.search-box .search-edit{
	background: #f7f7f7;
	border:none;
	border-radius:0;
}
.search-box .search-submit{
    background: #4570b4;
    width: 60px;
	color:#f7f7f7;
}
.search-edit, input[type="text"]{
	font-size:14px;
}
.search-submit {
    font-size: 14px;
    line-height: 44px;
}
/************************************
** ブログカード
************************************/
/*内部ブログカードのフッター非表示*/
.internal-blogcard-footer{
	display:none;
}
/*背景色*/
.blogcard-wrap {
    background-color: #f8f8f8;
}
/*枠線なし*/
.blogcard{
	border:none;
}
/************************************
** 見出し、フォント
************************************/
.logo-header{
	font-family:YuMincho,'Yu Mincho','Noto Serif JP',serif;
}
.article h2,
#sidebar h3{
background:none;
position:relative;
}
.article h2:before{
    content: '';
    height: 2px;
    width: 25px;
    display: block;
    background-color: #333;
    position: absolute;
    left:-5px;
	bottom: 50%;
}
.article h3,
.taxonomy_title{
	border:none;
}
.article h4{
  	border:none;
	font-size:20.5px;
}
.article h5{
	border:none;
	font-size:18.5px;
}
.archive-title .fa-folder-open:before{
	display:none;
}
#sidebar h3{
	font-weight:400;
    font-family: 'ZCOOL XiaoWei', serif;
    text-align: center;	
}
/*グローバルナビフォント*/
.item-label {
    font-family: 'Alegreya', serif;
}
/************************************
** タブ（ultimate shortcodes）
************************************/
#content .su-tabs{
	border-radius:0;
	padding:0;
	padding-top:3px;
	background:#fafafa;
}
.su-tabs-nav{
	text-align:center;
}
#content span.su-tabs-current {
    font-weight: bold;
	background:#fafafa;
	border-bottom: 1px solid #333;
}
#content .su-tabs-nav span {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#content .su-tabs-pane{
	background:#fafafa;
}
/************************************
** 補足情報スタイル
************************************/
.information::before, .information,
.question::before, .question,
.alert::before, .alert{
    border:none;
}
.question{
	background-color: #e8edea;
}
.question::before{
	color: #bdccc3;
}
.information{
	background-color:#F8F7ED;
}
.information::before{
	color: #ECE7BE;
}
.alert{
	background-color:#F8E3E3;
}
.alert::before{
	color:#F2AFAB;
}
/************************************
** cocoonボックス、ボタン
************************************/
.label-box-content {
	border: 1px solid #808080;
	border-radius:0;
}
.lb-grey{
	border-color: #bbb;
}
button.components-color-palette__item is-active{
	color:grey;
}
.lb-white{
	position:relative;
}
.lb-white .label-box-content{
	border:none;
}
.lb-white  .label-box-label{
	z-index: 1;
    position: relative;
}
.lb-white .label-box-content:before,
.lb-white .label-box-content:after{
  content: "";
  position: absolute;
  left: 0;
  top:13px;
  width:100%;
  height: 4px;
  background: repeating-linear-gradient(-45deg, #fff, #fff 1px, #b4b4b4 1px, #b4b4b4 2px);
}
.lb-white .label-box-content:after{
  top:auto !important;
  bottom:0;
}
/*タイムライン*/
.timeline-item:before{
	background: #1a52a9;
}
.timeline-item-content {
    border-left: 3px solid #e3e3e3;
}
 .timeline-box {
    border: 0px;
    background: #fbfbfb;
}
/************************************
** unusualボックス、ボタン
************************************/
.grey-box-unusual,
.coffee-box-unusual,
.green-box-unusual,
.stripe-grey-box-unusual{
	padding:15px;
	margin-bottom:1em;
	border-radius:3px;
}
.grey-box-unusual{
    background-color: #f6f6f6;
}
.coffee-box-unusual{
    background-color: #e7e2db;
}
.green-box-unusual{
    background-color: #dbe4e0;
}
.stripe-grey-box-unusual{
    position:relative;
}
.stripe-grey-box-unusual:before,
.stripe-grey-box-unusual:after{
  content: "";
  position: absolute;
  left: 0;
  top:0;
  width:100%;
  height: 4px;
  background: repeating-linear-gradient(-45deg, #fff, #fff 1px, #b4b4b4 1px, #b4b4b4 2px);
}
.stripe-grey-box-unusual:after{
  top:auto !important;
  bottom:0;
}
.step-box{
	padding: 0 0 0 45px;
	position: relative;
	display:block;
}
.step-box::before{
    font-family: "FontAwesome";
	content: '\f0d7';
    font-size: 25px;
    position: absolute;
	color:#333;
    top: -13px;
    left: 13px;
    padding-right: .15em;
    line-height: 1em;
    top: 50%;
    margin-top: -.5em;
    width: 20px;
    text-align: center;
}
.greyBorder-box{
	border: 7px solid #f6f6f6;
	padding:15px;
	margin-bottom:1em;
}
.chevron-box{
background-color:#cfddd9;
color:#366c73;
padding: 10px;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.chevron-box::before{
font-family: "FontAwesome";
content: '/f0d7';
color:#333;
}

@media screen and (max-width: 440px){
.step-box{
	padding: 10px 10px 10px 48px;
}
.step-box::before {
    left: 5px;
	font-size: 30px;
	}
}
.border-box{
  border-top:1px solid #353C42;
  border-bottom:1px solid #353C42;
  width:95%;
  margin-left:auto;
  margin-right:auto;
  padding:1.2em;
}
.border-box-label{
  text-align:center;
  margin-bottom:1.5em;
  font-size:.9em;
}
/* タブ式カテゴリーリスト */
.su-tabs-pane #lcp_instance_0 li{
font-size:15px;
margin-left:-16px;
clear:left;
float:none;
margin-bottom:5px;
}
/* ボタンのスタイル */
.btn-gradient-black,
.btn-gradient-red,
.btn-gradient-gold,
.btn-gradient-rev{
  display: inline-block;
  padding: 0.3em 2em;
  text-decoration: none;
  color: #FFF;
  background:#4a4a4a;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition:.5s;
}
.btn-gradient-red{
  background-color:#DD4E3C;
  padding: .8em 2em;
}
.btn-gradient-gold{
    background-color: #fff;
    border: #c0b283 1px solid;
    padding: .8em 2em;
}
.btn-gradient-rev{
	background-image: linear-gradient(19deg,#e28cc4 9%,#466ec7 96%);
    padding: .8em 3em;
	font-style: italic;
	font-weight:700;
}
.btn-gradient-red a{
	color:#fff;
}
.btn-gradient-gold a{
	color:#333;
}
.btn-gradient-black:hover,
.btn-gradient-red:hover,
.btn-gradient-rev:hover{
	color:#fff;
	transform:translateY(-2px);
	box-shadow: 2px 2px 6px 0 #ccc;
}
/************************************
** ヘッダーナビ
************************************/
/*ロゴ*/
#header-in .logo-header img{
	height:auto;
}
/*固定*/
.header-container{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.header-container.fixed{
    position: fixed;
    top: 0;
    z-index: 10000;
	opacity:0.9;
	padding:5px 5px;	
	background-color: #f6f6f6;
}
.header-container .navi{
	background-color: inherit;
}
/*文字サイズ*/
.navi ul.sub-menu li a{
	font-size:14px;
}
/*下線*/
.navi-in a:hover {
    background:none;
	text-decoration: underline solid #c0b283;
	transition: all .1s ease;
}
.navi-in>ul .sub-menu {
    background-color: #fff;
    opacity: 0.95;
	box-shadow: 0px 1px 2px;
	padding-bottom:3px;
}
.navi-in>ul .sub-menu li{
     height: 40px;
    line-height: 40px;
}
/* モバイルヘッダーメニュー */
.menu-close-button::before {
	content: "×";
}
/************************************
** プロフィールウィジェット
************************************/
.profile-widget{
	text-align:center;
	width: 85%;
    margin-left: auto;
    margin-right: auto;
}
.profile-links ul li{
	border-radius:17px;
	height:33px;
	width:33px;
	background:#ccc;
	display:inline-block;
	margin:0 3px;
}
.profile-links ul li a{
	color:#fff;
}
.profile-widget{
	font-size:15px;
}
.profile-widget i.fa{
	font-size:15px;
}
/************************************
** SNSシェアボタン
************************************/
#main .sns-buttons a{
	color:#5d5d5d;
	background-color:#fff;
	width:2.5em;
	margin-left:0.5em;
}
.sns-share-buttons{
	justify-content:flex-end;
}
.sns-share.ss-high-and-low-lc a .button-caption{
	display:none;
}
/* ホバー時 */
.sns-buttons a:hover{
	color:#5d5d5d;
}
.sns-buttons .icon-twitter:hover{
	color:#55acee;
}
.sns-buttons .icon-facebook:hover{
	color:#3b5998;
}
.sns-buttons .icon-hatena:hover{
 color:#3C7DD1;
}
.sns-buttons .icon-pocket:hover{
 color:#EE4257;
}
.sns-buttons .icon-feedly:hover{
 color:#87bd33;
}
.sns-buttons .icon-line:hover{
 color:#00c300;
}
.sns-buttons .copy-button:hover{
 color:#5d5d5d;	
}
/************************************
** コンタクトページ
************************************/
.contact-description {
    display: none;
}
#others:checked ~ .contact-description {
    display: none;
}
#works:checked ~ .contact-description {
    display: block;
}
/************************************
** stripe
************************************/
.btn-stripe-buy{
    padding: 10px 25px;
    border: none;
    background: #4570b4;
    color: #fff;
    font-weight: 500;
	transition:all .7s;
}
.btn-stripe-buy:hover{
	background:#a10;
    transform: translateY(-1px);
}
.stp-buy-box{
	text-align:center;
	background:#f9f9f9;
	padding:20px;
}
/************************************
** 支払い完了後のもろもろ
************************************/
input[type=checkbox]#stripe-payment-states:checked ~  .stp-buy-box {
    display:none;
}
#stripe-payment-states{
	display:none;
}
.pay-done .su-spoiler-title{
	color:#f42828;
	animation: fadeIn 0.2s ease 0.3s 1 normal;
}
.pay-done .grey-box-unusual{
	font-size:.9em;
}
/************************************
** passster
************************************/
.passster-form{
	text-align:center;
}
.passster-form.passster-form input[type=password]{
	border: none;	
    border-radius: 0;
    width: 300px;
    font-size: 13px;
    text-align: center;
	display:block;
    margin: 0 auto;
}
.passster-form.passster-form button[type=submit]{
	width: 300px;
    margin-top: 10px;
}
.passster-form .passster-error {
    width: 300px;
	float:none;
	margin:0 auto;
    background-color:transparent;
    color: #e95353;
}
/************************************
** カエレバ、ヨメレバ
************************************/
.kaerebalink-box,
.booklink-box{
margin-bottom: 10px;
border: 1px solid #c9c4c4;
border-radius: 0;
padding:10px;
}
.shoplinkamazon a,
.shoplinkkindle a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkyahoo a{
	color:#fff;
	display:block;
	background:#d5c1b3;
	font-weight:normal;
}
.shoplinkamazon a:hover,
.shoplinkkindle a:hover{
background:#516c8f;
}
.shoplinkrakuten a:hover,
.shoplinkrakukobo a:hover{
background:#cc7980;	
}
.shoplinkyahoo a:hover{
background:#ddb358;
}
.article .kaerebalink-link1 img, .article .booklink-link2 img{
display:block;
margin:0 auto !important;
text-align:center;
}
.kaerebalink-link1 a:hover, .booklink-link2 a:hover, .tomarebalink-link1 a:hover, .product-item-buttons a:hover{
	opacity:1;
}

/************************************
** アプリーチ
************************************/
.appreach {
text-align: left;
padding: 15px;
overflow: hidden;
border: none;
background-color: #f8f8f8;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

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

.header-container.fixed{
    top: 0;
    z-index: 0;
	opacity:1;
	padding:0;
	display: flex;
    justify-content: space-between;
    width: 100%;
}
.mobile-header-menu-buttons {
	justify-content:space-between;
}
.mobile-header-menu-buttons .logo-menu-button{
		display:none;
}
.mobile-header-menu-buttons .logo-menu-button.show{
		display:block;
	    animation:fadeIn 2s ease;
}
.menu-drawer .sub-menu {
    display: none;
}
.menu-drawer a{
    font-size:16px;
}
.navi-menu-content{
	text-align:center;
	}
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
	
/*見出し*/
.article h2:before{
    width: 22px;
    left:-8px;
}
}

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