@charset "utf-8";
/*////////////// honeymoon/KnowhowCSS Document //////////////*/

/* ===============================================
 all（ノウハウ共通）
=============================================== */
/* bgBrn（背景/茶色）------------------*/
.bgBrn {
    background-color: #F9F7F2;
}
/* bg01（背景/画像1）------------------*/
.bg01 {
    background-image: url("../img/sp/knowhow/bg_002.png");
    background-position:  0 0;
    background-repeat:  repeat;
    background-size: 12px 12px;
}
/* descText（テキスト）------------------*/
.descText {
    padding: 1em 3.1% 0;
    color: #534834;
}
.descText .pnkText {
    color: #F498A3;
    display:  block;
    text-align:  center;
    font-size: 135%;
    font-weight:  bold;
    margin-bottom: 0.3em;
}
.descText .inqText {
    font-size: 85%;
    text-align: right;
    display:  block;
}
.descText .small {
    font-size: 1.1rem;
}
/* phTitle（タイトル/画像）------------------*/
.phTitle.main {
    padding-top: 2em;
}
.phTitle.sub {
    padding-top: 3em;
}
/* textTitle（タイトル/テキスト）------------------*/
.textTitle {
    font-weight: bold;
    text-align: center;
    font-size: 140%;
    margin-top: 0.5em;
}
/* phArea（画像）------------------*/
.phArea {
    margin: 1em 0 0;
}
/* manName（どこの人）------------------*/
.manName {
    display: block;
    text-align: right;
    margin-top: 0.7rem;
}
/* cntsList（リスト/パターン1）------------------*/
.cntsList.listPt1 > li .stepIcon {
    padding: 1em 37% 0;
}
.cntsList.listPt1 > li+li:before {
    content:  "";
    display:  block;
    width:  100%;
    height: 50px;
    text-align:  center;
    background-image: url(../img/sp/knowhow/arrow_down_001.png);
    background-position: 50% 0;
    background-repeat:  no-repeat;
    background-size:  contain;
    margin-top: 1.5em;
}
.cntsList.listPt1 > li:first-child .phTitle.sub {
    padding-top: 1em;
}
/* cntsList（リスト/パターン2）------------------*/
.cntsList.listPt2 > li > .phArea+.boxPt1.ptArea {
    margin-top: 2.5em;
}
.cntsList.listPt2 > li+li {
    padding-top: 1em;
}
/* cntsList（リスト/パターン3）------------------*/
.cntsList.listPt3 {
    margin: 1rem 10% 0;
    padding-bottom: 2.5rem;
    background-image: url("../img/sp/knowhow/bd_001.png");
    background-position: 50% 100%;
    background-repeat:  no-repeat;
    background-size: auto 3px;
}
.cntsList.listPt3 > li {
    padding-top: 5rem;
    background-image: url("../img/sp/knowhow/bd_001.png");
    background-position: 50% 3rem;
    background-repeat:  no-repeat;
    background-size: auto 3px;
}
.cntsList.listPt3 > li .manName {
    color: #949D9C;
}
/* boxPt1（ボックス/パターン1）------------------*/
.boxPt1 {
    background-color: #FFF;
    border: solid #DCCEB6 2px;
}
.boxPt1.ptArea {
    margin: 3.5em 3.1% 1em;
    padding: 1.5em 10%;
    position:  relative;
}
.boxPt1.ptArea:before {
    content:  "";
    position:  absolute;
    width:  100%;
    height: 3.5em;
    top: -2.8em;
    left:  0;
    background-image: url("../img/sp/knowhow/arrow_down_002.png");
    background-position: 55% 0;
    background-repeat:  no-repeat;
    background-size:  contain;
}
.boxPt1.ptArea .bgShad {
    position:  absolute;
    width:  100%;
    height: 100%;
    left:  10px;
    top: 10px;
    z-index:  -1;
}
#stepArea .boxPt1.ptArea .bgShad {
    z-index:  0;
}
.boxPt1.ptArea .bgShad:after, .boxPt1.ptArea .bgShad:before {
    content:  "";
    position:  absolute;
}
.boxPt1.ptArea .bgShad:before {
    width: 9px;
    height: 100%;
    right: -1px;
    bottom:  0;
    background-image: repeating-linear-gradient(-45deg, #d3c2a7, #d3c2a7 1px, #e9e1d3 0, #e9e1d3 5px);
}
.boxPt1.ptArea .bgShad:after {
    width:  100%;
    height: 9px;
    left:  0;
    bottom: -1px;
    background-image: repeating-linear-gradient(-45deg, #d3c2a7, #d3c2a7 1px, #e9e1d3 0, #e9e1d3 5px);
}
.boxPt1 .descText {
    padding: 1em 0 0;
}
.boxPt1 .linkArea.btn {
    margin: 10% -5% 6%;
    border:  none;
    background-color:  #B89E7E;
    border-radius: 5px;
    box-shadow:  none;
}
.boxPt1 .linkArea.btn a {
    color: #FFF;
    font-size: 1.3rem;
    line-height: 1.5rem;
    padding: 5% 0;
}
.boxPt1 .linkArea.btn.newWindow {
        background-image: url("../img/sp/knowhow/icon_link_02.png");
}
/* boxPt2（ボックス/パターン2）------------------*/
.boxPt2 {
    background-color:  #FFF;
    border-radius: 15px;
    overflow:  hidden;
    margin-top: 2em;
}
.boxPt2 .boxTitle {
    display:  block;
    padding: 0.8em 3.1%;
    margin-bottom: 0.5em;
}
.boxPt2 .boxTitle > .textTitle {
    display: block;
    margin-top: 0.5em;
    color:  #FFF;
    position:  relative;
    font-size: 130%;
}
.boxPt2 .boxTitle > .textTitle:before, .boxPt2 .boxTitle > .textTitle:after {
    content:  "";
    position: absolute;
    top: 37%;
    display: inline-block;
    width: 28%;
    height: 2px;
    border-top: solid 1px #FFF;
    border-bottom: solid 1px #FFF;
}
.boxPt2 .boxTitle > .textTitle:before {
    left: 0;
}
.boxPt2 .boxTitle > .textTitle:after {
    right: 0;
}
.boxPt2.ciaoBox {
    border: solid 2px #F39DA6;
}
.boxPt2.ciaoBox .boxTitle {
    background-color: #F39DA6;
}
.boxPt2.impBox {
    border: solid 2px #3FD1EA;
}
.boxPt2.impBox .boxTitle {
    background-color: #3FD1EA;
}
/* pnkBox（ボックス/ピンク）------------------*/
.pnkBox {
    border: solid 6px #F7939F;
    padding: 1rem 3.1% 2.5rem;
    background-image: url("../img/sp/knowhow/bg_003.png");
    background-repeat:  repeat;
    background-size: 10px;
}
/* rankPt1（ランキング/パターン1）------------------*/
.rankPt1 {
    margin: 0 1em 3.1%;
}
.rankPt1 > li {
    padding-top: 1.5em;
}
.rankPt1 > li+li {
    border-top: solid #CBD1D0 1px;
}
.rankPt1 li > .rankTitle .rankIcon {
    width: 40px;
    margin-right: 7px;
}
.rankPt1 li > .rankTitle span {
    display:  inline-block;
    font-size: 130%;
    font-weight: bold;
}
.rankPt1 li > .phArea {
    margin: 0.5em 0 0;
}
.rankPt1 > li .descText {
    padding: 1em 0 0;
}
.rankPt1 li > .linkArea.btn {
    background-image: url("../img/sp/knowhow/arrow_right_001.png");
    border:  none;
    background-position: 95% 50%;
    background-size: 12px 12px;
    border-radius: 5px;
    box-shadow: none;
}
.rankPt1 li > .linkArea.btn a {
    color: #FFF;
}
.ciaoBox .rankPt1 li > .linkArea.btn {
    background-color: #F698A2;
}
.impBox .rankPt1 li > .linkArea.btn {
    background-color: #45CFE9;
}
.rankPt1 .voiceList {
    margin-top: 1rem;
}
.rankPt1 .voiceList > li {
    background-color:  #FFFDFD;
    border-radius: 5px;
    padding: 1rem 8%;
}
.rankPt1 .voiceList > li+li {
    margin-top: 1rem;
}
/* rankPt2（ランキング/パターン2）------------------*/
.rankPt2 {
    margin: 1em 0 0;
    text-align:  center;
}
.rankPt2 > li {
    width: 65%;
    display:  inline-block;
    padding: 0.8em 0 1%;
    border-bottom: dotted #B4B5AF 2px;
    font-size: 130%;
    font-weight:  bold;
    position:  relative;
}
.rankPt2 > li .ranknmb {
    position:  absolute;
    left:  0;
    bottom: 3px;
    width: 2em;
}
.rankPt2+.descText {
    padding-top: 2em;
    position:  relative;
}
.rankPt2+.descText:before {
    content:  "";
    position:  absolute;
    width:  100%;
    height: 80%;
    top: 1em;
    left:  0;
    background-image: url("../img/sp/knowhow/arrow_down_002.png");
    background-position: 77% 50%;
    background-repeat:  no-repeat;
    background-size:  contain;
    transform: rotate(-18deg);
}

/* ===============================================
 headerArea（ヘッダーエリア）
=============================================== */
/* leadArea（リード文）------------------*/
#headerArea .leadArea {
    padding: 2em 6.2% 1em;
    margin: 0;
}

/* ===============================================
 lNavArea（ローカルナビ）
=============================================== */
/* lNavList（リスト）------------------*/
#lNavArea .lNavList {
    display:  block;
}
#lNavArea .lNavList > li {
    text-align:  center;
}
#lNavArea .lNavList > li+li {
    margin-top: 1em;
}
#lNavArea .lNavList > li span {
    color:  #F498A3;
    border-bottom: solid 1px #F498A3;
    font-size: 120%;
}
/* bdBox（ボーダーボックス）------------------*/
.bdBox {
    margin: 0 10% 0;
    border: double 5px #F39DA6;
    position:  relative;
    padding: 3rem 0;
}
.bdBox .bdTitle {
    position:  absolute;
    top: -3em;
    width: 46%;
    left: 27%;
    z-index: 1;
}
.bdBox .bdTitle:after {
    content:  "";
    position:  absolute;
    width: 85%;
    height:  100%;
    background-color: #FFF;
    left: 8%;
    z-index: -1;
}

