/*
Theme Name:  ChiffoteかわいいLP
Theme URI:
Description:
Version: 2025.06.23- / 1.0
Author: 
Author URI:
*/


body {
	font-family: "Zen Maru Gothic" , "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
	color: #222;
	font-size: 16px;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.01em;
	text-align: justify;
}
a {
	color: #222;
	text-decoration: none;
	transition: 0.3s ease-out;
}
a:hover {
	color:#9bc7d1;
}

::selection{background-color:#9bc7d1; color: #FFF;}
::-moz-selection{background-color:#9bc7d1; color: #FFF;}

body , header , footer{
	min-width:1360px;
	max-width: 1920px;
	margin: auto;
}
@media screen and (max-width:640px) {
	body{font-size: 14px;}
	body,header,footer{min-width: 400px;}
}






/*============================================================================

	モーション　＊　wowオリジナル　fadeInUpMin

============================================================================*/
.fadeInUpMin {
    animation-name: fadeInUpMin;
}
@keyframes fadeInUpMin {
    from { opacity: 0; transform: translate3d(0, 10%, 0);}
    to { opacity: 1; transform: none;}
}



#loftloader-wrapper {
	min-width: 400px !important;
}
#loftloader-wrapper .loader-section.section-fade {
	min-width: 400px !important;
}







/*==================================================================

		mainvisual

==================================================================*/
#mainvisual {
	position: relative;
	width: 100%;
	height: 700px;
	top: 150px;
	margin-bottom: 150px;
}
#mainvisual::before { /*MV写真*/
	position: absolute; 
	content: "";
	right: 0;
	width: calc( 100% - 50px );
	height: 700px;
	background: url("images/sec01_mv.png") top right;
	background-size: cover;
	border-radius: 60px 0 0 60px;
}
#mainvisual::after { /*左のピンクのお花*/
	position: absolute;
	content: "";
	left: 20px;
	bottom: -60px;
	width: 118px;
	height: 201px;
	background: url("images/sec01_img02.png") center no-repeat;
	background-size: 118px auto;
	z-index: 9;
}
@media screen and (max-width:640px) {
	#mainvisual {
		height: 560px;
		top: 100px;
		margin-bottom: 80px;
	}
	#mainvisual::before { /*MV写真*/
		width: calc( 100% - 30px );
		height: 560px;
		background: url("images/sec01_mv_sp.png") top center;
		background-size: cover;
	}
	#mainvisual::after { /*左のピンクのお花*/
		left: 5px;
		bottom: -40px;
		width: 59px;
		height: 101px;
		background-size: 59px auto;
	}
}



#mainvisual .inner {
	position: relative;
	width: 100%;
	height: 100%;
	background: url("images/sec01_bg.png") center no-repeat;
	background-size: 760px auto;
}
#mainvisual .inner::after { /*右の青いお花*/
	position: absolute;
	content: "";
	right: 20px;
	top: 20px;
	width: 116px;
	height: 196px;
	background: url("images/sec01_img01.png") center no-repeat;
	background-size: 116px auto;
	z-index: 9;
}
@media screen and (max-width:640px) {
	#mainvisual .inner::after { /*右の青いお花*/
		right: 10px;
		top: -10px;
		width: 58px;
		height: 98px;
		background-size: 58px auto;
	}
}



/*------------------------------ 左縦書きキャッチ ------------------------------*/
#mainvisual em {
	font-family: "Quicksand", sans-serif;
	font-size: 10px;
	transform: rotate(90deg);
	position: absolute;
	z-index: 99;
	line-height: 1;
	left: -150px;
	top: 45%;
	letter-spacing: 2px;
	color: #959595;
}
@media screen and (max-width:640px) {
	#mainvisual em {
		left: -160px;
	}
}



/*------------------------------ ３つのポイント ------------------------------*/
#mv_point {
	width: 420px;
	margin: auto;
	padding-top: 100px;
	display: flex;
	justify-content: space-between;
}
#mv_point p {
	width: 130px;
	height: 130px;
	box-sizing: border-box;
	border-radius: 100%;
	text-align: center;
	font-size: 17px;
	line-height: 1.5;
	color: #FFF;
}
#mv_point p:nth-of-type(1) {
	margin-top: 30px;
	background: rgba(245,174,126,.9);
	border: 2px solid #f5ae7e;
	padding-top: 28px;
	padding-left: 3px;
	text-shadow: 0 0 10px #ea7729, 0 0 20px #ea7729, 0 0 30px #ea7729, 0 0 40px #ea7729;
}
#mv_point p:nth-of-type(2) {
	background: rgba(231,168,181,.9);
	border: 2px solid #e7a8b5;
	padding-top: 37px;
	padding-left: 3px;
	text-shadow: 0 0 10px #f06d83, 0 0 20px #f06d83, 0 0 30px #f06d83, 0 0 40px #f06d83;
}
#mv_point p:nth-of-type(3) {
	margin-top: 30px;
	background: rgba(118,201,153,.9);
	border: 2px solid #70c2b3;
	padding-top: 28px;
	padding-left: 2px;
	text-shadow: 0 0 10px #23a07e, 0 0 20px #23a07e, 0 0 30px #23a07e, 0 0 40px #23a07e;
}
@media screen and (max-width:640px) {
	#mv_point {
		width: 80%;
		padding-left: 30px;
		padding-top: 40px;
	}
	#mv_point p {
		position: relative;
		width: 100px;
		height: 100px;
		font-size: 13px;
		z-index: 99;
	}
	#mv_point p:nth-of-type(1) {
		margin-top: 20px;
		padding-top: 21px;
	}
	#mv_point p:nth-of-type(2) {
		padding-top: 27px;
	}
	#mv_point p:nth-of-type(3) {
		margin-top: 20px;
		padding-top: 19px;
	}
}



