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

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

/* 下田追記 */

a.gs-textlink1 {
    font-weight: bold;
}

a.gs-textlink1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  font-weight: 900;
  color: #EA5404;
  margin-right: 5px;
  display: inline-block;
}

a.gs-textlink1[target="_blank"]:after {
  font-family: "Font Awesome 5 Free";
  content: "\f2d2";
  font-weight: 400;
  color: #043771;
  margin-left: 5px;
  display: inline-block;
}

/* 使い方
<a class="gs-textlink1" href="https://www.seitai-plus.com/blog/gymnastics/1744/">首、肩の体操・ストレッチを見る</a>
*/

.gs-hitokoto-box{
  background: rgba(255, 229, 178, 0.61);
  margin: 2em 0 1.5em 0;
  padding: 25px;
  border-radius: 10px;
}

.gs-hitokoto-box-circle1{
  font-size: 16px;
  line-height: 1.5;
  position: absolute;
  margin-top: -37px;
  font-weight: bold;
  color: #fff;
  background-color:#ffa726;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.gs-hitokoto-box-circle1:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#ffa726;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.gs-hitokoto-box-circle2:before{
  content: "";
  position: absolute;
  top: 100%;
  margin-left: -12px;
  border: 5px solid transparent;
  border-top: 10px solid #ffa726;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.gs-hitokoto-box-circle2{
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  margin-top: -37px;
  margin-left: 40px;
  font-weight: bold;
  color: #fff;
  background-color:#ffa726;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.gs-hitokoto-box-circle2:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#ffa726;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.gs-hitokoto-box p{
  margin: 0;
  padding: 0;
}

/* 使い方
<div class="gs-hitokoto-box">
<span class="gs-hitokoto-box-circle1">ひ</span><span class="gs-hitokoto-box-circle2">こ</span>
  <p>ここにテキスト</p>
</div>
*/

.gs-link-box-awasete {
	position: relative;
	margin: 2em 0 1.5em;
	padding: 16px 10px;
	border: 2px solid #df8182;
	background-color: #fffbf5;
}

.gs-link-box-awasete p:last-child {
margin-bottom: 0;
}

.gs-link-box-awasete::before {
	position: absolute;
	top: -13px;
	left: 10px;
	padding: 0 10px 0 26px;
	content: "あわせて読みたい";
	background-color: #df8182;
	border-radius: 10px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 25px;
}

.gs-link-box-awasete::after {
	position: absolute;
	top: -16px;
	left: 4px;
	width: 30px;
	height: 30px;
	background-color: #df8182;
	border-radius: 14px;
	line-height: 30px;
	text-align: center;
	content: "\f15c";
	font-size: 18px;
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	color: #fff;
}

/* 使い方
<p class="gs-link-box-awasete"><a href="https://www.seitai-plus.com/blog/foot/1019/">すねの外側の筋肉がだるい（痛い）！原因とストレッチを紹介</a></p>
*/

.gs-memo-box{
  margin: 1.5em 0;
  background-color: #fff9c4;
  border-radius: 10px;
  padding: .8em;
}

.gs-memo-box-title{
  font-size: 18px;
  font-weight: bold;
  color: #ffc107;
}

.gs-memo-box-title:before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f044";
  font-size: 17px;
  margin-right: 3px;
  vertical-align: middle;
}

.gs-memo-box p{
  margin: 0;
  padding: 0;
}

/* 使い方
<div class="gs-memo-box">
  <div class="gs-memo-box-title">memo</div>
  <p>ここにテキスト</p>
</div>
*/

.gs-infobox {
    margin: 1.5em 0;
    background-color: #F3FAFE;
    border-radius: 10px;
    padding: .7em 1em 1em;
}

.gs-infobox .gs-infobox-title {
    font-size: 18px;
    font-weight: bold;
    color: #87CEFA;
}

.gs-infobox-title:before {
    font-family: "Font Awesome 5 Free";
    content: "\f05a";
    font-weight: 900;
    font-size: 22px;
    margin-right: 5px;
}

.gs-infobox p {
  margin: 0;
  padding: 0;
}

/* 使い方
<div class="gs-infobox">
  <div class="gs-infobox-title">infomation</div>
  <p>ここにテキスト</p>
</div>
*/

a.gs-link-box-orange {
    display: block;
    border: solid 1px #F24C00;
    background-color: #F24C00;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    width: 500px;
    max-width: 80%;
    margin: 3rem auto 0;
    text-align: center;
    line-height: 1.4;
    text-decoration: none;
    padding: .8em;
    font-size: 1.3rem;
	-moz-transition: 0.3s;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

a.gs-link-box-orange:hover {
    background-color: #fff;
    color: #F24C00;
}

/* 使い方
<a class="gs-link-box-orange" href="https://www.seitai-plus.com/guide-seitai.html">足首の硬さを解消したい方はこちら<br>整体コースのご案内</a>
*/

.gs-title-box1 {
  margin: 3.5em 0 0;
  background-color: #fff3e0;
  border: 2px solid #ffa726;
}

.gs-title-box1-title {
  font-size: 16px;
  position: absolute;
  margin-top: -35px;
  margin-left: -2px;
  background-color: #ffa726;
  color: #fff;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 4px 10px;
}

.gs-title-box1 p {
  margin: 0;
  padding: 1em;
}

/* 使い方
<div class="gs-title-box1">
<div class="gs-title-box1-title">関連記事</div>
<p>
<a href="https://www.seitai-plus.com/blog/">整体コラム</a>
</p>
</div>
*/

.gs-cautionbox{
    margin: 1.5em 0;
    background-color: #ffebee;
    border-radius: 10px;
    padding: .7em 1em 1em;
}

.gs-cautionbox .gs-cautionbox-title{
    font-size: 18px;
    font-weight: bold;
    color: #ef5350;
    margin-bottom: 8px;
}

.gs-cautionbox-title:before{
    font-family: "Font Awesome 5 Free";
    content: "\f071";
    font-weight: 900;
    font-size: 22px;
    margin-right: 6px;
}

.gs-cautionbox p{
  margin: 0;
  padding: 0;
}

/* 使い方
<div class="gs-cautionbox">
    <div class="gs-cautionbox-title">注意</div>
    <p>
        体の改善を第一として施術にあたっておりますので、とにかく強くもんでほしいなど、体の状態を無視したご要望はお受けできません。<br>
        お客さまの体を第一に考えて施術しておりますので、ご了承ください。
    </p>
</div>
*/

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

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

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