/* ===============================================
 mainArea（メインエリア）
=============================================== */
#mainArea section {
    margin:  0;
}
#mainArea #lNavArea {
    margin-bottom: 10%;
}
#mainArea #stepArea {
    padding: 50px 3.1% 3em;
}
#mainArea #voiceArea {
    padding: 50px 3.1% 2rem;
}
#voiceArea h4 .smallText {
    font-size: 1.4rem;
}
#mainArea  #rankArea {
    padding: 50px 3.1% 4rem;
}
#mainArea #giftArea {
    padding: 50px 3.1% 0;
}
#giftArea .giftPhList {
    margin-top: 0.5em;
    position:  relative;
}
#giftArea .giftPhList > li:first-child {
    margin-left: -3%;
    width: 66%;
    padding-top: 0.5em;
}
#giftArea .giftPhList > li:nth-child(2) {
    position:  absolute;
    top: 0;
    right: -3%;
    width: 59%;
}
#mainArea #expArea {
    padding: 50px 3.1% 0;
}
#mainArea #realArea {
    margin:  0 3.1% 10%;
    padding-top: 70px;
}
#realArea .pnkBox .descText {
    padding: 1.5rem 8% 0;
}
#realArea .pnkBox .rankPt1 {
    margin: 0;
}
#realArea .pnkBox .rankPt1 > li+li {
    border:  none;
}