@charset "utf-8";

html {
    scroll-behavior: smooth;
}

body {
    font-family: "メイリオ";
    margin: 0;
    padding: 0;
    background: #FFF;
}

/* ~~ エレメント / タグセレクター ~~ */
ul,
ol,
dl {
    padding: 0;
    margin: 0;
}

li {
    font-family: "メイリオ";
    font-size: 13px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: justify;
    text-justify: inter-ideograph;
}


li a {
    font-size: 13px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    list-style: none;
    text-decoration: none;
}

li a:hover {
    /** 半透明（全体） ******************************/
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    /*********************
『filter:alpha(opacity=50);』--【IE】/ 透過無しの状態"100%"を指定する際は「filter:alpha(opacity=100);」。
『-moz-opacity: 0.5;』--【Firefox（Mozilla）】/ 透過無しの状態"100%"を指定する際は「-moz-opacity:1;」。
『opacity: 0.5;』--【SafariやOpera】/ 透過無しの状態"100%"を指定する際は「opacity:1;」。
**********************/
}


h4,
h5,
h6,
p {
    font-family: "メイリオ";
    margin-top: 0;
    /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
    padding-right: 15px;
    padding-left: 15px;
    /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}


p {
    font-family: "メイリオ";
    font-size: 13px;
    margin: 0;
    padding: 0;
    text-align: justify;
    text-justify: inter-ideograph;
}


p a {
    /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
    font-family: "メイリオ";
    font-size: 13px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


a img {
    /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
    border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
    color: #414958;
    text-decoration: underline;
    /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}

a:visited {
    color: #4E5869;
    text-decoration: underline;
}

a:hover,
a:active,
a:focus {
    /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
    text-decoration: none;
}

/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */






/**　link show　***********************************************************************************/


/** block *****************************************/
.pc-show-block {
    display: block;
}

.pc-hide-block {
    display: none;
}

@media screen and (max-width: 480px) {
    .pc-show-block {
        display: none;
    }

    .pc-hide-block {
        display: block;
    }
}


/** inline-block *****************************************/
.pc-show-inline {
    display: inline-block;
}

.pc-hide-inline {
    display: none;
}

@media screen and (max-width: 480px) {
    .pc-show-inline {
        display: none;
    }

    .pc-hide-inline {
        display: inline-block;
    }
}


/** none *****************************************/
.pc-show {}

.pc-hide {
    display: none;
}

@media screen and (max-width: 480px) {
    .pc-show {
        display: none;
    }

    .pc-hide {
        display: inline;
    }
}






/**　header_pc　***********************************************************************************/
/*************************************************************************************/
@media screen and (max-width: 480px) {

    /*ウィンドウ幅が最大480pxの場合にPC非表示*/
    .header_pc {
        display: none;
    }
}

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

    /*ウィンドウ幅が最少481pxの場合にPC表示*/
    .header_pc {
        width: 1080px;
        height: auto;
        margin: 0 auto;
        padding: 10px 0 10px 0;
        background: #FFF;
    }
}

/*************************************************************************************/


/**　header_sp　***********************************************************************************/
/*************************************************************************************/
@media screen and (min-width: 481px) {

    /*ウィンドウ幅が最少481pxの場合にSP非表示*/
    .header_sp {
        display: none;
    }
}

@media screen and (max-width: 480px) {

    /*ウィンドウ幅が最大480pxの場合にSP表示*/
    .header_sp {
        width: 100%;
        position: fixed;
        margin: 0;
        padding: 0;
        z-index: 9999;
    }
}

/*************************************************************************************/




/*************************************************************************************/

@media screen and (min-width: 481px) {
    /*ウィンドウ幅が最少481pxの場合にPC表示*/

    .okc {
        display: none;
    }
}

@media screen and (max-width: 480px) {

    /*ウィンドウ幅が最少480pxの場合にPC非表示*/
    .okc {
        font-family: "メイリオ";
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        padding: 16px 0 13px;
        margin: 0;
        text-align: center;
        background: #204DA0;
    }
}

/** top_template ***********************/

.header_pc p.h1 {
    display: block;
    float: left;
    width: 660px;
    font-family: "メイリオ";
    font-size: 15px;
    font-weight: bold;
    line-height: 18px;
    margin: 0;
    padding: 15px 0 0;
}

