@charset "utf-8";

/* --------------------

基本

-------------------- */
*{margin:0; padding:0;}
*, *:before, *:after{
	box-sizing: border-box;
}
a{text-decoration:none;color:#333;}
li{list-style-type:none;}

body,input,textarea,button{
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color:#333;
	font-size:16px;
	line-height:1.8;
	font-weight:bold;
}

body{
	text-align:center;
}

.container {
	width:80%;
	margin:0 auto;
	padding:80px 0;
}

@media (min-width:768px){
	.new_service,
	#section3 .container,
	#contact .container,
	#check .container{
		width:700px;
		margin:0 auto;
	}
	
	a:hover,
	input[type="submit"]:hover,
	button:hover{opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";}
}

@media screen and (max-width:767px){
	body,input,textarea{
		font-size:14px;
		text-align:left;
	}
	.container{
		width:100%;
		padding:50px 20px;
	}
	a:hover{opacity:1;}
}

/* cf */
.cf:before,.cf:after{content:""; display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}

/*ページトップに戻るボタン*/
#page-top {
    position:fixed;
    bottom:20px;
    right:20px;
	opacity:0.9;
	line-height:1;
}

#page-top img{
	width:50px;
}

/*フォームのデフォルトのスタイルを削除*/
input, button, textarea, select {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}



/* --------------------

共通

-------------------- */
/*ボタン*/
.btn1,
.btn2{
	width: 300px;
	max-width: 100%;
	margin:0 auto;
	display:inline-block;
	padding: 20px 10px;
	font-size: 18px;
	font-weight:bold;
	border-radius:3px;
	text-align:center;
	line-height:1;
}

.btn1{
	background-color:#333;
	color:#fff;
}

.btn2{
	background-color:#ccc;
	color:#333;
}

/*蛍光ペン風*/
.mark{background: linear-gradient(transparent 60%, #ffff66 60%);}

@media screen and (max-width:767px){
	.pc_only{display:none;}

	.btn1,
	.btn2{
		font-size: 16px;
	}
}

/*サイトイメージ*/
.siteimg{
	display:block;
	background:rgba(255,255,255,0.1);
	padding:6px;
	border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	line-height:1;
}


/* --------------------

見出し

-------------------- */
.h2{
	font-size:30px;
	margin-bottom:30px;
	line-height:1.2;
	text-align:center;
	color:#333;
}

.h3{
	font-size:20px;
	line-height:1;
	margin:20px 0;
}



/* --------------------

ヘッダー

-------------------- */
#header{
	text-align:center;
	background-color:#fff;
}

.h1 a{
	display:block;
	padding:60px 20px 40px 20px;
	color:#A18E5C;
}

.h1 span{
	line-height:1;
	vertical-align:middle;
}

.h1 span:first-child{
	font-size: 50px;
}

.h1 span:last-child{
	font-size:20px;
	margin-left:20px;
}

@media screen and (max-width:767px){
	.h1 span:last-child{
		display:block;
		margin-top:10px;
	}
}



/* --------------------

事業内容

-------------------- */
.new_service{padding-bottom:80px;}
.new_service h3{margin-top:0;}
.new_service > div{text-align:center;}
.new_service .ribbon1{margin-bottom:30px;}

.new_service dl{
	text-align:left;
	border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
}

.new_service dl+dl{margin-top:30px;}

.new_service dt{
	width:40%;
	float:left;
	line-height:1;
}

.new_service dd{
	width:60%;
	float:right;
	padding:20px 0 0 20px;
}

.new_service dd a{
	text-decoration:underline;
}

.new_service dd p{
	font-weight:normal;
	font-size:14px;
}

.new_service dd p+p{
	margin-top:10px;
	color:#f57a78;
    font-weight:bold;
}

@media screen and (max-width:767px){
	.new_service{padding:0 20px 50px 20px;}
	.new_service dt,
	.new_service dd{
		float:none;
		width:100%;
	}
	.new_service dd{
		padding:20px 0 0 0;
	}
}



/* --------------------

制作実績

-------------------- */
#section2{
	background-image:url(../img/footer_lodyas.png);
	color:#fff;
}

#section2 .h2{color:#fff;}

#section2 a{
	color:#fff;
}

#section2 .h2+p{
	text-align:center;
	margin-bottom:30px;
}


#section2 ul{
	width:100%;
}

#section2 ul li{
	text-align:left;
	
}

#section2 ul li h3 a{
	display:block;
	text-decoration:underline;
	text-align:center;
}

#section2 ul li p{
	display:block;
	font-size:14px;
	font-weight:normal;
}

