@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
*/


/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.soft-bar {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 10px; 
}
.girly_btn_soft {
  display: flex;              /* ←これが重要 */
  justify-content: center;    /* 横中央 */
  align-items: center;        /* 縦中央 */
  
  width: 8.8em;
  height: 4.3em;
  font-size: 1em;
  position: relative;
  text-align: center;
  text-decoration: none;
  outline: 0;
  overflow: hidden;

  color: #fff !important;     /* ←これで白固定 */
  
  background: linear-gradient(45deg, #ff9a9e 0%, #f0b77f 99%, #fad0c4 100%);
  box-shadow: 0 1px 1px 2px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: .5em 1em;
  border: 1px solid #ff1493;

  transition: transform 0.2s ease;
}

.girly_btn_soft:active {
  transform: translateY(3px);
}


.cp_hr12 {
  height: 3px;
  border-width: 0;
  background-repeat: repeat-x;
  background-size: 0.7em 0.3em,1.7em 0.3em,3.5em 0.3em,3.7em 0.3em;
  background-position: right bottom;
  background-image:
  radial-gradient(0.3em 0.2em at center center,#f24f5a,rgba(246,89,115,0)),
  radial-gradient(0.5em 0.2em at center center,#f24f5a,rgba(246,89,115,0)),
  radial-gradient(0.8em 0.2em at center center,#f24f5a,rgba(246,89,115,0)),
  radial-gradient(7.2em 0.2em at center center,#f24f5a,rgba(246,89,115,0));
}

*,body,ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.slide-wrapper {
  width: 100%;
  position: relative;
overflow: hidden;
}
.slide {
  width: 300%;
  height: 100%;
  display: flex;
  transition: all 0.3s;
}
.slide div {
  width: 33.33%;
  height: 100%;
  font-size: 16px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.slide1 {
transform: translateX(0);
}
.slide2 {
transform: translateX(-33.33%);
}
.slide3 {
transform: translateX(-66.66%);
}
.slide div:nth-of-type(1){
}
.slide div:nth-of-type(2){
}
.slide div:nth-of-type(3){
}
.next {
position: absolute;
width: 16px;
height: 16px;
right:0px;
bottom: 15%;
  z-index: 10;
  cursor: pointer;
border-top: solid 4px #ff5973;
border-right: solid 4px #ff5973;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
display:none;
}
.prev {
  position: absolute;
width: 16px;
height: 16px;
left: 10px;
bottom: 15%;
  z-index: 10;
  cursor: pointer;
border-top: solid 4px #ff5973;
border-right: solid 4px #ff5973;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
display:none;
}
.indicator {
width: 100%;
position: absolute;
bottom: -1.5em;
left:0.5%;
display: flex;
column-gap: 18px;
z-index: 30;
justify-content: center;
align-items: center;
}
.indicator li {
width: 14px;
height: 14px;
border-radius: 50%;
list-style: none;
background-color: #fff;
border: 2px #ff5973 solid;
cursor: pointer;
}
.indicator li:first-of-type {
background-color: #ff5973;
}

/*
.blogcard-snippet{
display:block !important;
line-height: 2em;
}
.internal-blogcard-snippet{
display: block !important;
line-height: 2em;
}
*/
.comment-reply-title{
line-height:2em;
}
.comment-notes{
line-height:1.5em;
margin-bottom: 1em;
}
.comment-form-comment{
line-height:2em;
}
.comment-form-author{
line-height:2em;
}
.comment-form-email{
line-height:2em;
}
.comment-form-url{
line-height:2em;
}
.logged-in-as{
line-height:1.5em;
}
.comment-form-cookies-consent{
line-height:1.5em;
margin-top:1em;
}
.wp_ulike_style_love
.wp_counter_span{
margin-top: 1em;
margin-right: 10em;
}
.most_liked_post{
line-height:2em;
list-style: none;
}

/* 次のページ」ボタン */
a.post-page-numbers{
text-decoration: none !important;
}
span.page-numbers.page-prev-next{
background-color: #ffffff;
border: 2px solid #e7638b;
color: #e7638b;
display: block;
font-size: 1.2em;
text-decoration: none !important;
width: calc(100% – 8px);
height: 3.25em;
text-align: center;
padding: 10px;
display: block;
position: relative;
transition-duration: 0.2s;
text-decoration:none;
border-radius: 10px;
font-weight:bold;
}
/* ボタンホバー時 */
span.page-numbers.page-prev-next:hover{
/*transform: translate(3px,3px);*/
background-color: #e7638b;
/*border: 2px solid #fbaabe;*/
color: #ffffff;
transition-duration: 0.2s;
text-decoration:none;

}
/* ボタンの影のライン 
span.page-numbers.page-prev-next::after{
display: block;
position: absolute;
content: ””;
border-right: 2px solid #e7638b;
border-bottom: 2px solid #e7638b;
right: -5px;
bottom: -5px;
width: 100%;
height: 58px;
opacity: 1;
transition-duration: 0.2s;
}
/* ボタンの影のラインホバー時 
span.page-numbers.page-prev-next:hover::after{
transform: translate(-3px,-3px);
transition-duration: 0.2s;
opacity: 0;
}*/
/* ページネーション現在のページの表示 */
span.post-page-numbers.current {
background-color: #e7638b;
border: 2px solid #e7638b;
color: #ffffff !important;
text-decoration: none;
display: inline-block;
/*height: 46px;
width: 46px;*/
height: 1em;
width: 1em;
margin: 0 4px;
line-height: 1em;
border-radius: 50%;
margin-right:1%;
margin-left:1%;
}
/* ページネーション現在のページ以外の表示 */
div.pager-links.pager-numbers a{
background-color: #ffffff;
border: 2px solid #e7638b;
color: #e7638b;
text-decoration: none;
display: inline-block;
/*height: 46px;
width: 46px;*/
height: 1em;
width: 1em;
margin: 0 4px;
line-height: 20px; /*数字の表示を真ん中に持ってくるために微調整しました。 */
/*margin-bottom:-1.35%;*/
margin-right:1%;
margin-left:1%;
margin-bottom:0.5px;
text-align: center;
border-radius: 50%;

}


/* ページネーションホバーを離して元に戻る時間を指定 */
div.pager-links.pager-numbers a{
transition-duration: 0.2s;
}
/* ページネーションホバー時 */
div.pager-links.pager-numbers a:hover{
background-color: #e7638b;
transition-duration: 0.2s;
color: white;
}

div.pager-links.pager-numbers{
/*display: none !important;*/
}
span.page-numbers.current{
background-color: transparent;
border-color: transparent;
color: white;
font-weight:bold;
display:none;
}
.pager-links a span{
background-color: transparent;
border-color: transparent;
display:none;

}
span.page-numbers{
color: #e7638b;
font-weight:400;
padding-right:23%;
padding-bottom:40%;
display:none;
}
span.page-numbers a:hover{
color: white;
}


.block-editor-inspector-controls-tabs__hint-content{
line-height: 1em !important;
}
.block-editor-block-card__description{
line-height: 1em !important;
}

.components-flex-item{
line-height: 1em !important;
}

.comment-list{
line-height: 2em !important;
}
.breadcrumb-item{
line-height: 1.5em !important;
}
.sns-share-message{
line-height: 1.5em !important;
}
.grecaptcha-badge { visibility: hidden; }

.checkbox03 {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 5px 30px;
position: relative;
width: auto;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.checkbox03::before {
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
content: '';
display: block;
height: 16px;
left: 5px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 16px;
}
.checkbox03::after {
border-right: 6px solid #e32077;
border-bottom: 3px solid #e32077;
content: '';
display: block;
height: 20px;
left: 7px;
margin-top: -16px;
opacity: 0;
position: absolute;
top: 50%;
transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
width: 9px;
}
input[type=checkbox]:checked + .checkbox03::before {
border-color: #666;
}
input[type=checkbox]:checked + .checkbox03::after {
opacity: 1;
transform: rotate(45deg) scale3d(1,1,1);
}
/*
.checkbox03.checked::before {
    border-color: #666;
}

.checkbox03.checked::after {
    opacity: 1;
    transform: rotate(45deg) scale3d(1,1,1);
}
*/

/*
.checkbox04 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    position: relative;
	padding: 5px 30px;
width: auto;
height: 20px;
}

.checkbox04::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
}

.checkbox04::after {
    border-right: 6px solid #fedd1e;
    border-bottom: 3px solid #fedd1e;
    content: '';
    display: block;
    position: absolute;
top: 25%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale3d(.7, .7, 1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
width: 9px; 
height: 20px;
opacity: 0;
}

input[type=checkbox]:checked + .checkbox04::before {
    border-color: #666;
}

input[type=checkbox]:checked + .checkbox04::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale3d(1, 1, 1);
}
*/
.cp_ipselect {
/*-moz-appearance: none;
-webkit-appearance: none;/need for safari/
appearance: none;*/
overflow: hidden;
width: 40%;
margin: 2em auto;
text-align: center;
margin-bottom:3em;
margin-left:1em;
opacity:0.8;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.cp_ipselect select {
-moz-appearance: none;
-webkit-appearance: none;/need for safari/
appearance: none;
width: 100%;
padding-right: 1em;
cursor: pointer;
text-align: center;
font-size: 0.9em;
color: #57261a;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.cp_ipselect select::-ms-expand {
/*-moz-appearance: none;
-webkit-appearance: none;/need for safari/
appearance: none;*/
display: none;
}
.cp_ipselect.cp_sl01 {
/*-moz-appearance: none;
-webkit-appearance: none;/need for safari/
appearance: none;*/
position: relative;
border-radius: 2px;
border: 2px solid #57261a !important;
border-radius: 50px;
background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
/*-moz-appearance: none;
-webkit-appearance: none;/need for safari/
appearance: none;*/
position: absolute;
top: 0.8em;
right: 0.8em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #57261a !important;
pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
/*-moz-appearance: none;
-webkit-appearance: none;/need for safari/
appearance: none;*/
padding: 8px 38px 8px 8px;
color: black;
}

.pokenamestyle{
box-sizing: border-box;
display: block;
font-size: 0.9em !important;
margin: 7px 0;
border: 1px solid #57261a !important;
color: #57261a;
opacity: 0.8;
text-shadow: none;
position: relative;
width:60% !important;
margin-left:1em;
margin-bottom:3em;
}
.pokenamestyle:focus {
  /*outline: 0;
  border: 2px solid #57261a !important;*/
}
.ribbontablestyle{
border-collapse: collapse;
width: 100%;
font-size:1em;
}
/*
.ribbontablestyle th,td {
border: 1px solid black;
padding: 0;
text-align: center;
}
*/        
.ribbontablestyle th {
background-color: #f2f2f2;
}
.ribbontablestyle td{
height: 2em !important;
}

.ribbonliststyle {
text-align: center;
vertical-align: middle;
}
.ribbonliststyle img{
width: 3em;
}
.ribbonliststyle input[type=checkbox] {
width: 5em;
}
.thcheck{
width: 6%;
}
.thcheck input[type=checkbox] {
width: 5em;
text-align:center;
}
.thname{
	width: 39%;
}
.thimg{
	width: 10%;
}
.thsoft{
	width: 45%;
}
.thdetail{
    width: 34%;
}
.checkboxAddstyle{
vertical-align: middle;
margin-bottom:3em;
}
.checkboxAddstyle input[type=checkbox] {
width: 0.9em;
margin-right:1%;
margin-left:1em;
vertical-align: middle;
display:none;
}

.infostyle{
margin-bottom:1%;
font-weight:bold;
}

.ribbon_btn1 {
position: relative;
display:block;
text-align: center;
text-decoration: none;
outline: 0;
overflow: hidden;
color: #fff;
background: #f08080;
border-radius: 4px;
box-shadow: 0 0 0 5px #f08080, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 1.1px dashed #fff;
padding: .2em .5em;
margin-top:1em;
margin-left:2em;
width: 7em;
height: 2.5em;
transition: transform 0.2s ease; 
}
.ribbon_btn1:active {
transform: translateY(3px);
}
.ribtn1{
font-size: 0.8em;
}

.ribbon_btn2 {
position: relative;
display:block;
text-align: center;
text-decoration: none;
outline: 0;
overflow: hidden;
color: #fff;
background: #ff9d5b;
border-radius: 4px;
box-shadow: 0 0 0 5px #ff9d5b, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 1.1px dashed #fff;
padding: .2em .5em;
margin-right: 2em;
width: 6em;
height: 2.5em;
transition: transform 0.2s ease; 
float:right;
line-height:0.8em;
}
.ribbon_btn2:active {
transform: translateY(3px);
}
.ribtn2{
font-size: 0.8em;
}

.ribbon_btn3 {
position: relative;
display:block;
text-align: center;
text-decoration: none;
outline: 0;
overflow: hidden;
color: #fff;
background: #22c778;
border-radius: 4px;
box-shadow: 0 0 0 5px #22c778, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 1.1px dashed #fff;
padding: .2em .5em;
margin-right: 2em;
width: 6em;
height: 2.5em;
transition: transform 0.2s ease; 
float:right;
line-height:0.8em;
}
.ribbon_btn3:active {
transform: translateY(3px);
}
.ribtn3{
font-size: 0.8em;
}


.menu-home-container,
.fa-twitter,
.fa-tumblr{
    display: inline-block;
    width: 3em;
    height: 3em;
    line-height: 3em;
    background-color: pink;
    border-radius: 50%;
    text-align: center;
  }
.menu-home-container:before {
  font-family: 'FontAwesome';
  content: "\f015";
}

.fa-twitter:before {
    content: '𝕏';
    font-family: unset;
    font-weight: bold;
}

.breadcrumb {

}
a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

.menu-close-button {
  overflow: visible!important;
  position: sticky!important;
  z-index: 99999!important;
top: 4em;
  background: rgba(255, 238, 247, 0.8);
width: 85%;
  transform: scale(1.2);
  text-align: center;
  position: relative; /* 親要素に相対的な位置指定 */
	-webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

.fa-close {
  position: absolute;
top: 50%;
left: 57.25% !important;
  transform: translate(-50%, -50%);
  background: rgba(255, 238, 247, 0.8);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
line-height: 1.5em;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

.cat-label {display:none}

body{
line-height:0;
}

.sidebar h2,
.sidebar h3 {
padding: 2em !important;
}

#menu-btn{	
	cursor: pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
#menu-btn .bar {
	width: 1.5rem; 
	height: 0.3rem; 
	background-color: #ff9b8b; 
	margin: 0.25rem 0; 
	transition: 0.4s; 
	position: absolute; 
	display: block; 

}
#menu-btn .bar1{
	position:absolute;
	left: calc(50% - 0.75rem);
	top: 20%;
}

#menu-btn .bar2{
	position:absolute;
	left: calc(50% - 0.75rem);
	top: calc(20% + 0.5rem);
}


#menu-btn .bar3{
	position:absolute;
	left: calc(50% - 0.75rem);
	top: calc(20% + 1rem);
}

 
#menu-btn .close.bar:nth-child(1) {
  transform: rotate(45deg) translate(10%, -90%);
}

#menu-btn .close.bar:nth-child(2) {
  opacity: 0;
}

#menu-btn .close.bar:nth-child(3) {
  transform: rotate(-45deg) translate(2%, 180%);
}
#menu-btn.sidebar-menu-button. menu-button{
z-index: 300 !important;
}

.menu-content {
max-width: 85% !important;
cursor:default;
}
#sidebar-menu-input:checked ~ #sidebar-menu-close{
cursor:default;
}

.sidebar-menu-button.menu-button {
z-index: 300; /* 適切な値に調整してください */
}
.button-icon { 
	all: unset; 
	cursor: pointer;
	background-image: url(https://irodori-drop.com/wp-content/uploads/2023/11/1700537030168.png); 
	background-size: contain; 
	background-repeat: no-repeat; 
	background-position: top center; 
	width: 6rem; 
	height: 6.5rem; 
	position: fixed; 
	z-index: 1001; 
	right: 2rem; 
bottom: 8.5rem;
	filter: 
	drop-shadow(0 0 0.1rem var(--base-gray)); 	
    transform-origin: top center;
	opacity: 1;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

@keyframes shake {
  0% { transform: rotate(0); }
  25% { transform: rotate(-15deg); }
  50% { transform: rotate(25deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(5deg); }
}
.button-icon:active {
  animation: shake 0.5s ease-in-out forwards;
}


/*
@keyframes shake {
  0% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}

#menu-btn:active {
  animation: shake 0.5s ease-in-out infinite;
}

/*#menu-btn .btn-wrap p.text {
  transition: 0.3s; 
}

#menu-btn input:checked + label .btn-wrap p.text {
  content: "CLOSE";
}*/

.entry-title,
.archive-title {
  font-size: 140% !important;
  width: 98% !important;
  border-bottom: solid 3px !important;
  border-color: #e7638b !important;
  padding-left: 1% !important;
  padding-top: 2% !important;
}
.article h2{
background-color:transparent !important;
color:#57261a !important;
font-size: 110% !important; 
text-align: left !important;
width: 85%; border-bottom: solid 2px !important;
padding-left: 1%; padding-bottom: 5px !important;
border-color: #e7638b !important;
}
.main{
  	background-color: #FFFFFF00 !important;
}
.header-container,
.sidebar,
.footer {
  background-color: #FFFFFF00 !important;
}
a{	
	position: relative !important;
	font-size:97% !important;
	color: #dd6c6c !important;
	font-weight:bold !important;
	overflow: hidden !important;
}

a:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translate(-100%, 0);
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.45;
	content:""; 
}

a:hover:after {
	transform: translate(0, 0);
}

#navbar{
	margin-left:5%;
}
#navbar2{
	margin-left:5%;
}
#sidedetal{
margin-left: 0px;
width: 100%; 
margin-bottom:5% !important;
color:#e26a8a;
	font-weight:bold;
}
#sidedetal a{
	text-decoration:none !important; 
}
	
	
#sidedetal2{
margin-left: 0px;
width: 100%; 
margin-bottom:5% !important;
	color:#e26a8a;
	font-weight:bold;
} 
#sidedetal2 a{
	text-decoration:none !important; 
}
#sidedetal3{
margin-left: 0px; 
margin-bottom:5% !important;
width: 100%;
	color:#e26a8a;
	font-weight:bold;
} 
#sidedetal3 a{
	text-decoration:none !important; 
}
#sidedetal4{
margin-left: 0px;
width: 100%; 
margin-bottom:5% !important;
	color:#e26a8a;
	font-weight:bold;
} 
#sidedetal4 a{
	text-decoration:none !important; 
}
#sidedetal5{
margin-left: 0px; 
width: 100%;
margin-bottom:5% !important;
	color:#e26a8a;
	font-weight:bold;
} 
#sidedetal5 a{
	text-decoration:none !important; 
}
#sidedetal6{
margin-left: 0px; 
width: 100%;
margin-bottom:5% !important;
	color:#e26a8a;
	font-weight:bold;
} 
#sidedetal6 a{
	text-decoration:none !important; 
}
#sidedetal7{
margin-left: 0px; 
width: 100%;
margin-bottom:5% !important;
	color:#e26a8a;
	font-weight:bold;
} 
#sidedetal7 a{
	text-decoration:none !important; 
}
#sidedetal8{
margin-left: 0px; 
width: 100%;
margin-bottom:5% !important;
	color:#e26a8a;
	font-weight:bold;
} 
#sidedetal8 a{
	text-decoration:none !important; 
}
#sidedetal9{
margin-left: 0px; 
width: 100%;
margin-bottom:5% !important;
	color:#e26a8a;
	font-weight:bold;
} 
#sidedetal9 a{
	text-decoration:none !important; 
}
#sidemen1{
width:90%; 
height:2.2em;
margin-top:8% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6; 
border-radius: 3px 3px;
display:grid; justify-content:center;
align-items: center !important;
	text-decoration:none !important; 
}
#sidemen2{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em; 
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen3{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em; 
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen4{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em; 
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen5{
width: 90%;
height:2.2em;
margin-top:8% !important; 
margin-bottom:4% !important;
margin-left: 1em; 
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important;
}
#sidemen6{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em; 
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen7{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em; 
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen8{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em; 
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen9{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em; 
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen10{
width: 90%;
height:2.2em;
margin-top:8% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}

#sidemen11{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen12{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen13{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen14{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen15{
width: 90%;
height:2.2em;
margin-top:8% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}

#sidemen16{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}

#sidemen17{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}

#sidemen18{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen19{
width: 90%;
height:2.2em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}

#sidemen20{
width: 90%;
height:2.2em;
margin-top:8% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
} 

#sidemen21{
width: 90%;
height:2.2em;
margin-top:8% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
} 
#sidemen22{
width: 90%;
height:2.2em;
margin-top: 8% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
} 
#sidemen23{
width: 90%;
height:2.2em;
margin-top:8% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}
#sidemen24{
width: 90%;
height:2.2em;
margin-top:8% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
	text-decoration:none !important; 
}