.header_pc p.mess {
    display: block;
    float: left;
    width: 660px;
    font-family: "メイリオ";
    font-size: 14px;
    line-height: 16px;
    margin: 0 0 22px;
    padding: 3px 0 0;
}







/** top_template ***********************/

.header_pc p.h1 {
    display: block;
    float: left;
    width: 660px;
    font-family: "メイリオ";
    font-size: 15px;
    font-weight: bold;
    line-height: 18px;
    margin: 0;
    padding: 15px 0 0;
}

.header_pc p.mess {
    display: block;
    float: left;
    width: 660px;
    font-family: "メイリオ";
    font-size: 14px;
    line-height: 16px;
    margin: 0 0 22px;
    padding: 3px 0 0;
}




/** コンテント ここから　↓↓↓　*****************************************************************************************************/
#content {
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0 auto 30px;
    clear: both;
}


/***************************************************************************************************************************/
/** 【PC用】　↓↓↓　*****************************************************************************************************/
/* @media screen and (min-width: 481px) { */
/*ウィンドウ幅が最少481pxの場合にPC表示*/





#content .topimg {
    width: 70%;
    margin: 0 auto;
    clear: both;
}

#content .topimg h1 {
    font-weight: bold;
    font-size: 30px;
    margin: 0 20px;
    padding: 28px 0 0;
    border-bottom: 2px solid #000;
}


@media (max-width: 480px) {
    #content .topimg h1 {
        border: none;
    }
}


#content .topimg h2 {
    font-size: 20px;
    line-height: 30px;
    margin: 1px 20px 0;
    padding: 0;
    text-align: right;
    border-top: 1px solid #000;
}

@media (max-width: 480px) {
    #content .topimg h2 {
        border-top: 1px solid #fff;
    }
}


#content .topimg p {
    font-family: "メイリオ";
    font-size: 15px;
    line-height: 130%;
    padding: 30px 0 0;
    margin: 0 20px;
}



/******************************　first ↓↓↓　【PC】***************************************************************/
#content .first {
    width: 1080px;
    margin: 0 auto;
    padding: 0;
    clear: both;
}

#content .first ul {
    margin: 0 0 0 40px;
    padding: 0;
}


#content .first li {
    float: left;
    margin: 0 0 20px 0;
    padding: 0 30px 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #CCC;
}

#content .first li.last {
    float: left;
    margin: 0 0 20px 0;
    padding: 0 0 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #CCC;
}


#content .first li a {
    font-size: 16px;
    font-weight: bold;
    color: #00F;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#content .first li a:before {
    content: "▶";
    font-size: 13px;
}


#content .first li a:hover {
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    opacity: 0.25;
}






/******************************　headline-area ↓↓↓　【PC】***************************************************************/
#content .headline-area {
    width: 70%;
    display: flex;
    justify-content: space-between;

    height: auto;
    margin: 20px auto;
    clear: both;

}

@media (max-width: 480px) {

    #content .headline-area {
        margin: 0 auto;
        width: 90%;
    }
}



/******************************　headline ↓↓↓　【PC】***************************************************************/
#content .headline {
    width: 280px;
    height: fit-content;
    margin: 0 0 30px 0;
    box-shadow: 2px 2px 4px -2px #555555;
}

#content .sub-headline {
    float: left;
    width: 280px;
    height: auto;
    padding: 0;
    margin: 0;
    background: #FBF9F0;
}


#content .sub-headline p.title {
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    background: #8B7925;
    text-align: center;
    padding: 10px 0;
    margin: 0 0 20px 0;
}


#content .sub-headline li {
    padding: 0 5px 10px;
    margin: 0 10px 20px;
    border-bottom: 1px dotted #CCC;
}


#content .sub-headline li p {
    font-size: 13px;
    margin: 0 0 10px 0;
}


#content .sub-headline li p.top {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

/** ---------------  sub-headline　ここまで ↑↑↑　------------------------------ */

.mainContainer {
    margin-left: 20px;
}

@media (max-width: 480px) {

    .mainContainer {
        margin: 0;
    }
}

/** コンテント ここから　↓↓↓　*****************************************************************************************************/

#content {
    height: auto;
    margin: 0 auto 20px;
    padding: 0 0 50px 0;
    background: #FFF;
    clear: both;
}



