@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
a {
  text-decoration: none;
}

/*web拍手*/

#webclapform {
	background-color: #E6E0DC;
	text-align: center;
	display: block;
	max-width: 600px;
	margin: 70px auto 0;
	padding: 20px;
	border-radius: 20px;
}
#webclapform p {
	margin: 0;
}
#webclapform input[type=submit] {
	background-color: #5C2523;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #DB5853;
	box-shadow: none;
	border: 1px solid #5C2523;
	padding: 10px 20px;
	border-radius: 10px;
	width: 130px;
	margin-left: 72px;
}
#webclapform input[type=submit]:hover {
	background-color: #DB5853;
	border: 1px solid #DB5853;
	color: #fff;
}
#webclapform input[type=checkbox] {
	display: none;
}
#webclapform input[type="text"], textarea {
	height: 4em;
	max-width: 100%;
	font-size: 16px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #fff;
	border: 1px solid #61413B;
}

#webclapform dl {
	text-align: left;
	border-top: dotted 2px #E3DEDA;
	margin-top: 0;
}
#webclapform dt {
	margin: 15px 10px 5px;
	font-weight: bold;
	color: #61413B;
}
#webclapform dt::before {
	content: '任意';
	color: #E3DEDA;
	margin-right: 10px;
	padding: 3px 8px;
	background: #61413B;
	border-radius: 7px;
	font-size: 0.8em;
	vertical-align: middle;
}
.webclapform_none {
	display: none;
}
.webclapform_plus .wpcf7-list-item {
	margin: 5px 0;
}
.webclapform_plus input[type=checkbox]+.wpcf7-list-item-label {
	font-size: 14px;
}
.webclapform_plus .wpcf7-list-item-label:hover {
	color: #DB5853;
}
.webclapform_plus input[type=checkbox]+.wpcf7-list-item-label::before {
	content: '\f0fe';
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	margin-right: 5px;
	color: #DB5853;
	transition: all 0.2s;
	transform: rotate(0);
}
.webclapform_plus input[type=checkbox]:checked+.wpcf7-list-item-label::before {
	transition: all 0.2s;
	transform: rotate(45deg);
}
.webclapform_select .wpcf7-list-item {
	margin: 5px 10px 10px 0;
}
.webclapform_select .wpcf7-list-item-label {
	color: #999;
	background-color: #E3DEDA;
	border: 1px solid #c5c5c5;
	border-radius: 50px;
	padding: 5px 17px;
	font-weight: bold;
	font-size: 16px;
}
.webclapform_select .wpcf7-list-item-label:hover {
	background-color: #FAF8F2;
	border: 1px solid #DB5853;
	color: #DB5853;
}
.webclapform_select input[type=checkbox]:checked+.wpcf7-list-item-label {
	color: #FAF8F2;
	background: #DB5853;
	border: 1px solid #DB5853;
}
.webclapform_scroll {
	display: none;
}
.sent .webclapform_scroll a {
	color: #DB5853;
	display: block;
	text-align: center;
	margin: 0 auto;
	font-size: 20px;
	animation: yureru 3s infinite;
}
@keyframes yureru {
	0% {
		transform: translate(0px, 2px);
	}
	5% {
		transform: translate(0px, -2px);
	}
	10% {
		transform: translate(0px, 2px);
	}
	15% {
		transform: translate(0px, -2px);
	}
	20% {
		transform: translate(0px, 2px);
	}
	25% {
		transform: translate(0px, -2px);
	}
	30% {
		transform: translate(0px, 0px);
	}
}
.webclapform_sent {
	display: none;
}
.sent .webclapform_sent {
	display: block;
	margin: 10px auto;
	text-align: center;
	max-width: 500px;
	background: #FAF8F2;
	padding: 20px 10px 10px;

	color: #671313;
	border-radius: 10px;
}
.sent .webclapform_sent p {
	margin-bottom: 15px!important;
}
.sent .webclapform_sent section {
	max-width: 300px;
	margin: 0 auto;
}
.sent .webclapform_sent a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	position: relative;
	background: #DB5853;
	border: 1px solid #DB5853;
	box-sizing: border-box;
	padding: 0 25px 0 40px;
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
	border-radius: 50px;
}
.sent .webclapform_sent a::before {
	content: '\f06b';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
.sent .webclapform_sent a:hover {
	background: #FAF8F2;
	color: #DB5853;
}
#webclapform .wpcf7-response-output {
	max-width: 500px;

	margin: 0 auto;
	background: #FAF8F2;
	color: #671313;
	border: none;
	padding: 15px;
	text-align: center;
	font-weight: bold;
}

/* ここから下　メニュー用 ////////////////////////////////////////////////*/
#nav{
	position: fixed;
    top: -1000px;   /*ナビメニューを隠した状態になる*/
    left: 55%;
    width: 400px;
    height: 1000px;
    background: #ff00ff;
    /* transition 秒かけてナビメニューがスライドする*/
    transition: .5s;
	z-index: 9998;/* 一番上に表示する */
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#nav ul{
    padding-top: 80px;
}
#nav ul li{
    list-style-type: none;
    font-size: 20px;
}
#nav a{
    display: block;
    text-decoration: none;
    color: #000000;
    margin: 0 15px;
    padding: 10px;
    transition: .5s;
}
#nav li a:hover{
    color: #ffffff;
    background: #cd5c5c;
    border-bottom: none;
}
.in{
    transform: translateY(100%);
  }
