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

/************************************
** 子テーマ用のスタイルを書く
************************************/

//*アマゾン商品リンクボックス*//

/*商品名を調整*/
.product-item-title{
  text-align:left;/*商品名を左詰め*/
	font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}

/*商品名リンクを調整*/
.product-item-title-link{
  color:#555;/*商品リンクの文字色を変更*/
		font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  text-decoration:none;/*商品リンクの下線を消す*/
  font-weight:bold ;/*商品名を太字に変更*/
}

/*商店名を調整*/
.product-item-maker{
  text-align:left;/*商店名を中央寄せ*/
  font-size:90%;/*文字の大きさを調整*/
}
/*reviewを調整*/
.product-item-review-link{
  text-align:left;/*商店名を左寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
}
/*価格文章を調整*/
.product-item-price{
  text-align:left;/*価格文書を左寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
  margin-top:-.5em;/*価格文章を表示した時の文字位置の調整*/
  margin-bottom:.5em;/*価格文章を表示した時の文字位置の調整*/
}

/*価格の色を黒に*/
.item-price{
  color:#555;/*金額を黒字に変更*/
}
.amazon-item-box { /*Amazonのボックス用コード*/ 
	  width: 100%;
    border: 2px solid #f6b340; /*ボーダーの色をつける*/
    background: #fff; /*背景色をつける*/
	border-radius:5px;/*角を丸くする*/
}
.shoplinkamazon a {
    border: 2px solid #f6aa6c;
	  background: #f6aa6c;
		font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
    color: #fff;
    transition: .4s;
}
.shoplinkamazon a:hover {
	background: none;
    color: #f6aa6c;
    opacity: 1;
}
.shoplinkrakuten a {
    border: 2px solid #61b98b;
	background: #61b98b;
		font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	  color: #fff;
    transition: .4s;
}
.shoplinkrakuten a:hover {
   	background: none;
    color: #61b98b;
    opacity: 1;
}
.shoplinkyahoo a {
    border: 2px solid #CAA846;
		background: #CAA846;
		font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	  color: #fff;
    transition: .4s;
}
.shoplinkyahoo a:hover {
    background: none;
    color: #CAA846;
    opacity: 1;
}
.blogcard-label{
	 font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	 font-weight:bold
}

/*楽天商品リンクボックス*//

/*商品名を調整*/
.product-item-title{
  text-align:left;/*商品名を左詰め*/
	font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}

/*商品名リンクを調整*/
.product-item-title-link{
  color:#555;/*商品リンクの文字色を変更*/
		font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  text-decoration:none;/*商品リンクの下線を消す*/
  font-weight:bold ;/*商品名を太字に変更*/
}

/*商店名を調整*/
.product-item-maker{
  text-align:left;/*商店名を中央寄せ*/
  font-size:90%;/*文字の大きさを調整*/
}
/*reviewを調整*/
.product-item-review-link{
  text-align:left;/*商店名を左寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
}
/*価格文章を調整*/
.product-item-price{
  text-align:left;/*価格文書を左寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
  margin-top:-.5em;/*価格文章を表示した時の文字位置の調整*/
  margin-bottom:.5em;/*価格文章を表示した時の文字位置の調整*/
}

/*価格の色を黒に*/
.item-price{
  color:#555;/*金額を黒字に変更*/
}
.rakuten-item-box { /*rakutenのボックス用コード*/ 
	  width: 100%;
    border: 2px solid #f6b340; /*ボーダーの色をつける*/
    background: #fff; /*背景色をつける*/
	border-radius:5px;/*角を丸くする*/
}
.shoplinkamazon a {
    border: 2px solid #f6aa6c;
	  background: #f6aa6c;
		font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
    color: #fff;
    transition: .4s;
}
.shoplinkamazon a:hover {
	background: none;
    color: #f6aa6c;
    opacity: 1;
}
.shoplinkrakuten a {
    border: 2px solid #61b98b;
	background: #61b98b;
		font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
    transition: .4s;
}
.shoplinkrakuten a:hover {
   	background: none;
    color: #61b98b;
    opacity: 1;
}
.shoplinkyahoo a {
    border: 2px solid #CAA846;
		background: #CAA846;
		font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; 
   color: #fff;
    transition: .4s;
}
.shoplinkyahoo a:hover {
    background: none;
    color: #CAA846;
    opacity: 1;
}

	/************************************
** SNSボタンのカスタム
************************************/
.widget-above-related-entries-title.main-widget-label{
	display: none;
}
.sns-follow-buttons {
  justify-content: center;
}
.sns-follow {
  margin: 0 0 24px 0;
}
.sns-follow-buttons a {
  border-radius: 50%;
  width: 50px; /*ボタンの横の大きさ*/
  height: 50px; /*ボタンの縦の大きさ*/
  font-size: 20px; /*アイコンのサイズ*/
  margin: 0 6px; /*ボタン同士の間隔*/
  background: #ef7b51;
}
/************************************
** カテゴリー別アーカイブページ
************************************/
/*カテゴリー毎アーカイブページのタイトル*/
.archive-title :before {
  display: none;
}
.archive-title {
  text-align: center;
}

/************************************************
 モバイル用メニューを変更
*************************************************/
/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #f5efe9;
	color: #382a1f;
        font-family: "Yu Gothic", sans-serif;
}

.logo-menu-button.menu-button{
	background-color: #f5efe9;
}
.mobile-menu-buttons {
font-family: "Yu Gothic", sans-serif; 
}

/************************************************
 全体のカスタム
*************************************************/

/* ウィジェットの人気記事のフォントを変更 */
.popular-entry-card-title.widget-entry-card-title.card-title {
		font-family: YuGothic, sans-serif ;
	  font-size:90%;/*文字の大きさを調整*/
}

/* ウィジェットのおすすめ記事のフォントを変更 */
.navi-entry-card-title.widget-entry-card-title.card-title {
		font-family: YuGothic, sans-serif ;
	  font-size:90%;/*文字の大きさを調整*/
}
/* カルーセル記事のフォントを変更 */
.carousel-entry-card-title{
		font-family: YuGothic, sans-serif !important;
}
/* ボタンのフォントを変更 */
.customize-unpreviewable{
	font-family: "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  text-align: center;
  font-size: 20px;
		}
/*トップへ戻るボタン*/
.go-to-top {
  right: 50px; /*右から20px*/
  bottom: 55px; /*下から55px*/
}

.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*ホバー時*/
.go-to-top-button:hover {
  color: #333; /*アイコンフォントの色*/
  background-color:#CAA846; /*背景色*/
}
.column-narrow .content-in {
	width: 700px;
}
/*記事中ではヘッダーを非表示*/
.single #header-container {
		display: none;
	}
