@charset "UTF-8";
html{
	scroll-behavior: smooth;
    font-size: 100%;
}
body{
	font-family: "小塚ゴシック Pro","Kozuka Gothic Pro",sans-serif;;
	font-weight: 400;
	font-style: normal;
    line-height: 1.9rem;
    width: 100%;
}
.pc_none{
    display: none;
}
a {
    display:block;
    color: var(--base-color);
    text-decoration-line: none;
}
a:hover { 
	opacity:1;
	transition: .4s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
a img:hover {
	opacity: 0.8;
}
.red{
    color: #c40000;
}
.blue{
    color: #5388d0;
}
.yellow{
    color: #ffe600;
}
main .fix_bnr1{
    position: fixed;
    bottom: 43%;
    right: 0px;
    display: none;
    z-index: 10;
}
main .fix_bnr2{
    position: fixed;
    bottom: 1%;
    right: 1%;
    display: none;
    z-index: 10;
}
/* フェードインさせる要素 */
.fadein {
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 2s; /* 動きを滑らかに */
}
/* フェードイン用のクラス */
.fadeIn {
    opacity: 1;
}
/*ボタンデザイン開始▼*/
.contact-button {
  /* ボタン全体のスタイル */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 490px;
    height: 108px;
    background-color: #203f8e;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 6% auto;
}
.contact-button .arrow-icon {
  margin-left: 15px; /* テキストと矢印の間隔 */
  font-size: 1.5rem; /* 矢印のサイズ（テキストより少し大きく） */
  line-height: 1; /* 矢印の上下位置調整 */
}
/* ホバーエフェクト */
.contact-button:hover {
  background-color: #606060; /* ホバー時の背景色を少し明るく */
  cursor: pointer; /* マウスポインターを指カーソルに */
}
/*ボタンデザイン終了▲*/

/*ボタンデザイン2開始▼*/
.contact-button2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 514px;
    height: 100px;
    background-color: #4a4a4a;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 6% auto;
}
.contact-button2 .arrow-icon {
  margin-left: 15px; /* テキストと矢印の間隔 */
  font-size: 1.5rem; /* 矢印のサイズ（テキストより少し大きく） */
  line-height: 1; /* 矢印の上下位置調整 */
}

/* ホバーエフェクト */
.contact-button2:hover {
  background-color: #606060; /* ホバー時の背景色を少し明るく */
  cursor: pointer; /* マウスポインターを指カーソルに */
}
/*ボタンデザイン終了2▲*/

/*ボタンデザイン3開始▼*/
.contact-button3 {
    width: 560px;
    background-image: linear-gradient(90deg, rgba(103, 126, 250, 1), rgba(142, 84, 219, 1));
    border-radius: 40px;
    margin: 6% 0 0 0;
    padding: 5% 0;
    text-align: center;
    color: #ffff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 6% 0;
}
.contact-button3 .arrow-icon {
  margin-left: 15px; /* テキストと矢印の間隔 */
  font-size: 1.5rem; /* 矢印のサイズ（テキストより少し大きく） */
  line-height: 1; /* 矢印の上下位置調整 */
}
/*ボタンデザイン終了3▲*/

