@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.buttonlink {
    max-width: 600px;
    text-align: left;
    margin:20px auto 20px auto;

    color: #ffffff !important;
    height: auto;    
}
.buttonlink > img{
    display:inline !important;
}
.buttonlink :before {
	content:" \f08e 　";
        font-family: FontAwesome;
}
.buttonlink a {
 text-decoration: none !important;
 color: #ffffff !important;
 display:block;
 padding: 10px;
 background-color: #FF773E;
    margin-right: auto;
    margin-left: auto;
    border-radius: 10px;  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.buttonlink a:hover {
 text-decoration: none !important;
 color:#666666 !important;
 background-color: #fff;
 border:2px solid #F00;
}
.buttonlink2 {
    max-width: 600px;
    text-align: left;
    margin:20px auto 20px auto;
    color: #ffffff !important;
    height: auto;    
}
.buttonlink2 > img{
    display:inline !important;
}
.buttonlink2 :before {
	content:" \f08e 　";
        font-family: FontAwesome;
}
.buttonlink2 a {
 text-decoration: none !important;
 color: #ffffff !important;
 display:block;
 padding: 10px;
 background-color: #00bfff;
    margin-right: auto;
    margin-left: auto;
    border-radius: 10px;  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.buttonlink2 a:hover {
 text-decoration: none !important;
 color:#666666 !important;
 background-color: #fff;
 border:2px solid #F00;
}
.buttonlink3 {
    max-width: 600px;
    text-align: left;
    margin:20px auto 20px auto;
    color: #ffffff !important;
    height: auto;    
}
.buttonlink3 > img{
    display:inline !important;
}
.buttonlink3 :before {
	content:" \f08e 　";
        font-family: FontAwesome;
}
.buttonlink3 a {
 text-decoration: none !important;
 color: #ffffff !important;
 display:block;
 padding: 10px;
 background-color: #32cd32;
    margin-right: auto;
    margin-left: auto;
    border-radius: 10px;  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.buttonlink3 a:hover {
 text-decoration: none !important;
 color:#666666 !important;
 background-color: #fff;
 border:2px solid #F00;
}
.top-info-link{
  width:100%;
  text-align:center;
  font-size:14px;
  line-height:1.7;
}

.top-info-link a{
  display:block;
  padding:12px 14px;
  background:linear-gradient(180deg,#fff7ea 0%,#fff2dc 100%);
  color:#333;
  text-decoration:none;
  border-bottom:1px solid #f3d6a6;
  transition:all .18s ease;
  font-weight:500;
}

.top-info-link a:hover{
  background:#ffe8bf;
}

.top-info-badge{
  display:inline-block;
  margin-right:8px;
  padding:2px 7px;
  border-radius:999px;
  background:#ff0033;
  color:#fff;
  font-size:10px;
  font-weight:700;
  vertical-align:middle;
}

.highlight{
  color:#e60033;
  font-weight:700;
}

.top-info-link strong{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.pv-cvr-wrap{
  max-width:880px;
  margin:18px auto 36px;
  padding:0 16px;
}

.pv-cvr{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:38px 30px;
  background:
  radial-gradient(circle at top right,
  rgba(0,170,255,.22),
  transparent 30%),
  linear-gradient(145deg,#0b1015 0%,#121a24 42%,#1f3449 100%);
  box-shadow:
  0 18px 48px rgba(0,0,0,.28);
}

.pv-cvr::after{
  content:"";
  position:absolute;
  inset:0;
  background:
  linear-gradient(to bottom,
  rgba(255,255,255,.03),
  transparent 40%);
  pointer-events:none;
}

.pv-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.7);
  font-size:11px;
  letter-spacing:.08em;
  margin-bottom:18px;
  backdrop-filter:blur(10px);
}

.pv-head{
  font-size:38px;
  line-height:1.33;
  font-weight:800;
  color:#fff;
  letter-spacing:.01em;
  margin-bottom:16px;
}

.pv-head .accent{
  color:#44d2ff;
}

.pv-text{
  max-width:670px;
  font-size:15px;
  line-height:2;
  color:rgba(255,255,255,.84);
  margin-bottom:28px;
}

.pv-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:30px;
}

.pv-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-size:14px;
  font-weight:600;
  backdrop-filter:blur(8px);
}

.pv-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(68,210,255,.14);
  flex-shrink:0;
  font-size:16px;
}

.pv-btn-wrap{
  position:relative;
}

.pv-mini{
  text-align:center;
  color:#9fe6ff;
  font-size:13px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:.02em;
}

.pv-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border-radius:20px;
  padding:22px 20px;
  background:
  linear-gradient(180deg,#39d7ff 0%,#00a8e1 100%);
  color:#fff !important;
  text-decoration:none !important;
  font-size:22px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:
  0 8px 0 #0078a3,
  0 22px 40px rgba(0,168,225,.38);
  transition:all .16s ease;
}

.pv-btn:hover{
  transform:translateY(3px);
  box-shadow:
  0 5px 0 #0078a3,
  0 14px 28px rgba(0,168,225,.28);
}

.pv-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:
  linear-gradient(to right,
  rgba(255,255,255,0),
  rgba(255,255,255,.32),
  rgba(255,255,255,0));
  transform:skewX(-25deg);
  animation:shine 3.2s infinite;
}
@keyframes shine{
  0%{
    left:-120%;
  }
  55%{
    left:140%;
  }
  100%{
    left:140%;
  }
}

.pv-note{
  margin-top:14px;
  text-align:center;
  font-size:12px;
  line-height:1.9;
  color:rgba(255,255,255,.58);
}
.entry-card .cat-label {
  display: none !important;
}



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

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

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
	.pv-cvr{
  padding:28px 20px;
  border-radius:24px;
}

.pv-head{
  font-size:29px;
  line-height:1.45;
}

.pv-text{
  font-size:14px;
  line-height:1.9;
}

.pv-grid{
  grid-template-columns:1fr;
  gap:10px;
}

.pv-btn{
  font-size:19px;
  padding:20px 16px;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.top-info-link{
  font-size:13px;
}

.top-info-link a{
  padding:11px 10px;
}
}