@charset "UTF-8";
@import url("/cmn_data/font/font-awesome/css/font-awesome.min.css");

/* common
---------------------------------------------------------- */
.pc_only {
display: initial;
}
.sp_only {
display: none;
}
.red {
color: #ff0000;
}
.red-bold {
color: #ff0000 !important;
font-weight: bold !important;
}
ul.notice {
margin-top: 0;
margin-right: 0;
margin-bottom: 2em;
padding: 0;
}
ul.notice li,
p.notice{
margin: 0;
padding: 0;
padding-left: 1em;
color: #777;
list-style: none;
text-indent: -1em;
font-size: 11px !important;
text-align: left;
line-height: 1.5;
}




/* content */

#main-box {
    margin-bottom: 0;
}

h1 {
margin-top:0;
background-image: url(../img/2019gw_mvbg.jpg);
}

.feature{
background-color: #FFEFBF;
padding: 20px;
margin: 70px 0;
}

.cards{
background-color: #BFDFFF;
padding: 20px;
margin: 30px 0;
}

.flow{
background-color: #D3F1C0;
padding: 20px;
margin: 25px 0;
background:none;
}

section {
font-size: 16px !important;
width: 980px;
margin: auto;
}

section h3{
background-color: #FFF;
padding: 0.5em;
width: 680px;
margin: auto;
margin-bottom: 1em;
border-radius: 48px;
font-size: 1.8rem;
}

.cards h3{
border-radius: 0;
padding: 0.5em;
width: 680px;
margin: auto;
margin-bottom: 1em;
font-size: 1.8rem;
display: inline-block;
position: relative;
height: 60px;/*リボンの高さ*/
line-height: 60px;/*リボンの高さ*/
vertical-align: middle;
text-align: center;
padding: 0 30px;/*横の大きさ*/
background: #F132A2;/*塗りつぶし色*/
color: #FFF;/*文字色*/
box-sizing: border-box;
}

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

.cards h3:before {
  top: 0;
  left: 0;
  border-width: 30px 0px 30px 25px;
  border-color: transparent transparent transparent #BFDFFF;
  border-style: solid;
}

.cards h3:after {
  top: 0;
  right: 0;
  border-width: 30px 25px 30px 0px;
  border-color: transparent #BFDFFF transparent transparent;
  border-style: solid;
}

.cards li p{
text-align:left;
padding:1em;
}

.cards li p strong{
display:block;
height:40px;
}

.cards li img+p+p{
margin-bottom: 0px;
    font-size: 0.95rem;
    padding: 0.2em 1em;
    display:block;
}

.cards li p+p{
height:40px;
font-size: 0.82rem;
margin-bottom:10px;
}

.cards li p+p+span{
    margin-bottom: 75px;
    display: block;
    text-align: center;
    font-size: 0.92rem;
    color: #F00;
}

.cards li a{
display: block;
width: 220px;
background-color: #FF8000;
color: #FFF;
padding: 20px;
margin: auto;
position: absolute;
bottom: 20px;
left: 20px;
font-weight: bold;
border-radius: 10px;
text-align: left;
}

.cards li a:after{

}


section ul {
display:inline-flex;
}

section ul li {
width: 300px;
margin-right: 30px;
background-color: #FFF;
border-radius: 12px;
padding: 1em 0;
position:relative;
}



.feature li strong {
font-size: 1.8rem;
padding: 0.5em 0;
display: block;
line-height: 1.2;
}
.feature li:nth-child(3) strong {
font-size: 1.4rem;
margin-top:1em;
}

.flow h3{
border:#D3F1C0 4px solid;
}

.flow ul.notice li{
background:none;
}

.flow li{
width:190px;
margin-right:10px;
border:#D3F1C0 4px solid;
}

.flow li:first-child{
width:280px;
}

.flow li p:last-of-type{
font-size:0.8rem;
}

.flow li p:first-of-type{
height:40px;
display:block;
}

.flow li p+img{
margin:1em 0;
}

.flow li:first-child p+img{
}

.flow li a{
    line-height: 1.2;
    font-size: 1rem;
    display: block;
    width: 220px;
    background-color: #FF8000;
    color: #FFF;
    padding: 12px;
    margin: 10px auto 0;
    font-weight: bold;
    border-radius: 10px;
    text-align: left;
}


.cards li a::after {
content: url(../img/2019gw_arrow1.png);
display: inline-block;
vertical-align: middle;
}

.flow li a::after {
content: url(../img/2019gw_arrow1.png);
display: inline-block;
vertical-align: middle;
}

.flow li::after {
content: url(../img/2019gw_arrow2.png);
display: inline-block;
vertical-align: middle;
position: absolute;
top: 90px;
left: -30px;
}

.flow li:first-child::after,
.flow .notice li::after {
display:none;
}

.flow .notice{
display: block;
width: 90%;
margin: 20px auto;
}

.flow .notice li{
width: 100%;
font-size: 0.85rem !important;
border:none;
}

@media screen and (min-width:1px) and (max-width:767px) {

/* Reset
---------------------------------------------------------- */
*{
box-sizing: border-box;
}
html{
overflow-x: hidden;
}
body {
min-width: 100% !important;
}
#header ,#gNaviBtn,#gnav{
display:none!important;
}
#main-box .card-area .btn-area {
padding-top: 0!important;
}

/* common
---------------------------------------------------------- */
.pc_only {
display: none;
}
.sp_only {
display: initial;
}

/* content
---------------------------------------------------------- */
#main-box {
    padding-bottom: 0;
}

h1 img{
width:100%;
height:auto;
}

h2{
text-align: center;
font-size: 1.0rem;
}

.feature,.cards,.flow{
padding: 20px 5px;
}

section {
width: 100%;
}

section h3 {
width: 100%;
font-size: 1.1rem;
font-weight: bold;
}

section ul {
display: inline-block;
}

section ul li {
margin-right: 0;
margin-bottom: 20px;
}

.cards h3 {
width: 100%;
font-size: 1.2rem;
}

.cards li p strong {
    display: initial;
}
.cards li p+p {
margin-bottom: 10px;
font-size: 0.82rem;
height:auto;
}
.cards li a {
width: 270px;
position: initial;
}
.flow li:first-child p+img {
margin-right: 0;
}
.flow li a {
width: 260px;
margin-bottom: 10px;
display: block !important;
}
.flow li:first-child,
.flow li {
width: 300px;
margin-right: 0;
}

.flow li::after {
content: url(../img/2019gw_arrow2B.png);
display: inline-block;
vertical-align: middle;
position: absolute;
top: -35px;
left: 50%;
margin-left: -25px;
}

.flow li:first-child p:last-of-type{
margin-bottom:20px;
}

.cards li p+p+span {
    margin-bottom: 15px;
    display: block;
    text-align: center;
    font-size: 0.92rem;
    color: #F00;
}

}