.container{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
header{
    background: url(../img/kv_bg.png) no-repeat;
    max-height: 1104px;
    background-size: cover; 
    background-position: center;
}
header h1{
    padding: 4px 0 0 8px;
    color: #ffff;
    font-size: 12px;
    font-weight: 500;
    display: none;
}
header .container{
    min-height: 1095px;
    padding: 2% 0 0 0;
    position: relative;
}
header .navi{
    width: 100%;
    display: flex;
    margin: 0 auto;
}
header .navi_wrapper{
    width: 100%;
    background-color: #d3d3d3;
    opacity: 0.9;
}
header .navi{
    width: 1200px;
    margin: 0 auto;
}
header .navi li{
    width: 16%;
    text-align: center;
    font-weight: bold;
    color: #000000;
    margin-right: 0px;
    padding: 28px 0;
}
header .navi .logo{
    margin: 2% 1% 0 0;
}
header .container .sub_ttl{
    position: absolute;
    top: 5%;
    z-index: 1;
}
header .container .img_phone01{
    position: absolute;
    top: 45%;
    left: 0;
    z-index: 2;
}
header .container .img_phone02{
    position: absolute;
    top: 46%;
    right: 12%;
    z-index: 2;
}
header .container .text_box{
    width: 620px;
    position: absolute;
    top: 33%;
    color: #000000;
}
header .fadein_ttl{
    opacity: 0; /* 初期状態では透明 */
    animation-name: fadein_ttl; /* アニメーション名を指定 */
    animation-duration: 1s; /* アニメーションの時間を1秒に設定 */
    animation-timing-function: ease-in; /* アニメーションの速度変化を設定 (ゆっくり始まる) */
    animation-fill-mode: forwards; /* アニメーション終了後、最後の状態を維持 */
    animation-delay: 0.2s; /* 0.5秒遅れてアニメーションを開始 */
}
        /* フェードインアニメーションのキーフレームを定義 */
        @keyframes fadein_ttl {
            0% {
                opacity: 0; /* 開始時：透明 */
                transform: translateY(20px); /* 少し下に配置 (任意) */
            }
            100% {
                opacity: 1; /* 終了時：不透明 */
                transform: translateY(0); /* 元の位置に戻す (任意) */
            }
        }

/* Animation */
.target {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(3%);
  }
  100% {
    transform: translateY(0%);
  }
}

#sec01{
    background: url(../img/sec01_bg02.png),#004f7d;
    background-repeat:repeat-x;
    background-position-y: bottom;
    position: relative;
    min-height: 943px;  
}
#sec01 .container{
    padding: 0 0 4% 0;
}
#sec01 .container .sub_ttl{
    font-size: 1.8rem;
    color: #ffffff;
    text-align: center;
    margin: 7% 0 2% 0;
    font-weight: bold;
}
#sec01 .container h3{
    text-align: center;
    font-size: 3.4rem;
    padding: 2% 0 3% 0;
    font-weight: bold;
    color: #ffffff;
}
#sec01 .container .sec01_main_img{
    position: absolute;
    background-image: url(../img/sec01_img.png);
    width: 1200px;
    height: 686px;
    bottom: -11%;
    z-index: 1;
}
#sec01 .container .sec01_main_text{
    color: #ffffff;
    text-align: center;
    font-weight: 500;
    line-height: 2.0rem;
}
#sec01 .container .text{
    text-align: center;
    color: #ffffff;
    margin: 1% 0;
}
#sec01 .container .sec01_subttl{
    font-size: 2.1rem;
    margin: 5% 0 2% 0;
    line-height: 3.4rem;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
#sec02{
    background-image: url(../img/sec02_bg.png);
    position: relative;
    background-size: cover;
    min-height: 943px;  
}
#sec02 .container{
    padding: 0 0 3% 0;
}
#sec02 .container h3{
    text-align: center;
    font-size: 3.4rem;
    padding: 17% 0 3% 0;
    font-weight: bold;
    color: #4983ce;
}
#sec02 .container .item_box{
    width: 1200px;
    height: 410px;
    position: relative;
    margin: 4% 0;
    background-color: #ffffff;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.15);
}
#sec02 .container .item_box_end{
    width: 1200px;
    height: 410px;
    position: relative;
    margin: 4% 0 0 0;
    background-color: #ffffff;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.15);
}
#sec02 .container .sec02_main_img{
    position: absolute;
    right: 0;
}
#sec02 .container .sec02_main_img2{
    position: absolute;
    left: 0;
}
#sec02 .container .col_l{
    width: 448px;
    padding: 6% 0 0 7%;
}
#sec02 .container .col_l .ttl{
    text-align: center;
    font-size:2.0rem;
    line-height: 2.8rem;
    margin-bottom: 4%;
    font-weight: bold;
}
#sec02 .container .col_l .ttl .blue{
    color: #00a6fc;
}


