@font-face {
font-family:'montserrat';
src: url('../font/montserrat/Montserrat-Regular.ttf') format('truetype');
}

/************************************************ 共通設定 ************************************************/
body {background: #ffffff url(../img/bg_body.gif) repeat; font: 12px "montserrat", Osaka, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; color:#333333; margin: 0px; padding: 0px; line-height:1.2em;}
div,h1,h2,h3,h4,ul,li,dl,dt,dd,img {margin: 0px; padding: 0px;}
ul {list-style: none; margin: 0px; padding: 0px;}
p {margin: 0px; padding: 0px;}
a,a:visited {color: #33f; text-decoration: none;}
a:hover {color: #99f; text-decoration: underline;}
a img {border-style:none;}
.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}


/*.wrap {background:url(./img/bg1.jpg) no-repeat center center; background-size:cover;}*/
.wrap {}
.content {width:800px; margin:0px auto;}
.content_head {width:1200px; margin:0px auto;}
.w10 {margin:0px auto; width:10%;} .w20 {margin:0px auto; width:20%;} .w30 {margin:0px auto; width:30%;} .w40 {margin:0px auto; width:40%;} .w50 {margin:0px auto; width:50%;} .w60 {margin:0px auto; width:60%;} .w70 {margin:0px auto; width:70%;} .w80 {margin:0px auto; width:80%;} .w90 {margin:0px auto; width:90%;} .w100 {margin:0px auto; width:100%;}
.bg_image {position:fixed; top:0px; right:0px; width:100%; z-index:-1000;}
.w35 {width:35%;}
.w65 {width:65%;}

/************************************************ header ************************************************/
.header_area {width:100%;}
.header_area .head_txt {background:#efefef; height:16px;}
.header_area .head_txt h1 {font-size:10px;  line-height:16px; color:#ccc; float:left;}
.header_area .head_txt .head_menu {font-size:0.8em; float:right;}
.header_area .head_txt .head_menu a {color:#ccc; margin-right:1em;}
.header_area .header { width:100%; height:80px; padding: 1em 0em 2em 0em; background:#fff; box-sizing:border-box;}
.header_area .logo {display:inline-block;}
.header_area .logo img {height:75px;}
.header_area .header_cta {display:inline-block; float:right;}
.header_area .header_cta img {height:75px; margin-left:1px;}

/************************************************ nav ************************************************/
.sp_nav {display:none;}
.nav_area{width:100%; background:#fff; border-bottom:solid #efefef 1px;}
.nav {width:100%; margin: 0px auto;}
.nav ul {text-align:center;}	
.nav li {display:inline-block; width:16.6%;}
.nav li a {display:block; width:100%; text-align:center; padding: 2em 0em; margin: 0px; font-size:0.8em; text-decoration:none; color:#999; box-sizing:border-box;}
.nav li a:hover {background:#efefef; margin-bottom:-3px; color:#000; box-sizing:border-box;}

/************************************************ mainimg ************************************************/
.mainimg_area {width:100%; background:#fff;}
.mainimg {width:1200px; margin:0px auto; text-align:left;}
.net .mainimg {background:#fff url(./img/bg_mainimg_net.png) no-repeat right bottom; background-size: auto 100%; padding: 7em 0em;}
.ppc .mainimg {background:#fff url(./img/bg_mainimg_ppc.png) no-repeat right bottom; background-size: auto 100%; padding: 7em 0em;}
.lp .mainimg {background:#fff url(./img/bg_mainimg_lp.png) no-repeat right bottom; background-size: auto 100%; padding: 7em 0em;}
.site .mainimg {background:#fff url(./img/bg_mainimg_site.png) no-repeat right bottom; background-size: auto 100%; padding: 7em 0em;}
.seo .mainimg {background:#fff url(./img/bg_mainimg_seo.png) no-repeat right bottom; background-size: auto 100%; padding: 7em 0em;}

.mainimg h2 {color:#000; font-size:2.0em; line-height:1.8em; padding: 0.2em; letter-spacing:-1px;}

/************************************************ contents ************************************************/
.contents_area {width:100%; background:#fff;}
/*.contents_area:nth-child(even) {background:rgba(0,0,0,0.06);}*/

.bloc1 .head_area {background:#efefef; padding:3em 0em;}
.bloc1 .content_head h2 {font-size:3em; line-height:1.4em; color:#666; text-align:center;}

.sub_bloc {width:100%; background:#fff; padding:3em 0em; padding:3em; box-sizing:border-box;}
.sub_bloc:nth-child(even) {background:rgba(0,0,0,0.06);}
.sub_bloc h3 {font-size:3em; line-height:1.4em; color:#000; text-align:center; padding:2em 0em;}
.sub_bloc h4 {font-size:2.4em; line-height:1.4em; color:#000; text-align:center; padding: 2em 0em 0.5em 0em;}
.sub_bloc p {font-size:1.4em; line-height:2.4em; color:#666; text-align:left;}
.sub_bloc img {width:100%;}
.sub_bloc p.ta_left {text-align:left;}
.sub_bloc p.ta_center {text-align:center;}

.sub_bloc ul {font-size:1.4em; line-height:2.4em; color:#666; text-align:left;}
.sub_bloc ul li {}
.sub_bloc ul li:before {content:"　・　";}

.sub_bloc ul.check {padding: 0em 0em 2em 0em; text-align:left;}
.sub_bloc ul.check li {font-size:2.0em; line-height:3.0em; background:url(./img/check.png) no-repeat left center; background-size: 1.4em auto; padding-left:2.0em; letter-spacing:0.1em;}
.sub_bloc ul.check li:before {content:"";}

.sub_bloc ul.check.sub li {font-size:1.4em; line-height:3.0em; background:url(./img/check.png) no-repeat left center; background-size: 1.4em auto; padding-left:2.0em; letter-spacing:0.1em;}

.sub_bloc dl {font-size:1.4em; line-height:2.4em; color:#666; text-align:left;}
.sub_bloc dl dt {margin-top:1em;}
.sub_bloc dl dd {border-bottom:solid #ccc 1px;}

.sub_bloc .flow_area {padding: 4em 0em;}
.sub_bloc .flow {font-size:2.0em; line-height:3.0em; text-align:center; border-bottom:solid #f00 3px;}
.sub_bloc .arrow {text-align:center; padding:2.5em 0em 1.5em 0em; font-size:16px; }
.sub_bloc .arrow:before {content:"▼"; color:#f00; line-height:2em;}

.sub_bloc .left {float:left;}
.sub_bloc .right {float:right;}

.sub_bloc.bg1 {background:url(./img/bg1.jpg) no-repeat center center; background-size:cover;}
.sub_bloc.bg2 {background:url(./img/bg2.jpg) no-repeat center center; background-size:cover;}
.sub_bloc.bg3 {background:url(./img/bg3.jpg) no-repeat center center; background-size:cover;}
.sub_bloc.bg4 {background:url(./img/bg4.jpg) no-repeat center center; background-size:cover;}
.sub_bloc.bg5 {background:url(./img/bg5.jpg) no-repeat center center; background-size:cover;}

/************************************************ cta_area ************************************************/
.cta_area {background:#ddd; padding:12em 0em;}
.cta_area h2 {font-size:3em; line-height:1.4em; color:#000; text-align:center; border-bottom:solid #000 1px;}
.cta_area h3 {font-size:1.6em; line-height:1.4em; color:#333; text-align:center; padding:2em 0em;}
.cta_area .cta {text-align:center; padding: 1em 0em 0em 0em; }
.cta_area .cta a {display:inline-block; margin: 0em auto; color:#fff; text-align:center; box-sizing:border-box; font-size:2em; padding:1.5em 8em; text-decoration:none;
background:#000; background: linear-gradient(#333, #000);}
.cta_area .cta a:hover {background:#fff; color:#000;}

/************************************************ cta ************************************************/
.cta.btn {display:inline-block; text-align:center; padding: 0em; margin: 0em; border:none; box-sizing:border-box;}
.cta.btn a {display:inline-block; padding: 1.5em 3em; text-align:center; text-decoration:none; border:solid #000 1px; background:#fff; color:#000; box-sizing:border-box;}
.cta.btn a:hover {background:#efefef;}

.top_cta {width:38%;}
.top_cta .cta.btn {text-align:left;}
.top_cta .cta.btn a {width:100%;}

/*簡易ボタンリンク*/
a.linkbtn {font-size:12px; color:#000; text-decoration:none; display:inline-block; padding: 5px 10px; line-height:16px; border:solid #000 1px;}
a.linkbtn:hover {background:#000; color:#fff; padding: 6px 11px;}
/************************************************ box ************************************************/
.box {width:100%; margin:3em 0em; background:#fff; padding:3em; border:solid #ccc 2px; box-sizing:border-box;}
.box dl {}
.box dt {font-size:1.4em; line-height:2.4em; color:#666; font-weight:bold; padding-top:0.5em;}
.box dd {font-size:1.2em; line-height:2.0em; color:#666; padding-bottom:0.5em;}


/************************************************ footer ************************************************/
.fup {width:75px; height:150px; line-height:150px; font-size:30px; color:#222; text-align:center; position:fixed; right:50px; bottom:100px; background:rgba(255,255,255,0.5); display:none; transform:scale(1,0.5); cursor:pointer;}
.fup:after {content:"∧";}

.footer {background:#000; width:100%; padding:5em 3em; box-sizing:border-box;}
.copy {text-align:center; color:#666; font-size:1.4em;}
.copy a {text-align:center; color:#666;}

/************************************************ price ************************************************/
.price table {border-collapse:collapse; width:100%;}
.price table th, .price table td {border:solid #ccc 1px; width:33.3%; padding:2em 0em; text-align:center; font-size:1.2em; line-height:2em;}


/************************************************ contact ************************************************/
.telbtn {font-size:3.0em; font-weight:bold; line-height:2em; background:url(./img/tel.jpeg) no-repeat left center; background-size: 1em auto; padding-left: 1.5em;}
.telbtn a {color:#000;}

/************************************************ contact -> form ************************************************/
input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.form_area {font-size:16px; margin:2em; padding:3em; background:#fff; border:solid #000 1px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);}
.form {border:0; padding: 0%; margin: 0em auto; width:100%;}
.form .input {border:solid 1px #999; font-size:1.2em; padding: 1.0em 1em; margin: 0.5em 0em; background:#fff; width:100%; box-sizing:border-box; background:#fdfdfd;}
.form .input:focus {background:#fff;}
.form .input.textarea {height:8em;}
.form .input.tags { width:18%; margin-right:1%; }
.form .submit {font-size:1.2em; padding: 1.0em 8em; text-align:center; background:#666; color:#fff; font-weight:bold; margin: 1.5em auto; cursor:pointer; box-sizing:border-box; display:block;}
.form .submit:hover {background:#999;}

.form_content {padding: 6em 0em; border-bottom:solid #ddd 3px; }
.form_content:nth-child(even){ background:#ddd; }
/************************************************ contact -> メール送信結果など ************************************************/
.result_content {position:fixed; top:10%; left:10%; width:80%; padding: 3em 0em; background:rgba(255,255,255,0.95); text-align:center; font-size:5em; line-height:2em; border:solid #aaf 6px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); color:#666;}

.addtext {text-align:center; margin:1em auto;}
.addtext p {display:inline-block; font-size:1.4em; padding:0.2em 1em; color:#f00; border:double #f00 4px;}

/****************************** 調整用 ******************************/

@media(max-width: 400px) {
.header_area .head_txt h1 {overflow:-webkit-marquee; white-space:nowrap;}
.header_area .head_txt .head_menu {display:none;}
.header_area .header_cta {position:fixed; bottom:0px; left:0px; width:100%;}
.header_area .header_cta a {display:block; width:50%; float:left;}
.header_area .header_cta a img {width:100%; height:auto;}
.header_area .header {padding: 10px 0px;}
.nav {display:none;}
.nav ul {position:fixed; top:77px; left:0px; width:100%; background:rgba(255,255,255,0.96); border-top:solid #333 2px;}
.nav li {display:block; width:100%;}
.nav li a {display:block; width:100%; text-align:left; padding: 0.8em 1em; margin: 0px; font-size:1.2em; text-decoration:none; color:#999; border-bottom:dotted #999 2px; box-sizing:border-box;}
.nav li a:before{content:" > ";}
.nav li a:hover {border-bottom:dotted #999 2px;}
.sp_nav {display:block; width:55px; float:right; font-size:35px; line-height:55px; color:#999;}
.header_area .logo {width:68%; float:left;}
.header_area .logo img {width:100%; height:auto;}
.mainimg {width:100%; text-align:center;}
.mainimg h2 {font-size:1.8em;}
.top_cta {width:68%; margin:0px auto;}
.top_cta .cta.btn a {border:solid #fff 4px;}
.net .mainimg,.ppc .mainimg,.lp .mainimg,.site .mainimg,.seo .mainimg {background-size: 68% auto; padding: 6em 0em 9em 0em;}

.maintxt {padding: 2em; box-sizing:border-box; text-align:left;}
.maintxt p {font-size: 1.2em; line-height: 2.0em;}
.bloc1 .head_area {padding: 30px 0em;}
.bloc1 .content_head h2 {font-size: 1.2em; line-height:2em; border-bottom: solid #ff0 1px;}
.sub_bloc {padding: 2em; box-sizing:border-box;}
.sub_bloc h3 {font-size: 1.4em; padding: 2.5em 0em; }
.sub_bloc h4 {font-size: 1.4em;}
.sub_bloc p {font-size: 1.2em; line-height: 2.0em;}
.sub_bloc ul {font-size: 1.2em; line-height: 2.0em;}
.sub_bloc ul.check li {font-size: 1.2em; line-height: 2.0em;}
.sub_bloc ul.check.sub li {font-size: 1.2em; line-height: 2.0em;}
.sub_bloc .flow {font-size: 1.2em; line-height: 2.0em;}
.cta_area h2 {font-size:2.0em;}
.cta_area h3 {font-size:1.4em;}
.cta_area .cta a {font-size: 1.2em;}
.telbtn {font-size:1.5em;}
.telbtn a {color:#000;}
.form_area {margin: 1em 0em; padding: 1em; border-radius:0px; border:none;}
.form .input {font-size: 16px; padding: 0.5em 1em;}
.form .submit {padding: 0.8em 0em; width:100%; margin:1em 0%;}

.cta.btn {}
.cta.btn a {margin: 2em auto; font-size:1.2em; padding:1.0em 0em; width:80%;}
.price table th, .price table td {padding:1em 0em;}


/*考え中*/
.header_area {height:77px; width:100%;}
.header {position:fixed; top:0px; left:0px; width:100%;}
.header_area .head_txt {display:none;}
.header_area .header_cta {display:none;}
}
@media(max-width: 800px) {
.content {width:100%; margin:0px auto;}
.content_head {width:100%; margin:0px auto; padding:0px 15px; box-sizing:border-box;}
.contact .content_head {padding:0px;}
.cta_area  .cta a {padding:1.0em 3em;}
}
@media (min-width: 801px) and (max-width: 1200px) {
.content_head {width:100%; margin:0px auto;}
}



/****************************** // 調整用 ******************************/


/****************************** 以下、メモ ******************************/
/*
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; margin: 0px 0.25em;
transform:rotate(-3deg);
transform:scale(1,0.5);
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

*/