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

/************************************
** 子テーマ用のスタイルを書く
************************************/
a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}
a{
margin:0;
padding:0;
text-decoration:underline;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
color:#0066ff;
}

.clearfix:after{
content:"";
display:block;
clear:both;
}
.home h1.entry-title {
	display:none;
}
.home #content {margin:0;}
.home #content-in {margin:0;}
.home .wrap {width: 100%;
 margin: 0 auto;}
#header-container .wrap {width: 100%;
 margin: 0 auto;}
.home #main {
padding:0;}
.header-container, .main, .sidebar, .footer {
    background-color: #FFF;
}
.header-container {
	height:60px;
}
.entry-content {
    margin-top: 0;
    margin-bottom: 3em;
}
.home article .inner {    width: 1000px;
    margin: 0 auto;}
.home .date-tags {
    line-height: 0;
    text-align: right;
    margin-bottom: 0;
}
.contact-btn {
    text-align: center;
    background: url(images/btn-bg.png) center top no-repeat #58b833;
    margin: 0;
    padding: 2% 0 3%;
		font-size:80%;
}
.contact-btn2 {
    text-align: center;
		font-size:80%;
    margin: 0;
    padding: 2% 0 3%;
}

.mainImg {
	background:url(images/main-bg.jpg) center top no-repeat ;
	    height: 830px;
	text-align:center;
	line-height:0;
}
.nayami {
    background: #58b833;
    text-align: center;
    padding: 3%;
    margin: 0;
}
.txt01 {
    background: #fffff7;
	margin:0;
}
.txt01 h2{
	text-align:center;
position: relative;
  padding: 1em !important;
background-image: linear-gradient(90deg, rgba(200, 234, 187, 1), rgba(231, 246, 184, 1));
	margin:0;
}
.txt01 h2:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 50%;
    border: 30px solid transparent;
    border-top: 30px solid #d1eeba;
    width: 0;
    height: 0;
	    background: transparent;
}
.jirei {
    background: #fffff7;
    padding-top: 5%;
}
.jirei h2 {
	margin:0 auto ;
	line-height:0;
}
.jirei01 {
	border-right:#44c64a 3px solid;
	border-left:#44c64a 3px solid;
border-bottom:#44c64a 3px solid;
	padding:3%;
	margin:0 auto 3%;
	background:#FFF;
}
.jirei01 ul,
.single .entry-content ul {
	background:#fdfeec;
	border:#58b833 2px solid;
	font-size:120%;
	padding:2% 3%;
	list-style:none;
	border-radius: 10px;
	margin-top:2%;
}
.jirei01 li,
.single .entry-content ul li { 
font-weight:bold;
	    background: url(images/maru1.png) 0 5px no-repeat;
	padding-left:35px;
}
.jirei01 li strong,
.single .entry-content ul li strong {
font-weight:bold;
color:#e94f64;	
}
.chigai{
	background:#58b833;
	padding:100px 2%;
	margin-bottom: 0;
}
.chigai h2{
	margin-bottom:0;
	line-height:0;
}
.chigai01 {
	background:#FFF;
	border:#eeff9d solid 3px;
	padding:2% 3%;
	border-radius:7px;
		margin-bottom:3%;
}
.chigai01 img.alignright {
	margin-top:-80px;
	
}
.chigai01 h3 {
	border:0!important;

}
.toku {
	background:#f3fae8;
		padding:100px 2%;
		margin-bottom: 0;
}
.toku h2{
	margin-bottom:0;
	line-height:0;
}
.toku01,
.product01{
	background:#FFF;
	border:#58b833 solid 3px;
	padding:3%;
		margin-bottom:3%;
}
.toku01 h3 {
	border:0!important;
}