/*アピールエリア*/
.appeal .appeal-in {
	width: 100%;
	background-color: rgba(0, 0, 0, .0);
}

.appeal-content {
	background-color: transparent;
}
.appeal-title {
	color: #fff;
}

.appeal-content .appeal-button {
	color: #fff;
	font-family:"Yu Gothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  letter-spacing:0.2em;
}
/*ピックアップ*/
.bct-pickup .blogcard-label{
  background-color:#CAA846;
	 font-family: "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	 font-weight:bold
}
@media screen and (max-width: 480px){
.bct-pickup .blogcard-label{
		font-size:9px!important; 
　　　　　　　　　}
}

.bct-together .blogcard-label{
  background-color:#CAA846;
	 font-family: "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	 font-weight:bold
}
@media screen and (max-width: 480px){
.bct-pickup .blogcard-label{
		font-size:9px!important; 
　　　　　　　　　}
}

/*ブログカードのカスタム*/
.blogcard{
	border: 2px solid #ef7b51 !important;
         background: #fcf3ec
         
}
.blogcard-wrap:hover{
	background: transparent;
	opacity: 0.5;
}

.blogcard-title{
         font-family: "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	color: #61b98b
		
}
.blogcard-snippet{
	font-family: "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	margin-top: 2%;
	font-size:  0.7rem
}
.blogcard-domain{
	display: none
}
.blogcard-favicon{
	display: none
}
/*ブログカードの横幅を広げる */
.blogcard-wrap {width: 100%;}

