/*------------------------------------------------------------
 デザイナー向けLP
-------------------------------------------------------------*/
/* top*/
#designer .top {
padding: 10px 20px;
background: #00abcd;
}

#designer .top h1 {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #fff;
}

#designer .header {
margin: 0;
padding: 0 20px;
background: #fff;
position: relative;
}

#designer .header.fixed {
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px #ddd;
z-index: 10;
}

#designer .header-inner {
position: relative;
width: 100%;
}

#designer .header-r {
float: right;
width: auto;
}

/* gnav */
#designer .gnav {

}

#designer .gnav ul {
margin: 0;
padding: 6px 0;
}

#designer .gnav ul:after {
content: "";
display: block;
clear: both;
}

#designer .gnav li {
float: left;
width: auto;
}

#designer .gnav li a {
display: block;
padding: 10px 20px;
color: #364044;
font-size: 14px;
text-decoration: none;
}

#designer .gnav li a:hover {
background: #f3f3f3;
border-radius: 8px;
}

/* button */
#designer .button-wrapper {
margin: 0 auto;
padding: 2px;
position: relative;
top: 68%;
width: 34em;
border: 1px solid #c5943d;
border-radius: 6px;
background: #fff;
}

#designer .button {
background: -webkit-linear-gradient(top,#f9e2bb,#ffa200);
color: #fff;
text-shadow: 0px 0px 10px #ab700a;
width: 100%;
line-height: 1.1;
}

#designer .button-wrapper:hover {
/*opacity: 0.8;*/
}

#designer .button:hover {
color: #ffeac6;
background: #ffbe50;
}

/* headcopy */
#designer .headcopy {

}

#designer .headcopy-img {
margin: 0 auto;
width: 100%;
height: 640px;
background: no-repeat 50% 50%;
background-size: cover;
}

#designer .headcopy-bg {
background: url(/img/bg-pixel.png);
}

#designer .headcopy-message {
margin: 0 auto;
width: 1040px;
height: 640px;
position: relative;
font-size: 1.6rem;
}

#designer .headcopy-message h2 {
position: absolute;
top: 20%;
width: 100%;
color: #fff;
font-size: 3em;
text-shadow: 0 0 10px #000;
text-align: center;
}

#designer .headcopy-message p {
position:absolute;
top: 42%;
width: 100%;
font-size: 2em;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px #000;
text-align: center;
}

/* section */
#designer .section {
padding: 80px 0 30px;
width: 100%;
text-align: center;
}

#designer .section-inner {
margin: 0 auto;
width: 100%;
max-width: 1040px;
position: relative;
}


#designer .section-header {
margin-bottom: 20px;
padding: 2em 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

#designer .section-header h2 {
margin: 0;
display: inline-block;
letter-spacing: 2px;
font-size: 2.5em;
line-height: 1.1;
}

#designer .section-header p {
margin-top: 0.8em;
text-align: center;
letter-spacing: 2px;
font-size: 1em;
}

#designer .section-problem {
margin: 0 auto;
max-width: 1040px;
-js-display: flex;/*flexibility.js*/
display: -ms-flexbox;/*--- IE10用 ---*/
display: -webkit-box;/*--- Androidブラウザ用 ---*/
display: -webkit-flex;/*--- safari用 ---*/
display: flex !important;
-ms-flex-pack: justify;/*--- IE10用 ---*/
-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
-webkit-justify-content: space-between;/*--- safari用 ---*/
justify-content: space-between !important;
-ms-flex-wrap: wrap;/*--- IE10用 ---*/
-webkit-flex-wrap: wrap;/*--- safari用 ---*/
flex-wrap: wrap !important;
}

#designer .section-problem .flex-item {
padding: 30px;
width: 50%;
}

#designer .section-problem img {
margin-bottom: 1em;
padding: 1px;
background: #fff;
display: inline-block;
text-align: center;
width: 130px;
height: 130px;
border: 2px solid #f7f7f7;
border-radius: 50%;
}