/*------------------------------ 説明文 ------------------------------*/
#mv_text {
	width: 100%;
	margin: auto;
	padding-top: 40px;
	text-align: center;
}
#mv_text p {
	display: inline-block;
	box-sizing: border-box;
	padding: 2px 22px 2px 25px;
	margin-bottom: 5px;
	border-radius: 20px;
	line-height: 1.7;
	background: rgba(255,255,255,.9);
}
@media screen and (max-width:640px) {
	#mv_text {
		position: relative;
		left: 15px;
		width: 80%;
		margin: 20px auto 0;
		padding: 20px 20px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		background: rgba(255,255,255,.8);
	}
	#mv_text p {
		padding: 0;
		margin-bottom: 10px;
		line-height: 1.8;
		background: none;
		font-size: 13px;
	}
}



/*------------------------------ ３つの特徴 ------------------------------*/
#mv_features {
	width: 620px;
	margin: auto;
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
}
#mv_features p {
	width: 32%;
	height: 150px;
	box-sizing: border-box;
	border-radius: 10px;
	text-align: center;
	font-size: 15px;
	line-height: 1.7;
	color: #FFF;
	background: rgba(75,171,193,.9);
	padding-top: 24px;
	padding-left: 3px;
	text-shadow: 0 0 10px #37a2ba, 0 0 20px #37a2ba, 0 0 30px #37a2ba, 0 0 40px #37a2ba;
}
@media screen and (max-width:640px) {
	#mv_features {
		position: relative;
		left: 15px;
		width: 86%;
		margin-top: 20px;
	}
	#mv_features p {
		width: 32%;
		height: auto;
		font-size: 12px;
		line-height: 1.5;
		padding: 15px 5px 18px;
	}
}






/*==================================================================

	 共通　＊　タイトル

==================================================================*/
h2 {
	margin-bottom: 45px;
}
@media screen and (max-width:640px) {
	h2 {
		margin-bottom: 30px;
	}
}



/*==================================================================

	共通　＊　btn

==================================================================*/
.btn {
	text-align: center;
}
.btn a {
	display: block;
	width: 280px;
	margin: auto;
	padding: 13px 10px 16px 0;
	color: #FFF;
	background: #de9aa5;
	border-radius: 40px;
	font-family: "Quicksand", sans-serif;
	letter-spacing: 3px;
	transition: 0.3s ease-out;
}
.btn a img {
	position: relative;
	top: -2px;
	margin-right: 20px;
	vertical-align: middle;
	transition: 0.3s ease-out;
}
.btn a:hover {
	background: #ce7482;
	letter-spacing: 5px;
}




/*==================================================================

		.scroll-infinity　＊　横に画像が無限に流れる

==================================================================*/
.scroll-infinity {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__list li {
	margin: 50px 10px;
	border-radius: 5px;
	overflow: hidden;
}
@keyframes infinity-scroll-left {
	from { transform: translateX(0);}
  	to { transform: translateX(-100%);}
}
@media screen and (max-width:640px) {
	.scroll-infinity__list li {
		margin: 50px 10px 30px;
	}
	.scroll-infinity img {
		width: 160px;
		height: auto;
		max-width: none !important;
	}
}




/*==================================================================

		#about　＊　sec02 ＊　世界にひとつだけのデザインを〜

==================================================================*/
#about {
	position: relative;
	text-align: center;
	margin-top: 10px;
	padding-top: 120px;
	padding-bottom: 120px;
	background: url("images/bg_03.png");
	overflow-x: clip;
}
#about::before { /*wave上*/
	position: absolute;
	content: "";
	background: url("images/bg_04.png");
	background-size: 1920px auto;
	width: 100%;
	height: 23px;
	left: 0;
	top: -20px;
	transform: rotate(180deg);
}
#about::after { /*wabe下*/
	position: absolute;
	content: "";
	background: url("images/bg_04.png") no-repeat;
	background-size: 1920px auto;
	width: 100%;
	height: 23px;
	left: 0;
	bottom: -20px;
}
@media screen and (max-width:640px) {
	#about {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	#about::before { /*wave上*/
		background-size: 960px auto;
		height: 12px;
		top: -10px;
	}
	#about::after { /*wabe下*/
		background-size: 960px auto;
		height: 12px;
		bottom: -10px;
	}
	#about h2 img {
		width: 360px;
	}
}


	
#about p {
	line-height: 2.4;
}
@media screen and (max-width:640px) {
	#about p {
		width: 90%;
		margin: auto;
		line-height: 2;
	}
}



#about .about_img01 {
	position: absolute;
	top: 60px;
	left: 50%;
	margin-left: 370px;
}
#about .about_img02 {
	position: absolute;
	bottom: 50px;
	left: 50%;
	margin-left: -780px;
}
@media screen and (max-width:640px) {
	#about .about_img01 , #about .about_img02 { display: none;}
}





/*==================================================================

		#about　と　#service　の中間にあるimg

==================================================================*/
#ab-img {
	width: 100%;
	height: 420px;
	background: url("images/sec02_img04.png") center;
	background-size: cover;
}
@media screen and (max-width:640px) {
	#ab-img {
		height: 200px;
	}
}





/*==================================================================

		#service　＊　sec03 ＊　わたしたちができること〜

==================================================================*/
#service {
	position: relative;
	margin: 110px 0;
	text-align: center;
	overflow-x: clip;
}
#service::before { /*飾りのお花*/
	position: absolute;
	content: "";
	top: 400px;
	left: 50%;
	margin-left: -860px;
	background: url("images/sec03_img11.png");
	background-size: 125px auto;
	width: 125px; height: 269px;
}
#service::after { /*飾りのお花*/
	position: absolute;
	content: "";
	top: 400px;
	left: 50%;
	margin-left: 760px;
	background: url("images/sec03_img12.png");
	background-size: 96px auto;
	width: 96px; height: 234px;
}
@media screen and (max-width:640px) {
	#service {
		margin: 70px 0 20px;
	}
	#service::before , #service::after { display: none;}
	#service h2 img {
		width: 240px;
	}
}



.note_grey p { /*#flowも共通*/
	display: inline-block;
	margin-bottom: 8px;
	background: #f5f5f5;
	border-radius: 20px;
	padding: 1px 20px 2px 30px;
}
@media screen and (max-width:640px) {
	.note_grey p {
		background: none;
		padding: 1px 20px 2px 20px;
	}
}



