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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*
 * #header-container, #header-container .navi, #navi .navi-in>.menu-header .sub-menu {
    height: 80px;
}

#header-container .navi, #navi .navi-in>.menu-header .sub-menu {
    height: 80px;
    background: url(http://ithojokin-ec.jp/wp-content/uploads/2023/04/42694a38a1c9c381e2cf21832173c24e.png) no-repeat right 50%;
}
*/

.wrap{
	width: 100%!important;
}
.main{
	padding: 20px 0;
}

/* リセット */
.article h2{
	margin-bottom: 0;
	padding: 0;
	font-size: 2.7rem;
	background : none!important;
}
.article h3{
	margin-bottom: 0!important;
	padding: 0;
	border: none!important;
}
.entry-content{
	margin-bottom: 0!important;
}
.main{
	padding-right: 0!important;
	padding-left: 0!important;
	padding-bottom: 0!important;
}
article#post-183{
	margin-bottom: 0;
}
/*
.body .wp-block-image{
	margin-bottom: 60px!important;
}
*/

/* ************************
  非表示
************************* */
#header-container{
	display:none!important;
}
#appeal{
	display: none!important;
}
.article#post-183 h1{
	display: none;
}
.post-183 .date-tags {
	display: none;
}
footer,
#footer{
	display: none;
}

/* ************************
  ヘッダー
************************* */
.header{
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 80px;
	margin: -40px 0 0;
	padding: 10px 20px;
}
.header img{
	width: 100%;
}
.kv{
	width: 100%;
	margin-bottom: 4em;
}
.kv img{
	width: 100%;
}

@media screen and (max-width: 768px){
	main.main{
		padding: 0;
	}
	.header{
		height: 70px;
		margin-top: -20px;
		padding: 10px;
	}
	.header .logo img{
		padding-right: 20%;
	}
	.header .tel img{
		padding-left: 20%;
	}
}
@media screen and (max-width: 500px){
	.header{
		height: 60px;
		margin-top: -20px;
		padding: 10px;
	}
	.kv{
		margin-bottom: 2em;
	}
}

/* ************************
  コンテンツエリア
************************* */
.content{
	margin-top: 0!important;
}
.contentwrap{
	width: 100%;
	margin: 80px 0;
	padding: 50px 0;
	background: #FFFAE8;
}
.contentbox{
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}
.qawrap{
	width: 100%;
	margin: 0 0 80px 0;
	padding: 50px 0;
	background: #F2F2F2;
}
.qabox{
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}

.contentbox h2,
.qabox h2{
	display: table;
	margin: 0 auto 60px;
	padding-bottom: 5px;
	color: #1B6BE1;
	border-bottom: 15px solid #FFCD27;
}
.contentbox h2 span,
.qabox h2 span{
	color: #FD5C04;
}