#designer .section-problem h3 {
margin: 0 auto;
padding: 0px 0 6px;
width: 80%;
font-size: 1.15em;
}

#designer .section-problem .tag {
margin: -14px 0 0 -20px;
padding: 4px 8px;
float: left;
border-radius: 4px;
color: #fff;
font-size: 0.9em;
}

#designer .before::after {
content: "";
position: absolute;
right: 20px;
border-top: 35px solid #fff;
border-right: 120px solid transparent;
border-left: 120px solid transparent;
}

#designer .before .tag {
background: #f58f24;
}

#designer .before p {
padding: 20px;
background: #fff5ea;
}

#designer .after .tag {
background: #00abcd;
}

#designer .after p {
padding: 20px;
background: #edf7f9;
}

#designer .section-highlight {
margin: 5em auto 0;
padding: 6.4em 0 3em;
position: relative;
width: 100%;
background: #00abcd;
}

#designer .section-highlight .left {
float: left;
width: 70%;
}

#designer .section-highlight .image {
position: absolute;
bottom: 0;
right: 10%;
width: 25%;
max-width: 250px;
}

#designer .section-highlight.contact .image {
right: 25%;
}

#designer .section-highlight::before {
margin-left: -240px;
content: "";
position: absolute;
top: 0%;
border-top: 50px solid #fff;
border-right: 240px solid transparent;
border-left: 240px solid transparent;
}

#designer .section-highlight p.copy {
font-size: 2.4em;
color: #fff;
line-height: 1.2;
}

#designer .section-highlight .message {
padding: 1.8em;
background: #fff;
border-radius: 10px;
}

#designer .section-highlight .campaign {
margin-bottom: 1em;
display: inline-block;
border-bottom: 4px double #fff;
font-size: 1.5em;
color: #fff;
line-height: 1.2;
}

#designer .section-feature {
margin: 3em 0;
}

#designer .section-feature .box {
padding: 30px;
background: #e7e7e7;
-js-display: flex;/*flexibility.js*/
display: -ms-flexbox;/*--- IE10用 ---*/
display: -webkit-box;/*--- Androidブラウザ用 ---*/
display: -webkit-flex;/*--- safari用 ---*/
display: flex !important;
-ms-flex-pack: justify;/*--- IE10用 ---*/
-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
-webkit-justify-content: space-between;/*--- safari用 ---*/
justify-content: space-between !important;
-ms-flex-wrap: wrap;/*--- IE10用 ---*/
-webkit-flex-wrap: wrap;/*--- safari用 ---*/
flex-wrap: wrap !important;
}

#designer .section-feature .point {
margin: 2em 0;
padding: 1em 2em 2.5em;
width: 64%;
background: #fff;
box-shadow: 2px 3px 6px #bbb;;
position: relative;
}

#designer .section-feature .point .tag {
padding: 10px;
position: absolute;
top: 26px;
left: -15px;
display: block;
background: rgba(0, 133, 175, 0.7);
color: #fff;
}

#designer .section-feature .point .num {
font-size: 1.6em;
}

#designer .section-feature .point h3 {
margin: 20px 0 10px;
padding: 0 20px 0 28px;
color: #00abcd;
font-size: 1.7em;
line-height: 1;
text-align: left;
}

#designer .section-feature .point h4 {
margin: 0 0 30px;
padding-left: 28px;
color: #293f52;
line-height: 1;
font-size: 1.05em;
text-align: left;
}

#designer .section-feature .point p {
margin: 1em 0 0;
color: #000;
}

#designer .section-feature .image {
padding: 20px;
width: 30%;
}

#designer .section-feature-2 {
margin: 3em 0;
}

#designer .section-feature-2 .section-inner {
padding: 30px;
background: #e7e7e7;
}

#designer .section-feature-2 .item {
margin: 10px auto;
padding: 20px;
background: #fff;
max-width: 640px;
clear: both;
box-shadow: 4px 4px 2px #ddd;
}

#designer .section-feature-2 .image {
margin: 0 30px 0 0;
float: left;
width: 60px;
border: 3px solid #f7f7f7;
border-radius: 50%;
}