#service ul {
	width: 90%;
	max-width: 1280px;
	margin: 50px auto 0;
	display: flex;
	justify-content: space-between;
}
#service ul li {
	position: relative;
	width: 32%;
	max-width: 390px;
}
@media screen and (max-width:640px) {
	#service ul {
		margin: 30px auto 0;
		display: block;
	}
	#service ul li {
		width: 100%;
		max-width: 390px;
		margin: 0 auto 25px;
	}
}



/*------------------------------ 写真とアイコン ------------------------------*/
#service ul li figure {
	border-radius: 10px;
	overflow: hidden;
}
#service ul li i {
	position: absolute;
	left: 0;
	right: 0;
	width: 100px;
	margin: auto;
	margin-top: -47px;
	z-index: 9;
}
@media screen and (max-width:640px) {
	#service ul li i {
		width: 80px;
		margin-top: -40px;
	}
	#service ul li i img {
		width: 80px;
		height: auto;
	}
}



/*------------------------------ 文章枠 ------------------------------*/
#service ul dl {
	position: relative;
	margin-top: 10px;
	padding: 40px 0 85px;
	border-radius: 10px;
}
#service ul dl dt {
	margin-top: 15px;
	font-size: 21px;
}
#service ul dl dt span {
	display: block;
	margin: 5px 0 15px;
	font-size: 11px;
	letter-spacing: 1px;
	font-family: "Quicksand", sans-serif;
}
#service ul dl dd {
	font-size: 15px;
}
@media screen and (max-width:640px) {
	#service ul dl {
		margin-top: 5px;
		padding: 30px 0 65px;
	}
	#service ul dl dt {
		margin-top: 15px;
		font-size: 19px;
		line-height: 1.8;
	}
	#service ul dl dt span {
		margin: 0px 0 10px;
	}
	#service ul dl dd {
		font-size: 14px;
		line-height: 1.8;
	}
}



 /*枠の背景色*/
#service ul li:nth-of-type(1) dl { background: #dfedf2;}
#service ul li:nth-of-type(2) dl { background: #e6f1eb;}
#service ul li:nth-of-type(3) dl { background: #faead6;}

 /*spanの色*/
#service ul li:nth-of-type(1) dl dt span { color: #5eb2ce;}
#service ul li:nth-of-type(2) dl dt span { color: #76c299;}
#service ul li:nth-of-type(3) dl dt span { color: #ec9453;}

 /*hoverの文字色*/
#service ul li a dl { color: #222; transition: 0.3s ease-out;}
#service ul li:nth-of-type(1) a:hover dl { color: #5eb2ce;}
#service ul li:nth-of-type(2) a:hover dl { color: #76c299;}
#service ul li:nth-of-type(3) a:hover dl { color: #ec9453;}




 /*▼のアイコン*/
#service ul li dl::after { 
	position: absolute;
	content: "";
	bottom: 35px;
	left: 0; right: 0; margin: auto;
	background: url("images/sec03_img08.png") no-repeat; 
	background-size: 30px 30px;
	width: 30px; height: 30px;
	transition: 0.3s ease-out;
}
#service ul li:nth-of-type(2) dl::after { background: url("images/sec03_img09.png") no-repeat; background-size: 30px 30px;}
#service ul li:nth-of-type(3) dl::after { background: url("images/sec03_img10.png") no-repeat; background-size: 30px 30px;}

#service ul li:hover dl::after { 
	bottom: 28px;
}
@media screen and (max-width:640px) {
	#service ul li dl::after { 
		bottom: 25px;
		background-size: 20px 20px;
		width: 20px; height: 20px;
	}
	#service ul li:nth-of-type(2) dl::after { background-size: 20px 20px;}
	#service ul li:nth-of-type(3) dl::after { background-size: 20px 20px;}

	#service ul li:hover dl::after { 
		bottom: 20px;
	}
}






/*==================================================================

		#works / .cta　＊　CTA ＊　デザイン制作実績

==================================================================*/
.cta {
	position: relative;
	width: 100%;
	height: 740px;
}
.cta .inner {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0; margin: auto;
	background: url("images/cta_bg.png") no-repeat;
	background-size: 576px auto;
	width: 576px; 
	height: 576px;
	box-sizing: border-box;
	padding-top: 110px;
	text-align: center;
	line-height: 2.2;
	z-index: 99;
}
.cta .inner .btn {
	margin-top: 40px;
}
@media screen and (max-width:640px) {
	.cta {
		height: 530px;
	}
	.cta .inner {
		top: -20px;
		background-size: 360px auto;
		width: 360px; 
		height: 360px;
		padding-top: 70px;
		line-height: 2;
		font-size: 13px;
	}
	.cta .inner .btn {
		margin-top: 20px;
	}
	.cta .inner .btn a {
		width: 210px;
		padding: 10px 10px 13px 0;
	}
	.cta h2 {
		margin-bottom: 20px;
	}
	#works h2 img {
		width: 180px;
	}
	#contactus h2 img {
		width: 210px;
	}
}



.cta .scroll-infinity:nth-of-type(3) .scroll-infinity__list {
  	animation: infinity-scroll-right 180s infinite linear 0.5s both;
}
.cta .scroll-infinity__list li {
	margin: 10px 10px;
}
@keyframes infinity-scroll-right {
	from { transform: translateX(-100%);}
  	to { transform: translateX(0);}
}
@media screen and (max-width:640px) {
	.cta .scroll-infinity img {
		width: 250px;
		height: auto;
		max-width: none !important;
	}
}







/*==================================================================

		#homepage　＊　sec04 ＊　ホームページの制作について

==================================================================*/
#homepage {
	position: relative;
	text-align: center;
	padding-top: 80px;
	padding-bottom: 60px;
	background: url("images/bg_05.png");
	overflow-x: clip;
}
#homepage::before { /*wave上*/
	position: absolute;
	content: "";
	background: url("images/bg_06.png");
	background-size: 1920px auto;
	width: 100%;
	height: 23px;
	left: 0;
	top: -20px;
	transform: rotate(180deg);
}
#homepage::after { /*wabe下*/
	position: absolute;
	content: "";
	background: url("images/bg_06.png");
	background-size: 1920px auto;
	width: 100%;
	height: 23px;
	left: 0;
	bottom: -20px;
}
@media screen and (max-width:640px) {
	#homepage {
		padding-top: 40px;
		padding-bottom: 20px;
	}
	#homepage::before { /*wave上*/
		background-size: 960px auto;
		height: 12px;
		top: -10px;
	}
	#homepage::after { /*wabe下*/
		background-size: 960px auto;
		height: 12px;
		bottom: -10px;
	}
}