#sec02 .container .col_r{
    width: 420px;
    padding: 6% 0 0 58%;
}
#sec02 .container .col_r .ttl{
    text-align: center;
    font-size:2.0rem;
    line-height: 2.8rem;
    margin-bottom: 4%;
    font-weight: bold;
}
#sec02 .container .ttl .blue{
    color: #00a6fc;
}
#sec02 .container .ttl .orenge{
    color: #fc6b00;
}
#sec02 .container .sec02_etc_text{
    color: #b5b9c1;
    font-weight: bold;
    text-align: right;
    margin: 1% 0;
}
#sec03{
    background-image: url(../img/sec03_bg.png);
    background-size: cover;
    min-height: 1052px;  
}
#sec03 .container{
    padding: 2% 0 7% 0;
}
#sec03 .container h3{
    text-align: center;
    font-size: 3.0rem;
    padding: 6% 0 4% 0;
    font-weight: bold;
    line-height: 4.2rem;
}
#sec03 .container .content_box{
    display: flex;
}
#sec03 .container  .contentbox_l{
    display: block;
    width: 600px;
    padding-top: 8%;
}
#sec03 .container  .contentbox_l .sub_ttl{
    font-weight: bold;
    font-size: 2.0rem;
}
#sec03 .container  .contentbox_l .ttl{
    font-weight: bold;
    font-size: 3.2rem;
    line-height: 4.4rem;
    margin: 3% 0 4% 0;  
}
#sec03 .container .contentbox_l .purple{
    color: #6d51ec;
}
#sec04{
    background-color: #004f7d;
}
#sec04 .container{
    padding: 1% 0 3% 0;
}
#sec04 .container .sub_ttl{
    text-align: center;
    color: #ffff;
    margin: 6% 0 2% 0;
    font-size: 2.0rem;
    font-weight: bold;
}
#sec04 .container .ttl{
    text-align: center;
    color: #ffff;
    font-size: 4.0rem;
    font-weight: bold;
    color: #f1e800;
}
#sec04 .container .ttl_etc{
    font-size: 3.0rem;
}
#sec04 .slide-items {
  width: 100%;
  display: flex;
  margin: 5% 0 2% 0;
}
#sec04 .slide-items li {
  height: auto;
  margin-right: 6px;
  margin-left: 6px;
}
#sec04 .slide-items li img{
    width: 100%;
}
#sec04 .slide-items li .slick_ttl{
    font-size: 1.4rem;
    color: #ffff;
    text-align: center;
    margin: 4% 0 2% 0;
    line-height: 2.4rem;
    font-weight: bold;
}
#sec04 .slide-items li .slick_text{
    color: #ffffff;
    line-height: 1.6rem;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
#sec04 .slide-items .slick-arrow {
    height: 30px;
    width: 76px;
    margin: 11% 2% 0 2%;
}
#sec05{
    background-image: url(../img/sec05_bg.png);
    min-height: 930px;  
}
#sec05 .container{
    padding: 6% 0 8% 0;
}
#sec05 .container h3{
    font-size: 3.4rem;
    font-weight: bold;
    margin: 2% 0 8% 0;
    text-align: center;
}
#sec05 .container .content_box{
    display: flex;
}
#sec05 .container .content_col_l{
    display: block;
    width: 55%;
}
#sec05 .container .content_col_l img{
    width: 100%;
}
#sec05 .container .content_col_r {
    display: block;
    width: 80%;
    margin: 0 5%;
}
#sec05 .container .content_col_r .list{
    border-bottom: solid 1px #000000;
    padding: 2% 0;
    display: flex;
}
#sec05 .container .content_col_r .list .list_l{
    display: block;
    width: 46%;
    margin-right: 4%;
}
#sec05 .container .content_col_r .list .list_r{
    display: block;
    width: 50%;
}

.slider.thumb-item img {
  width: 100%!important ;/* メイン画像の横幅 */
  height: auto; /* 高さは自動調整 */
}

.slider.thumb-item-nav img {
  width: 100%!important; /* サムネイル画像の横幅 */
  height: auto; /* 高さは自動調整 */
}


#sec06{
    width: 100%;
    background-color: #ffffff;
}
#sec06 .container{
    padding: 6% 0 11% 0;
}
#sec06 .container h3{
    text-align: center;
    font-size: 3.0rem;
    margin: 1% 0 8% 0;
    font-weight: bold;
}
#sec06 .container .text_etc{
    margin: 0 0 5% 0;
    text-align: center;;
}
#sec06 .accordion {
    border-radius: 8px;
    margin-bottom: 10px;
}
#sec06 .accordion-item:last-child {
    border-bottom: none;
}
#sec06 .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 20px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.31);
}
#sec06 .accordion-item.open .accordion-header {
     border-bottom: 1px solid #e0e0e0;
     border-radius: 8px 8px 0 0;
}
#sec06 .accordion-header:hover {
    background-color: #f9f9f9;
}
#sec06 .accordion-question {
    font-weight: bold;
    color: #064077;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}
