@charset "UTF-8";

/*Googleフォントをインポート*/
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Pacifico&display=swap');

/* 段落の大きさ*/
p {
    text-align:left;
    padding:20px;
}

/*フェードインのcss*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }	
  &.fadein-duwn{
      transform: translate(0,30px);
  }		
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }	
}

.change-area {
    background: #1C1C1C;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
	margin-bottom: 0 !important; /* フッターとコンテンツの間の空白を削除 */
}

/* MetaSlider on FlexSlider */

.metaslider .flex-viewport { overflow: visible !important; }
.flexslider .slides img{ padding:0 0 !important; }
.metaslider ul li { opacity: 0.2; } /* activeでない画像の半透過 */
.metaslider ul li.flex-active-slide { opacity: 1; }
html { overflow-x:hidden; }

@media screen and (max-width:1199px) {
    .metaslider .flex-viewport { overflow-x:hidden !important; } /* PC以下の端末でのはみ出し修正 */
}

/* /MetaSlider on FlexSlider */

/* ピックアップの文字 */
/* .wrapper {
	width: 100%;
 	font-family: 'Alfa Slab One', sans-serif;
	margin: 0 auto;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;


} */
.wrapper h1 {
	text-transform: uppercase;
	-webkit-transform: translate(-50%, -50%) skew(-10deg, 0);
	transform: translate(29%, -5%) skew(-10deg, 0); 
/* 	top: 50%;*/
	left: 50%;
	margin: 0;
	font-size: 10vw;
	font-weight: 400;
	white-space: nowrap;
	color: #F25826;
	letter-spacing:2vw;
	z-index: 1;

}
.wrapper h1::after, .wrapper h1::before {
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	content: attr(data-heading);
	position: absolute;
}
.wrapper h1::after {
	left: -15px;
	top:-15px;
	z-index:2;
 	-webkit-text-stroke: 3px #FECE35;
	-webkit-text-fill-color: transparent;
}
.wrapper h1::before {
	z-index:-1;
	left: 15px;
	top: 15px;
	color: #F68722;
}
.wrapper h1:hover::after {
	left: -20px;
	top:-20px;
}
.wrapper h1:hover::before {
	left: 20px;
	top: 20px;
}
/* /ピックアップの文字 */

/* 要素間の隙間を黒色にする */
.element {
    margin: 10px; /* 上下左右の余白を10pxに設定 */
    background-color: #1C1C1C; /* 背景色を黒色に設定 */
}

.seach-txet {
  font: 400 1em/1.5 "Neuton";
  background: #1C1C1C;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5em;
/*   display: inline-block; */
/*   border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0; */
  padding: 1.5em 0em;
/*   position: absolute; */
/*   top: 18%; */
  left: 50%;
/*   width: 40em; */
/*   margin: 0 0 0 -20em;	 */
/*    margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);	  */
}

.seach-txet span {
  font: 700 4em/1 "Oswald", sans-serif;
  letter-spacing: 0;
  padding: 0.25em 0 0.325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  /* Clip Background Image */
  background: url(https://okinawa-matome.jp/wp-content/themes/cocoon-child-master/images/search-taitl.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;	
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.picup-taitl {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FFF;
	text-shadow: 
		0 0 0.10em #2962FF,
		0 0 0.15em #2962FF,
		0 0 0.80em #2962FF,
		0 0 1.00em #2962FF;	
}

/*人気、新着記事のタイトルデザイン*/
.new-taitl,
.pop-taitl {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FFF;
}

/*人気、新着記事の囲い枠デザイン*/
.wp-block-cocoon-blocks-column-2-post .border-square .a-wrap {
	border-color: white;
	color: white;
	border-width: 1px;
	border-style: solid;
	background: black;
	border-radius: 10px;
	font-family: serif;
}

/*人気、新着記事の囲い枠内文字、背景デザイン*/
.wp-block-cocoon-blocks-column-2-post .border-square .a-wrap:hover {
/* 	background-color:white !important;
	border-color: #FFFF00; */
	color:#81BEF7;
}

/* キーワードリスト*/
#keyword-list ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  border-radius: 10px;
}

/*キーワードのデザイン*/
#keyword-list .custom-taxonomy-terms li {
  margin: 4px;
}

/*キーワードのデザイン*/
#keyword-list .custom-taxonomy-terms li a {
  display: block;
/*   width: 120px;
  padding: 5px 0; */
  font-size: clamp(11px, 1.5vw, 17px);
  font-weight: bold;
  font-family:system-ui;
	/*色替え部分*/
 color:white;
}

#keyword-list .custom-taxonomy-terms li a:hover {
  /*色替え部分*/
	color:#CEECF5;
}

/*キーワードのタイトル*/
.keyword-taitl {
	font-family: "Dela Gothic One", sans-serif;
	font-size:3.5em;
	text-align:center;
	line-height:0.95em;
	font-weight:400;
	color: #FFF;
	font-style: normal;
/* 	text-shadow: 0 0 0.2em darkblue;	 */
	margin-bottom:10px;
}