/*------------------------------ 見出し ------------------------------*/
#homepage h2 {
	margin-bottom: 65px;
}
#homepage h2 img {
	display: block;
	margin: 0 auto 25px;
}
@media screen and (max-width:640px) {
	#homepage h2 {
		margin-bottom: 45px;
	}
	#homepage h2 img:first-of-type {
		width: 80px;
	}
	#homepage h2 img:last-of-type {
		width: 280px;
	}
}



/*------------------------------ モニター付き概要箇所 ------------------------------*/
.homepage_info {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
}
.homepage_info::before {
	position: absolute;
	content: "";
	width: calc(100% - 100px);
	height: 80%;
	left: 0;
	border-radius: 0 60px 60px 0;
	background-image: linear-gradient(90deg, rgba(142, 195, 213, .1), rgba(142, 195, 213, .3));
}
.homepage_info dt {
	position: relative;
	margin-right: 7%;
	z-index: 9;
}
.homepage_info dd {
	position: relative;
	line-height: 2.4;
	z-index: 9;
}
/*------ 左縦書きキャッチ ------*/
.homepage_info::after {
	position: absolute;
	content: "CREATING A WEBSITE / HOMEPAGE";
	width: 260px;
	height: 20px;
	font-family: "Quicksand", sans-serif;
	font-size: 12px;
	transform: rotate(90deg);
	line-height: 1;
	right: -70px;
	top: 47%;
	letter-spacing: 2px;
	color: #959595;
	z-index: 999;
}
@media screen and (max-width:1550px) { .homepage_info dt { margin-right: 5%; }}
@media screen and (max-width:1460px) { .homepage_info dt { margin-right: 4%; }}
@media screen and (max-width:1420px) { .homepage_info dt { margin-right: 3%; }}
@media screen and (max-width:1370px) { .homepage_info dt { margin-right: 2.5%; }}
@media screen and (max-width:640px) {
	.homepage_info {
		position: relative;
		display: block;
		justify-content: center;
		align-items: center;
		margin-bottom: 40px;
	}
	.homepage_info::before {
		display: none;
	}
	.homepage_info dt {
		width: 80%;
		margin: 0 auto 30px;
		max-width: 400px;
	}
	.homepage_info dd {
		line-height: 2;
	}
	/*------ 左縦書きキャッチ ------*/
	.homepage_info::after {
		display: none;
	}
}


/*------------------------------ お花の飾り ------------------------------*/
#ho_flo01 {
	position: absolute;
	top: 230px;
	left: 50%;
	margin-left: 600px;
}
#ho_flo02 {
	position: absolute;
	top: 710px;
	left: 50%;
	margin-left: -770px;
}
@media screen and (max-width:640px) {
	#ho_flo01 , #ho_flo02 { display: none;}
}


