@charset "utf-8";

/* レスポンシブデザイン用CSS */
@media (max-width: 767px) {
    /* スマホ用コンテンツを表示 */
    .sp_none {
        display: block;
    }

    /* ヘッダー */
    header {
        width: 100%;
        height: 10.6vw;
        position: fixed;
        top: 0;
        background-color: rgba(6, 58, 149,1 );
        z-index: 1000;
        transition: all 0.5s ease-out;
    }
    /* ヘッダーメニュー、問い合わせ先をバーガーメニューに変更 */
    .sp_menus {
        height: 100vh;
        transition: all 0.5s ease-out;
    }
    .hd_container {
        position: relative;
    }
    .hd_menus {
       width: 90vw;
        position: absolute;
       top: 80px;
        left: 20vw;
        display: flex;
        flex-direction: column;
    }
    .hd_menu {
        position: static;
        padding: 0;
        display: flex;
        align-items: center;
        margin-bottom: 1vw;
    }
    .hd_menu h5{
        font-size: 4.5vw;
        margin-right: 3vw;
        margin-left: 3vw;
    }
    .hd_menu h6 {
        font-size: 4vw;
    }
    .hd_menus>a:nth-child(-n+5)>div::before {
        display: none;
    }
    .hd_menu::after {
        content: '';
        position: absolute;
        top: auto;
        left: 0;
        width: 1px;
        height: 4vw;
        margin: auto;
        color: #fff;
        background-color: #fff;
    }
    .hd_tel {
        width: 60vw;
        height: 5vw;
        font-size: 5vw;
        margin-bottom: 5vw;
        position: absolute;
        top: 130vw;
        left: 20vw;
    }
    .hd_tel .fa-phone {
        margin-right: 3vw;
        font-size: 5vw;
        transform: scale(-1, 1);
    }
    .hd_seminar {
        height: 9vw;
        padding: 2vw 5vw;
        font-size: 5vw;
        line-height: 7vw;
        margin-left: 0;
        border-radius: 2.5vw;
        position: absolute;
        top: 140vw;
        left: 20vw;
    }
    .hd_seminar .fa-envelope {
        margin-right: 3vw;
        font-size: 5vw;
    }

    .hd_menus,
    .hd_tel,
    .hd_seminar {
        display: none;
    }

    /* ロゴをサイズアップ */
    .hd_logo {
        width: 30vw;
        margin: 0;
    }
    /* メニューバーを右上に設定 */
    #sp_menuBar,
    #sp_closeBar {
        height: 6vw;
        color: #fff;
        font-size: 6vw;
        transition: all 0.5s ease-out;
    }

    /* フッター */
    footer {
        width: 100%;
        height: 5.8vw;
        line-height: 5.8vw;
    }
    footer p {
        font-size: 3vw;
    }

    /* ViewMore ボタン */
    /* 幅と文字の大きさを調整 */
    .view_more {
        width: 80vw;
        height: 10vw;
        font-size: 4vw;
        line-height: 10vw;
        background-color: rgba(255,255,255,0.6);
    }
    .view_more_wh {
        width: 80vw;
        height: 10vw;
        font-size: 4vw;
        line-height: 10vw;
    }
    .view_more img,
    .view_more_wh img {
        margin-left: 5vw;
        width: 15vw;
    }

    /* 各項目タイトル about */
    .title {
        color: #2a5297;
        z-index: 3;
    }
    .title img {
        width: 15vw;
        margin-bottom: 1vw;
    }
    .title h4 {
        font-size: 9vw;
        margin-bottom: 1vw;
        line-height: 1;
    }
    .title p {
        font-size: 3vw;
    }

    /* 各項目タイトル ネイビー */
    .title_nv {
        color: #2a5297;
        z-index: 3;
    }
    .title_nv img {
        width: 15vw;
        margin-bottom: 1vw;
    }
    .title_nv h4 {
        font-size: 9vw;
        margin-bottom: 1vw;
        line-height: 1;
    }
    .title_nv p {
        font-size: 3vw;
    }

    /* 各項目タイトル（白文字） */
    .title_wh {
        color: #fff;
        z-index: 3;
    }
    .title_wh img {
        width: 15vw;
        margin-bottom: 1vw;
    }
    .title_wh h4 {
        font-size: 9vw;
        margin-bottom: 1vw;
        line-height: 1;
    }
    .title_wh p {
        font-size: 3vw;
    }

    /* Contact */
    /* 幅の調整 */
    .contact_head {
        width: 100%;
        height: 32vw;
        padding-top: 2vw;
    }
    /* 横幅を100%にして縦並びに */
    .cn_tel,
    .cn_seminer {
        width: 100vw;
      
        float: left;
        padding-top: 5.1vw;
        background-size: cover;
    }
    /* 文字サイズ変更 */
    .cn_tel h2,
    .cn_seminer h2 {
           font-size: 24px;
        margin-bottom: 1.5vw;
    }
    .cn_tel h4,
    .cn_seminer h4 {
        font-size: 24px;
        margin-bottom: 1vw;
    }
    .cn_tel p,
    .cn_seminer p {
        font-size:16px;
    }
    .cn_tel_2 .fa-phone {
        margin-right: 1vw;
      font-size:20px;
    }
    .cn_seminer_2 .fa-envelope {
        margin-right: 1vw;
        font-size:20px;
    }

    /* 下層ページトップ */
    /* 幅調整 */
    .top_head {
        width: 100%;
        height: auto;
        padding: 12.6vw 0 2vw 5vw;
        margin-top: 0vw;
        background-size: cover;
        background-position: center;
    }
    /* 左揃えに変更 */
    .top_head>.tc {
        text-align: left;
    }
    /* 文字、要素のサイズ変更 */
    .top_title h2 {
       font-size: 28px;
    margin-bottom: 20px;
    font-weight: bold;
    }
    .top_title h3 {
        font-size: 4vw;
    }
    .top_title img {
        width: 15vw;
        display: none;
    }
    .top_title h3 {
        font-size: 4vw;
    }
	.f_exp {
		font-size: 14px;
	}
	.gnav li {
		width: 100%;
	}
	.hd_right {
    	display: none;
	}
	.gnav li ul {
		margin: 1% 1% 0% !important;
		padding: 1%;
		font-size: 0.8vw;
	}
	.gnav li:hover > ul > li {
		height: auto !important;
	}
	
	
	.reason_wrapper {
        width: 100%;
        height: auto;
        margin-top: -28vw;
        background-image: url("../img/top/VectorSmartObject03.png");
        background-size: auto 175vw;
        background-position: center;
        padding-top: 13vw;
        padding-bottom: 17vw;
        position: relative;
    }
    .rtbc {
        width: 71.3vw;
        position: absolute;
        top: 9.2vw;
        left: 14.45vw;
        opacity: 0.1;
    }
    /* marginの調整 */
    .reason_wrapper>.title_wh {
        margin: 0 auto 0 auto;
    }
    /* 各REASONを縦並びに変更 */
    .reasons {
        width: 90vw;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        margin: 0 auto;
    }
    /* REASON内容を横並びに変更 */
    .reason {
        width: 100%;
        height: auto;
        background-color: #fff;
        position: relative;
            display: block;
    }
    .reason:nth-child(1),
    .reason:nth-child(2),
    .reason:nth-child(3) {
        margin-top: 5vw;
    }
    .r_img {
        width: 100%;
    /* height: 25vw; */
    margin: auto 0;
    z-index: 1;
    }
    .r_head {
          width: auto;
    /* height: 20%; */
    position: absolute;
    top: 30%;
    left: 10vh;
    z-index: 2;
    }
    .r_cr {
        width: 5.3vw;
        position: absolute;
        bottom: 8.3vw;
        right: 1.7vw;
        z-index: 3;
    }
    /* padding調整 */
    .reason_txt {
        padding: 2vw;
    }
    /* 文字サイズ変更 */
    .r_point {
        color: #2a5297;
   
        margin-bottom: 2vw;
    }
    .r_txt {
    
    }
    /* dotのサイズ調整 */
    .r_dot {
        position: absolute;
        bottom: 2vw;
        right: 2vw;
    }
	
	.c_movie {
		width: 100%;
		height: auto;
	}
	
	.greet_wrapper {
		background: none;
	}
	
		.greet.-re{
	    flex-direction: column;
	}
}