/** main1 ここから　↓↓↓　****************************************************/
#content .main1 {
    overflow: hidden;
    height: auto;
    margin: 0;
    padding: 0;
}

@media (max-width: 480px) {
    #content .main1 {
        margin: 20px auto;
        width: 80%;
    }
}



#content .main1 h2 {
    font-size: 30px;
    font-weight: bold;
    padding: 0;
    margin: 20px 20px 1px 20px;
    border-bottom: 2px solid #000;
}

#content .main1 h3 {
    font-family: "メイリオ";
    font-size: 15px;
    font-weight: normal;
    margin: 0 20px 5px 20px;
    padding: 15px 0 0 20px;
}


#content .main1 p {
    font-family: "メイリオ";
    font-size: 15px;
    margin: 10px 20px 20px;
    padding: 0 0 0 20px;
}

@media (max-width: 480px) {

    #content .main1 h3,
    #content .main1 p {
        margin: 0;
        padding: 0;
        font-weight: bold;
        text-align: center;
        font-size: 18px;
        line-height: 1.8;
    }
}




/** main2 ここから　↓↓↓　****************************************************/
#content .main2 {
    overflow: hidden;
    height: auto;
    margin: 20px 0 20px;
    padding: 0;
    background: #CCC;
    background: url(../../images-new/about/adviser/back-aus.jpg) no-repeat;
    background-size: cover;
}


#content .main2 .main2-1 {
    float: left;
    display: block;
    width: 50%;
    background: #FFF;
    padding: 30px;
    margin: 30px 0 30px 30px;
}

@media (max-width: 480px) {
    #content .main2 .main2-1 {
        width: 70%;
        background: #ffffffad;
        font-weight: bold;
        float: none;
        margin: 30px auto;
    }
}



#content .main2 ul a {
    display: block;
    width: auto;
    background: url(../../images-new/about/adviser/map-aus.png) no-repeat;
    background-position: right;
    background-size: 45% auto;
    margin: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
}

@media (max-width: 480px) {
    #content .main2 ul a {
        background-position: right bottom;
    }
}



#content .main2 ul a:hover {
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    opacity: 0.25;
}


#content .main2 p.title {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 2px;
}


#content .main2 li {
    font-size: 18px;
    line-height: 170%;
    margin: 0 0 0 1em;
    padding: 0;
}

@media (max-width: 480px) {
    #content .main2 li {
        margin: 0;
    }
}




/** main3 ここから　↓↓↓　****************************************************/
#content .main3 {
    overflow: hidden;
    height: auto;
    margin: 20px auto;
    padding: 0;
    background: #CCC;
    background: url(../../images-new/about/adviser/back-nzl.jpg) no-repeat;
    background-size: cover;
}


#content .main3 .main3-1 {
    float: right;
    display: block;
    width: 50%;
    background: #FFF;
    padding: 30px;
    margin: 30px 30px 30px 0;
}

@media (max-width: 480px) {
    #content .main3 .main3-1 {
        width: 70%;
        background: #ffffffad;
        font-weight: bold;
        float: none;
        margin: 30px auto;


    }
}



#content .main3 ul a {
    display: block;
    width: auto;
    background: url(../../images-new/about/adviser/map-nzl.png) right 20px no-repeat;
    background-size: 45% auto;
    margin: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
}

@media (max-width: 480px) {
    #content .main3 ul a {
        background-position: right bottom;
    }
}

#content .main3 ul a:hover {
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    opacity: 0.25;
}

#content .main3 p.title {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 2px;
}

#content .main3 li {
    font-size: 18px;
    line-height: 170%;
    margin: 0 0 0 1em;
    padding: 0;
    
}
@media (max-width: 480px) {
    #content .main3 li {
        margin: 0;
    }
}




/** main4 ここから　↓↓↓　****************************************************/
#content .main4 {
    overflow: hidden;
    height: auto;
    margin: 20px 0 20px;
    padding: 0;
    background: #CCC;
    background: url(../../images-new/about/adviser/back-can.png) no-repeat;
    background-size: cover;
}


#content .main4 .main4-1 {
    float: left;
    display: block;
    width: 50%;
    background: #FFF;
    padding: 30px 30px 0 0;
    padding: 30px;
    margin: 30px 0 30px 30px;
}