/*------------------------------ 各プラン概要＊共通 ------------------------------*/
.homepage_pricelist {
	width: 90%;
	max-width: 1420px;
	margin: 0 auto 30px;
	background: #FFF;
	border-radius: 60px;
	padding: 80px 0;
}
.homepage_pricelist h3 {
	margin-bottom: 15px;
}
.homepage_pricelist strong {
	font-weight: 500;
	color: #ec8fa9;
}
.homepage_pricelist strong::before { content: "[ ";}
.homepage_pricelist strong::after  { content: " ]";}
/*色変更*/
.homepage_pricelist:nth-of-type(2) strong { color: #31a4cc;}
.homepage_pricelist:nth-of-type(3) strong { color: #f69b2f;}
@media screen and (max-width:640px) {
	.homepage_pricelist {
		margin: 0 auto 20px;
		border-radius: 20px;
		padding: 40px 5% 20px;
		box-sizing: border-box;
	}
	.homepage_pricelist strong {
		font-size: 13px;
		line-height: 1.7;
		display: inline-block;
		margin-top: 10px;
	}
	.homepage_pricelist strong::before { display: none;}
	.homepage_pricelist strong::after  { display: none;}
}



/*---------- 初期費用と月額 ----------*/
.homepage_pricelist .cost {
	margin: 20px 0 30px;
	display: flex;
	justify-content: center;
}
.homepage_pricelist .cost dl {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 10px;
}
.homepage_pricelist .cost dl dt {
	margin-right: 15px;
	background: #ec8fa9;
	color: #FFF;
	border-radius: 20px;
	padding: 5px 22px 8px 25px;
	line-height: 1;
}
.homepage_pricelist .cost dl dd {
	position: relative;
	top: -2px;
	font-size: 15px;
}
.homepage_pricelist .cost dl dd b {
	position: relative;
	top: 2px;
	margin-right: 5px;
	font-size: 30px;
	font-weight: 400;
	color: #e76287;
	font-family: "Quicksand", sans-serif;
}
/*色変更*/
.homepage_pricelist:nth-of-type(2) .cost dl dt { background: #70b8d1;}
.homepage_pricelist:nth-of-type(2) .cost dl dd b { color: #40a9cd;}
.homepage_pricelist:nth-of-type(3) .cost dl dt { background: #f69b2f;}
.homepage_pricelist:nth-of-type(3) .cost dl dd b { color: #f38605;}
@media screen and (max-width:640px) {
	.homepage_pricelist .cost {
		margin: 20px 0 5px;
		display: block;
	}
	.homepage_pricelist .cost dl {
		display: block;
		margin: 0;
	}
	.homepage_pricelist .cost dl dt {
		margin: 0 0 0;
		line-height: 1.3;
	}
	.homepage_pricelist .cost dl dd {
		top: -8px;
	}
}



/*---------- 横３つ並びのスペック表 ----------*/
.homepage_pricelist .specs {
	display: flex;
	justify-content: center;
}

.homepage_pricelist .specs dl {
	width: 29%;
	margin: 0 1%;
}
.homepage_pricelist .specs dl dt {
	margin-bottom: 13px;
	background: #edaebf;
	border-radius: 20px;
	padding: 2px 0;
	font-weight: 500;
	color: #FFF;
}
.homepage_pricelist .specs dl dd li {
	position: relative;
	text-align: left;
	font-size: 14px;
	padding-left: 20px;
	margin-left: 10px;
}
.homepage_pricelist .specs dl dd li::before {
	position: absolute;
	content: "";
	width: 5px;
	height: 5px;
	background: #edaebf;
	border-radius: 100%;
	top: 12px;
	left: 5px;
}
.homepage_pricelist .specs dl:nth-of-type(2) dd ul {
	display: flex;
	flex-wrap: wrap;
}
.homepage_pricelist .specs dl:nth-of-type(2) dd ul li {
	width: 40%;
}
/*色変更*/
.homepage_pricelist:nth-of-type(2) .specs dl dt { background: #95c4d4;}
.homepage_pricelist:nth-of-type(2) .specs dl dd li::before { background: #7bbec9;}
.homepage_pricelist:nth-of-type(3) .specs dl dt { background: #efb84f;}
.homepage_pricelist:nth-of-type(3) .specs dl dd li::before { background: #efb84f;}
@media screen and (max-width:640px) {
	.homepage_pricelist .specs {
		display: block;
	}
	.homepage_pricelist .specs dl {
		width: 100%;
		margin: 0 0 20px;
	}
	.homepage_pricelist .specs dl dd li {
		font-size: 13px;
		padding-left: 17px;
		margin-left: 7px;
		letter-spacing: 0;
	}
	.homepage_pricelist .specs dl dd li::before {
		top: 12px;
		left: 2px;
	}
	.homepage_pricelist .specs dl:nth-of-type(2) dd ul li {
		width: 42%;
	}
}





/*==================================================================

		#support　＊　sec05 ＊　ホームページの運営・管理について

==================================================================*/
#support {
	position: relative;
	padding-top: 80px;
	text-align: center;
	overflow-x: clip;
}
#support::before { /*飾りのお花と写真*/
	position: absolute;
	content: "";
	top: 130px;
	left: 50%;
	margin-left: 450px;
	background: url("images/sec05_img09.png") no-repeat;
	background-size: 404px auto;
	width: 404px;
	height: 487px;
}
#support::after { /*飾りのお花と写真*/
	position: absolute;
	content: "";
	top: 80px;
	left: 50%;
	margin-left: -880px;
	background: url("images/sec05_img10.png") no-repeat;
	background-size: 350px auto;
	width: 350px;
	height: 528px;
}
@media screen and (max-width:1500px) {
	#support::before { /*飾りのお花と写真*/
		margin-left: 370px;
		background-size: 340px auto;
		width: 340px;
	}
	#support::after { /*飾りのお花と写真*/
		margin-left: -750px;
		background-size: 300px auto;
		width: 300px;
	}
}
@media screen and (max-width:640px) {
	#support {
		padding-top: 40px;
	}
	#support::before , #support::after { /*飾りのお花と写真*/
		display: none;
	}
}



/*------------------------------ 見出し ------------------------------*/
#support h2 {
	margin-bottom: 65px;
}
#support h2 img {
	display: block;
	margin: 0 auto 25px;
}
@media screen and (max-width:640px) {
	#support h2 {
		margin-bottom: 40px;
	}
	#support h2 img:first-of-type {
		width: 80px;
		margin-bottom: 10px;
	}
	#support h2 img:last-of-type {
		width: 340px;
	}
}



/*------------------------------ 各プラン概要＊共通 ------------------------------*/
.support_pricelist {
	width: 90%;
	max-width: 1420px;
	margin: 0 auto 100px;
	background: url("images/bg_07.png");
	border-radius: 60px;
	padding: 80px 0;
}
.support_pricelist h3 {
	margin-bottom: 40px;
}
@media screen and (max-width:640px) {
	.support_pricelist {
		border-radius: 20px;
		padding: 35px 0 40px;
		margin-bottom: 50px;
	}
}



/*---------- 初期費用と月額 ----------*/
.support_pricelist .cost {
	margin: 20px 0 30px;
	display: flex;
	justify-content: center;
}
.support_pricelist .cost dl {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 10px;
}
.support_pricelist .cost dl dt {
	margin-right: 15px;
	background: #ebafbe;
	color: #FFF;
	border-radius: 20px;
	padding: 5px 22px 8px 25px;
	line-height: 1;
}
.support_pricelist .cost dl dd {
	position: relative;
	top: -2px;
	font-size: 15px;
}
.support_pricelist .cost dl dd b {
	position: relative;
	top: 2px;
	margin-right: 5px;
	margin-left: 10px;
	font-size: 30px;
	font-weight: 400;
	color: #e76287;
	font-family: "Quicksand", sans-serif;
}
/*色変更*/
.support_pricelist .cost dl:nth-of-type(2) dt { background: #95ccdb;}
.support_pricelist .cost dl:nth-of-type(2) dt:nth-of-type(2) { background: #f3b769;}
.support_pricelist .cost dl:nth-of-type(2) dd b { color: #2bb126;}
@media screen and (max-width:640px) {
	.support_pricelist .cost {
		margin: 20px 0 10px;
		display: block;
	}
	.support_pricelist .cost dl {
		display: block;
		margin: 0 5% 5px;
	}
	.support_pricelist .cost dl dt {
		margin: 0 0 0;
		padding: 5px 22px 8px 25px;
		line-height: 1.3;
	}
	.support_pricelist .cost dl dd {
		position: relative;
		top: -5px;
	}
	.support_pricelist .cost dl:nth-of-type(2) dt:nth-of-type(2) { margin-top: 5px;}
}



/*---------- 横６つ並びのスペック表 ----------*/
.support_pricelist .specs {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}
.support_pricelist .specs li {
	width: 13%;
	margin: 0 0.5%;
	padding: 10px 0;
	background: #FFF;
	border-radius: 10px;
	box-sizing: border-box;
	border: 1px solid #c2e5d0;
}
@media screen and (max-width:640px) {
	.support_pricelist .specs {
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 5% 10px;
	}
	.support_pricelist .specs li {
		width: 48%;
		margin: 0 0.5% 10px;
		padding: 10px 0;
	}
}



/*---------- 最後のp ----------*/
#support p.note {
	font-size: 14px;
	color: #666;
}
@media screen and (max-width:640px) {
	#support p {
		margin: 0 5%;
	}
	#support p.note {
		font-size: 12px;
		margin: 10px 5% 0;
	}
}