/* ************************
  カラム
************************* */
.culmbox{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.culmbox .box{
	width: 230px;
	margin: 0 0 15px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: #FFCD27;
	border-radius: 10px;
}
.culmbox .box p{
	margin: 0;
	padding-bottom: 1rem;
	font-size: 1.3rem;
	line-height: 1.3;
	font-weight: bold;
	flex-grow: 1;
}
.culmbox .box img{
	width: 40%;
	margin: 0 auto;
}
.culmbox .box img.small{
	width: 32%;
}

/* ************************
  メリット
************************* */
.ttlbox{
	margin: 60px 0 40px 0;
	padding: 0 12px 12px;
	text-align: center;
	background: #FD5C04;
	border-radius: 10px;
}
.ttlbox p{
	margin: 0;
	color: #F7FF00;
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
}
.ttlbox h3{
	padding: 12px 0 0;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
}

/* ************************
  ブレッドリスト
************************* */
ul{
	padding-left: 20px!important;
}
li{
	font-size: 1.75rem;
	font-weight: bold;
	list-style: none;
	background: url(http://ithojokin-ec.jp/wp-content/uploads/2023/04/check_ill.png) no-repeat;
	background-position: center left;
	background-size:  auto 35px;
	padding-left: 2em;
	line-height: 1.8;
}

/* ************************
  ECサイトの種類
************************* */
.typebox{
	margin-top: 30px;
	padding: 30px;
	background: #FBEBB6;
	border-radius: 10px;
}
.typebox h3{
	padding: 0 0 20px;
	color: #FD5C04;
	font-size: 1.75rem;
}
.typebox h4{
	margin-bottom: 0;
	border: 0;
}

/* ************************
  ECサイトの立ち上げ費用
************************* */
.costbox{
	max-width: 900px;
	margin: 0 auto 50px;
	display: flex;
	flex-wrap: wrap;
}
.cost{
	width: 430px;
	margin: 10px; 
	padding: 12px;
	text-align: center;
	border: 3px solid #FD5C04;
	background: #fff;
	border-radius: 10px;
}
.cost p{
	margin-bottom: 0;
	font-weight: bold;
}
.cost p:first-child{
	font-size: 1.5rem;
}
.cost p:last-child{
	font-size: 2rem;
	color: #1B6BE1;
}

/* ECサイトの費用　見出し */
.cost_bar{
	display: flex;
	flex-wrap: wrap;
	margin: 50px 0 30px;
	padding: 10px;
	background: #FD5C04;
	border-radius: 10px;
}
.cost_bar p{
	width: 130px;
	margin: 0;
	padding: 7px;
	font-size: 1.125rem;
	text-align: center;
	background: #FBEBB6;
	border-radius: 5px;
}
.cost_bar h3{
	padding: 0 20px;
	color: #fff;
	font-size: 1.75rem;
	line-height: 1.5;
}
.cost_bar h3 span{
	font-size: 1.125rem;
	font-weight: 400;
}

/* ************************
  メリット　デメリット
************************* */
.costbox{
	max-width: 900px;
	margin: 0 auto 50px;
	display: flex;
	flex-wrap: wrap;
}
.good_box{
	width: 430px;
	margin: 10px; 
	padding: 20px;
	text-align: center;
	background: #FEDFF2;
	border-radius: 10px;
}
.bad_box{
	width: 430px;
	margin: 10px; 
	padding: 20px;
	text-align: center;
	background: #E2F3FD;
	border-radius: 10px;
}
.good_box p,
.bad_box p{
	margin-bottom: 0;
	text-align: left;
}
.good_box p:first-child,
.bad_box p:first-child{
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
}
.good_box p:first-child{
	color: #FD5C04;
}
.bad_box p:first-child{
	color: #1B6BE1;
}

.judge{
	padding: 25px;
	text-align: center;
	background: #1B6BE1;
	border-radius: 10px;
	box-sizing: border-box;
}
.judge p{
	margin-bottom: 20px;
}
.judge p img{
	width: 10%;
}
.judge p:last-child{
	margin-bottom: 0;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
}

/* ************************
  「IT補助金でECサイトを作る」とは？
************************* */
.assistance{
	display: flex;
	flex-wrap: wrap;
	max-width: 776px;
	margin: 0 auto 20px;
}
dl{
	width: 258px;
}
dt{
	padding: 12px;
	color: #fff;
	text-align: center;
	background: #85B5FE;
	border: 1px solid #fff;
}
dd{
	height: 65%;
	margin-left: 0!important;
	padding: 12px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	background: #F2F2F2;
	border: 1px solid #fff;
}
dd span{
	color: #FD5C04;
}

/* 立ち上げ費用例 */
h3.price{
	margin-bottom: 30px!important;
	font-size: 1.4rem;
}

.price_box{
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	justify-content: space-between;
}
.price_box dl{
	width: 300px;
	text-align: center;
}
.price_box dt{
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	background: #FD5C04;
	border-radius: 10px 10px 0 0;
	border-bottom: 2px solid #fff;
}
.price_box dd{
	height: 76%;
	padding; 10px;
	background: #FBEBB6;
	border-radius: 0 0 10px 10px;
}
.blue{
	color: #85B5FE;
}
.subsidy{
	color: #FD5C04;
	font-size: 1.6rem;
}
.self{
	color: #1B6BE1;
	font-size: 1.6rem;
}

/* 事例 */
.ex{
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	justify-content: space-between;
}
.ex dl{
	width: 300px;
	text-align: center;
}
.ex dt{
	height: 50%;
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5;
	background: #85B5FE;
	border-radius: 10px 10px 0 0;
	border-bottom: 2px solid #fff;
}
.ex dd{
	height: 55%;
	background: #F2F2F2;
	border-radius: 0 0 10px 10px;
}

.catch_box{
	padding: 25px;
	text-align: center;
	background: #FD5C04;
	border-radius: 10px;
}
.catch_box p{
	margin-bottom: 0;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
}

/* ************************
  よくある質問
************************* */
.qabox dl{
	display: inherit;
	width: 100%;
	font-size: 1.12rem;
}
.qabox dt{
	padding: 0 10px 10px 45px;
	text-align: left;
	color: #2a2a2a;
	font-size: 1.25rem;
	font-weight: bold;
	text-indent: -1.4em;
	line-height: 1.5;
	background: #FFCD27;
	border: none;
}
.qabox dd{
	padding: 0 10px 20px 45px;
	text-align: left;
	font-weight: 400;
	line-height: 1.5;
	text-indent: -1.4em;
	background: none;
	border: none;
}
.qabox dt:before,
.qabox dd:before{
  font-size: 2rem;
  margin-right: 0.2em;
}
.qabox dt:before{
	content:"Q";
	color: #1B6BE1;
	font-weight: bold;
}
.qabox dd:before{
	content:"A";
	color: #FD5C04;
	font-weight: bold;
}

/* ************************
  問い合わせ
************************* */
.contact dl{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 0;
	text-align: left;
}
.contact dt{
	width: 30%;
	padding: 20px 0;
	text-align: left;
	color: #2a2a2a;
	font-size: 1rem;
	background: none;
	border: none;
}
.contact dt p{
	margin-bottom: 0;
}
.contact dd{
	width: 70%;
	margin: 0;
	padding: 10px 0;
	text-align: left;
	background: none;
}
.contact dd p{
	margin-bottom: 0;
}
.required{
	padding: 2px 4px;
	color: #fff;
	font-size: 0.75rem;
	background: #FF0000;
	border-radius: 3px;
}
.option{
	padding: 2px 4px;
	color: #fff;
	font-size: 0.75rem;
	background: #ccc;
	border-radius: 3px;
}
.contact .approval{
	margin: 0 0 60px 30%;
	line-height: 1;
}
.contact .subject{
	width: 25%;
	margin: 0 auto;	
}
.contact .subject p{
	padding-bottom: 0;
}
.contact .subject input{
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
	background: #FD5C04;
	border-radius: 10px;
}

/* ************************
  footer
************************* */
/*
 * footer#footer{
	margin-top: 0;
	background: url(http://ithojokin-ec.jp/wp-content/uploads/2023/04/42694a38a1c9c381e2cf21832173c24e.png)no-repeat right;
	border-top: 5px solid #1D2671;
}
.footer-bottom-content {
    float: none!important;
    text-align: center;
}
*/
.footer_area{
	width: 100%;
	margin-bottom: 0;
	padding: 20px;
	border-top: 5px solid #1D2671;
}
.footerbox{
	display: flex;
	justify-content: space-between;
	/*flex-wrap: wrap;*/
}
.copy{
	width: 100%;
	text-align: center;
}
@media screen and (max-width: 500px){
	.footer_area{
		padding: 10px;
		text-align: center;
	}
	.footerbox .logo{
		padding-right: 10%;
	}
	.footerbox .tel{
		padding-left: 10%;
	}
	.copy{
		width: 100%;
		font-size: 14px;
	}
}

/* ************************
  汎用
************************* */
.bold{
	font-weight: bold;
}
.center{
	margin: 0 auto;
	text-align: center;
}
p .orange{
	color: #FD5C04;
}
.mb0{
	margin-bottom: 0!important;
}
.pb0{
	padding-bottom: 0!important;
}
.pb20{
	padding-bottom: 20px;
}
.w80{
	width: 80%;
	margin: 0 auto;
}
.pb30-5{
	padding-bottom: 30px!important;
}
@media screen and (max-width: 770px){
	.pb30-5{
		padding-bottom: 5px!important;
	}
}
.pc{
	display: block!important;
}
.sp{
	display: none!important;
}
@media screen and (max-width: 768px){
	.pc{
		display: none!important;
	}
	.sp{
		display: block!important;
	}
}


/* ******************************************************
  レスポンシブデザイン用のメディアクエリ
****************************************************** */
/*1366px以下*/
@media screen and (max-width: 1366px){

}

/*1023px以下*/
@media screen and (max-width: 1024px){
/* ************************
 立ち上げ費用
************************* */
	.costbox {
		width: 100%;
	}
	.cost {
		width: 45%;
		margin: 0 auto;
	}
	.good_box {
		width: 45%;
		margin: 0 auto;
	}
	.bad_box {
		width: 45%;
		margin: 0 auto;
	}
/* ************************
 ECサイトを作るとは？
************************* */
	.price_box dl {
		width: 32%;
		text-align: center;
	}
	.price_box dd {
		height: auto;
		line-height: 1.5;
	}
	.ex dl {
		width: 32%;
	}
}

/*768px以下*/
@media screen and (max-width: 768px){
	.article h2 {
		text-align: center;
	}
/* ************************
  カラム
************************* */
	.culmbox .box{
		width: 45%;
		margin: 10px;
		padding: 12px;
	}
	.culmbox .box p{
		font-size: 1.5rem;
	}
/* ************************
  見出し
************************* */
	.article h2 {
		font-size: 2rem;
	}
	.contentbox h2,
	.qabox h2{
		border-bottom: 8px solid #FFCD27;
	}
	
/* ************************
  メリット
************************* */	
	img.wp-image-93 {
		width: 30%;
		margin: 0 auto;
	}
/* ************************
  ecサイトの種類
************************* */
	img.wp-image-118, img.wp-image-119, img.wp-image-117 {
		width: 30%;
		margin: 0 auto;
	}
/* ************************
  立ち上げ費用
************************* */	
	.cost {
		width: 47%;
		margin: 10px auto;
		padding: 5px;
	}
	.good_box {
		width: 47%;
	}
	.bad_box {
		width: 47%;
	}
/* ************************
 IT補助金でECサイトを作るとは？
************************* */
	.assistance {
		margin: 0 auto 20px;
	}
	.assistance dl {
		width: 33.3%;
	}
	.price_box dl {
		width: 30%;
	}
	.price_box dd {
		height: auto;
		line-height: 1.3;
	}
	.ex dl {
		width: 30%;
	}
	.ex dt {
		height: 40%;
	}
	.ex dd {
		height: 60%;
	}

/*480px以下*/
@media screen and (max-width: 480px){
/* ************************
  コンテンツ
************************* */	
	.contentwrap {
		margin: 30px 0;
		padding: 30px 0;
	}
	
/* ************************
  見出し
************************* */
	.article h2 {
		font-size: 1.4rem;
		text-align: center;
	}
	.contentbox h2,
	.qabox h2{
		border-bottom: 8px solid #FFCD27;
	}
	

/* ************************
  カラム
************************* */
	.culmbox .box{
		width: 43%;
		margin: 10px;
		padding: 12px;
	}
	.culmbox .box p{
		font-size: 1rem;
	}

/* ************************
  メリット
************************* */
	.ttlbox {
		margin: 30px 0;
	}
	.ttlbox p {
		font-size: 2.1rem;
	}
	.ttlbox h3 {
		padding: 5px 0 0;
		font-size: 1.2rem;
	}
	ul {
		padding-left: 0!important;
	}
	li {
		font-size: 1.2rem;
		background-position: center left;
		background-size: auto 20px;
	}
	img.wp-image-93{
		width: 45%;
		margin: 0 auto;
	}
	
/* ************************
  ECサイトの種類
************************* */	
	.typebox h3 {
		font-size: 1.4rem;
	}
	.typebox {
		padding: 20px;
	}
	img.wp-image-118,
	img.wp-image-119,
	img.wp-image-117{
		width: 45%;
		margin: 0 auto;
	}
	
/* ************************
  ECサイトの立ち上げ費用
************************* */
	.cost{
		width: 80%;
		margin: 10px auto;
		padding: 5px;
	}
	.cost p:first-child {
		font-size: 1rem;
	}
	.cost p:last-child {
		font-size: 1.3rem;
	}
	.costbox {
		margin: 0 auto 30px;
	}

/* ECサイトの費用　見出し */
	.cost_bar p{
		margin: 0 auto;
		padding: 3px;
		font-size: 1rem;
	}
	.cost_bar h3{
		margin: 0 auto;
		padding-top: 5px;
		font-size: 1.2rem;
		text-align: center;
	}
	.cost_bar h3 span{
		font-size: 1.125rem;
		font-weight: 400;
	}
/* ************************
  メリット　デメリット
************************* */
	.good_box{
		width: 80%;;
		margin: 0 auto 10px;
		padding: 10px;
	}
	.bad_box{
		width: 80%;;
		margin: 0 auto 10px;
		padding: 10px;
	}
	.good_box p:first-child,
	.bad_box p:first-child{
		font-size: 1.2rem;
	}
	.judge{
		padding: 20px;
	}
	.judge p{
		margin-bottom: 10px;
	}
	.judge p img{
		width: 22%;
	}
	.judge p:last-child{
		font-size: 1.3rem;
	}
	
/* ************************
  「IT補助金でECサイトを作る」とは？
************************* */
	.assistance{
		margin: 0 auto 30px;
	}
	.assistance dl{
		width: 80%;
		margin: 0 auto;
	}
	dt{
		padding: 5px;
	}
	dd{
		padding: 5px;
	}

/* 立ち上げ費用例 */
	h3.price{
		margin-bottom: 20px!important;
		font-size: 1.2rem;
	}
	.price_box{
		margin-bottom: 10px;
	}
	.price_box dl{
		width: 80%;
		margin: 0 auto 20px;
		text-align: center;
	}
	.price_box dt{
		padding: 5px;
		font-size: 1.2rem;
	}
	.price_box dd{
		padding; 10px;
		line-height: 1.3;
	}
	.subsidy{
		font-size: 1.3rem;
	}
	.self{
		font-size: 1.3rem;
	}

/* 事例 */
	.ex dl{
		width: 80%;
		margin: 0 auto 20px;
	}
	.ex dt{
		height: auto;
		padding: 5px;
		font-size: 1.2rem;
	}
	.ex dd{
		height: auto;
	}
	.catch_box{
		padding: 10px;
	}
	.catch_box p{
		font-size: 1.3rem;
	}
	
/* ************************
  よくある質問
************************* */	
	.qawrap{
		margin: 0 0 30px 0;
		padding: 30px 0;
	}
	.qabox dl {
		display: inherit;
		width: 100%;
		font-size: 1.12rem;
		margin-bottom: 0!important;
	}
	.qabox dt {
		font-size: 1.15rem;
		padding: 0 10px 10px 35px;
	}
	.qabox dd {
		font-size: 1.15rem;
		padding: 0 10px 20px 35px;
	}
/* ************************
  お問い合わせ
************************* */	
	.contact dt {
		width: 100%;
		padding: 20px 0 5px;
	}
	.contact dd {
		width: 100%;
		padding: 10px 0 5px;
	}
	.contact .approval {
		margin: 0 0 30px 0;
	}
	.contact .subject {
		width: 60%;
		margin: 0 auto;
	}
	.contact .subject input {
		font-size: 1.2rem;
	}
	.subject p{
		margin-bottom: 20px;
	}

}