#side-nav1{
margin: 5% 0;
}
#side-nav2{
margin: 5% 0;
}
#side-nav3{
margin: 5% 0;
}
#side-nav4{
margin: 5% 0;
}
#side-nav5{
margin: 5% 0;
}
#side-nav6{
margin: 5% 0;
}
#side-nav7{
margin: 5% 0;
}
#side-nav8{
margin: 5% 0;
}
#side-nav9{
margin: 5% 0;
}

.wp-block-latest-posts__post-title{
display: flex !important;
width: 90%;
height:3.5em;
margin-top:4% !important; 
margin-bottom:4% !important;
margin-left: 1em;
background-color:#ffe9f6;
display:grid;
justify-content:center; 
align-items:center !important;
border-radius: 3px 3px;
text-decoration:none !important; 
}

/************************************
** ボトムシェアボタンのみ丸くする
************************************/

/*ボトムシェアボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons {
justify-content: center; /*中央に寄せる*/
}

/*ボトムシェアボタンのリンク*/
.sns-share.ss-bottom .sns-buttons a {
width: 40px; /*横幅*/
height: 40px; /*高さ*/
margin-right: 1% !important; /*右側の余白*/
margin-left: 1% !important; /*左側の余白*/
margin-top: 1% !important; /*上側の余白*/
margin-bottom: 20px; /*下側の余白*/
border-radius: 50%; /*丸み*/
background: none !important;
background-color: #fff !important;
border: 1px solid #f24f5a;
}
.sns-share.ss-bottom .sns-buttons a:hover {
background-color: #edbbbb !important;
color: #fff;
border-color: #edbbbb;
}