/*==================================================================

		#dtp　＊　sec06 ＊　印刷物の作成・入稿について

==================================================================*/
#dtp {
	position: relative;
	text-align: center;
	padding-top: 60px;
	padding-bottom: 1px;
	background: url("images/bg_08.png");
	overflow-x: clip;
}
#dtp::before { /*wave上*/
	position: absolute;
	content: "";
	background: url("images/bg_09.png");
	background-size: 1920px auto;
	width: 100%;
	height: 23px;
	left: 0;
	top: -20px;
	transform: rotate(180deg);
}
#dtp::after { /*wave下*/
	position: absolute;
	content: "";
	background: url("images/bg_09.png");
	background-size: 1920px auto;
	width: 100%;
	height: 23px;
	left: 0;
	bottom: -20px;
	z-index: 99;
}
@media screen and (max-width:640px) {
	#dtp {
		padding-top: 40px;
		margin-bottom: 30px;
	}
	#dtp::before { /*wave上*/
		background-size: 960px auto;
		height: 12px;
		top: -10px;
	}
	#dtp::after { /*wabe下*/
		background-size: 960px auto;
		height: 12px;
		bottom: -10px;
	}
}



/*------------------------------ 見出し ------------------------------*/
#dtp h2 {
	margin-bottom: 65px;
}
#dtp h2 img {
	display: block;
	margin: 0 auto 25px;
}
@media screen and (max-width:640px) {
	#dtp h2 {
		margin-bottom: 40px;
	}
	#dtp h2 img:first-of-type {
		width: 80px;
	}
	#dtp h2 img:last-of-type {
		width: 277px;
	}
}



/*------------------------------ DTP実例付き概要箇所 ------------------------------*/
.dtp_info {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row-reverse;
}
.dtp_info::before {
	position: absolute;
	content: "";
	width: calc(100% - 100px);
	height: 80%;
	right: 0;
	border-radius: 60px 0 0 60px;
	background-image: linear-gradient(90deg, rgba(245, 199, 149, .3), rgba(245, 199, 149, .1));
}
.dtp_info dt {
	position: relative;
	margin-left: 70px;
	z-index: 9;
}
.dtp_info dd {
	position: relative;
	line-height: 2.4;
	z-index: 9;
}
/*------ 左縦書きキャッチ ------*/
.dtp_info::after {
	position: absolute;
	content: "DESKTOP PUBLISHING / DTP";
	width: 260px;
	height: 20px;
	font-family: "Quicksand", sans-serif;
	font-size: 12px;
	transform: rotate(90deg);
	line-height: 1;
	left: -70px;
	top: 47%;
	letter-spacing: 2px;
	color: #959595;
	z-index: 999;
}
@media screen and (max-width:1700px) { .dtp_info dt { margin-left: 50px;}}
@media screen and (max-width:1650px) { .dtp_info dt { margin-left: 0%; left: 3%;}}
@media screen and (max-width:1600px) { .dtp_info dt { margin-left: -2%; left: 5%;}}
@media screen and (max-width:1560px) { .dtp_info dt { margin-left: -4%; left: 7%;}}
@media screen and (max-width:1530px) { .dtp_info dt { margin-left: -7%; left: 10%;}}
@media screen and (max-width:1480px) { .dtp_info dt { margin-left: -10%; left: 13%;}}
@media screen and (max-width:1440px) { .dtp_info dt { margin-left: -13%; left: 16%;}}
@media screen and (max-width:1400px) { .dtp_info dt { margin-left: -16%; left: 19%;}}
@media screen and (max-width:640px) {
	.dtp_info {
		display: block;
	}
	.dtp_info::before { /*背景*/
		display: none;
	}
	.dtp_info dt {
		width: 90%;
		margin: 0 auto 30px;
		max-width: 400px;
		left: 0;
	}
	.dtp_info dd {
		line-height: 2;
	}
	/*------ 左縦書きキャッチ ------*/
	.dtp_info::after {
		display: none;
	}
}



/*------------------------------ お花の飾り ------------------------------*/
#dt_flo01 {
	position: absolute;
	top: 60px;
	left: 50%;
	margin-left: -760px;
}
@media screen and (max-width:640px) {
	#dt_flo01 {
		display: none;
	}
}



/*------------------------------ 各プラン概要＊共通 ------------------------------*/
.dtp_pricelist {
	width: 90%;
	max-width: 1320px;
	margin: 30px auto 100px;
	display: flex;
	justify-content: space-between;
}
.dtp_pricelist li {
	width: 24%;
	background: #FFF;
	border-radius: 30px;
	padding: 60px 30px 20px;
	box-sizing: border-box;
}
@media screen and (max-width:640px) {
	.dtp_pricelist {
		margin: 30px auto 35px;
		display: block;
	}
	.dtp_pricelist li {
		width: 100%;
		margin-bottom: 20px;
		border-radius: 20px;
		padding: 40px 30px 20px;
	}
}



