@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ------------------------汎用コード-------------------------------------- */

.list-with-frame-and-shadow ul, ol {
  background:#fffdff;/*薄いピンク*/
  border-radius :8px;
  box-shadow :0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
}

.list-with-frame-and-shadow ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

.lightsalmon-box {
  border: solid 2px lightsalmon /* #ffb03f */;
  border-radius: 5px;
  padding: 0.7em 1em 0.7em 1em;

}

.dodgerblue-box {
  border: solid 2px dodgerblue /* #ffb03f */;
  border-radius: 5px;
  padding: 0.7em 1em 0.7em 1em;

}

.violet-box {
  border: solid 2px violet /* #ffb03f */;
  border-radius: 5px;
  padding: 0.7em 1em 0.7em 1em;

}

.padding-left-05em {
  padding-left:0.5em;
}

.padding-left-10em {
  padding-left:1em;
}

.padding-left-15em {
  padding-left:1.5em;
}

.padding-left-20em {
  padding-left:2em;
}

.padding-left-25em {
  padding-left:2.5em;
}

.maring-top--05em {
  margin-top:-0.5em;
}

.maring-top--07em {
  margin-top:-0.7em;
}

.maring-top--10em {
  margin-top:-1.0em;
}

.color-lightsalmon {
  color: lightsalmon;
}

.color-dogerblue {
  color: dodgerblue;
}

.color-violet {
  color: violet;
}

.color-lightsalmon-before:before {
  color: lightsalmon;
}

.color-violet-before:before {
  color:violet;
}

.color-dodgerblue-before:before {
  color:dodgerblue /* dodgerblue */
}

#form-in-ask-us {
/*  position: relative; */

  border:1px solid dodgerblue;
  box-shadow: 5px 5px 7px gainsboro;
  width:25em;
}

#div-in-form {
/*
  position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
*/

  /* border:1px solid pink; */
  padding: 2px;
  width: 23em;
  height: 2em;
  margin: 0 auto;
}

#input-box-e1 {
  /* border:1px solid coral; */
  background-color: aliceblue;
  width:14em;
  margin: 0.5em 0 0.5em 0;
  padding: 0;
  line-height:1em;
}

#input-box-e3 {
  /* border:1px solid coral; */
  background-color: aliceblue;
  width:1.2em;
  margin: 0.5em 0 0.5em 0;
  padding: 0;
}

#input-box-e2 {
  /* border:1px solid coral; */
  background-color: aliceblue;
  width:9em;
  margin: 0.5em 0 0.5em 0;
  padding: 0;
}


input[type="text"], textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: smaller;
  text-align: justify;
  width: 16em;
  /* outline: none;
  border: 1px solid #aaa;
  -webkit-transition: all .3s;
  transition: all .3s; */
}

input[type="text"]:focus, textarea:focus {
  box-shadow: 0 0 7px #1abc9c;
  border: 1px solid #1abc9c;
}

/* ------------------------    Facebook    ------------------ */

.iframe-wrap { /* Facebook */
  position: relative;
  width: 100%;
  /* height: auto; */
  padding-top: 500px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  /* border:2px solid #ccc */
}

.iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}


/* ------------------------汎用コード cocoon親マスターより------------------ */

/*赤のアンダーライン*/
.red-under {
  border-bottom: 2px solid red;
}

/*マーカーの黄色のような色*/
.marker {
  background-color: #ff9;
}

.marker-red {
  background-color: #ffd0d1;
}

.marker-blue {
  background-color: #a5d7f9;
}