.product {
	background:url(images/bg01.gif) center top repeat ;
	padding:100px 2%;
		margin-bottom: 0;
}
.product h2,
.flow h2,
.qanda h2 {
	text-align:center;
}
.product01 h3 {
	border:0!important;
}
.product01 strong {
color:#14ab39;
}
.product01 img.alignright {
    display: inline-block;
    margin: 0;
}
.test {
		padding:100px 2%;	
}
.flow {
	background:#58b833;
	color:#FFF;
		padding:100px 2%;
		margin: 100px auto;
}
.qanda {

		padding:100px 2%;
		margin: 100px auto;
}
.flow_design {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow01 {
  padding-left: 0 !important;
  border-bottom: solid 1px #FFF;
}

.flow01 > li {
  list-style-type: none;
  display: flex;
  padding: 20px 0;
  border-top: solid 1px #FFF;
}

.flow01 > li dl dt {
  font-size: 1.2em;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 10px;
}

.flow01 > li .icon01 {
  line-height: 1;
  font-size: 2em;
  font-weight: bold;
  color: #fcff00;
  text-align: center;
  width: 70px;
  position: relative;
  margin-top: 0;
}

.flow01 > li .icon01::before {
  content: 'STEP';
  font-size: 0.3em;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 1px;
}

.flow01 > li .icon01::after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 40px);
  background-color: #FFF;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  margin: auto;
}

.flow01 > li dl dd {
  margin: 0;
}

.flow01 > li dl {
  width: calc(100% - 70px);
  margin-top: 0.8em;
}

.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa {
	border-top: 1px solid #1b2538;
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 1px;
	color: #1b2538;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1.6;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2em 1em 1em;
	cursor: pointer;
	border-bottom: 1px solid #1b2538;
}
.cp_qa .cp_actab label:hover {
	color: #00838F;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.5s ease;
	        transition: max-height 0.5s ease;
	color: #000;
	background: #f5ffea;
	padding:0 2% 0 5%;
}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em;
}
.cp_qa .cp_actab .cp_actab-content strong {
	color:#fc0000;
	font-weight:bold;

}
/* 質問を開いた時の仕様 */
/* --アイコン */
.cp_qa .cp_actab input:checked ~ label {
	color: #7fc1c6;
}
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab label::after {
	line-height: 1.6;
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	width: 3em;
	margin-top: -12.5px;
	-webkit-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	text-align: center;
}
.cp_qa .cp_actab input[type=checkbox] + label::after {
font-family: 'FontAwesome';
  content: '\f0d7';
}
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}


.company {
	background:url(images/bg02.png) center top no-repeat ;
	padding:100px 2%;
	margin: 100px auto;
}
.company .inner {
	background:#FFF;
	padding:3%;
}
.company h2,
.final h2{
	text-align:center;
}
.company h3 {
	border-top:0!important;
	border-right:0!important;
	border-bottom:0!important;
	border-left:#86d004 9px solid;
	padding: 0 0 0 15px !important;
	margin-top:30px;
}



.home .article h2, .home .article h3, .home .article h4, .home .article h5, .home .article h6 {
background-color:transparent;	
	padding:0;
}
#menu-mainnav {
padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    float: right;
    flex-wrap: wrap;
    justify-content: center;
    text-align: right;
    width: 100%;
	height: 60px;
}
#menu-mainnav li{
font-size: 90%;
    list-style: none;
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 1.3;
    position: relative;
    height: 60px !important;
    padding: 0;
    vertical-align: bottom;
}