.dtp_pricelist h3 {
	margin-bottom: 15px;
	font-size: 20px;
}
.dtp_pricelist strong {
	display: block;
	font-weight: 400;
	color: #e6731f;
	margin-bottom: 15px;
	font-size: 15px;
}
.dtp_pricelist dt {
	font-weight: 500;
	background: #f5b767;
	border-radius: 30px;
	margin-bottom: 10px;
	color: #FFF;
}
.dtp_pricelist dd {
	margin-bottom: 20px;
	font-size: 15px;
}
.dtp_pricelist dd p {
	margin-bottom: 20px;
}
.dtp_pricelist dd b {
	position: relative;
	top: 2px;
	margin-right: 5px;
	font-size: 26px;
	font-weight: 400;
	color: #e6731f;
	font-family: "Quicksand", sans-serif;
}
@media screen and (max-width:640px) {
	.dtp_pricelist h3 {
		margin-top: 10px;
		margin-bottom: 0;
	}
	.dtp_pricelist strong {
		margin-bottom: 25px;
		font-size: 14px;
		line-height: 1;
	}
	.dtp_pricelist dl:nth-of-type(2) dt , .dtp_pricelist dl:nth-of-type(3) dt {
		margin-bottom: 0;
	}
	.dtp_pricelist dd {
		margin-bottom: 15px;
		font-size: 14px;
		line-height: 1.8;
	}
	.dtp_pricelist dl:nth-of-type(2) dd , .dtp_pricelist dl:nth-of-type(3) dd {
		margin-bottom: 10px;
	}
	.dtp_pricelist dd p {
		margin-bottom: 10px;
		line-height: 1.7;
	}
}





/*==================================================================

		#flow ＊　制作の流れ

==================================================================*/
#flow {
	position: relative;
	margin:100px auto 100px;
	text-align: center;
	overflow-x: clip;
}
#flow::before { /*飾りのお花*/
	position: absolute;
	content: "";
	top: 300px;
	left: 50%;
	margin-left: 730px;
	background: url("images/sec03_img11.png");
	background-size: 125px auto;
	width: 125px; height: 269px;
	transform: scale(-1, 1);
}
#flow::after { /*飾りのお花*/
	position: absolute;
	content: "";
	top: 300px;
	left: 50%;
	margin-left: -830px;
	background: url("images/sec03_img12.png");
	background-size: 96px auto;
	width: 96px; height: 234px;
	transform: scale(-1, 1);
}
@media screen and (max-width:640px) {
	#flow {
		margin: 40px auto 50px;
	}
	#flow::before , #flow::after { /*飾りのお花*/
		display: none;
	}
	#flow h2 img {
		width: 120px;
	}
}



#flow ul {
	width:90%;
	max-width:1280px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#flow ul li {
	position: relative;
	width: 15%;
	margin-top: 20px;
	box-sizing: border-box;
	padding: 30px 10px 40px;
}
@media screen and (max-width:640px) {
    #flow ul {
		margin-top: 30px;
    }
    #flow ul li {
        width: 50%;
		margin-top: 0;
        padding: 25px 10px 25px;
		border-radius: 5px;
    }
    #flow ul li:nth-of-type(1) , #flow ul li:nth-of-type(4) , #flow ul li:nth-of-type(5) {
        background: #f7f7f7;
    }
}



#flow ul li span {
	position: relative;
	display: block;
	width: 70px;
	height: 70px;
	margin: auto;
	margin-bottom: 30px;
	left: 0;
	right: 0;
	box-sizing: border-box;
	padding-top: 19px;
	padding-left: 6px;
	border-radius: 100%;
	background: #e4bac0;
	color: #FFF;
	font-family: "Quicksand", sans-serif;
	text-align: center;
	font-size: 16px;
	letter-spacing: 4px;
}
#flow ul li:nth-child(odd) span {
	background: #a1d0d8;
}
@media screen and (max-width:640px) {
    #flow ul li span {
        width: 40px;
        height: 40px;
        margin-bottom: 15px;
        padding-top: 9px;
        padding-left: 5px;
        font-size: 12px;
    }
    #flow ul li:nth-child(odd) span {
    }
}



#flow ul li figure {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#flow ul li dt {
	margin: 30px 0 20px;
	font-size: 18px;
	line-height: 1.7;
}
#flow ul li dd {
	font-size: 14px;
	line-height: 1.8;
}
#flow ul li dd em {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.4;
	color: #888;
}
@media screen and (max-width:640px) {
    #flow ul li figure {
    }
    #flow ul li dt {
		font-size: 16px;
		line-height: 1.5;
        margin: 10px 0 10px;
    }
    #flow ul li dd {
		font-size: 13px;
    }
    #flow ul li dd em {
    }
}


/*やじるし*/
#flow ul li::before {
	position: absolute;
	content: "";
	background: url("images/icon_02.svg") no-repeat;
	background-size: 10px auto;
	width: 10px;
	height: 20px;
	top: 60px;
	left: -12px;
}
#flow ul li::after {
	position: absolute;
	content: "";
	background: url("images/icon_03.svg") no-repeat;
	background-size: 10px auto;
	width: 10px;
	height: 20px;
	top: 60px;
	right: -12px;
}
#flow ul li:first-of-type::before { display: none;}
#flow ul li:last-of-type::after { display: none;}
@media screen and (max-width:640px) {
	#flow ul li::before , #flow ul li::after { display: none;}
}





/*==================================================================

		#faq ＊　よくあるご質問

==================================================================*/
#faq {
	position: relative;
	padding-top: 80px;
	padding-bottom: 100px;
	background: url("images/bg_03.png");
	overflow-x: clip;
}
#faq::before { /*wave上*/
	position: absolute;
	content: "";
	background: url("images/bg_04.png");
	background-size: 1920px auto;
	width: 100%;
	height: 23px;
	left: 0;
	top: -20px;
	transform: rotate(180deg);
}
#faq::after { /*wabe下*/
	position: absolute;
	content: "";
	background: url("images/bg_04.png");
	background-size: 1920px auto;
	width: 100%;
	height: 23px;
	left: 0;
	bottom: -20px;
}
@media screen and (max-width:640px) {
	#faq {
		padding-top: 50px;
		padding-bottom: 100px;
	}
	#faq::before { /*wave上*/
		background-size: 960px auto;
		height: 12px;
		top: -10px;
	}
	#faq::after { /*wabe下*/
		background-size: 960px auto;
		height: 12px;
		bottom: -10px;
	}
}



#faq .inner {
	position: relative;
	width:90%;
	max-width:1280px;
	margin: auto;
}
@media screen and (max-width:640px) {
	#faq {
		padding-bottom: 20px;
	}
}



#faq h2 {
	text-align: center;
	margin-bottom: 60px;
}
@media screen and (max-width:640px) {
	#faq h2 {
		margin-bottom: 30px;
	}
	#faq h2 img {
		width: 160px;
	}
}