/*ナビゲーションメニューホバーで色変更*/
#navi .navi-in a:hover{
	color: #ffffff!important;
	background: #ef7b51;
	transition: all 0.5s ease;
}
/*画像選択時、拡大する*/
main .card-thumb{
	overflow:hidden;
}
main .card-thumb img{
	 transition-duration: 0.5s;
}
main .card-thumb img:hover{
	transform: scale(1.2);
  transition-duration: 0.5s;
}
.wpcf7 input[type="submit"] ,
.pushbutton-wide{
	background-color: #ef7b51;
}
/*記事のタイトル表示*/
.entry-title {
	text-align: center;
}
h1.entry-title{
  font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  text-align: center;
  font-size: 26px;
　　　letter-spacing:0.5em;
	 margin: 50px 0px
		}
@media screen and (max-width: 480px){
	h1.entry-title{
		font-size:16px; 
	　　　letter-spacing:0.5em;
　　　　　　　　　}
}
/*エントリーカードのフォントを小さく、書体も変更*/
.entry-card-title.card-title{
  color: #382a1f;
  text-align: left;
  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 14px !important;
}
@media screen and (max-width: 834px) {
.entry-card-title.card-title{
  color: #382a1f;
  text-align: left;
  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 14px !important;
}
}
@media screen and (max-width: 414px) {
.entry-card-title.card-title{
  color:  #382a1f;
  text-align: left;
  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 13px !important;
}
}
@media screen and (max-width: 375px) {
.entry-card-title.card-title{
  color: #382a1f;
  text-align: left;
  font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 13px !important;
}
}
/*関連記事の背景を白く*/
.related-entry-card-wrap {
	background-color: #fff;
}
	/************************************
** タグクラウドの表示
************************************/
.tag-caption {
 background-color: #f6f6f6;
 font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
 font-size: 14px!important; /*フォントサイズ*/
 color: #222;
 border-radius: 20px;
 padding: 6px 10px;
white-space: nowrap;　/*タグ名称の途中改行しない*/
}

.fa-tag::before{
display:none!important;
}

/*かんたんリンク*/
.easyLink-box {
    border: 2px solid #ef7b51!important;
	border-radius:5px;/*角を丸くする*/
    min-height: 200px;
}
.easyLink-box {
  background: #fff1e5!important; 
}
@media screen and (max-width: 480px) {
.easyLink-box {
    margin: 10px auto 0 !important;
    max-width: 280px;
}
}
/*かんたんリンク画像*/
@media screen and (min-width: 481px) {
.easyLink-img {
    width: 180px !important;
    height: auto !important;
    min-height: 160px !important;
    margin: 0 !important;
}
}
@media screen and (max-width: 480px) {
.easyLink-img {
    overflow: hidden !important;
    height: 180px !important;
}
}
.easyLink-img-box {
    position: absolute !important;
    width: 160px !important;
    height: 160px !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 auto !important;
}
.easyLink-img-box span > img {
    max-width: 160px !important;
    max-height: 160px !important;
    width: auto !important;
}
.easyLink-img-box > a > img {
    width: 30px !important;
    height: 30px !important;
}
@media screen and (max-width: 480px) {
.easyLink-img-box {
    width: 226px !important;
	}
}
/*かんたんリンク右側*/
@media screen and (min-width: 481px) {
.easyLink-info {
    width: calc(100% - 180px) !important;
}
}
.easyLink-info-name {
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}
.easyLink-info-name a {
    color: #61b98b !important;
	 font-size: 20px !important;
	  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	  letter-spacing:0.1em;
}
@media screen and (max-width: 480px) {
.easyLink-info-name a {
	font-size: 15px !important;
	}
}
.easyLink-info-maker, .easyLink-info-model {
    font-size: 13px !important;
    color: #999;
}
@media screen and (max-width: 480px) {
.easyLink-info-maker, .easyLink-info-model {
	font-size: 9px !important;
	}
}
.easyLink-info-btn a {
    font-size: 15px !important;
	font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
    line-height: 1.5 !important;
    width: auto !important;
    margin: 5px !important;
    padding: .5em 1em !important;
	border-radius: 20px!important;
}