@media (max-width: 480px) {

    #content .main4 .main4-1 {
        width: 70%;
        background: #ffffffad;
        font-weight: bold;
        float: none;
        margin: 30px auto;
    }

}


#content .main4 ul {
    display: block;
    width: auto;
    height: 300px;
    background: url(../../images-new/about/adviser/map-can.png) no-repeat;
    background-size: 45% auto;
    background-position: right;
    margin: 0;
}

@media (max-width: 480px) {

    #content .main4 ul {
        background-position: right bottom;

    }
}



#content .main4 p.title {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 2px;
}


#content .main4 li {
    font-size: 18px;
    line-height: 170%;
    margin: 0 0 0 1em;
    padding: 0;
}

@media (max-width: 480px) {
    #content .main4 li {
        margin: 0;
    }
}



/** main5 ここから　↓↓↓　****************************************************/
#content .main5 {
    margin: 50px auto;
    padding: 30px;
    background: url(../../images-new/about/adviser/img-support.png) no-repeat;
    background-size: cover;
    background-position: right;
}

@media (max-width: 480px) {

    #content .main5 {
    padding: 30px 0;
    }
}


#content .main5 div {
    width: 75%;
}

@media (max-width: 480px) {

    #content .main5 div {
        width: 95%;
        margin: 0 auto;
    }
}


#content .main5 p.title {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid #FF6215;
    padding: 0 0 0 0.5em;
    margin-bottom: 20px;
}


#content .main5 ul {
    background: #ffffff8f;
    padding: 10px;
}

#content .main5 li {
    margin-bottom: 10px;
    padding: 0;
}


#content .main5 li p.sub:before {
    content: "●";
    color: #AC0000;
}


#content .main5 li p.sub {
    float: left;
    font-weight: bold;
    color: #AC0000;
}


/** main6 ここから　↓↓↓　****************************************************/
#content .main6 {
    margin: 0 0 20px;
    padding: 30px;
    background: url(../../images-new/about/adviser/img-support02.png) no-repeat;
    background-size: cover;
}

@media (max-width: 480px) {
    #content .main6 {
    padding: 30px 0;
    }
}


#content .main6 p.title {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid #FF6215;
    padding: 0 0 0 0.5em;
    margin-bottom: 20px;
}

@media (max-width: 480px) {

    #content .main5 p.title,
    #content .main6 p.title {
        font-size: 32px;
        text-align: center;
        padding: 0;
        text-shadow: 1px 2px 1px #fff;
    }
}

#content .main6 div {
    margin-left: auto;
    width: 60%;
}

@media (max-width: 480px) {

    #content .main6 div {
        margin: 0 auto;
        width: 95%;
    }
}

#content .main6 ul {
    background: #ffffff8f;
    padding: 10px;
}

#content .main6 li {
    margin-bottom: 10px;
    padding: 0;

}

#content .main6 li:before {
    content: "●";
    color: #AC0000;
}


/** コンテント ここまで　↑↑↑　*****************************************************************************************************/



/*ウィンドウ幅が最少481pxの場合にPC表示終了*/
/** 【PC用】　↑↑↑　*****************************************************************************************************/
/***************************************************************************************************************************/



/************************************************************************************************************************************/
/** 【SP用】　↓↓↓　***************************************************************************************************************/
#nav-drawer {
    display: inline-block;
    position: relative;
    padding: 11px 12px 8px 17px;
    margin: 0 80% 0 0;
    background: #204DA0;
    /**　【#content .topimg】のbackgroundにあわせる　**/
    /** 角丸 **/
    border-radius: 50px;
    /* CSS3草案 */
    -webkit-border-radius: 50px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 50px;
    /* Firefox用 */
    /** 半透明（背景のみ） **/
    background-color: rgba(32, 77, 160, 0.70);
    /**　色を変える（backgroundカラーをR㎇にする）　**/
    /*********************
0が「完全に透明」　1が「完全に不透明」で、小数を使って不透明割合を指定
「55％不透明(＝45％透明)」
**********************/
}

#nav-drawer p.menu {
    font-family: "メイリオ";
    display: block;
    font-size: 10px;
    color: #ffffff;
    padding: 0;
    margin: 0 3px 0 0;
    text-align: center;
}