#faq ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#faq li {
	width: 49%;
	background: #FFF;
	margin-bottom: 25px;
	box-sizing: border-box;
	padding: 40px 40px;
	border-radius: 30px;
}
@media screen and (max-width:640px) {
    #faq ul {
        display: block;
    }
    #faq li {
        width: 100%;
        margin-bottom: 20px;
        padding: 20px 24px 25px 20px;
		border-radius: 20px;
    }
}



#faq dt {
	position: relative;
	margin-bottom: 20px;
	padding-left: 60px;
	font-size: 18px;
	font-weight: 500;
}
#faq dd {
	position: relative;
	padding-left: 60px;
}
@media screen and (max-width:640px) {
    #faq dt {
        margin-bottom: 10px;
        padding-left: 30px;
        font-size: 15px;
		line-height: 1.8;
    }
    #faq dd {
        padding-left: 29px;
		font-size: 13px;
		line-height: 1.8;
    }
}



#faq dt::before {
	position: absolute;
	width: 40px;
	text-align: center;
	top: -4px;
	left: 0;
	content: "Q";
	color: #3aa3af;
	font-family: "Quicksand", sans-serif;
	font-size: 40px;
	font-weight: 300;
	line-height: 1;
}
#faq dd::before {
	position: absolute;
	width: 40px;
	text-align: center;
	top: -2px;
	left: 0;
	content: "A";
	color: #d198a1;
	font-family: "Quicksand", sans-serif;
	font-size: 40px;
	font-weight: 300;
	line-height: 1;
}
@media screen and (max-width:640px) {
    #faq dt::before {
		top: -1px;
		width: 20px;
        font-size: 22px;
        line-height: 1.3;
    }
    #faq dd::before {
		width: 20px;
        font-size: 22px;
        line-height: 1.3;
    }
}



#faq .btn a {
	margin-top: 40px;
	background: #86b8d0;
}
#faq .btn a:hover {
	background: #599fc0;
}
@media screen and (max-width:640px) {
}






/*==================================================================

		$お問い合わせ

==================================================================*/
#contact  {
	position: relative;
	padding-top: 60px;
	overflow-x: clip;
}
#contact::before { /*飾りの写真*/
	position: absolute;
	content: "";
	background: url("images/sec09_img02.png") no-repeat;
	background-size: 361px auto;
	width: 361px;
	height: 507px;
	top: 30px;
	left: 50%;
	margin-left: 500px;
}
#contact::after { /*飾りの写真*/
	position: absolute;
	content: "";
	background: url("images/sec09_img03.png") no-repeat;
	background-size: 350px auto;
	width: 350px;
	height: 512px;
	bottom: -20px;
	left: 50%;
	margin-left: -880px;
}
@media screen and (max-width:1500px) {
	#contact::before { /*飾りの写真*/
		background-size: 280px auto;
		width: 280px;
		margin-left: 440px;
	}
	#contact::after { /*飾りの写真*/
		background-size: 270px auto;
		width: 270px;
		margin-left: -740px;
		bottom: -170px;
	}
}
@media screen and (max-width:640px) {
	#contact  {
		padding-top: 40px;
	}
	#contact::before , #contact::after { /*飾りの写真*/
		display: none;
	}
	#contact h2 img {
		width: 140px;
	}
}



#contact .inner {
	position: relative;
	width:90%;
	max-width:1280px;
	margin: auto;
}
#contact h2 {
	text-align: center;
}
#contact p.center {
	text-align: center;
	line-height: 2.2;
}
@media screen and (max-width:640px) {
}



/*------------------------------Contact Form 7カスタマイズ------------------------------*/
#contact .form {
	width:90%;
	max-width: 900px;
	margin: 50px auto 50px;
}
@media(max-width:640px) {
	#contact .form {
		width:100%;
		margin: 30px auto 0;	
	}
}



#contact table {
	width: 100%;
	margin-bottom: 30px
}
#contact table th{
	width:30%;
	padding: 10px 40px 10px 0;
}
#contact table td{
	padding: 10px 0;
}
@media(max-width:640px) {
	#contact table th , #contact table td {
		display: block;
		width: 100%;
	}
	#contact table th{
		padding: 10px 0 0 0;
	}
	#contact table td{
		padding: 10px 0 20px;
	}
}



#contact table td input{
	width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
    background: #f2f2f2;
    border: none;
    border-radius: 5px;
}

#contact table td .verticallist {
	width: 100%;
   	display:inline-grid;
}
#contact table td .verticallist input {
	width: auto;
	margin-right: 10px;
}

#contact table td textarea{
	width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
    background: #f2f2f2;
    border: none;
    border-radius: 5px;
}


/*------ 必須 ------------------------------*/
.haveto{
  position:relative;
  bottom:1px;
  font-size:14px;
  padding: 3px 10px 5px;
  background:#76c299;
  color:#fff;
  border-radius:4px;
  margin-right:15px;
}
@media(max-width:640px) {
	.haveto{
	  bottom:0;
	  font-size:12px;
	  padding: 3px 10px 5px;
  		margin-right:10px;
	}
}

/*------------------------------ 送信ボタン ------------------------------*/
.wpcf7-submit{
   display: block;
   margin:10px auto;
   padding:1em 0;
   width:360px;
   background:#76c299;
   color:#fff;
   font-size:18px;
   font-weight:bold;	 
   border-radius:50px;
   border: none;
   transition: 0.3s;
}
.wpcf7-submit:hover{
   opacity: 0.8;
}
@media(max-width:640px) {
	.wpcf7-submit{
	   width:100%;
	}
}

/*------------------------------ プライバシーポリシー ------------------------------*/
#privacy {
	height: 200px;
	margin: 0 auto 30px;
	box-sizing: border-box;
	padding: 25px 30px;
	background: #f2f2f2;
	overflow: scroll;
	font-size: 13px;
	border-radius: 10px;
	color: #555;
	line-height: 1.7;
}
.spam {
	text-align: center;
	font-size: 13px;
	margin-bottom: 30px;
}
.spam input {
	margin-right: 10px;
}
@media(max-width:640px) {
}