/*ピックアップのタイトル*/
.title-picup {
  font-size: clamp(35px, 4.5vw, 70px);
  position: relative;
  margin: 0 auto 1em;
  margin-bottom:1em !important;
  padding: 1em 1em 0.25em 1em;
  text-align: center;
  text-transform: uppercase;
  color: #FE642E;
}

/*ピックアップ(下ライン)のタイトル*/
.title-picup:after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 240px;
  height: 4px;
  margin-left: -120px;
  content: "";
  background-color: #FE642E;
}

/* スクロールダウンの位置 */
/* .scroll {
  position: absolute;
  right: 50%;
  top: 10%;
  writing-mode: vertical-rl;
} */
/* 線のアニメーション部分 */
/* .scroll::before {
  animation: scroll 2s infinite;
  background-color: #000;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
} */
/* 線のアニメーション */
/* @keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
} */

/*Instagramのタイトル*/
.instagram-taitl {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
  color: white;
  text-align: center;	
}

/* フッターとコンテンツの間の空白を削除 */
 .bottom-ptagu {
	margin-bottom: 0 !important;
}

/*keywordとnewとrankingのタイトル*/
.keyword-neon-taitl {
  font-family: "Dela Gothic One", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*keywordとnewとrankingのタイトルのデザイン*/
.neon-anime-white {
  display: flex;
  font-size: clamp(34px, 4.5vw, 70px);
  color: #FFFFFF;
  animation: neonBlur-white 16s infinite;
  font-weight: 300;
}

/*SNSのタイトル*/
.sns-taitl {
  font-family: "Dela Gothic One", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*ネオンの位置*/
.neon-anime-wheat {
  display: flex;
  font-size: clamp(34px, 4.5vw, 70px);
  color: wheat;
  animation: neonBlur-wheat 16s infinite;
  font-weight: 300;
}

/*ネオンのアニメーション*/
.neon-anime > span:nth-child(1) {
  opacity: .5;
  font-weight: 800;
}

/*ネオンのアニメーション*/
.neon-anime > span:nth-child(2) {
  animation: neonBlink 5s infinite;
}

/*ネオンのアニメーション*/
.neon-anime > span:nth-child(3) {
  opacity: .4;
}

/*ネオンのアニメーション*/
.neon-anime > span:nth-child(4) {
  animation: neonBlink 2s infinite;
}

/*ネオンのアニメーション*/
@keyframes neonBlink {
  0% { opacity: 1; }
  10% { opacity: .6; }
  12% { opacity: 1; }
  15% { opacity: .4; }
  17% { opacity: 1; }
  18% { opacity: .3; }
  19% { opacity: 1; }
  89% { opacity: 1; }
  91% { opacity: .7; }
  94% { opacity: 1; }
  100% { opacity: 1; }
}

/*ネオンのバックグランドの光*/
@keyframes neonBlur-wheat {
  0% { text-shadow: 0px 0px 25px #F7FE2E; }
  50% { text-shadow: 0px 0px 75px #F7FE2E; filter: blur(0.5px) }
  100% { text-shadow: 0px 0px 25px #F7FE2E; }
}

/*ネオンのバックグランドの光*/
@keyframes neonBlur-white {
  0% { text-shadow: 0px 0px 25px #FFFFFF; }
  50% { text-shadow: 0px 0px 75px #FFFFFF; filter: blur(0.5px) }
  100% { text-shadow: 0px 0px 25px #FFFFFF; }
}

/*キーワードボックスの色変更*/
#toggle-button-id {
	background-color:#1C1C1C;
	color:white;
	border:solid 1px white;
}

/*キーワードボックスの色変更*/
#toggle-content-id {
	background-color:#1C1C1C;
	border-color:white;
}

/*掲載依頼ボタン*/
.btn-copy {
  font-size: clamp(15px, 1.5vw, 40px);
  font-weight: bold;
  position: relative;
  margin-bottom: .2em;
  text-align: center;
  color:white;
}

/*掲載依頼ボタン*/
.btn-copy:before {
  margin-right: 1rem;

  content: '＼';
}

/*掲載依頼ボタン*/
.btn-copy:after {
  margin-left: 1rem;

  content: '／';
}

#button-block-id {
	margin-bottom:0px
}

/* スクロールダウンの位置 */
.scroll {
  position: relative;
  text-align:center;  
  font-size:xx-small;
  color:white;
  bottom:13em;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
  content: "";
  height: 1em;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 1em;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-20px, 20px);
  }
  100% {
    opacity: 0;
  }
}

#tatle-keyword-h1 {
	color: #1C1C1C;
	font-size: 0.1px;
}

#tatle-keyword-h2 {
	color: #1C1C1C;
	font-size: 0.1px;
	margin-bottom: -13px;
}

#midashi-keyword {
	color: #1C1C1C;
	font-size: 0.1px;
	background: #1C1C1C;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0px;
	margin-top: 0px;
}