@charset "utf-8";

/*********************************************************/
/* CSS file For Hunglead, Inc. */
/* FileName: replace_style.css */
/* data: 2021/03/11 */
/* index: */
/*   1 for SmartPhone */
/*   2 for Tablet */
/*   3 for PC */
/*********************************************************/



/* ------------------------------------------------------- */
/* ===== for SmartPhone ===== */
/* ------------------------------------------------------- */
section.section-box:nth-of-type(odd) {
 background: #fff;
}
section.section-box:nth-of-type(even) {
 background: #f8f8f8;
}

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

#main-area {
 background: url("../images/bg_main_sp.jpg") no-repeat top center/cover;
}

#main-area #main-cont {
 box-sizing: border-box;
 color: #fff;
 text-align: center;
 padding: 30px 10px;
}

#main-area #main-cont p {
 font-weight: bold;
 margin: 0 auto 30px;
}

#main-area #main-cont h1 {
 font-weight: bold;
 font-size: 26px;
}


#main-area .main-cta {
 background:rgba(29,72,146,0.75);
 padding: 30px 0;
}

#main-area .link-box {
/* display: block;*/
 margin:0 auto;
 width: 90%;
}

#main-area .link-box2 {
/* display: block;*/
 margin:0 auto;
 width: 90%;
}

#main-area .link-box2 a,
#main-area .link-box2 a.btn-mat {
 padding: 20px 14px;
}

#issue-area p {
 font-weight: bold;
 font-size: 18px;
 line-height: 1.6;
 margin: 15px 0 0 10px;
}


#issue-area .column3 > div {
 border-bottom: #d7dbde 1px solid;
 display: flex;
 justify-content: flex-start;
 margin-bottom: 20px;
 padding: 0 0 20px;
 text-align: left;
}

#issue-area .column3:last-of-type > div:last-of-type {
 border: none;
 margin: 0;
 padding: 0;
}

#issue-area figure,
#issue-area figure img {
 width: 80px;
 height: 80px;
}

#issue-area .column3 div div {
 width: calc(100% - 100px);
}

#rs-area {
position: relative;
}

#rs-area:before {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -15px;
 border: 15px solid transparent;
 border-top: 15px solid #f8f8f8;
}


#rs-area div.container.column3 > div {
 background: #fff;
 padding: 20px 0;
 margin-bottom: 30px;
}

#rs-area div.container.column3 > div:last-of-type {
 margin-bottom: 0;
}


#rs-area h2 img {
 height: auto;
 width: 60%;
 max-width: 363px;
 }

#rs-area h2 + p {
 margin: 0 auto 30px;
}

#rs-area h2 + p br {
 display: none;
}

#rs-area .column3 p:first-of-type {
 font-weight: bold;
 margin-bottom: 20px;
}

#rs-area .column3 img {
 max-width: 320px;
}


#feature-area .container {
 margin: 0 auto 65px;
}

#feature-area .container:last-of-type {
margin: 0 auto;
}

#feature-area h3 {
 color: #1d4892;
 margin: 0 auto 20px;
}

#feature-area h3:nth-of-type(1) {
 margin-top: 0;
}

#feature-area h3::before {
 background: #fff;
 border: #1d4892 1px solid;
 border-radius: 20px;
 color: #1d4892;
 display: block;
 font-size: 12px;
 margin: 0 auto 15px;
 padding: 2px;
 text-align: center;
}

#feature-area h3:first-of-type::before {
 content: "ポイント1";
}

#feature-area h3:nth-of-type(2)::before {
 content: "ポイント2";
}

#feature-area h3:nth-of-type(3)::before {
 content: "ポイント3";
} 

#feature-area .container:first-of-type img {
 margin: 20px auto 10px;
}

#feature-area .container:first-of-type p {
 font-size: 16px;
 margin: 0 auto 20px;
 line-height: 1.6;
}

#feature-area .column3 img {
 max-width: 200px;
}

#feature-area .feature-img-sp {
 margin: 20px auto 30px;
}

#feature-area .feature-img-sp img {
 max-width: 160px;
}

#feature-area .column2-3-7 p {
 text-align: left;
}

#feature-area .column-inner p br {
 display: none;
}

#voice-area > div:nth-of-type(even) {
 margin: 65px auto;
}

#voice-area .cont-inner p {
 box-sizing: border-box;
}

#voice-area .cont-inner p:first-of-type::before {
 content: "●";
 color: #1d4892;
 display: inline-block;
 margin: 0 5px 0 0;
}

#voice-area .cont-inner p:last-of-type {
 font-size: 12px;
}

#cv-area {
 background: #1d4892;
}

#cv-area > p {
 font-size: 16px;
 font-weight: normal;
 color: #fff;
 text-align: center;
}