/*ボトムシェアボタンのアイコン*/
.sns-share.ss-bottom .sns-buttons a .social-icon {
font-size: 18px; /*アイコンの大きさ*/
background: none !important;
background-color: #fff !important;
}

/*ボトムシェアボタンのキャプション*/
.sns-share.ss-bottom .sns-buttons a .button-caption {
display: none; /*非表示*/
}

/*ボトムシェアボタンのシェア数*/
.sns-share.ss-bottom .sns-buttons a .share-count {
right: -2px; /*右側からの距離*/
bottom: -2px; /*下側からの距離*/
padding: 2px; /*内側の余白*/
font-size: 10px; /*文字の大きさ*/
border: solid 1px; /*線*/
border-radius: 3px; /*丸み*/
/*background-color: inherit;*/ /*背景色*/
}

/*シェア数の表示が必要ないボトムシェアボタン*/
.sns-share.ss-bottom .sns-buttons a .share-count:empty {
padding: 0; /*内側の余白*/
border: 0; /*線*/
}


/*トップシェアボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons {
justify-content: center; /*中央に寄せる*/
}

/*トップシェアボタンのリンク*/
.sns-share.ss-top .sns-buttons a {
width: 40px; /*横幅*/
height: 40px; /*高さ*/
margin-right: 1% !important; /*右側の余白*/
margin-left: 1% !important; /*左側の余白*/
margin-top: 2% !important; /*上側の余白*/
margin-bottom: 20px; /*下側の余白*/
border-radius: 50%; /*丸み*/
background: none !important;
background-color: #fff !important;
border: 1px solid #f24f5a;
}
.sns-share.ss-bottom .sns-buttons a:hover {
background-color: #edbbbb !important;
color: #fff;
border-color: #edbbbb;
}