#sec06 .accordion-question::before {
    content: 'Q';
    font-weight: bold;
    color: #064077;
    margin-right: 10px;
    font-size: 1.2em;
}
  /* アイコンのスタイル */
#sec06 .accordion-icon {
    width: 20px; /* アイコンのサイズ */
    height: 20px; /* アイコンのサイズ */
    position: relative;
    display: flex; /* 中央揃えのため */
    align-items: center; /* 中央揃えのため */
    justify-content: center; /* 中央揃えのため */
}
#sec06 .accordion-icon::before,
#sec06 .accordion-icon::after {
    content: '';
    position: absolute;
    background-color: #064077; /* アイコンの色 */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* アニメーション */
}
  /* 横線 */
#sec06 .accordion-icon::before {
    width: 100%; /* 親要素の幅に合わせる */
    height: 2px; /* 線の太さ */
  }
  /* 縦線 */
#sec06 .accordion-icon::after {
    width: 2px; /* 線の太さ */
    height: 100%; /* 親要素の高さに合わせる */
}
  /* 開いたときのアイコンのスタイル（縦線を回転させて横線と重ねる） */
#sec06 .accordion-item.open .accordion-icon::after {
    transform: rotate(90deg);
}
  /* もし「-」をより明確にしたい場合、縦線を消すこともできます */
  /*
  .accordion-item.open .accordion-icon::after {
    transform: scaleY(0); // 縦線を潰す
    opacity: 0; // 透明にする
  }
  */
#sec06 .accordion-content {
    padding: 0px 20px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
#sec06 .accordion-item.open .accordion-content {
    padding: 15px 20px;
    max-height: 500px;
    transition: max-height 0.3s ease-in, padding 0.3s ease-in;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.31);
}
#sec06 .accordion-answer {
    color: #555;
    line-height: 1.6;
    display: flex;
}
#sec06 .accordion-answer::before {
    content: 'A';
    font-weight: bold;
    color: #dc3545;
    margin-right: 10px;
    font-size: 1.2em;
}
#sec06 .accordion-item {
    margin: 2% 1%;
}
footer{
    background-color: #004f7d;
    width: 100%;
    padding: 3% 0 6% 0;
    min-height: 450px;
}
footer .container{
    display: flex;
    justify-content: space-between;
}
footer .container .col_r{
    display: block;
    color: #ffff;
    margin-left: 230px;
}
footer .container .col_r ul{
    width: 205px;
    display: block;
}
footer .container .col_r li{
    display: block;
    width: 100%;
    margin: 10% 0;
}
footer .container .logo{
    width: 60%;
    margin: 0 auto;
}
.copyright{
    background-color: #00164f;
}
.copyright .col{
    padding: 1% 0;
    color: #fff;
    text-align: center;
}

/* ノートPC（例: 画面幅が1280px以下）向けのスタイル */
@media (max-width: 1280px) {
    #sec04 .container{
    width: 1200px!important;
    }
}

/* デスクトップPC（例: 画面幅が1280px以上）向けのスタイル */
@media (min-width: 1280px) {
    #sec04 .container{
    width: 1400px;
    }
}