#designer .section-feature-2 .content h3 {
margin: 4px 0 6px;
text-align: left;
font-size: 1.4em;
color: #293f52;
}

#designer .section-feature-2 .content p {
font-size: 0.9em;
}


#designer .section-price {
margin: 0 auto;
max-width: 1040px;
display: flex !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
}

#designer .section-price .flex-item {
padding: 30px;
width: 50%;
}

#designer .section-price h3 {
padding: 8px;
}

#designer .section-price .no h3 {
background: #eee;
color: #444;
font-size: 1em;
}

#designer .section-price .yes h3 {
background: #00abcd;
color: #fff;
}

#designer .section-price p {
margin: 2em 0;
}

#designer .section-price .tag {
margin-right: 1em;
padding: 3px 6px;
background: #374050;
color: #fff;
font-size: 0.85em;
border-radius: 3px;
display: inline-block;
}

#designer .section-flow {
-js-display: flex;/*flexibility.js*/
display: -ms-flexbox;/*--- IE10用 ---*/
display: -webkit-box;/*--- Androidブラウザ用 ---*/
display: -webkit-flex;/*--- safari用 ---*/
display: flex !important;
-ms-flex-pack: justify;/*--- IE10用 ---*/
-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
-webkit-justify-content: space-between;/*--- safari用 ---*/
justify-content: space-between !important;
-ms-flex-wrap: wrap;/*--- IE10用 ---*/
-webkit-flex-wrap: wrap;/*--- safari用 ---*/
flex-wrap: wrap !important;
}


#designer .section-flow .flex-item {
margin-top: 2em;
padding: 20px;
width: 25%;
}

#designer .section-flow .flex-item.start {
background: #00abcd;
color: #fff;
border-radius: 0% 18%;
}

#designer .section-flow .step {
font-size: 1.6em;
font-family: Impact, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo;
color: #bbb;
}

#designer .section-flow .flex-item img {
margin: 1em auto 1em;
display: block;
width: 120px;
height: 120px;
}

#designer .section-flow .flex-item h3 {
font-size: 1.1em;
}

#designer .section-flow .flex-item p {
font-size: 0.8em;
color: #444;
}

#designer .section-form {
padding: 6em 0;
background: #192538;
}

#designer .section-form h2 {
color: #fdf5e6;
font-size: 3em;
}

#designer .section-form table {
margin: 0 auto;
display: block;
width: 100%;
max-width: 700px;
}

#designer .section-form tr {
border-bottom: 1px solid #555;
}

#designer .section-form tr:last-child {
border-bottom: none;
}

#designer .section-form th,
#designer .section-form td {
padding: 1.2em 0.2em;
}

#designer .section-form th {
min-width: 16em;
font-size: 1.2em;
font-weight: normal;
color: #fdf5e6;
line-height: 1.3;
text-align: left;
}

#designer .section-form td {
padding: 1em 0px;
width: 100%;
}

#designer .section-form td input.sei {
width: 48%;
}

#designer .section-form td input.mei {
width: 48%;
}

#designer .section-form input,
#designer .section-form textarea,
#designer .section-form select {
background: #fff;
width: 100%;
font-size: 1.3em;
border: none;
border-radius: 4px;
}

#designer .section-form input {
padding: 6px 14px;
}

#designer .section-form select {
padding: 5px 10px;
}

#designer .section-form textarea {
padding: 6px 14px;
height: 6.8em;
font-size: 1.2em;
line-height: 1.2;
}

#designer .section-form .required {
margin: 0 20px 0 10px;
padding: 2px 4px;
display: inline-block;
float: right;
width: auto;
background: #e27070;
border-radius: 3px;
font-weight: normal;
font-size: 0.8em;
color: #fff;
}

#designer .section-form .optional {
margin: 0 20px 0 10px;
padding: 2px 4px;
display: inline-block;
float: right;
width: auto;
background: #bdb2b2;
border-radius: 3px;
font-weight: normal;
font-size: 0.8em;
color: #fff;
}