@charset "utf-8";
/* CSS Document */
html {
	width: 100%;
	margin: 0;
	padding: 0;
	color: #001b33;
}

.top_img{
	background: url("../img/lp3_head.png") center center / cover no-repeat scroll;
	width: 100%;
	max-width: 1307px;
	min-height: 733px;
	margin:20px auto;
}


h1 {
	margin: 0 auto 0;
	text-align: center;
}
section {
	width: 100%;
	background: #fff;
}
article {
	width: 800px;
	margin: 0 auto;
	padding: 30px;
}
a:hover{
	opacity: 0.8;
}
.box1 {
	padding: 40px;
	width: 840px;
	background: rgba(255, 255, 255, 0.9);
	margin: -380px auto 50px;
}
.box1 article {
	width: 100%;
	padding: 0;
}
.box2 {
	background: rgb(2, 0, 36);
	background: linear-gradient(162deg, rgba(2, 0, 36, 1) 0%, rgba(0, 84, 255, 1) 0%, rgba(9, 9, 121, 1) 62%);
	color: #fff;
}
.box3 {
	background: #fff;
}
.pro {
	width: 100%;
	background: #eee;
}
.bg_kujira {
	background: url("../img/lp1_head.png") 40% -250px / cover no-repeat scroll #1C377D;
	width: 100%;
	max-height: 800px;
	padding: 0;
	color: #fff;
	text-shadow: 2px 2px 6px #090979, -2px -2px 6px #090979;
}
.bg_kujira .mail_box {
	text-shadow: none;
	background: rgba(255, 255, 255, 0.9);
}
.bg_kujira a {
	color: #fff;
}
.no_space {
	margin: 0 auto;
}
h2, h3 {
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
}
h3 {
	color: #fff;
}
h3.tokuten {
	font-size: 40px;
	color: #DA8E00;
	background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
h3.tokuten em {
	font-size: 50px;
}
@keyframes textAnime {
	0% {
		stroke-dashoffset: 600;
		fill: transparent;
	}
	50% {
		fill: transparent;
	}
	100% {
		stroke-dashoffset: 0;
		fill: #333;
	}
}

h3.media:after {
	content: "\f70e";
}
h3.change:after {
	content: "\f362";
}
h3.project:after {
	content: "\f542";
}
h3.voice:after {
	content: "\f3c9";
}

h3.no{
	border-bottom: 1px solid #ccc;
	padding-bottom: 1em;
}
h3.no:after {
	content: none;
}

h3.prof{
	background: #7ecef4;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.mail_box{
	width: 100%;
	margin: 0 auto;
	padding: 60px 0;
	background: #7ecef4;
}
.mail_box article{
	padding: 0;
	margin: 0 auto;
}

ul.attent {
	width: 700px;
	margin: 30px auto 0;
	padding: 0;
}
ul.attent li{
	font-size: 0.9rem;
	margin-bottom: 10px;
	text-align: left;
}


.box3 h3, .pro h3 {
	color: #001b33;
}
.pro h3 {
	font-size: 25px;
}
.pro h3 em {
	background: #001b33;
	color: #fff;
	border-radius: 25px;
	font-weight: normal;
	font-size: 15px;
	padding: 10px 20px;
	display: block;
	width: 50%;
	margin: 0 auto 20px;
}
.pro h3:nth-of-type(2) {
	margin-top: 50px;
}
mark {
	background: linear-gradient(transparent 60%, #FFFF00 0%);
	font-style: normal;
	font-weight: bold;
}
h2 span {
	color: #fb1d1d;
	font-size: 36px;
}
span {
	font-size: 12px;
}
p {
	margin-bottom: 30px;
	line-height: 200%;
}
.pro p {
	font-size: 15px;
}
p.large {
	font-size: 26px;
	line-height: 1.3;
	text-align: center;
	font-weight: bold;
	margin-bottom: 20px;
}
/* 声 
dl {
	background: #ed80bf;
	padding: 20px;
	margin-bottom: 20px;
	border: 8px solid #eee;
	color: #fff;
	font-size: 16px;
}
dl.men {
	background: #5C9EE7;
}
dt {
	font-size: 18px;
	border-bottom: 1px dotted #fff;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-weight: bold;
}
dt:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	display: inline-block;
	margin-right: 20px;
	content: "\f007";
}
dd:last-child {
	margin-top: 20px;
}

*/

/* メールフォーム */

.form_box{
	background:#fff;
	padding: 60px 30px;
	border-radius:20px ;
}
picture{
	margin:0 auto 20px;
	display: block;
}
form{
	margin: 20px 0;
}

.mailForm dt{
	font-size: 18px;
	font-weight: bold;
	float: left;
	width: 40%;
}

.mailForm dd{
	float: left;
	width: 58%;
}

.mailForm dd input{
	width: 100%;
}

/* リスト */
ul.check, ul.check2 {
	margin: 0 auto 30px;
	font-weight: bold;
	padding: 20px;
}
ul.check2 {
	background: #fff;
	color: #001b33;
	padding: 20px;
}
ul.check li:before, ul.check2 li:before {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	margin-right: 10px;
	content: "\f14a";
	color: #FF0004;
}
ul.check li {
	font-size: 22px;
	line-height: 180%;
	margin-bottom: 10px;
}
ul.check2 li:before {
	text-align: center;
	content: "\f4fc";
	color: #090979;
	margin-right: 20px;
}
ol {
	counter-reset: number;
	list-style-type: none !important;
	padding: 20px;
	margin: 30px auto;
	background: #f5faff;
}
ol li {
	position: relative;
	padding-left: 30px;
	line-height: 1.4;
	margin-bottom: 10px;
}
ol li:before {
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*以下数字のデザイン変える*/
	display: inline-block;
	background: #5c9ee7;
	color: white;
	font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
	font-weight: bold;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	/*以下 上下中央寄せのため*/
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.kiyaku p{
	line-height: 100%;
	margin: 0px;
}
/* PC用 */
@media screen and (min-width: 860px) {}
/* スマホ・pad用 */
@media screen and (max-width:859px) {

	header {
		height: auto;
	}
	section {
		margin-bottom: 20px;
	}
	article {
		padding: 20px;
	}

	ul {
		width: 100%;
	}
	ul.attent{
		width: 100%;
	}
	h2, h3, h2 span {
		font-size: 24px;
		margin-bottom: 20px;
	}
	h3 {
		padding-bottom: 10px;
	}
	h3.tokuten, h3.tokuten em {
		font-size: 30px;
	}
	h3:after {
		margin: 20px auto;
		font-size: 30px;
	}
	img.herf {
		width: 50%;
	}
	.box1, article {
		width: 100%;
		margin: 0px auto 0;
		padding: 20px;
	}
	p.large, ul.check2 li {
		font-size: 18px;
	}
	.pro h3 {
		font-size: 20px;
	}
	.pro h3 em {
		width: 80%;
	}
	.mail_box{
		padding:30px 10px 20px;
	}
	
	.form_box{
		padding: 30px 20px;
	}
	form{
		margin:10px auto;
		padding: 0 0 20px;
	}

	input[type="image"],
	input[type="text"], textarea{
		width: 100%;
	}

}