/*------------------------------------------------------------
 ホームページの作り方
-------------------------------------------------------------*/
#hp .header {
margin: 0;
padding: 0 20px;
background: #fff;
position: relative;
}

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

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

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

#hp .footer {
background: #192538;
}

/* gnav */
#hp .gnav {
display: block;
}

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

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

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

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

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

/* headcopy */
#hp .headcopy {

}

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

#hp .headcopy-bg {
/*background-image: url(/img/bg-pixel.png);*/
background-color: #73123f;
}

#hp .headcopy-message {
margin: 0 auto;
padding: 50px 0;
width: 1040px;
height: 240px;
position: relative;
font-size: 1.6rem;
}

#hp .headcopy-message h1 {
margin: 0;
width: 100%;
color: #fff;
font-size: 3em;
text-shadow: 0 0 10px #000;
text-align: center;
}

#hp .headcopy-message .subcopy {
margin: 6px auto;
padding: 5px 0;
display: block;
width: 440px;
background: linear-gradient(to right, transparent 0%, rgba(51, 51, 51, 0.6) 20%, rgba(51, 51, 51, 0.6) 80%, transparent 100%);
color: #fff;
font-size: 1.6rem;
font-weight: bold;
text-shadow: 0 0 10px #000;
text-align: center;
}

#hp .headcopy-message p {
position:absolute;
top: 68%;
width: 100%;
font-size: 1em;
color: #fff;
text-shadow: 0 0 10px #555;
text-align: center;
}

#hp .outline {
margin: 40px auto 0;
padding: 24px;
background: #f8f8f8;
border-radius: 6px;
}

/* section */
#hp .section {
padding: 80px 0 30px;
width: 100%;
font-size: 1.4rem;
text-align: center;
}

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


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

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

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

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

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

#hp .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%;
}

#hp .section-problem h3 {
font-size: 1.2em;
}

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

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

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

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

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

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

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

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

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

#hp .section-highlight.contact .image {
right: 30%;
}

#hp .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;
}

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

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

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