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

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

/*コンタクトフォーム*/
.hissu{
	color:#E60033;
	
}

/* h をシンプルに */

/* 固定ページの記事タイトルh1は非表示 */

.page h1.entry-title{
 display:none;
}

/* 最初のh2だけトップマージンを0に（空白対策） */
.article h2:first-child {
margin-top:0px;
}

.home h2 {
padding-top:50px;
}
/* トップページ以外のh2要素のトップマージン */
body:not(.home) h2{
margin-top:70px;
}

.article h2 {
background-color: #f6f6f6;
font-weight: normal;
font-size: 27px;
}
/* ↑haikeiの色と連動させる*/

h2#h2haikei {
  background: #ffffff;
}

.article h3 {
  border-top: none;
  border-right: none;
  border-left: none;
  font-weight: normal;
  font-size: 24px;
}

.article h4 {
  border-top: none;
  border-bottom: none;
}

/* 背景色を横幅いっぱいに */
.haikei {
  background-color: #f6f6f6;
  margin: 0 calc((100% - 100vw) / 2);
  padding: 0 29px 1em;
}

/* 細い枠のボタン */

.buttontop a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  color: #777777;
  font-size: 18px;
  font-weight: 300;
  border: 1px solid #777777;
  text-decoration: none;
}

.buttontop a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #777777;
  border-right: 3px solid #777777;
  transform: rotate(45deg);
}

.buttontop a:hover {
  color: #333333;
  text-decoration: none;
  background-color: #eeeeee;
}

.buttontop a:hover::after {
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
}

/* トップページにはヘッダーを表示させない */
.home .logo-header{
  display: none;
} 

/* 固定ページの日付を表示させない */
.page .date-tags {
display: none;
}

/* フッターのリンクアンダーラインを非表示 */
.footer .widget a {
text-decoration: none;
}

/* フッターのタイトルの文字 */
.footer-title {
font-weight:normal;
text-align:center;
}

/* フッターのhrの色 */
.footer-widgets hr{
height: 1px;
background-color: #999999;
border: none;
color: #999999;
}

/* フッターのフォント */
.footer-widgets{
font-size:16px;
}

/* フッターのアイコンのセンタリング */
.footer-snsicon{
text-align:center;
}

.footer-widgets li {
list-style-type: none;
}

/* 画像マウスオーバー枠グレー */
.waku a img {border:1px solid #d2d2d2}
.waku a:hover img {border:1px solid #777777}


/* スライドにロゴ画像を重ねる */
.box{
  position: relative;
}
.top-left {
  position: absolute;
  top: 25px;
  left: 25px;
}

/* スライドにロゴ画像を重ねるのはトップページだけ */
body:not(.home) .top-left {
    display: none !important;
}

/* ヘッダーのロゴを左寄せ */
.logo{
	text-align:left;
}

/* 横線の立体感を取る */
hr {
  border: none;
}

/* コンセプトページのブランドタイトル（敏感肌の方を笑顔に、も使用）*/
.blandtitle{
	text-align:center;
	font-size:25px;
    margin: 0 auto;
    padding: 0;
}

/* 新着リストの表示整形 */

.new_lists {
  font-size: 14px;
  list-style-type : none;
  padding:5px 5px;
  border-bottom:1px solid #dddddd;	
}
.new_lists a{
  text-decoration:none;
  color: #333333;
}

.new_lists a:hover {
    border-bottom:1px solid #333333;
}

/* PCはセンター・スマホは左寄せ */

.pc_mobile_hyoji{
	text-align:center;
}

/* PCは表示しない・スマホタブレットは表示 その１*/
.phone_area{
  display:none;
}

/* スライダースマホはサイズを変える*/
.metaslider .slides img {
    width: 300px;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

/* タブレット・モバイルにヘッダーを表示させない */
.logo-header{
  display: none;
}
	
/* モバイルで左側のULのマージン（新着リスト限定） */
.article ul.new_listsoya{
    padding-left: 0px;
}

/* PCはセンター・スマホは左寄せ */
.pc_mobile_hyoji{
	text-align:left;
}

/* PCは表示しない・スマホタブレットは表示 その２ */
.phone_area{
 display:block;
}

/* フッター  */
.footer-widgets {
  display: block;
}

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