/*下半分のマーカー色（km）*/
.marker-under-yellow {
  background: linear-gradient(transparent 60%, #ff6 60%);
}

.marker-under-red {
  background: linear-gradient(transparent 60%, #ffb6b9 60%);
}

.marker-under-blue {
  background: linear-gradient(transparent 60%, #a8dafb 60%);
}

/*打ち消し線*/
.strike {
  text-decoration: line-through;
}

/* ------------------------ 汎用コード 自作 (枠線) ------------------------ */

.frame-box ul { /* 枠線 - 内部はul */
  border: solid 2px lightsalmon /* #ffb03f */;
  border-radius: 5px;
  padding: 0 0.5em;
  position: relative;
}

/* ------------- 汎用コード 自作 (class list-in-the-shadow-box) ------------- */

.list-in-the-shadow-box ul, ol {
  background: #fffcf4;
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
  padding: 0.5em 0.5em 0.5em 2em;
}

.list-in-the-shadow-box ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

/* ----------------- 汎用コード 自作 (class flat-ul-list) ----------------- */

.flat-ul-list ul {
  padding: 0;
  position: relative;
}

.flat-ul-list ul li {
  color:black ;
  background:rgba(9,237,67,0.07) ;
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 2em;
  border-bottom: 2px solid white;
  list-style-type: none!important;
  font-weight: bold; /*好みで太字に*/
}

.flat-ul-list ul li:before {
  font-family: Fontawesome;
  content: "\f14a";
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
  color:  #55acef /* dodgerblue */ /*アイコン色*/
}

/* ------ 汎用コード 自作 (class flat-ol-list) (20200429時点で未使用) ------ */

.flat-ol-list ol {
  background:rgba(9,237,67,0.07) ;
  padding:  0.5em 0.5em 0.5em 2em;
  position: relative;
}

.flat-ol-list ol li {
  background:rgba(9,237,67,0.07) ;
  line-height: 1.2;
  border-bottom: 1px dashed white;
/*
  padding: 0.5em 0.5em 0.5em 2em;
  border-bottom: 2px solid white;
*/
  /* list-style-type: none!important; */
  list-style-type: decimal;
  font-weight: bold; /*好みで太字に*/
}

/*
.flat-ol-list ol li:before {
  font-family: Fontawesome;
  content: "\f14a";
  position: absolute;
  left : 0.5em;
  color: #55acef
}
*/

/* ------------- 汎用コード 自作 (class chevron-at-line-head) ------------- */

.chevron-at-line-head { /* 枠線 */
  border: solid 2px lightsalmon /* #ffb03f */;
  border-radius: 5px;
  position: relative;
  padding: 0.5em 0.5em;
}

.chevron-at-line-head span:before { /* リストのFontAwesome */
  font-family: FontAwesome;
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #55acef /* dodgerblue */
}

.chevron-at-line-head span {
  padding: 0em 0em 0em 1.4em;
/*
  background: #1abc9c;
  margin-left: 2em;
  position: relative;
*/
}

/* ----------------- 汎用コード 自作 (class list-in-the-box) ----------------- */

.list-in-the-box ul { /* 枠線 */
  border: solid 2px lightsalmon /* #ffb03f */;
  border-radius: 5px;
  padding: 0 0.5em;
  position: relative;
}

.list-in-the-box ul li { /* リスト各行の下線 */
  line-height: 1.5;
  padding: 0.5em 0em 0.4em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}

.list-in-the-box ul li:last-of-type { /* リストの最終行 */
  border-bottom: none;
}

.list-in-the-box ul li:before { /* リストのFontAwesome */
  font-family: FontAwesome;
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #55acef /* dodgerblue */
}

.list-in-the-box ul li span { /* リスト中のspanタグ "コートが小さい"行 */
  padding: 0.4em 0 0 0;
}

.list-in-the-box ul li i { /* リスト中のiタグ "プレイが続き易い"行 */
  padding: 0.4em 0 0 0;
}

.list-in-the-box .color-lightsalmon { /* 色指定 */
  color: lightsalmon;
}


/* -------------------トップページ 更新情報 タイトルBOX--------------------- */

.update-title-box { /* 更新情報 タイトルBOX */
  height: 12px;
  background: lightsalmon/* #ffb03f */;
  padding: 6px 10px;
  border-radius: 15px;
  color: #ffffff;
  font-weight: bold;
  margin-left: 10px;
  /* z-index: 10; */
}

/* --------------------トップページ 更新情報 本体BOX------------------------ */

/* #update-body-block ul */
/* div.entry-content.cf.iwe-shadow */

#update-body-block ul { /* 枠線 更新情報 本体BOX */
  border: solid 2px lightsalmon /* #ffb03f */;
  border-radius: 5px;
  padding: 0.7em 0.5em 0.7em 0.5em;
  position: relative;
  /* margin-top: -1.75em; */ /* 重なり量の指定 */
}

#for-force-margin {
  margin-top: -0.4em;
} /* 重なり量の指定 */


#update-body-block ul li { /* リスト(年月)の各行 */
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-top: dashed 1px silver;
  list-style-type: none!important;
}

#update-body-block ul li:first-of-type { /* リストの先頭行 */
  border-top: none;
}

#update-body-block ul li:before { /* リスト(年月)行先頭のchevron-circle-right */
  font-family: FontAwesome;
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からアイコンまで*/
  color: #55acef /* dodgerblue */ /* #ffb03f */; /*アイコン色*/
}

.content-update-body-block:before { /* 文章の前のhand-right疑似要素の装飾 */
  font-family: FontAwesome;
  content: "\f0a4";/* hand-right */
  position: absolute;
  left : 1.5em; /*左端からアイコンまで*/
  color: lightsalmon;
}

.content-update-body-block {
  padding-left: 3em;
  padding-right: 1em;
}

#update-body-block ul .color-lightsalmon { /* 色指定 */
  color: lightsalmon;
}

/* --------------------トップページ ピックルボールとは----------------------- */

.whatispb ul { /* 枠線 */
  border: solid 2px lightsalmon /* #ffb03f */;
  border-radius: 5px;
  padding: 0 0.5em;
  position: relative;
}

.whatispb ul li { /* リストの各行 */
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}

.whatispb ul li:last-of-type { /* リストの最終行 */
  border-bottom: none;
}