/*トップシェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon {
font-size: 18px; /*アイコンの大きさ*/
background: none !important;
background-color: #fff !important;
}

/*トップシェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption {
display: none; /*非表示*/
}

/*トップシェアボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count {
right: -2px; /*右側からの距離*/
bottom: -2px; /*下側からの距離*/
padding: 2px; /*内側の余白*/
font-size: 10px; /*文字の大きさ*/
border: solid 1px; /*線*/
border-radius: 3px; /*丸み*/
/*background-color: inherit;*/ /*背景色*/
}

/*シェア数の表示が必要ないトップシェアボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty {
padding: 0; /*内側の余白*/
border: 0; /*線*/
}

.sidebar .sns-button.follow-button {
  background: none !important;
  background-color: #fff !important;
  border: 1px solid #f24f5a !important;
  color: #f24f5a; !important;
  border-color: #f24f5a; !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 10px !important;
  justify-content: center !important;
  
  transition: all 0.3s !important;
 display:none !important;
}

.sidebar a.sns-button.follow-button {
  background: none !important;
  /*background-color: #fff !important;*/
  border: 1px solid #f24f5a !important;
  color: #f24f5a; !important;
  border-color: #f24f5a; !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 10px !important;
  justify-content: center !important;
  
  transition: all 0.3s !important;
}