@media (min-width:768px){

	#section2 ul{
		display:table;
		table-layout:fixed;
		border-collapse: separate;
		border-spacing:20px 0;
	}
	
	#section2 ul li{
		display:table-cell;
	}
}

@media screen and (max-width:767px){
	#section2 ul li p{
		margin-bottom:40px;
	}
}



/* --------------------

会社概要

-------------------- */
.table{
	width:100%;
	margin:0 auto;
	border-bottom:1px solid #333;
}
.table dt,
.table dd{
	text-align:left;
	border-top:1px solid #333;
	padding:10px;
}
.table dt{
	float:left;
	width:30%;
}
.table dd{
	float:right;
	width:70%;
}

@media screen and (max-width:767px){
	.table,
	.table dt,
	.table dd{
		float:none;
		border:none;
		width:100%;
		text-align:center;
	}
	.table dt{
		background-color:#eee;
	}
}



/* --------------------

お問合せ

-------------------- */
#contact{background-image:url(../img/shattered.png);}

input,textarea{
	display:block;
	width:100%;
	padding:10px;
	border:1px solid #fff;
	border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
}

input{margin-bottom:20px;}

.input_half input{
	width:49%;
	float:left;
}

.agree{margin-bottom:1em;}

.agree a{
	color:blue;
	text-decoration:underline;
}

.input_half input:first-child{margin-right:2%;}

/*確認画面*/
form p{
	background-color:#eee;
	margin:20px 0 10px 0;
	padding:10px;
}

.form_btn{
	margin-top:30px;
	text-align:center;
}

.form_btn input[type="submit"]{
	margin:10px;
}



/* ------------------------------

コピーライト

------------------------------ */
#copy{
	background-color:#333;
	font-size:12px;
	color:#fff;
	padding:20px 0;
	text-align:center;
}

@media screen and (max-width:767px){
	#copy{font-size:10px;}
}



/* ------------------------------

ドロワーメニュー

------------------------------ */
@media (min-width:768px){
	.drawr{height:auto !important;}
	#menu{
		width:60%;
		margin:0 auto;
	}
	#menu li{
		display:block;
		width:25%;
		float:left;
	}
	#menu li a{
		display:block;
		padding:20px;
	}
}

@media screen and (max-width:767px){
	.drawr_btn {
		background:url(../img/drawrbtn.gif) no-repeat left top / auto 50px;
		display: block;
		width:50px;
		height:50px;
		position: fixed;
		top:0;
		right:0;
		cursor: pointer;
		z-index: 200;
	}
	.peke {
		background-position: -50px 0;
	}
	.drawr {
		display: none;
		background-color:rgba(0,0,0,0.9);
		position: fixed;
		top: 0px;
		right:0;
		width:260px;
		z-index: 100;
	}
	#menu{
		width:260px;
		margin-top:60px;
	}
	#menu li{
	}
	#menu li a{
		color:#fff;
		display:block;
		padding:10px;
		font-size:16px;
	}

}



/* ------------------------------

リボン

------------------------------ */
.ribbon1 {
    display: inline-block;
    position: relative;
    height: 40px;/*リボンの高さ*/
    line-height: 40px;/*リボンの高さ*/
    vertical-align: middle;
    text-align: center;
    padding: 0 30px;/*横の大きさ*/
    background: #f57a78;/*塗りつぶし色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
}

.ribbon1:before, .ribbon1:after{
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.ribbon1:before{
    top: 0;
    left: 0;
    border-width: 20px 0px 20px 15px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
}

.ribbon1:after{
    top: 0;
    right: 0;
    border-width: 20px 15px 20px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}



/* --------------------*/

/* プライバシーポリシー */
.privacy-sentence {
	text-align: left;
}

.privacy-sentence dd > dl > dt,
.privacy-sentence p + p,
.privacy-sentence p + dl {
	margin-top: 1em;
}

.privacy-sentence dl > dd + dt {
	margin-top: 2em;
}

.privacy-sentence ul {
	margin: 1em auto;
	list-style-type: decimal;
}

.privacy-sentence li {
	margin-left: 2em;
	list-style-type: decimal;
}

.privacy-sentence dl dl {
	margin: 0 1em;
}

.privacy-sentence dl ul {
	margin: 1em;
}

.privacy-sentence dl ul {
	margin: 3em auto;
}

.privacy-sentence .window {
	margin: 2em auto;
}

.form_btn .btn2 + div {
	position: absolute;
	top: 0;
	width: 100%;
}

.form_btn {
	position: relative;
}