/*--------------------------------------------------------------------------------------------------
    SP
----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 750px){
    /*--------------------------------------------------------
        SPレイアウト
    ----------------------------------------------------------*/
    .main,
    .news-faq{
        width: 100%;
        background-color: #fff;
    }
    .merit,
    .basic__area,
    .link__area,
    .news-faq > div{
        width: 100%;
        margin: 0 auto;
    }
    .news-faq > div{
        height: 100%;
        background-color: #fff;
    }

    /*--------------------------------------------------------
        SPコンテンツ
    ----------------------------------------------------------*/
    .contents{
        padding: 0;
    }
    /*--------------
        SP３つのメリット
    ----------------*/
    .merit{
        margin-top: 6.8%;
    }
    .contents .merit__ttl{
        display: block;
        width: 94%;
        height: 0;
        padding-bottom: 17.2%;
        margin: 0 3%;
    }
        .contents .merit__ttl a{
            display: block;
            width: 100%;
            padding-bottom: 17.2%;
            background: url("../img/sp/top_merit_bnr_green.png") no-repeat;
            background-size: 100%;
            border: none;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
        }

    /*--------------
        3分でよくわかる個人型確定拠出年金のきほん
    ----------------*/
    .basic__area{
        height: auto;
        margin-bottom: 5%;
        padding-top: 6%;
    }
        .basic__ttl{
            position: relative;
            width: 80%;
            height: auto;
            margin: 0 3% 4.5% 3%;
            padding-left: 14%;
        }
            .basic__ttl-01{
                font-size: 1.38rem;
                line-height: 1.93rem;
                color: #12988a;
            }
            .basic__ttl-02{
                font-size: 1.38rem;
                line-height: 1.93rem;
            }
            .basic__ttl-03{
                display: block;
                width: 100%;
                font-size: 1.38rem;
                line-height: 1.93rem;
            }
            .basic__ttl::before{
                position: absolute;
                    top: 0;
                    left: 0;
                display: block;
                content: "";
                width: 12.6%;
                padding-bottom: 3.86rem;
                background: url("../img/top_basic_ttl_green.png");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
            }


    /*--------------
        リンク
    ----------------*/
    .link__area{
        width: 94%;
        margin: 0 3%;
    }
    .link__area > ul > li{
        width: 100%;
        margin-bottom: 4.6%;
    }
            .link__area > ul > li > a{
                display: block;
                width: 100%;
            }
        .link__area > a{
            position: relative;
            display: block;
            float: right;
            width: 100%;
            height: auto;
            margin-bottom: 7%;
            padding-bottom: 2px;
            background-color: #fff;
            border: 1px solid #dadada;
            border-radius: 4px;
            box-sizing: border-box;
            box-shadow: 0 2px 0 0 #dadada;
            font-size: 1.09rem;
            font-weight: bold;
            line-height: 2.9rem;
            text-align: center;
            color: #004090;
        }


    /*--------------------------------------------------------
        SPお知らせ・よくあるご質問
    ----------------------------------------------------------*/
    .news-faq{
        background-color: #f7f7f7;
    }
    .news__area,
    .faq__area{
        float: left;
        width: 100%;
        padding: 0 0 6% 0;
        background-color: #fff;
        border-top: 3px solid #006458;
        border-bottom: 3px solid rgba(0, 0, 0, 0.08);
    }
        .news__area{
            margin-right: 0;
        }
        .news-faq h2{
            position: relative;
            margin-left: 3%;
            padding-left: 3.3rem;
            font-size: 1.26rem;
            line-height: 4.75rem;
        }
            .news-faq h2::after{
                position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                display: block;
                content: "";
                width: 2.67rem;
                height: 2.67rem;
                margin: auto;
                background-repeat: no-repeat;
                background-size: contain;
            }
                .news__area > h2::after{
                    background-image: url("../img/top_news_ttl_green.png");
                }
                .faq__area > h2::after{
                    background-image: url("../img/top_faq_ttl_green.png");
                }
        .news-faq h2 + p{
            width: 94%;
            height: auto;
            margin: 0 3%;
            font-size: 1.09rem;
            line-height: 1.59rem;
            padding-bottom: 3%;
        }

        /*お知らせ*/
        .news-faq ol,
        .news-faq ul{
            width: 94%;
            margin: 0 3%;
            padding: 3% 4% 0 3%;
            border: 1px solid #ededed;
            box-sizing: border-box;
            overflow-y: scroll;
        }
        .news-faq ol{
            height: 400px;
        }
        .news-faq ul{
            height: 460px;
        }
            .news__area li{
                clear: both;
                width: 100%;
                padding-bottom: 4%;
                margin-bottom: 4%;
                border-bottom: 1px solid #ededed;
            }
                .news__area li:last-child{
                    clear: both;
                    padding-bottom: 0;
                    border-bottom: 0;
                }

                .news__img{
                    position: relative;
                    display: inline-block;
                    width: 18.2%;
                    height: 0;
                    padding-bottom: 18.2%;
                    margin-right: 3%;
                    vertical-align: middle;
                    overflow: hidden;
                }
                    .news__img > img{
                        position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                        margin: auto;
                        width: auto;
                        height: 100%;
                    }
                .news__area dl{
                    display: inline-block;
                    width: 76.8%;
                    height: auto;
                    vertical-align: middle;
                }
                .news__area dt{
                    font-size: 0.92rem;
                    line-height: 1.34rem;
                }
                    .news__ttl > a{
                        position: relative;
                        display: block;
                        width: 100%;
                        font-size: 1.17rem;
                        line-height: 1.59rem;
                        color: #004090;
                        text-indent: 0.7rem;
                    }
                    .news__ttl > a::after{
                        position: absolute;
                            left: 0.1rem;
                        	top: 0.8rem;
                    	content: " ";
                    	height: 0;
                    	width: 0;
                    	pointer-events: none;
                        border: solid transparent;
                    	border-color: rgba(136, 136, 136, 0);
                    	border-left-color: #888888;
                    	border-width: 4px;
                    	margin-top: -4px;
                    }

        /*よくあるご質問*/
        .faq__area li{
            width: 100%;
        }
            .faq__area dl{
                width: 100%;
            }
            .faq__area dt{
                position: relative;
                display: table;
                width: 100%;
                height: 5.2rem;
                background-color: #eee;
            }
                .faq__area dt:after{
                    position: absolute;
                        top: 100%;
                        left: 2rem;
                    display: block;
                    content: "";
                    width: 1rem;
                    height: 0.6rem;
                    background-image: url("../img/sp/top_faq_baloon_green.svg");
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: top;
                }
                .faq__img{
                    display: table-cell;
                    width: 1.2rem;
                    height: 5.2rem;
                }
                    .faq__img > img{
                        width: 3.46rem;
                        height: 3.46rem;
                        margin: 0.87rem;
                    }
                .faq__ttl{
                    display: table-cell;
                    vertical-align: middle;
                    padding-right: 0.87rem;
                    padding-left: 0.4rem;
                }
                    .faq__ttl > p{
                        font-size: 1.17rem;
                        font-weight: bold;
                        line-height: 1.67rem;
                    }
            .faq__txt{
                clear: both;
                font-size: 1.09rem;
                line-height: 1.59rem;
                padding: 5% 0;
            }


    /*--------------------------------------------------------
        SPバナー
    ----------------------------------------------------------*/
    .plan{
        clear: both;
        width: 100%;
        margin: 0;
        padding-top: 8%;
        height: auto;
        background-color: #f7f7f7;
    }
        .plan ul{
            width: 94%;
            margin: 0 3%;
            padding-bottom: 3.3%;
        }
            .plan li{
                position: relative;
                width: 100%;
                height: auto;
                margin-bottom: 4.5%;
                background-color: #fff;
                border: 1px solid #e2e2e2;
                border-bottom: 2.5px solid #e2e2e2;
                box-sizing: border-box;
                box-shadow: 5px 5px 5px 5px rgba(215, 215, 215, 0.14);
            }
            .plan li:first-child{
                margin-right: 0;
            }
            .plan li::after{
                position: absolute;
                    right: -2px;
                    bottom: -2px;
                content: " ";
                height: 0;
                width: 0;
                pointer-events: none;
                border: solid transparent;
                border-color: rgba(136, 136, 136, 0);
                border-left-color: #888888;
                border-width: 6px;
                margin-top: -6px;
            	-webkit-transform: rotate(45deg);
            	transform: rotate(45deg);
            }
                .plan li > a{
                    display: table;
                    width: 92.6%;
                    height: 0;
                    padding: 4% 3.7%;
                }
                    .plan__img{
                        display: table-cell;
                        vertical-align: middle;
                    }
                    .plan li:first-child .plan__img{
                        width: 10.9%;
                    }
                    .plan li:last-child .plan__img{
                        width: 22.6%;
                    }

                    .plan__txt{
                        display: table-cell;
                        padding-left: 3.7%;
                        vertical-align: middle;
                    }
                        .plan__txt--ttl{
                            position: relative;
                            padding-bottom: 2%;
                            font-size: 1.12rem;
                            line-height: 1.12rem;
                            font-weight: bold;
                            color: #004090;
                        }
                            .plan__txt--ttl:after{
                                position: absolute;
                                content: "";
                                display: inline-block;
                                width: 1rem;
                                height: 1rem;
                                margin: 0 0 0 0.3rem;
                                background-image: url("../img/ico_link_green.png");
                                background-size: contain;
                                background-repeat: no-repeat;
                            }
                        .plan__txt--detail{
                            font-size: 1rem;
                            line-height: 1rem;
                        }