@media screen and (min-width: 704px) {
.easyLink-info-name {
    font-size: 16px !important;
}
.easyLink-info-btn {
    margin: 5px -5px 0 !important;
}
.easyLink-info-btn a {
    font-size: 10px !important;
}
}

/*かんたんリンク大型*/
@media screen and (min-width: 704px) {
.easyLink-box:not(.easyLink-size-s) .easyLink-img {
    width: 260px !important;
    min-height: 240px !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-img-box {
    width: 240px !important;
    height: 240px !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-img-box span > img {
    max-width: 240px !important;
    max-height: 240px !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-info {
    width: calc(100% - 280px) !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-info-name {
    font-size: 18px !important;
}
.easyLink-box:not(.easyLink-size-s) .easyLink-info-btn a {
    width: calc(50% - 10px) !important;
    padding: 10px !important;
}
}

/************************************
** パンくずリスト
************************************/
	
/*パンくずリスト中央に */
#breadcrumb {
  text-align: center;
}
/* 「ホーム」を消す */
#breadcrumb.breadcrumb .breadcrumb-home a span{
	font-size: 0px;
}

/* 「HOME」を挿入 */
#breadcrumb.breadcrumb .breadcrumb-home a span::before{
	font-size: 13px;
	content: "HOME";
}

/* ホームのアイコンを消す */
#breadcrumb.breadcrumb .breadcrumb-home .fa.fa-home.fa-fw{
	display: none;
}
/* カテゴリのアイコンを消す */
#breadcrumb.breadcrumb .fa.fa-folder.fa-fw{
	display: none;
}
/*パンくずリストに背景色 */
.breadcrumb a{
background: #99c7ec;/*背景の色*/
color:#ffffff;/*文字色*/
border-radius:10px;/*角を丸くする*/
padding:2px 10px;/*内側の余白*/
font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
font-weight:bolder;/*文字を太く*/
}

/* カテゴリのアイコンを消す */
#breadcrumb.breadcrumb .fa.fa-folder.fa-fw{
	display: none;
}
@media screen and (max-width: 480px) {
#breadcrumb {
font-size: 10px;
}
#breadcrumb.breadcrumb .breadcrumb-home a span::before{
font-size: 10px;
}
}
/************************************
** エントリーカード
************************************/
/*ニューエントリーカードのフォントを小さく、書体も変更*/
.new-entry-card-title {
  color: #382a1f;
  text-align: left;
  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 14px !important;
}

/*エントリーカード横並びに*/
.widget-entry-cards.card-large-image .a-wrap {
width:32.8%;
height:auto;
display: inline-flex;
}

.widget-entry-cards.not-default figure img {
padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}

@media screen and (max-width: 834px) {
.new-entry-card-title {
  color: #382a1f;
  text-align: left;
  font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 13px !important;
}
}

@media screen and (max-width: 820px) {
.widget-entry-cards.card-large-image .a-wrap {
width:32.8%;
height:auto;
display: inline-flex;
}
}

@media screen and (max-width: 768px) {
.widget-entry-cards.card-large-image .a-wrap {
width:32.8%;
height:auto;
display: inline-flex;
}
}
@media screen and (max-width: 684px) {
.widget-entry-cards.card-large-image .a-wrap {
width:32.5%;
height:auto;
display: inline-flex;
}
}

@media screen and (max-width: 414px) {
.widget-entry-cards.card-large-image .a-wrap {
width:32%;
height:auto;
display: inline-flex;
}
.new-entry-card-title {
  color:  #382a1f;
  text-align: left;
  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 13px !important;
}
}
@media screen and (max-width: 375px) {
.widget-entry-cards.card-large-image .a-wrap {
width:auto;
display: inline-flex;
}
.new-entry-card-title {
  color: #382a1f;
  text-align: left;
  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 13px !important;
}
}
/************************/
/* 固定ページの不要情報を非表示 */
/************************/
.page .date-tags, /*投稿日・更新日*/
.page .author-info, /*投稿者情報*/
.page .eye-catch-wrap { /*アイキャッチ*/
display: none;
}
.page .entry-title{
  display: none;
}
/************************************
** 目次
************************************/
	/*目次*/
