@charset "UTF-8";

h2.intro{width:100%;height:auto;color:#177f94;font-size:20px;line-height:140%;padding:30px 0px;}
h3.intro{width:100%;height:auto;color:#177f94;font-size:19px;line-height:1;border-left: #177f94 5px solid;text-align:left;padding:2px 0px 4px 7px;}
p.attention_a{width:100%;height:auto;text-align:left;padding:0px 0px 40px;}
p.attention_b{width:100%;height:auto;text-align:left;padding:15px 0px 50px;}
	@media all and (max-width: 1024px) {
		h2.intro{font-size:14px;line-height:150%;}
		h3.intro{font-size:17px;}
		p.attention_b{padding:15px 0px 35px;}
	}

/*===料金===*/
dl.charge{width:100%;height:auto;padding-bottom:50px;
	display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;
	-webkit-box-align: start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;
	-webkit-box-pack: justify;-webkit-justify-content space-between;-ms-flex-pack: justify;justify-content: space-between;}
div.charge dl.charge:nth-of-type(1){padding-bottom:20px;}
dl.charge div{width:48%;}
dl.charge div:nth-child(1){margin-left:0px;}
dl.charge div:nth-child(2){margin-right:0px;}
dl.charge div dt{width:100%;height:auto;margin-left:0px;}
dl.charge div dt h4.ja{width:100%;height:auto;color:#ffffff;background:#129ab5;font-weight:bold;font-size:16px;line-height:1;padding:8px 0px 10px 0px;}
dl.charge div dt.deli h4.ja{background:#feb617;}
dl.charge div dd{width:100%;height:auto;margin-right:0px;padding-top:5px;}
dl.charge div dd p.ja{width:100%;height:auto;color:#002b34;font-size:34px;line-height:140%;}
dl.charge div dd p.ja span{display:inline-block;width:auto;height:auto;color:#2b2b2b;font-size:12px;padding-right:8px;vertical-align: 8px;}
dl.charge div dd p.ja small{vertical-align:2px;font-size:15px;}
div.charge p.attention_b{width:100%;padding:20px 0px 20px;}
dl.charge div dd p a{display:block;width:100%;height:auto;padding-top:8px;}
dl.charge div dd p a:link{color:#129ab5;text-decoration:underline;}
	@media all and (min-width: 1025px) {
		dl.charge div dd p a:visited{color:#129ab5;text-decoration:none;}
		dl.charge div dd p a:hover{color:#ff8500;text-decoration:none;}
		dl.charge div dd p a:active{color:#129ab5;text-decoration:none;}
	}
	@media all and (max-width: 1024px) {
		dl.charge{padding-bottom:35px;}
		.charge_box{padding-top:30px;}
		dl.charge div{width:100%;}
		dl.charge div:nth-child(2){padding-top:20px;}
		dl.charge div dd:nth-child(3) p{font-size:11px;}
	}

/*===ピックアップ機能紹介===*/
.pickup{width:100%;max-width:1200px;height:auto;margin-top:20px;padding-bottom:50px;
	display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
	-webkit-box-align: start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;
	-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.pickup div{width:auto;height:auto;border-bottom:1px solid #cccccc;}
.pickup dt{width:100%;height:auto;}
.pickup dt h4{width:100%;height:auto;color:#ffffff;background:#129ab5;font-weight:bold;font-size:14px;line-height:1;padding:8px 0px 10px 0px;}
.pickup dd p:nth-child(1){width:100%;height:auto;auto;background:#129ab5;padding:0px 0px 5px 0px;}
.pickup dd p:nth-child(1) img{width:calc(100% - 10px);height:auto;}
.pickup dd p:nth-child(2){width:calc(100% - 20px);height:auto;text-align:left;padding-top:6px;}
.pickup dd p:nth-child(3){width:calc(100% - 20px);height:auto;text-align:right;color:#129ab5;font-weight:bold;font-size:25px;line-height:160%;}
.pickup dd p:nth-child(3) small{vertical-align:2px;font-size:15px;}
	@media all and (min-width: 1025px) {
		.pickup div{width:23.2%;height:auto;margin:0px 1% 20px 1%;}
		.pickup div:nth-child(4n+1){margin:0px 1% 20px 0%;}
		.pickup div:nth-child(4n){margin:0px 0px 20px 1%;}
	}
	@media all and (max-width: 1024px) {
		.pickup{padding-bottom:35px;}
		.pickup div{margin:0px 0px 10px 0px;}
	}

/*===機能紹介===*/
dl.function{width:100%;max-width:1200px;height:auto;border-top:1px solid #cccccc;margin-top:20px;padding-bottom:50px;}
dl.function div{width:100%;height:auto;border-bottom:1px solid #cccccc;padding:15px 0px;
	display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
	-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;
	-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
dl.function div dt{width:30%;height:auto;}
dl.function div dt h4{width:100%;height:auto;text-align:left;color:#129ab5;font-weight:bold;font-size:14px;}
dl.function div dd{width:70%;height:auto;}
dl.function div dd p{width:100%;height:auto;text-align:left;}
	@media all and (max-width: 1024px) {
		dl.function{padding-bottom:35px;}
		dl.function div dt{width:100%;}
		dl.function div dt h4{padding-bottom:6px;}
		dl.function div dd{width:100%;}
	}

/*===上記機能追加料金===*/
.plus{width:100%;height:auto;background:#177f94;}
.plus_in{width:100%;max-width:1200px;height:auto;position:relative;}
.plus_in_txt{width:calc(100% - 266px);height:auto;position:relative;text-align:right;margin-right:0px;padding:20px 0px 40px 0px;}
.plus_in_txt h3{width:100%;height:auto;text-align:center;font-size:25px;color:#ffffff;line-height:1;padding:10px 0px;}
.plus_in_txt h3 span{display:inline-block;color:#feb617;font-size:50px;vertical-align: text-bottom;}
.plus_in_txt h4{width:100%;height:auto;text-align:center;font-size:20px;color:#ffffff;line-height:1;padding-bottom:15px;}
.plus_in_txt p.txt{width:100%;height:auto;text-align:center;font-size:14px;color:#ffffff;padding-bottom:10px;line-height:170%;}
.plus_in_txt p.txt span{display:inline-block;color:#feb617;font-size:14px;}
.plus_in p.img{width:266px;height:auto;}
	@media all and (min-width: 1025px) {
		.plus_in p.img{position:absolute;bottom:0px;left:0px;}
	}
	@media all and (max-width: 1024px) {
		.plus{background:#ffffff;}
		.plus_in_txt{width:100%;height:auto;text-align:center;padding:0px 0px 10px 0px;background:#177f94;}
		.plus_in p.img{width:200px;height:auto;}
		.plus_in_txt h4{font-size:15px;}
		.plus_in_txt p.txt{font-size:12px;}
		.plus_in_txt p.txt span{font-size:12px;}
	}

/*===制作実績===*/
div.product{width:100%;height:auto;padding-bottom:15px;}
ul.product{width:100%;height:auto;max-width:1200px;padding:15px 0px;
	display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
	-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;
	-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
ul.product li{padding-bottom:15px;}
	@media all and (min-width: 1025px) {
		ul.product li{width:22.7%;height:auto;margin:0px 1.5% 15px 1.5%;}
		ul.product li:nth-child(4n+1){margin:0px 1.5% 15px 0%;}
		ul.product li:nth-child(4n){margin:0px 0px 15px 1.5%;}
	}
	@media all and (max-width: 1024px) {
		ul.product li{width:48%;height:auto;}
		ul.product li:nth-child(odd){margin-left:0px;}
		ul.product li:nth-child(even){margin-right:0px;}
	}

/*===■よくある質問===*/
.function_box.faq{padding-bottom:35px;}
.question .recruit_box_contents{width:calc(100% - 30px);}
dl.question{width:100%;height:auto;padding:20px 0px 15px 0px;}
dl.question div:last-child{padding-bottom:0px;}
dl.question div{width:100%;height:auto;padding-bottom:15px;
	display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	-webkit-box-align: start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;
	-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
dl.question dt{width:100%;height:auto;background:url(../img/common/q.webp) no-repeat;background-size:25px 20px;background-position:top left;text-align:left;padding-left:30px;}
dl.question dd{width:100%;height:auto;background:url(../img/common/a.webp) no-repeat;background-size:25px 20px;background-position:top left;text-align:left;color:#ffffff;padding-left:30px;margin-top:4px;}
dl.question dt h4{width:100%;height:auto;line-height:200%;color:#1c8578;}
dl.question dd p{width:100%;height:auto;line-height:200%;color:#222222;}
	@media all and (max-width: 1024px) {
		.faq_box{padding-top:30px;}
		.function_box.faq{padding-bottom:0px;}
		.question .recruit_box_contents{width:calc(100% - 20px);}
	}

/*===ブログ===*/
.blog_map{width:100%;height:auto;padding:0px 0px 20px 0px;}
div.blog{width:100%;height:auto;padding:40px 0px 10px 0px;background:#177f94;}
div.blog h2{width:100%;height:auto;color:#ffffff;font-weight:bold;font-size:19px;line-height:1;}
ul.news{width:100%;height:auto;max-width:1200px;padding:20px 0px 5px 0px;
	-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
	display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
ul.news li{width:49%;background:#ffffff;}
ul.news li dl{width:100%;height:auto;}
ul.news li dl div{width:100%;height:auto;
	-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
	display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
ul.news li dl div dt{width:25%;height:auto;}
ul.news li dl div dd{width:calc(75% - 30px);height:auto;margin:0px 15px;padding:10px 0px;}
ul.news li dl div dd p.date{width:100%;height:auto;text-align:left;color:#6d5050;font-size:11px;}
ul.news li dl div dd h3{text-align:left;color:#85211f;font-size:14px;font-weight:bold;padding:2px 0px;}
ul.news li dl div dd p.txt{width:100%;height:auto;text-align:left;color:#6d5050;}
	@media all and (min-width: 1025px) {
		ul.news li:nth-of-type(1) , 
		ul.news li:nth-of-type(3)
			{margin-left:0px;}
		ul.news li:nth-of-type(2) , 
		ul.news li:nth-of-type(4)
			{margin-right:0px;}
		ul.news li:nth-of-type(1) , 
		ul.news li:nth-of-type(2)
			{margin-bottom:25px;}
		ul.news li dl div dd p.txt{width:100%;height:40px;}
	}
	@media all and (max-width: 1024px) {
		div.blog{padding:35px 0px 0px 0px;}
		ul.news{padding-bottom:15px;}
		ul.news li{width:100%;}
		ul.news li:nth-of-type(1) , 
		ul.news li:nth-of-type(2) , 
		ul.news li:nth-of-type(3)
			{margin-bottom:15px;}
		ul.news li dl div dt{width:27%;height:auto;}
		ul.news li dl div dd{width:calc(73% - 30px);}
		ul.news li dl div dd h3{bold;padding:1px 0px;}
	}