/*750px以下PC*/
@media screen and (min-width: 571px) and (orientation: portrait){
    .main__catch{
        width: 22rem;
        font-size: 2rem;
        line-height: 3rem;
    }
        .main__catch > span{
            font-size: 2rem;
            line-height: 3rem;
        }
    .main__lead,
    .main__lead > span{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .faq__area dt > p{
        padding: 11% 6% 4% 0;
    }
}

/*ランドスケープ*/
@media all and (orientation: landscape){
    .main__catch{
        width: 22rem;
        font-size: 2rem;
        line-height: 3rem;
    }
        .main__catch > span{
            font-size: 2rem;
            line-height: 3rem;
        }
    .main__lead,
    .main__lead > span{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .faq__area dt > p{
        padding: 11% 6% 4% 0;
    }
}
/*iPhone5のランドスケープ*/
@media screen and (max-width: 570px) and (orientation: landscape){
    .faq__area dt > p{
        padding: 8% 6% 4% 0;
    }
}

/*iPhone5*/
@media screen and (max-width: 320px) and (orientation: portrait){
    .main{
        clear: both;
        background: url("../img/sp/top_main_img_green.jpg") no-repeat top;
        background-size: 110%;
        background-color: #f7f7f7;
    }
    .main__cont > div {
        height: 0;
        padding: 4% 0 29% 5.9%;
    }
    .main__catch{
        font-size: 1.1rem;
    }
    .main__lead,
    .main__lead > span{
        font-size: 0.7rem;
        line-height: 1.2rem;
    }
    .faq__area dt > p{
        font-size: 1rem;
        line-height: 1.4rem;
    }
    .faq__txt{
        padding: 0 0 5% 0;
    }
}
}
/*---------------SP終了---------------*/







/*--------------------------------------------------------------------------------------------------
    PC
----------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 751px){
    /*--------------------------------------------------------
        PCレイアウト
    ----------------------------------------------------------*/
    .news-faq{
        width: 100%;
        background-color: #fff;
    }
    .merit,
    .basic__area,
    .link__area,
    .news-faq > div{
        width: 1100px;
        margin: 0 auto;
    }
    .news-faq > div{
        height: 602px;
        background-color: #fff;
    }
    @media screen and (max-width: 1100px){
        .merit,
        .basic__area,
        .link__area,
        .news-faq > div{
            width: 100%;
            margin: 0;
        }
    }



    /*--------------------------------------------------------
        PCコンテンツ
    ----------------------------------------------------------*/
    .contents{
        padding: 0;
    }
    /*--------------
        PC３つのメリット
    ----------------*/
    .merit__ttl{
        width: 1100px;
        height: 84px;
        padding-top: 41px;
    }
        .merit__ttl a{
            display: block;
            width: 1100px;
            height: 88px;
            background: url("../img/top_merit_bnr_green.png") no-repeat;
            background-size: contain;
            border: none;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
        }
            .contents .merit__ttl a:hover{
                opacity: 0.85;
            }

    /*--------------
        3分でよくわかる個人型確定拠出年金のきほん
    ----------------*/
    .basic__area{
        height: 790px;
        margin-bottom: 20px;
        padding-top: 36px;
    }
        .basic__ttl{
            position: relative;
            width: 555px;
            height: 36px;
            margin: 0 auto 20px auto;
            padding: 8px 0;
            padding-left: 60px;
        }
            .basic__ttl-01{
                font-size: 36px;
                line-height: 36px;
                color: #12988a;
            }
            .basic__ttl-02{
                font-size: 22px;
                line-height: 22px;
            }
            .basic__ttl-03{
                font-size: 26px;
                line-height: 26px;
            }
            .basic__ttl::before{
                position: absolute;
                    top: 0;
                    left: 0;
                display: block;
                content: "";
                width: 52px;
                height: 52px;
                background: url("../img/top_basic_ttl_green.png");
                background-repeat: no-repeat;
                background-size: 52px;
            }


    /*--------------
        リンク
    ----------------*/
    .link__area{
        height: 195px;
    }
    .link__area > ul > li{
        float: left;
        width: 540px;
    }
        .link__area > ul li:first-child{
            margin-right: 20px;
        }
            .link__area > ul > li > a{
                display: block;
                width: 540px;
            }
            .link__area > ul > li > a:hover{
                opacity: 0.85;
            }
        .link__area > a{
            position: relative;
            display: block;
            float: right;
            width: 280px;
            height: 35px;
            margin-top: 16px;
            padding-left: 21px;
            background-color: #fff;
            border: 1px solid #dadada;
            border-radius: 4px;
            box-sizing: border-box;
            box-shadow: 0 1px 0 0 #dadada;
            font-size: 14px;
            line-height: 34px;
            color: #004090;
        }
            .link__area > a::after{
                position: absolute;
                    right: 14px;
                    top: 50%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                pointer-events: none;
                border-color: rgba(136, 136, 136, 0);
                border-left-color: #888888;
                border-width: 5px;
                margin-top: -5px;
            }
            .link__area > a:hover{
                background-color: #f4f4f4;
            }



    /*--------------------------------------------------------
        お知らせ・よくあるご質問
    ----------------------------------------------------------*/
    .news__area,
    .faq__area{
        float: left;
        width: 520px;
        margin-top: 50px;
        padding-bottom: 50px;
        border-top: 5px solid #006458;
    }
        .news__area{
            margin-right: 60px;
        }
        .news-faq h2{
            position: relative;
            padding-left: 36px;
            font-size: 20px;
            line-height: 62px;
        }
            .news-faq h2::after{
                position: absolute;
                    top: 17px;
                    left: 0;
                display: block;
                content: "";
                width: 28px;
                height: 28px;
                background-repeat: no-repeat;
                background-size: contain;
            }
                .news__area > h2::after{
                    background-image: url("../img/top_news_ttl_green.png");
                }
                .faq__area > h2::after{
                    background-image: url("../img/top_faq_ttl_green.png");
                }
        .news-faq h2 + p{
            width: 520px;
            height: 37px;
            font-size: 14px;
            line-height: 24px;
            padding-bottom: 24px;
        }

        /*お知らせ*/
        .news-faq ol,
        .news-faq ul{
            width: 520px;
            height: 374px;
            padding: 18px 20px;
            border: 1px solid #ededed;
            box-sizing: border-box;
            overflow-y: scroll;
        }
            .news__area li{
                clear: both;
                width: 468px;
                padding-bottom: 12px;
                margin-bottom: 12px;
                border-bottom: 1px solid #ededed;
            }
                .news__area li:last-child{
                    clear: both;
                    padding-bottom: 12px;
                    border-bottom: 0;
                }

                .news__img{
                    position: relative;
                    display: inline-block;
                    width: 42px;
                    height: 42px;
                    margin-right: 12px;
                    vertical-align: middle;
                    overflow: hidden;
                }
                    .news__img > img{
                        position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                        margin: auto;
                        width: auto;
                        height: 42px;
                    }
                .news__area dl{
                    display: inline-block;
                    width: 407px;
                    height: auto;
                    vertical-align: middle;
                }
                .news__area dt{
                    font-size: 13px;
                    line-height: 20px;
                }
                    .news__ttl > a{
                        position: relative;
                        display: block;
                        width: 410px;
                        font-size: 14px;
                        line-height: 20px;
                        color: #004090;
                        text-indent: 14px;
                    }
                    .news__ttl > a:hover{
                        text-decoration: underline;
                        color: #0c52c7;
                    }
                    .news__ttl > a::after{
                        position: absolute;
                            left: 0;
                        	top: 7px;
                    	content: " ";
                    	height: 0;
                    	width: 0;
                    	pointer-events: none;
                        border: solid transparent;
                    	border-color: rgba(136, 136, 136, 0);
                    	border-left-color: #888888;
                    	border-width: 4px;
                    	margin-top: -4px;
                    }

        /*よくあるご質問*/
        .faq__area li{
            width: 468px;
            padding-bottom: 24px;
        }
        .faq__area li:last-child{
            padding-bottom: 0;
        }
        .faq__area dt{
            display: table;
            width: 468px;
            height: 64px;
            margin-bottom: 18px;
            background-color: #efefef;
        }
            .faq__img{
                position: relative;
                display: table-cell;
                width: 34px;
                height: 64px;
                background-color: #efefef;
            }
                .faq__img > img{
                    width: 44px;
                    height: 44px;
                    margin: 10px;
                }
/*                .faq__img::after{
                    top: 100%;
                	left: 50%;
                	border: solid transparent;
                	content: " ";
                	height: 0;
                	width: 0;
                	position: absolute;
                	pointer-events: none;
                	border-color: rgba(239, 239, 239, 0);
                	border-top-color: #efefef;
                	border-width: 8px;
                	margin-left: -8px;
                }*/
            .faq__ttl{
                height: 44px;
                display: table-cell;
                vertical-align: middle;
            }
            .faq__ttl > p{
                padding: 0 15px 0 5px;
                font-size: 15px;
                font-weight: bold;
                line-height: 24px;
            }
        .faq__txt{
            clear: both;
            font-size: 14px;
            line-height: 24px;
            letter-spacing: 0;
        }

    /*--------------------------------------------------------
        バナー
    ----------------------------------------------------------*/
    .plan{
        clear: both;
        height: 84px;
        padding: 49px 0;
        background-color: #f7f7f7;
    }
        .plan ul{
            width: 1100px;
            margin: 0 auto;
        }
            .plan li{
                position: relative;
                float: left;
                width: 540px;
                height: 84px;
                background-color: #fff;
                border: 1px solid #e2e2e2;
                border-bottom: 4px solid #e2e2e2;
                box-sizing: border-box;
                box-shadow: 5px 5px 5px 5px rgba(215, 215, 215, 0.14);
                overflow: hidden;
            }
            .plan li:first-child{
                margin-right: 20px;
            }
            .plan li::after{
                position: absolute;
                    right: -4px;
                    bottom: -4px;
                content: " ";
                height: 0;
                width: 0;
                pointer-events: none;
                border: solid transparent;
                border-color: rgba(136, 136, 136, 0);
                border-left-color: #888888;
                border-width: 10px;
                margin-top: -10px;
            	-webkit-transform: rotate(45deg);
            	transform: rotate(45deg);
            }
            .plan li:hover{
                opacity: 0.85;
            }
                .plan li > a{
                    display: block;
                    width: 100%;
                    height: 80px;
                }

                    .plan__img{
                        display: inline-block;
                        float: left;
                        vertical-align: middle;
                    }
                    .plan li:first-child .plan__img{
                        width: 58px;
                        padding: 11px 17px;
                    }
                    .plan li:last-child .plan__img{
                        width: 110px;
                        padding: 24px 20px;
                    }
                    .plan__txt{
                        float: left;
                        height: 42px;
                        margin: 19px 0;
                    }
                        .plan__txt--ttl{
                            position: relative;
                            padding: 0 17px 8px 0;
                            font-size: 18px;
                            line-height: 18px;
                            font-weight: bold;
                            color: #004090;
                        }
                            .plan__txt--ttl:after{
                                position: absolute;
                                    top: 2px;
                                    right: 0;
                                display: inline-block;
                                content: "";
                                width: 12px;
                                height: 11px;
                                background-image: url("../img/ico_link_green.png");
                                background-size: contain;
                            }
                        .plan__txt--detail{
                            font-size: 16px;
                            line-height: 16px;
                        }
}