.toc {
  border: 2px solid #fff1e5!important; /*全体の枠線の色*/
  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 16px; /*フォントサイズ*/
  line-height: 1.5; /*行の高さ指定*/
  padding: 0;
  margin-top: 3em; /*目次上の空間*/
  margin-bottom: 1em; /*目次下の空間*/
  min-width:100%; /*目次横幅*/
  border-radius: 6px;/*角丸コーナー*/
  background: #fff1e5; /*背景カラー*/
}
@media screen and (max-width: 1030px){
  .toc {
    min-width:100%; /*モバイル時の目次横幅*/
  }
}
@media screen and (max-width: 480px){
  .toc a{
    font-size: 14px; /*フォントサイズ*/
  }
}

.toc-title {
  background: #61b98b; /*目次タイトル背景カラー*/
  color: #fff; /*目次タイトルフォントカラー*/
	font-family: YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-size: 18px; /*目次タイトルフォントサイズ*/
  text-align: center; /*目次タイトル中央寄せ*/
　　　letter-spacing:0.5em;
  padding: 6px 16px;
  font-weight: bolder; /*文字強調*/
}

.toc-content {
  font-size: 16px; /*目次タイトルフォントサイズ*/
  padding: 30px;
}
.toc-content li a:hover {
  text-decoration:none; /*選択時装飾無し*/
  background:#f9c5b1; /*選択時の背景カラー*/
	 color: #fff;
  transition: all 0.5s ease; /*ふわっと変化するアニメーション*/
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
  margin-top: 0.6em; /*h2の上側の空間*/
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
  border-bottom: 1px solid #bfbab4; /*h2のアンダーラインの太さとカラー*/
  font-weight: bold;
}
.toc ul li a, .toc ol li a {
  display: block;
  border-bottom: 1px dotted #61b98b; /*h3～h6のアンダーラインの太さとカラー*/
  margin-left: -20px; /*アンダーライン調整*/
  padding-left: 20px; /*アンダーライン調整*/
}

/************************************
** 見出しのカスタム
************************************/
/* 見出しリセット */

/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

/*h2見出しを変更*/
.article h2 {
  padding: 1em;
  border: 3px solid #9ed5db;
  color: #ffffff;/*文字色*/
  font-family:YuGothic, Yu Gothic, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	letter-spacing:0.5em;
  background-color: #9ed5db
;border-radius: 5em .8em 8em .5em/.9em 2em .7em 1em;
}

@media screen and (max-width: 480px){
.article h2{
  font-size:16px; 
  padding: 1.2rem 1rem;
　　　　　　　　　}
}

/*h3見出しを変更*/
.article h3 {
	font-family: YuGothic, sans-serif;
	letter-spacing:0.2em;
  position: relative;
  padding: 1.2rem 0.5rem;
}

.article h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* −−ボタンを浮かして影をつける−−*/
 .btn{
 box-shadow: 0 7px 0px #909090 ;
 }
/*−−−ボタンが重なったときに沈む−−−*/
 .btn:hover{
 box-shadow: 0 1px 0 #909090 ;
 transform: translateY(6px);
 -webkit-transform: translateY(6px);
 }
/*−−−カーソルを外したときに元に戻す−−−*/
 .btn{
 transition:.3s ease-in-out;
 }

/* −−囲みボタンを浮かして影をつける−−*/
.btn-wrap>a {
 box-shadow: 0 7px 0px #909090 ;
 }
/*−−−囲みボタンが重なったときに沈む−−−*/
.btn-wrap>a:hover{
 box-shadow: 0 1px 0 #909090 ;
 transform: translateY(6px);
 -webkit-transform: translateY(6px);
 }
/*−−−囲みカーソルを外したときに元に戻す−−−*/
.btn-wrap>a{
 transition:.3s ease-in-out;
 }

/************************************
** モバイル
************************************/
/*モバイルフッターヘッダーの色変更*/
.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .menu-button:hover,
.mobile-footer-menu-buttons .menu-button a,
.navi-menu-content,
.menu-drawer a,
.menu-drawer a:hover{
  background-color: #61b98b;
  color: white;
}
.main{
    background-color:  #ffffff;
}


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




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

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