.sidebar a.sns-button.follow-button:hover {
  background-color: #edbbbb !important;
  color: #fff !important;
  border-color: #edbbbb !important;
}


.sns-button.follow-button {
  background: none !important;
  background-color: #fff !important;
  border: 1px solid #f24f5a !important;
  color: #f24f5a; !important;
  border-color: #f24f5a; !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 10px !important;
  justify-content: center !important;
  
  transition: all 0.3s !important;
	display:none !important;
}

a.sns-button.follow-button {
  background: none !important;
  /*background-color: #fff !important;*/
  border: 1px solid #f24f5a !important;
  color: #f24f5a; !important;
  border-color: #f24f5a; !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 10px !important;
  justify-content: center !important;
  
  transition: all 0.3s !important;
}

a.sns-button.follow-button:hover {
  background-color: #edbbbb !important;
  color: #fff !important;
  border-color: #edbbbb !important;
}


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

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
.next {
position: absolute;
width: 6px;
height: 6px;
right:0px;
bottom: 10%;
  z-index: 10;
  cursor: pointer;
border-top: solid 2px #ff5973;
border-right: solid 2px #ff5973;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
display:none;
}
.prev {
  position: absolute;
width: 6px;
height: 6px;
left:4px;
bottom: 10%;
  z-index: 10;
  cursor: pointer;
border-top: solid 2px #ff5973;
border-right: solid 2px #ff5973;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
display:none;
}
.indicator {
width: 100%;
position: absolute;
bottom: -1.5em;
left:-7%;
display: flex;
column-gap: 10px;
z-index: 10;
justify-content: center;
align-items: center;
}
.indicator li {
width: 9px;
height: 9px;
border-radius: 50%;
list-style: none;
background-color: #fff;
border: 1px #ff5973 solid;
cursor: pointer;
}
.indicator li:first-of-type {
background-color: #ff5973;
}	
	.wrap{
		width:100vw !important;
	}/*test*/
	#side-nav1{