.cover{ /* これはメニュー裏の暗いところ */
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
	cursor: pointer;
}
/* メニューここまで ////////////////////////////////////////////////*/
.random-post-button {
  outline: none;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  color: #DB5853;
  border-radius: 10px;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  position: relative;
  background-color: #5C2523;
  box-shadow: rgba(233, 30, 99, 0.5);
}

.random-post-button::after,
.random-post-button::before {
  transition: all 0.2s ease-in-out;
}

.random-post-button::before {
  z-index: -1;
  position: absolute;
  content: "";
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #DB5853 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ee8081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, white 20%, transparent 20%),
    radial-gradient(circle, #DB5853 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ee8081 20%, transparent 20%),
    radial-gradient(circle, #DB5853 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ee8081 20%, transparent 20%),
    radial-gradient(circle, #DB5853 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ee8081 20%, transparent 20%),
    /*  */
      radial-gradient(circle, transparent 10%, #ee8081 20%, transparent 20%),
    radial-gradient(circle, #ee8081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, white 20%, transparent 20%),
    radial-gradient(circle, #ee8081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%),
    radial-gradient(circle, #ee8081 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, white 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,
    20% 20%;
  background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
    65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
    64% 70%, 80% 71%;
}

.random-post-button:hover::before {
  background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
    100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
    100% 100%;
  background-size: 0% 0%;
  transition: background-position 0.5s ease-in-out,
    background-size 0.75s ease-in-out;
}

.radar-chart-004 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 230px;
    height: 230px;
    margin: 0 auto;
    padding: 35px;
    box-sizing: content-box;
}

.radar-chart-004 svg {
    width: 100%;
    height: 100%;
}

.radar-chart-004 dl {
    position: absolute;
    width: 100%;
    height: 100%;
}

.radar-chart-004 dl > div {
    position: absolute;
    color: #777;
    font-size: .6em;
    text-align: center;
}

.radar-chart-004 dl > div:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.radar-chart-004 dl > div:nth-child(2) {
    top: 18%;
    right: 14%;
    transform: translateX(50%);
}

.radar-chart-004 dl > div:nth-child(3) {
    bottom: 36%;
    right: 6%;
    transform: translateX(50%);
}

.radar-chart-004 dl > div:nth-child(4) {
    bottom: 3%;
    right: 32%;
    transform: translateX(50%);
}

.radar-chart-004 dl > div:nth-child(5) {
    bottom: 3%;
    left: 32%;
    transform: translateX(-50%);
}

.radar-chart-004 dl > div:nth-child(6) {
    bottom: 36%;
    left: 6%;
    transform: translateX(-50%);
}

.radar-chart-004 dl > div:nth-child(7) {
    top: 18%;
    left: 14%;
    transform: translateX(-50%);
}

.radar-chart-004 dd {
    margin: 0;
	    display: none;
}

    .term {
      cursor: pointer;
      font-weight: bold;
    }
    .term::after {
      content: "+";
      margin-left: 5px;
    }
    .term.active::after {
      content: "-";
      margin-left: 5px;
    }
    .description {
      display: none;
    }
    .term.active + .description {
      display: block;
    }


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
#nav{
	position: fixed;
    top: -800px;    /*ナビメニューを隠した状態になる*/
    left: 35%;
    width: 400px;
    height: 800px;
    background: #ffffff;
    /* transition 秒かけてナビメニューがスライドする*/
    transition: .5s;
	z-index: 9998;/* 一番上に表示する */
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#nav ul{
    padding-top: 80px;
}
#nav ul li{
    list-style-type: none;
    font-size: 20px;
}
#nav a{
    display: block;
    text-decoration: none;
    color: #000000;
    margin: 0 15px;
    padding: 10px;
    transition: .5s;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	#nav{
	position: fixed;
    top: -800px;    /*ナビメニューを隠した状態になる*/
    left: 35%;
    width: 400px;
    height: 800px;
    background: #ffffff;
    /* transition 秒かけてナビメニューがスライドする*/
    transition: .5s;
	z-index: 9998;/* 一番上に表示する */
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#nav ul{
    padding-top: 80px;
}
#nav ul li{
    list-style-type: none;
    font-size: 20px;
}
#nav a{
    display: block;
    text-decoration: none;
    color: #000000;
    margin: 0 15px;
    padding: 10px;
    transition: .5s;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	#nav{
	position: fixed;
    top: -700px;    /*ナビメニューを隠した状態になる*/
    left: 15%;
    width: 400px;
    height: 700px;
    background: #ffffff;
    /* transition 秒かけてナビメニューがスライドする*/
    transition: .5s;
	z-index: 9998;/* 一番上に表示する */
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#nav ul{
    padding-top: 80px;
}
#nav ul li{
    list-style-type: none;
    font-size: 20px;
}
#nav a{
    display: block;
    text-decoration: none;
    color: #000000;
    margin: 0 15px;
    padding: 10px;
    transition: .5s;
}
}