/* タブレット（例: 画面幅が577px以上）向けのスタイル */
@media (min-width: 577px) {
    body {
        min-width: 1200px;
        margin: 0 auto;
    }
    .container{
        width: 1200px;
    }
}
/* スマートフォンデバイス（例: スマホ縦向き）*/
@media screen and (max-width: 576px) {
    body {
        min-width:unset;
        width: 100%;
        margin: 0 auto;
    }
    p {
        font-size: 1rem;
    }
    .strong{
        font-weight: bold;
    }
    .sp_none{
        display: none;
    }
    .pc_none{
        display: block;
    }
    .container{
        width: 100%;
    }
    header .container{
        min-height: 783px;
    }
    header .container .img_phone {
        position: relative;
        z-index: 2;
        margin: 10% 0 0 2%;
        width: 100%;
    }
    header .container .sub_ttl {
        position: relative;
        margin: 0 auto 0 auto;
        z-index: 1;
        width: 95%;
        }
    header {
        position: relative;
        max-height: 1200px;
        margin: 0;
        background-size: cover;
    }
    header .navi {
        width: 100%;
        margin: 0 auto;
        min-height: 68px;
    }
    header .sub_ttl img{
        width: 100%;
    }
    header .target img{
        width: 95%;
    }
    header .img_kv_sub_ttl{
        width: 100%;
    } 
    header .img_kv_sub_ttl img{
        width: 100%;
        margin: 2% 0 2% 0;
    }
    .contact-button2 {
        margin: 0 auto;
        width: 86%;
        height: 76px;
        margin: 6% auto 10% auto;
    }
    header .container .text_box {
        width: 46%;
        color: #000000;
        position: relative;
        text-align: center;
        margin: 4% 0 0 3%;
        text-align: left;
    }
    .contact-button {
        width: 86%;
        height: 90px;
        margin: 6% auto 10% auto;
    }
    #sec01{
        background-image: unset;
        min-height: unset;
    }
    #sec01 .container h3 {
        text-align: center;
        font-size: 8.4vw;
        line-height: 2.4rem;
        padding: 2% 0 3% 0;
    }
    #sec01 .container .sub_ttl {
        padding: 2% 0 0 0;
        font-size: 1.6rem;
        line-height: 2.4rem;
    }
    #sec01 .container .text {
        margin: 2% auto 8% auto;
        width: 94%;
    }
    #sec01 .container .icon01 img{
    width: 60%;
    }
    #sec01 .container .catch img{
        width: 90%;
        margin: 0 auto;
    }
    #sec01 .catch {
        margin: 4% 0;
    }
    #sec01 .sec01_main_img_sp{
        width: 95%;
        margin: 0 auto;
    }
    #sec02 .container h3{
        font-size: 2.4rem;
        font-weight: bold;
        line-height: 3.2rem;
        padding: 8% 0 2% 0;
    }
    #sec02 .container .item_box {
        width: 96%;
        display: block;
        height: unset;
        position: unset;
        padding: 0 0 9% 0;
        margin: 5% auto;
    }
    #sec02 .container .item_box_end {
        width: 96%;
        display: block;
        height: unset;
        position: unset;
        padding: 0 0 9% 0;
        margin: 5% auto;
    }
    .sec02_main_img img {
        width: 100%;
    }
    #sec02 .container .sec02_main_img{
        position: unset;
    }
    #sec02 .container .sec02_main_img2{
        position: unset;
    }
    #sec02 .container .sec02_main_img2 img{
        width: 100%;
    }
    #sec02 .container .col_r {
    width: 90%;
    padding: 6% 0 0 0;
    margin: 0 auto;
    }
    #sec02 .container .col_l {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    }
    #sec02 .container .sec02_etc_text{
        font-size: 0.8rem;
    }
    #sec03 .container {
        width: 98%;
        margin: 0 auto;
    }
    #sec03 .container .content_box{
    display: block;
    }
    #sec03 .container .contentbox_l .ttl {
        font-size: 2.2rem;
        line-height: 2.9rem;
        margin: 3% 0 4% 0;
        text-align: center;
    }
    #sec03 .container .contentbox_l .sub_ttl {
        text-align: center;
    }
    #sec03 .container .contentbox_l{
        width: 98%;
        margin: 0 auto;
    }
    #sec03 .container .text {
        width: 96%;
        margin: 0 auto;
    }
    #sec03 .container .contact-button3 {
        width: 100%;
    }
    #sec03 .container .contentbox_r{
        width: 90%;
        margin: 0 auto;
    }
    #sec03 .container .contentbox_r img{
        width: 100%;
    }
    #sec03 .container h3 {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }
    #sec03 .container .contentbox_l{
        padding-top: 0;
    }
    #sec04 .container {
        width: 98%!important;
        padding: 1% 0 3% 0;
        margin: 0 auto;
    }
    #sec04 .container .ttl{
        font-size: 3.6rem;
    }
    #sec04 .container .ttl_etc{
        font-size: 2.6rem;
    }
    #sec04 .slide-items .slick-arrow{
        margin: 30% 2% 0 2%;
    }
    #sec04 .container .sub_ttl {
        margin: 10% 0 2% 0;
    }
    #sec05{
        min-height: unset;
        padding: 4% 0 10% 0;
    }
    #sec05 .container .content_box {
        display: block;
    }
    #sec05 .container h3 {
        font-size: 2.8rem;
        margin: 4% 0 8% 0;
    }
    #sec05 .container .content_col_r {
        width: 90%;
    }
    #sec05 .container .content_col_l {
        width: 100%;
        margin: 0 0 10% 0;
    }
    .slider.thumb-item img {
        width: 94% !important;
        margin: 0 auto;
    }
    .slick-slider{
        margin: 0 0 4% 0;
    }
    #sec06 .container {
        padding: 6% 0 20% 0;
    }
    #sec06 .container h3 {
        text-align: center;
        font-size: 2.6rem;
        margin: 10% 0 12% 0;
        font-weight: bold;
    }
    #sec06 .accordion-header {
    width: 84%;
    margin: 2% auto;
    }
    #sec06 .accordion-item.open .accordion-content {
    width: 84%;
    margin: 0 auto;
    }
    #sec07 .accordion-header {
        width: 85%;
        margin: 0 auto;
    }
    #sec07 {
        padding: 5% 0 16% 0;
    }
    #sec07 .container h3 {
        margin: 8% 0;
        font-size: 2.4rem;
    }
    #sec07 .container .text_etc {
        margin: 4% auto;
        width: 90%;
    }
    #sec07 .accordion-item.open .accordion-content {
        width: 85%;
        margin: 0 auto;
    }
    #sec07 .accordion-question {
        width: 94%;
    }
    footer .container {
    display: block;
    text-align: center;
    margin: 4% auto;
    }
    footer .container .logo {
        width: 100%;
        margin: 4% auto 10% auto;
    }
    footer .container .col_r ul {
        width: 100%;
        display: block;
    }
    footer .container .col_r {
        margin: 0;
    }