margin: 13% 0;
}
#side-nav2{
margin: 13% 0;
}
#side-nav3{
margin: 13% 0;
}
#side-nav4{
margin: 13% 0;
}
#side-nav5{
margin: 13% 0;
}
#side-nav6{
margin: 13% 0;
}
#side-nav7{
margin: 13% 0;
}
#side-nav8{
margin: 13% 0;
}

	 .button-icon { 
	all: unset; 
	cursor: pointer;
		background-image: url(https://irodori-drop.com/wp-content/uploads/2023/11/1700537030168.png); 
	background-size: contain; 
	background-repeat: no-repeat; 
	background-position: top center; 
	width: 4rem; 
	height: 4.5rem; 
	position: fixed; 
	z-index: 101; 
	right: 1rem; 
bottom: 7.5rem;
	filter: 
	drop-shadow(0 0 0.1rem var(--base-gray)); 
		 opacity:1;
 
} 

	#menu-btn .bar {
	width: 1rem; 
	height: 0.2rem; 
	background-color: #ff9b8b; 
	margin: 0.2rem 0; 
	transition: 0.4s; 
	position: absolute; 
	display: block; 
}
#menu-btn .bar1{
	position:absolute;
	left: calc(50% - 0.5rem);
	top: 18%;
}

#menu-btn .bar2{
	position:absolute;
	left: calc(50% - 0.5rem);
	top: calc(18% + 0.4rem);
}