#menu-mainnav li a{
border-right: 2px solid #ddd;
    padding: 0 10px 0 0;
    display: block;
    text-align: center;
    margin: 20px 0;
    height: auto;
}
#menu-mainnav li:nth-of-type(n+4) a{
border-right: 0;
}
.navi-in a,
.navi-in a:hover {
transition: none !important;
}
.header-tel {
	background:url(images/tel01.png) center center no-repeat ;
	background-size: 95% auto;
	width:200px !important;
	padding:0 !important;
	height: 60px !important;
	display: table-cell;
}
.header-tel-smt {
	display:none;
} 
.header-tel a,
.header-btn a,
.test-btn a {		border-right:0 !important;
    height: 100% !important;
	padding: 0 !important;;
    margin: 0 !important;
}
.header-btn{
	background:#58b833 url(images/mail01.png) center center no-repeat ;
	width:200px !important;
	padding:0 !important;
	height: 60px !important;
	background-size: auto 45%;
	display: table-cell;
	margin-left:-10px;
}
.test-btn{
	background:#e94f64 url(images/test-btn.png) center center no-repeat ;
display: table-cell;
	width:200px !important;
	padding:0 !important;
	height: 99px !important;

	background-size: auto 45%;
}
.header-tel a:hover{
background:url(images/tel01.png) center center no-repeat;
	background-size:95% auto;
}
.header-btn a:hover{
background:#8dd349 url(images/mail01.png) center center no-repeat ;

}
.test-btn a:hover{
background:#f36b7d url(images/test-btn.png) center center no-repeat ;

}
.header-tel,
.header-btn a,
.test-btn a{
	border:0;
	text-indent:-9999px;}
.header-container-in.hlt-top-menu .wrap {
    width: auto;
    height: 60px;
}
.header-container-in.hlt-top-menu .logo-header {
    max-height:50px;
    margin: auto 1%;
}
.header-container-in.hlt-top-menu .logo-header img {
    max-height: 50px;
    height: auto;
    vertical-align: middle;
}
.mb30{ margin-bottom:30px;}
.red {
	color:#e94f64;
}
.uline {
	text-decoration: underline;
}
.marker {
  background: linear-gradient(transparent 40%, #fffc00 80%);
}
.text-center {
	text-align:center;
}
.f120 {
	font-size:120%;
}
.tab-img { display:none !important;}
.tabsmt-img { display:none !important;}
.smt-img { display:none !important;}
.header-tel-smt { display:none !important;}


.sidebar h2,
.sidebar h3{
    background-color:#8dd349;
	color:#FFF;

}
.entry-title {
padding-top: .5em;
padding-bottom: .5em;
padding-left: .5em;
margin-bottom: 2em;
background-color: #58b833;/* 背景色 */
border-radius:15px;/* 角丸 */
color: #FFFFFF;/* フォント色 */
}
.article h3 {
    border-left: 7px solid #58b833;
    border-right: 1px solid #58b833;
    border-top: 1px solid #58b833;
    border-bottom: 1px solid #58b833;
    font-size: 22px;
    padding: 12px 20px;
    background: #f6ffea;
}
#footer .textwidget {
	text-align:center;

}
.footer-widgets {
    max-width: 1000px;
}

.footer-extra{ width:33.33%;padding:10px 16px;}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1230px以下*/
@media screen and (max-width: 1230px){
#menu-mainnav li.header-tel {
	display:none !important;
}
#menu-mainnav li.header-tel-smt {
		display: inline-block !important;
	background:url(images/tel-smt.png) center center no-repeat ;
	width:46px !important;
	padding:0 !important;
	height: 46px !important;
	     
}
#menu-mainnav li.header-tel-smt a,
#menu-mainnav li.header-btn a,
#menu-mainnav li.test-btn a{		border-right:0 !important;
    height: 100% !important;
    margin: 0 !important;
	width:46px !important;
	padding:0 !important;
	height: 46px !important;}
#menu-mainnav li.header-btn{
	background: url(images/mail-smt.png) center center no-repeat ;
	width:46px !important;
	padding:0 !important;
	height: 46px !important;
	        margin-bottom: 0;
}
	#menu-mainnav li.test-btn{
	background: url(images/test-smt.png) center center no-repeat ;
	width:46px !important;
	padding:0 !important;
	height: 46px !important;
	        margin-bottom: 0;
}
#menu-mainnav li.header-btn a:hover{
background: url(images/mail-smt.png) center center no-repeat ;

}
#menu-mainnav li.test-btn a:hover{
background: url(images/test-smt.png) center center no-repeat ;

}
#menu-mainnav li.header-tel a:hover{
background: url(images/mail-smt.png) center center no-repeat ;
}
#menu-mainnav li.header-tel-smt,
#menu-mainnav li.header-btn a,
#menu-mainnav li.test-btn a	{
	border:0;
	text-indent:-9999px;
	margin: 0 0 10px 0;}	