/*ナビゲーション（SP）*/
header .navi .logo {
    margin: 4% 0 2% 3%;
}
header .navi .logo img {
    width: 80%;
}
header {
    background: url(../img/sp/kv_bg.png) no-repeat;
    background-size: cover;
    background-position: top;
}
.nav_sp{
  width: 100%;
  padding: 10% 0 11% 0;
  margin: 0 0 3% 0;
}
.hamburger {
    display: block;
    position: fixed;
    z-index: 4;
    right: 0;
    top: 0px;
    width: 75px;
    height: 67px;
    padding: 0px;
    cursor: pointer;
    text-align: center;
    background-color: #004f7d;
}
.hamburger span {
    display: block;
    position: absolute;
    width: 42px;
    height: 2px;
    left: 18px;
    background: #ffffff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 20px;
}
.hamburger span:nth-child(2) {
  top: 32px;
}
.hamburger span:nth-child(3) {
  top: 43px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 32px;
  left: 17px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 32px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
main .fix_bnr {
    z-index: 2;
}
/* メニュー背景　*/
nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    height: 100vh;
    left: 0;
    color: #fff;
    z-index: 3;
    background: #004f7d;
    text-align: center;
    width: 100%;
    transform: translateX(100%);
    transition: all 0.6s;
}
nav.globalMenuSp ul {
  margin: 26% auto 0 auto;
  padding: 0;
  width: 100%;
  display: block;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  width: 100%;
  transition: .4s all;
  margin: 4% 0;
  padding: 2% 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1rem 0;
  text-decoration :none;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
   transform: translateX(0%);
}    
}


/* select要素全般に適用、または特定のセレクトボックスにクラス名で適用 */
select {
    -webkit-appearance: none; /* iOSでネイティブなスタイルを無効化 */
    -moz-appearance: none;    /* Firefoxなど他のブラウザ向け */
    appearance: none;         /* 標準のプロパティ */
    
    /* 必要に応じて追加するスタイル */
    font-size: 16px;        /* フォントサイズ */
    color: #333;            /* 文字色 */

    /* 右端の矢印を非表示にする、またはカスタム矢印を使う場合 */
    /* IE向け */
    &::-ms-expand { 
        display: none; 
    }
}