#menu-btn .bar3{
	position:absolute;
	left: calc(50% - 0.5rem);
	top: calc(18% + 0.8rem);
}
	

.menu-close-button {
  overflow: visible!important;
  position: sticky!important;
  z-index: 99999!important;
top: 4.5em;
  background: rgba(255, 238, 247, 0.8);
  width: 85%;
  left: 1em;
  transform: scale(1.2);
  text-align: center;
  position: relative; /* 親要素に相対的な位置指定 */
	-webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

.fa-close {
  position: absolute;
  top: 50%;
left: 48% !important;
  transform: translate(-50%, -50%);
  background: rgba(255, 238, 247, 0.8);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
line-height: 1.5em;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

.ribbontablestyle{
border-collapse: collapse;
width: 100%;
font-size:0.7em;
margin-left:0 !important;
margin-right:0 !important;
}
/*
.ribbontablestyle th, td {
border: 1px solid black;
padding: 0;
text-align: center;
}*/
        
.ribbontablestyle th {
background-color: #f2f2f2;
}
.ribbontablestyle td{
height:5em !important;
}
.checkboxAddstyle{
vertical-align: middle;
}
.checkboxAddstyle input[type=checkbox] {
width: 0.9em;
margin-right:1%;
vertical-align: middle;
display:none;
}
.ribbonliststyle {
text-align: center;
vertical-align: middle;
}
.ribbonliststyle img{
width: 3em;
}
.ribbonliststyle input[type=checkbox] {
width: 0.9em;
}
.thcheck{
width: 7%;
}
.thcheck input[type=checkbox] {
width: 0.9em !important;
}
.thname{
	width: 36%;
}
.thimg{
	width: 11%;
}
.thsoft{
	width: 46%;
}
/*
.thdetail{
    width: 35%;
}
*/
.selectallstyle input[type=checkbox] {
width: 0.8em !important;
	}

	
.ribbon_btn1 {
position: relative;
display:block;
text-align: center;
text-decoration: none;
outline: 0;
overflow: hidden;
color: #fff;
background: #f08080;
border-radius: 4px;
box-shadow: 0 0 0 5px #f08080, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 1.1px dashed #fff;
padding: .2em .5em;
margin-bottom:4em;
margin-left:2em;
width: 8em;
height: 2.5em;
transition: transform 0.2s ease; 
}
.ribbon_btn1:active {
transform: translateY(3px);
}
.ribtn1{
font-size: 0.8em;
}

.ribbon_btn2 {
position: relative;
display:block;
text-align: center;
text-decoration: none;
outline: 0;
overflow: hidden;
color: #fff;
background: #ff9d5b;
border-radius: 4px;
box-shadow: 0 0 0 5px #ff9d5b, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 1.1px dashed #fff;
padding: .2em .5em;
margin-right: 0.5em;
width: 7em;
height: 2.5em;
transition: transform 0.2s ease; 
float:right;
line-height:0.8em;
}
.ribbon_btn2:active {
transform: translateY(3px);
}
.ribtn2{
font-size: 0.8em;
}

.ribbon_btn3 {
position: relative;
display:block;
text-align: center;
text-decoration: none;
outline: 0;
overflow: hidden;
color: #fff;
background: #22c778;
border-radius: 4px;
box-shadow: 0 0 0 5px #22c778, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 1.1px dashed #fff;
padding: .2em .3em;
margin-right: 1.5em;
width: 7em;
height: 2.5em;
transition: transform 0.2s ease; 
float:right;
line-height:0.8em;
}
.ribbon_btn3:active {
transform: translateY(3px);
}
.ribtn3{
font-size: 0.8em;
}
	

.infostyle{
margin-bottom:1%;
font-weight:bold;
font-size:0.6em;
}
.ribbonhonbun{
font-size:0.9em;
}
	
.checkbox03 {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 5px 30px;
position: relative;
width: auto;
}
.checkbox03::before {
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
content: '';
display: block;
height: 16px;
left: 5px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 16px;
}
.checkbox03::after {
border-right: 6px solid #e32077;
border-bottom: 3px solid #e32077;
content: '';
display: block;
height: 20px;
left: 7px;
margin-top: -16px;
opacity: 0;
position: absolute;
top: 50%;
transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
width: 9px;
}
input[type=checkbox]:checked + .checkbox03::before {
border-color: #666;
}
input[type=checkbox]:checked + .checkbox03::after {
opacity: 1;
transform: rotate(45deg) scale3d(1,1,1);
}
/*
.checkbox03.checked::before {
    border-color: #666;
}

.checkbox03.checked::after {
    opacity: 1;
    transform: rotate(45deg) scale3d(1,1,1);
}
*/
/*
.checkbox04 {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
position: relative;
padding: 1em;
width: 1em;
height: 1em;
}

.checkbox04::before {
background: #fff;
border: 0.1em solid #ccc;
border-radius: 0.3em;
content: '';
display: block;
position: absolute;
transform: none;
width: 0.3em;
height: 0.2em;
}

.checkbox04::after {
border-right: 0.3em solid #fedd1e;
border-bottom: 0.1em solid #fedd1e;
    content: '';
    display: block;
position: absolute;
top: 35%;
left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale3d(.7, .7, 1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
width: 0.3em;
height: 0.2em;
    opacity: 0;
}


input[type=checkbox]:checked + .checkbox04::before {
    border-color: #666;
}

input[type=checkbox]:checked + .checkbox04::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale3d(1, 1, 1);
}
*/
	
	
.cp_ipselect {
  overflow: hidden;
width: 40%;
  margin: 2em auto;
  text-align: center;
margin-bottom:3em;
margin-left:1em;
opacity:0.8;
}
.cp_ipselect select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
text-align: center;
font-size: 0.9em;
color: #57261a;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
  position: relative;
  border-radius: 2px;
  border: 2px solid #57261a !important;
  border-radius: 50px;
  background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #57261a !important;
  pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
  padding: 8px 38px 8px 8px;
  color: black;
}

.pokenamestyle{
box-sizing: border-box;
display: block;
font-size: 0.9em !important;
margin: 7px 0;
border: 1px solid #57261a !important;
color: #57261a;
opacity: 0.8;
text-shadow: none;
position: relative;
width:60% !important;
margin-left:1em;
margin-bottom:3em;
}
.pokenamestyle:focus {
  /*outline: 0;
  border: 2px solid #57261a !important;*/
}

.wp-block-columns{
column-gap: 2%;
	}
	
} 


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