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

:root {
    --keyColor:#dd046e;
}

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

body{
 overflow-x:hidden;
}

.wrap{
 background:#fff;
}

.main{
 padding-left:19px;
 padding-right:19px;
}

img{
 vertical-align:bottom;
}

.header{
 padding-bottom:1em;
}

.textwidget p{
	margin-bottom:1em;
}

.tagline{
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding:5px 1vw 5px 1em;
  color:#fff;
  background: var(--keyColor);
  font-size: 14px;
  margin-bottom:15px;
  text-align:right;
  box-sizing:border-box;
 }

ul#menu-header-top-navi{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-end;
    list-style:none;
}

ul#menu-header-top-navi a, ul#menu-header-top-navi{
 color:#fff;
 text-decoration:none;
 padding:0 .5em;
}

ul#menu-header-top-navi a:before{
 	font-family: "FontAwesome";
	content: '\f0da';
	margin-right:5px;
}

.mb_30{
 margin-bottom:30px;
}

/************************************
** 記事ページ
************************************/

h1.entry-title{
  border-left:8px solid var(--keyColor);
  padding:.5em .5em .5em 1.2em;
  margin-bottom:.5em;
  line-height:1.15;
}

.sidebar h2, .sidebar h3, .sec-inner h2{
  color:#fff;
  background: var(--keyColor);
  padding:.5em;
  font-size:1.1rem;
}

.wp-block-search__label{
 display:none;
 }

.tagcloud a{
 font-size:15px;
 border-radius:.65em;
 margin-right:5px;
}

.sidebar-scroll p:not(:last-child){
 margin-bottom:1em;
}

.sns-share-message{
 display:none;
}

.text_center{
 text-align:center;
}

/************************************
** 見出し
************************************/

.entry-content h2{
 padding-bottom:.5em;
 padding-top:0;
 border-bottom:5px solid var(--keyColor);
 background:transparent;
}

.entry-content h3{
 padding:0 0 0 .75em;
 border:none;
 border-left:8px solid var(--keyColor);
 background:transparent;
}

/************************************
** 目次
************************************/

.toc{
 width:100%;
 background:#fafaf9;
 }

.toc a{
color:#0645ad;
}

.toc-title{
 font-weight:bold;
 font-size:1.2rem;
 }

.toc-checkbox:checked+.toc-title::after, .toc-title::after{
 font-weight:normal;
}

.copyright{
 background: var(--keyColor);
 text-align:center;
 color:#fff;
 font-size:0.8rem;
 padding:1em;
 margin:auto;
}

.footer{
 padding:0 0 2em;
}

.footer-bottom-logo{
 position:relative;
 float:none;
}

.footer-bottom{
     display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
	align-items:center;
}

.footer-bottom-content{
 float:none;
 text-align:center;
}

.navi-footer-in > .menu-footer{
 width:100%;
     justify-content: center;
 margin-top:1em;
 }

.navi-footer-in > .menu-footer li{
 width:auto;
 padding:0 .5em;
 }

a.contact{
background-color: #f0f0f0;
padding: 20px 50px;
text-align: center;
display: inline-block;
margin: 0 0 0 auto;
color: #333;
text-decoration: none;
font-weight: 500;
}
a.newcustomer{
background-color: #f0f0f0;
padding: 20px 50px;
text-align: center;
display: inline-block;
color: #333;
text-decoration: none;
font-weight: 500;
}

/************************************
** 用途・シーン
************************************/

.bg-wh{
 background:#fff;
 padding: 1.5% 19px;
}
.wrap.sec-inner.bg-wh{
  padding: 20px 0;
  width: 100%;
  background-color: #dd046e;
}
.footer .sec-inner h2{
  text-align:center;
  font-size:1.4rem;
  padding:10px 0 20px;
}
.footer .sec-inner h2,
.footer .sec-inner .flex{
  max-width:1256px;
  margin:0 auto;
}

.flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
}
.flex.reverse{
    flex-direction: row-reverse;
}

.flex .items{
  width:calc(100% / 5.5);
  padding:1em 1em;
 }


.flex .items .title{
font-size: 17px;
    margin-top: 0.3em;
    font-weight: bold;
}

.flex .items .title.min{
 font-size:14px;
 line-height:1.35;
}
.flex .items i{
  font-size:4rem;
  margin:15px 0;
}

.flex .items.border{
  background-color:#fff;
  border-radius:5px;
  color:#dd046e;
}

.flex .items img{
 margin:.5em 0;
}

.text-center {
    text-align: center;
}

.flex .items p:last-child{
 margin-bottom:0;
 font-size:12px;
}
.flex .items p:last-child b{
  display:block;
  margin-top:5px;
  border:1px solid #dd046e;
  text-align:center;
  padding:5px;
}

.rect-vertical-card .related-list{
  justify-content:flex-start;
}

.flex .banner{
	margin:1em 0;
	width:calc(98% / 2);
}

/************************************
** 画像とテキスト
************************************/

.flex.sec{
 margin:3em auto;
}

.flex .img, .flex .text{
 width:calc(98% / 2);
}
.eye-catch-wrap .eye-catch{
  margin:0 auto 20px;
}

@media screen and (max-width: 767px) {
	.flex .img, .flex .text, .flex .banner{
	  width:calc(100% / 1);
	 }

	.flex .img{
	 margin-bottom:1em;
	}

 }

@media screen and (min-width: 768px) {
	.sp_image{
	 display:none;
	}
}

/************************************
** リンクボタン
************************************/

.wp-block-search__button{
 font-size:15px !important;
}

a.Btn{
  background:#e93429;
  padding:.55em 1em;
  border-radius:2.46rem;
  color:#fff;
  text-align:center;
  display:inline-block;
  margin-right:1em;
margin-bottom:1em;
 box-shadow: 1px 2px 14px -5px rgba(0,0,0,0.6);
 text-decoration:none;
 }

a.Btn:hover{
 opacity:0.75;
 }

a.Btn::before{
  	font-family: "FontAwesome";
	content: '\f002';
	margin-right:.5em
 }

@media screen and (max-width: 767px) {

 a.Btn{
	 display:block;
	 margin:0 auto 1em;
	}

}

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

/*834px以下*/
@media screen and (max-width: 834px){
  
.logo-header img{
  width:200px;
}
 .navi-footer-in > .menu-footer{
  flex-flow:column;
 }
.navi-footer-in > .menu-footer li.menu-item {
    width: 80%;
    border:1px solid #454545;
    margin:.255em auto;
    border-radius:2px;
    padding:0px;
}
.navi-footer-in > .menu-footer li.menu-item {
 padding:10px;
}

.flex .items{
 width:calc(100% / 2.1);
 padding:.5em;
 margin:0 1% 10px;
 }
 .footer-bottom-logo{
   width:100%;
   text-align:center;
 }
 .footer-bottom-logo img{
   width:300px;
   height:auto;
 }
 a.newcustomer,a.contact{
  width:80%;
  margin:10px auto;
 }


}

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

}