#cv-area .link-box-cv {
 margin: 20px;
}

#cv-area .link-box-cv div {
 background: #fff;
 border-radius: 10px;
 box-sizing:border-box;
 padding: 100px 20px 30px;
 position: relative;
}

#cv-area .link-box-cv div:nth-of-type(2) {
 margin-top: 20px;
}

#cv-area .link-box-cv div::before {
 content: "";
 display: block;
 left: 0;
 margin: 0 auto;
 position: absolute;
 right: 0;
 top: 10px;
 height: 74px;
 width: 108px
}

#cv-area .link-box-cv p + p {
 margin-top: 0 !important;
}

#cv-area .link-box-cv div p:first-child {
 font-size: 14px;
 margin: 0 auto 10px;
 text-align:center;
}

#cv-area .link-box-cv div p:first-child br {
display: none;
}

#cv-area .link-box-cv a {
 display: inline-block;
 text-align: center;
 border-radius: 6px;
 box-sizing: border-box;
 background: #1d4892;
 color: #fff;
 padding: 14px;
 font-size: 18px;
/* margin: 10px auto;*/
 border: 1px solid #1d4982;
/* box-shadow: 0 6px 0 0 #0a3683;*/
 width: 100%;
 position: relative;
 text-decoration: none;
 }


#cv-area .link-box-cv .link-mat a.btn-mat {
 display: block;
 text-align: center;
 border-radius: 6px;
 padding: 14px 14px 14px 45px;
 font-size: 18px;
 margin: 0;
/* box-shadow: 0 8px 0 0 #0a3683;*/
 background-position: 40px center;
 background-image: url(../../../images/common/icon_dl_white.svg);
 background-repeat: no-repeat;
 background-size: 20px;
}


#cv-area .link-box-cv .link-mat a.btn-mat::after {
 content: none;
}

#cv-area .link-box-cv .link-mat a::after {
 display: none;
}

#cv-area .link-box-cv div:first-of-type::before {
 background: url("../../../images/common/bg_cv_matrs.png") no-repeat top left/108px;
}

#cv-area .link-box-cv div:nth-of-type(2)::before {
 background: url("../../../images/common/bg_cv_trial.png") no-repeat top left/108px;
}

#cv-area .tel a {
 color: #fff;
 font-size: 24px;
 text-decoration: none;
}

#cv-area .tel::before {
 background: url("../../../images/common/icon_tel_white.svg") no-repeat center;
 content: "";
 display: inline-block;
 height: 20px;
 margin: 0 10px 0 0;
 width: 20px;
}

#price-area img {
 max-width: 220px;
}

#price-area p {
 text-align: center;
 margin-bottom: 20px;
 font-size: 14px;
}

#price-area table {
 width: 100%;
}

#price-area th {
 width: 30%;
}

#price-area th,
#price-area td {
 box-sizing: border-box;
 padding: 10px;
 text-align: center;
 border: #d7dbde 1px solid;
}

#price-area table:first-of-type th, #price-area table:first-of-type td {
 border-bottom-width: 0px;
}

.price-ir th {
 background: #eb6da5;
}

.price-zr th {
 background: #00b8ee;
}

.price-ri th {
 background: #ffcc33;
}

.price-zr,.price-ri {
 margin: 20px auto 0;
}

#price-area table + table {
 border-top: none;
}


#mall-area ul {
 display: flex;
 flex-wrap: wrap;
 margin: auto;
 max-width: 700px;
}

#mall-area li {
 margin: 10px 5px;
 line-height: 1;
 list-style: none;
 position: relative;
 text-align: center;
 width: calc(33% - 10px);
}

#mall-area .mall-cont {
 text-align: center;
}

#mall-area .mall-cont img {;
 margin: 0;
/* height: 34px;*/
 width: 90px;
}

#mall-area ul + p {
 border: #d7dbde 1px solid;
 border-radius: 40px;
 display: inline-block;
 font-size: 14px;
 text-align: center;
 margin: 30px auto 20px;
 width: 300px;
 padding: 2px;
}

#mall-area div.container.column3 > div {
 margin: 0 auto 30px;
}

#mall-area div.container.column3 > div:last-of-type {
margin-bottom: 0;
}