.whatispb ul li:before { /* リスト先頭のchevron-circle-right */
  font-family: FontAwesome;
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #55acef /* dodgerblue */ /* #ffb03f */; /*アイコン色*/
}

/* --------------------トップページ ピックルボールが人気な理由---------------- */

.whypbispopular ul { /* 枠線 */
  border: solid 2px lightsalmon /* #ffb03f */;
  border-radius: 5px;
  padding: 0 0.5em;
  position: relative;
}

.whypbispopular ul li { /* リストの各行 */
  line-height: 1.5;
  padding: 0.5em 0em 0.4em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}

.whypbispopular ul li:last-of-type { /* リストの最終行 */
  border-bottom: none;
}

.whypbispopular ul li:before { /* リストのFontAwesome */
  font-family: FontAwesome;
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #55acef /* dodgerblue */
}

.whypbispopular ul li span { /* リスト中のspanタグ "コートが小さい"行 */
  padding: 0.4em 0 0 0;
}

.whypbispopular ul li i { /* リスト中のiタグ "プレイが続き易い"行 */
  padding: 0.4em 0 0 0;
}

.whypbispopular .color-lightsalmon { /* 色指定 */
  color: lightsalmon;
}

/* ------------ピックルボールの特徴ページ コートサイズの比較------------------ */

#confirmation-before-attend-practice .body-block-padding-1em {
  padding-left: 1em;
}

#confirmation-before-attend-practice .body-block-padding-2em {
  padding-left: 2em;
}

/* ------------ピックルボールの特徴ページ コートサイズの比較------------------ */

.picture-of-both-courts {
  color: #55acef /* dodgerblue */
}

.compare-court-size {
  position: relative;/*相対位置*/
  padding-left: 1.5em;/*アイコン分のスペース*/
  line-height: 1.5;/*行高*/
  color: black;/*文字色*/
}

.compare-court-size:before {
  font-family: "FontAwesome";/*忘れずに FontAwesome 4*/
  content: "\f0a7";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
}
.compare-court-size:before {
  color: lightsalmon;
}

/* ------------------------basic-categoryページ-------------------------- */

.basic-category #premise:before {
    font-family: FontAwesome;
    content:"\f14a";
    font-size: 1em;/*サイズ*/
    padding-right: 0.4em; /* 文字との間隔 */
    color: #55acef /* dodgerblue */
}

/* --------------------------パドルの握り方ページ------------------------- */

/*
#id-a-manner-of-gripping-a-paddle ol { 枠線
  border: solid 2px lightsalmon;
  border-radius: 5px;
  padding: 0.7em 0.7em 0.7em 2em;
}
*/

#id-a-manner-of-gripping-a-paddle ol {
  border: solid 2px lightsalmon;
  border-radius: 5px;
  padding: 0.7em 0.7em 0.7em 2em;
}


#id-a-manner-of-gripping-a-paddle ol li {
  padding-top:0.4em; /* 箇条書き文同士の間隔を調整 */
  padding-bottom:0.4em; /* 箇条書き文同士の間隔を調整 */
  line-height: 1.5; /* 箇条書きの文どうしの行間を調整 */
}

/* ---------------------------------------------------------------------- */

/* -------------------ピックルボールとテニスの類似性ページ------------------ */

#id-similarity-of-pickleball-and-tennis ol { /* 枠線 */
  border: solid 2px lightsalmon;
  border-radius: 5px;
  padding: 1em 1em 1em 2em;
}

#id-similarity-of-pickleball-and-tennis ol>li {
  line-height: 1.5;
  padding-top: 0.7em;
}

#id-similarity-of-pickleball-and-tennis ol ul li {
  line-height: 1.5;
}

#id-similarity-of-pickleball-and-tennis ol ul li p {
  padding-left: 1em;
}

#id-similarity-of-pickleball-and-tennis ol ul #throat-line {
  position: relative;
  padding-left: 1.5em;/*アイコン分のスペース*/
}

#id-similarity-of-pickleball-and-tennis ol ul #throat-line:before {
  font-family: "FontAwesome";/*忘れずに FontAwesome 4*/
  content: "\f0a6";/*アイコンのユニコード*/
  position: absolute;
  font-size: 1.3em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: lightsalmon
}

/* ------------------ストロークに適したパドルの握り方ページ----------------- */

#suitable-gripping-for-forehand-stroke .bold-13em {
  font-weight: bold;
  font-size: 1.3em;
}

#suitable-gripping-for-forehand-stroke .block-left-pad-1em {
  padding-left: 1em;
}

#suitable-gripping-for-forehand-stroke .block-left-pad-2em {
  padding-left: 2em;
}

/* ---------------------------------------------------------------------- */


/*
.main {
    opacity: 0.82;
}
*/

/*
.sidebar { */
    /* background-color: transparent; */
    /* background: none; */ /*背景色を解除*/
/*    opacity: 0.82;
}
*/

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

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

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

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