/** ---------------  topimg　ここから ↓↓↓ 　--------------------------------------- **/
@media screen and (max-width: 480px) {
    /*ウィンドウ幅が最少480pxの場合にPC非表示*/


    #content .topimg {
        width: 100%;
        margin: 0 0 0 0;
        padding: 0 0 10px 0;
        background: #204DA0;
        clear: both;
    }

    #content .topimg h1 {
        font-family: "メイリオ";
        font-size: 20px;
        color: #FFF;
        text-align: center;
        padding: 25px 0 15px;
        margin: 0;
        line-height: 120%;
    }

    #content .topimg h1 span {
        display: block;
    }

    #content .topimg h2 {
        font-family: "メイリオ";
        font-size: 18px;
        font-weight: normal;
        color: #FFF;
        text-align: center;
        padding: 0;
    }

    #content .topimg h3 {
        font-family: "メイリオ";
        font-size: 12px;
        font-weight: normal;
        color: #FFF;
        text-align: center;
        padding: 0;
        margin: 0 10px 0 0;
    }



    /******************************　first ↓↓↓　【SP】***************************************************************/
    #content .first {
        margin: 0 auto;
        padding: 0;
        clear: both;
    }

    #content .first ul {
        margin: 15px 0 0 20px;
        padding: 0;
    }


    #content .first li {
        margin: 0 0 5px 0;
        padding: 0;
        font-size: 16px;
        font-weight: bold;
        color: #CCC;
    }

    #content .first li.last {
        margin: 0 0 5px 0;
        padding: 0 0 0 0;
        font-size: 16px;
        font-weight: bold;
        color: #CCC;
    }


    #content .first li a {
        font-size: 14px;
        color: #00F;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #content .first li a:before {
        content: "▶";
        font-size: 13px;
    }


    #content .first li a:hover {
        filter: alpha(opacity=25);
        -moz-opacity: 0.25;
        opacity: 0.25;
    }







    /******************************　main1 ↓↓↓　【SP】***************************************************************/
    #content .main1 {
        margin: 50px auto;
        padding: 0;
    }

    #content .main1 h2 {
        font-size: 18px;
        font-weight: bold;
        margin: 0 10px 10px 15px;
        padding: 10px 0 5px;
        border-bottom: 1px dotted #ccc;
    }

    #content .main1 p.tel {
        float: left;
        font-family: "メイリオ";
        font-size: 20px;
        font-weight: bold;
        color: #FF6215;
        margin: 0 0 0 30px;
        padding: 0;
    }

    #content .main1 p.tel span {
        font-size: 14px;
        margin: 0;
        padding: 0;
    }

    #content .main1 p.time {
        font-family: "メイリオ";
        font-size: 14px;
        margin: 0 0 0 40px;
        padding: 0;
        clear: both;
    }

    #content .main1 p.time span {
        display: block;
        margin: 0 0 10px 5em;
        padding: 0;
    }



    /******************************　main2 ↓↓↓　【SP】***************************************************************/
    #content .main2 {
        margin: 20px 0 0;
        padding: 0;
        border-top: 2px solid #ccc;
    }

    #content .main2 h2 {
        font-size: 18px;
        font-weight: bold;
        margin: 0 10px 10px 15px;
        padding: 10px 0 5px;
        border-bottom: 1px dotted #ccc;
    }

    #content .main2 p {
        font-family: "メイリオ";
        font-size: 14px;
        /* margin: 10px 10px 10px 15px; */
        padding: 0;
    }

    #content .main2 p a {
        font-size: 14px;
        color: #0000FF;
        text-decoration: underline;
        margin: 0;
        padding: 0;
        text-indent: -18px;
    }


    #content .main2 p.form {
        margin: 10px 15px 5px;
        line-height: 140%;
        text-align: center;
    }

    #content .main2 p.form a {
        display: block;
        font-size: 18px;
        color: #0000FF;
        font-weight: bold;
        padding: 0 0 17px;
        line-height: 140%;
        background: #DAE3F3;
        text-decoration: underline;
    }

    #content .main2 p.form a span {
        margin: 0 0 0 10px;
        padding: 0;
    }



}

/*ウィンドウ幅が最少480pxの場合にPC非表示終了*/
/** 【S用】　↑↑↑　*****************************************************************************************************/
/***************************************************************************************************************************/





/** コンテント ここまで　↑↑↑　*****************************************************************************************************/