@charset "UTF-8";

/*!
Theme Name: SunSilk
Description: SunSilk子テーマ
Theme URI: https://sunsilk.okinawa/
Author: サンシルク
Author URI: 
Template:   cocoon-master
Version:    1.1.3
*/

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

.post-14 .date-tags,
.post-16 .date-tags,
.post-37 .date-tags,
.post-3 .date-tags,
.post-11 .date-tags,
.post-334 .date-tags,
.post-414 .date-tags,
.post-440 .date-tags,
.post-2.date-tags {
display: none;
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1.5px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.5s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*選択中のカテゴリーにアンダーライン*/
.current-menu-item:not(:first-child):after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1.5px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
}

/*CSSボタンデザイン*/
/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.3;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #6E6E6E;
  border-radius: 0.5rem;
}

a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 1.5px solid #abb8c3;
  border-radius: 0.5rem;
}

a.btn-border-shadow:hover {
  padding: calc(1.5rem - 6px) 3rem;
  color: #000000;
}

a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}

a.btn-border-shadow--color {
  border-radius: 0;
  background: #EBFFE2;
}

a.btn-border-shadow--color:before {
  border-radius: 0;
}


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

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

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

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#90C31F;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
display: block;
text-align: center;
font-weight: bold;
font-size:1.4em;
background: white;
color:#545454;
margin-top: 0.8em;
margin-bottom:1em;
padding-bottom: 16px;
border-bottom:3px dotted #90C31F; /*点線の色変更はこちら*/
content: "メニュー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}