/* ------------------------------------------------------- */
/* ===== for PC 768 ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 768px){

.link-box2 {
 display: flex;
 flex-direction: row-reverse;
 justify-content: space-around;
}

#main-area {
 background: url("../images/bg_main.png") no-repeat top center/cover;
}

#main-area #main-cont h1 {
 margin-bottom: 10px;
 font-size: 36px;
}

#main-area #main-cont h1 br {
 display: none;
}

#issue-area h2 br:first-of-type {
display: none;
}

#issue-area p {
 font-size: 22px;
 margin: 20px auto 0;
}

#cv-area > p {
 font-size: 30px;
 line-height: 1.6em;
}

#cv-area .link-box-cv {
 display: flex;
 flex-direction: row-reverse;
 justify-content: space-between;
 margin: 80px auto;
 max-width: 1000px;
 width: 100%;
}

#cv-area .link-box-cv div {
 padding: 140px 30px 40px;
 width: 48%;
 max-width: 460px;
}

#cv-area .link-box-cv div:nth-of-type(2) {
 margin-top: 0;
}

#cv-area .link-box-cv div::before {
 background-size: 216px !important;
 height: 148px;
 top: -40px;
 width: 216px
}


#cv-area .link-box-cv div p:first-child {
 margin: 0 auto 20px;
 font-size: 16px;
}

#cv-area .tel a {
 font-size: 44px;
}

#cv-area .tel::before {
 height: 40px;
 width: 40px;
}

#price-area p {
 font-size: 16px;
 margin-bottom: 40px;
}

#mall-area .mall-cont {
 max-width: 1120px;
 margin: 0 auto;
}

#mall-area .mall-cont img {
 width: 160px;
/* height: 60px;*/
}


#rs-area:before {
 margin-left: -35px;
 border: 35px solid transparent;
 border-top: 35px solid #f8f8f8;
}

#rs-area h2 + p {
 text-align: center;
}

#rs-area h2 + p br {
 display: inline;
}

#rs-area div.container {
 display: flex;
 justify-content: space-between;
}

#rs-area div.container.column3 > div {
 margin-bottom: 0;
 }

}



/* ------------------------------------------------------- */
/* ===== for PC 1000 ===== */
/* ------------------------------------------------------- */


@media screen and (min-width : 1000px){

section h2 br {
 display: inline;
}


#main-area #main-cont {
 padding: 65px 0;
}

#main-area #main-cont p {
 font-size: 22px;
}

#main-area #main-cont p br {
 display: none;
}

#main-area #main-cont h1 {
 font-size: 48px;
 line-height: 1.8;
 margin-bottom: 5px;
}

#feature-area p.column1 {
 text-align: left;
 margin: 0 auto 30px;
 max-width: 1120px;
 width: fit-content;
}

#feature-area .column3 img {
 max-width: 336px;
}

#feature-area h3 {
 margin: 100px auto 65px;
 }

#feature-area h3 br {
display: none;
}

#feature-area h3::before {
 border: 0;
 display: inline-block;
 height: 50px;
 margin: 0 10px 0 0;
 width: 140px;
 vertical-align: middle;
}

#feature-area h3:first-of-type::before {
 background: url("../images/img_title_point01.png") no-repeat;
 content: "";
}

#feature-area h3:nth-of-type(2)::before {
 background: url("../images/img_title_point02.png") no-repeat;
 content: "";
}

#feature-area h3:nth-of-type(3)::before {
 background: url("../images/img_title_point03.png") no-repeat;
 content: "";
} 

#feature-area .column-inner p br {
 display: inline;
}

#issue-area .column3 > div {
 border: none;
 display: inline-block;
 margin-bottom: 0;
 text-align: center;
}

#issue-area figure,
#issue-area figure img {
 height: 166px;
 width: 150px;
 margin: 0 auto;
}

#issue-area .column3 div div {
 width: 100%;
}

/* 
#rs-area .column3 img {
 max-width: 320px;
}
*/
#voice-area > div {
 background: url("../images/img_illust_voice01.png") left top no-repeat;
 box-sizing: border-box;
 max-width: 1120px;
 margin: auto;
 padding: 0 0 0 269px;
 width: calc( 100% - 269px );
}

#voice-area .cont-inner p {
 padding: 0 0 0 20px;
}

#voice-area .cont-inner p:last-of-type {
 font-size: 14px;
}


#price-area table + table {
 margin: 20px 0 0 0;
}

.price-zr, .price-ri {
 margin: 0 auto;
}

#price-area th,
#price-area td {
 display: block;
 width: 100%;
}


#price-area th {
border: 0;
font-weight: bold;
}

#price-area td {
 font-size: 30px;
}


#price-area table:first-of-type th, #price-area table:first-of-type td {
 border-bottom-width: 3px;
}

#price-area .price-ir td {
 border: #eb6da5 solid;
}

#price-area .price-zr td {
 border: #00b8ee solid;
}

#price-area .price-ri td {
 border: #ffcc33 solid;
}



#mall-area ul + p {
 margin: 50px auto;
}

#mall-area div.container.column3 > div {
 margin: 0 auto;
}

#cv-area {
 background: url("../../../images/zr/bg_cv_v2.jpg") top center/cover;
}

#cv-area .link-box-cv div p:first-child br {
display: inline;
}




}