#menu-mainnav li.header-btn,
	#menu-mainnav li.test-btn {
	margin: 5px 5px 10px 0;}	
}
/*1023px以下*/
@media screen and (max-width: 1023px){
	.home article .inner {
    width: 96%;
    margin: 0 auto;
}
#header-container {
		display:none !important;
	}
.mainImg {
    background: none;
    height: auto;
    text-align: center;
    line-height: 0;
}
.product01 img.alignright {
	width:40%;
	}
	.product01 h3 img {
	width:57%;
	}
.mobile-menu-buttons .menu-button > a {
    display: block;
    color: var(--cocoon-black-color);
    text-decoration: none;
    text-align: left;
}
.mobile-menu-buttons .menu-button {
    position: relative;
    width: 55px;
    text-align: left;
    float: left;
    display: block;}
.logo-menu-button img {
    max-height: 50px;
    display: block;
    margin: 5px;
    width: auto;
    height: 90%;
}
.menu-button .fa {
    padding-top: 10px;
}
.menu-button .fa-phone {
color:#3425ff;
}
.menu-button .fa-envelope {
color:#58b833;
}
.menu-button .fa-paper-plane {
color:#e94f64;
}

.pc-img { display:none !important;}
.tab-img {display:inline !important;}
.tabsmt-img {display:inline !important;}
/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
}
.logo-menu-button img {
    max-height: 44px;
    display: block;
    margin: 0;
	width:auto;
}

	.menu-drawer li.header-tel {
		display:none;
	} 
.menu-drawer li.header-btn, 
.menu-drawer li.test-btn 
{ padding: 6px !important;
    display: block;
height:auto !important;
}

.menu-drawer li.header-btn a, 
.menu-drawer li.test-btn a 
{text-indent: 0;
background:none;
height:auto !important;
}

.menu-drawer li.header-btn,
.menu-drawer li.test-btn {
    background: none;
    width: auto;
        float: none;
    height: auto;}
	.menu-drawer li.header-tel a:hover {
		background:none;
	} 

}

/*834px以下*/
@media screen and (max-width: 834px){

	.alignright,
	.alignleft {
		width:100%;
		display:block;
		margin:2% auto;
	}
.product01 img.alignright {
	max-width:100%;
		width:100%;
	margin:0 auto;
	}
	.product01 h3  {
		text-align:center
	}
.product01 h3 img {
	max-width:100%;
	width:100%;
	margin:0 auto;
	}
.flow .inner {
        width: 100%;
        margin: 0 auto;
    }
.flow01 > li .icon01 {
	width: 40px;}

.chigai01 h3 {
margin-bottom:3%;

}
.chigai01 img.alignright {
	margin-top:0px;
	
}
.header-btn{
	margin-left:0px;
}

.pctab-img { display:none !important;}
.tab-img { display:none !important;}
.smt-img { display:inline !important;}
}

/*480px以下*/
@media screen and (max-width: 480px){
.contact-btn {
		font-size:60%;
}
.contact-btn2 {
		font-size:60%;
}
}




/* 会社概要 */
.table-company {
   border-collapse: collapse;
  width: 100%; 
}
.table-company th, .table-company td {
  border: 2px solid #fff;
  background-color: #f1f6ec;
  padding: 1em;
}
.table-company th {
  background-color: #58b833;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
}
@media screen and (max-width: 834px){
	.table-company th, .table-company td {
		width:100%;
		display:block;
	}