@charset "utf-8";
/*=========================
common
=========================*/
:root{
    --primary-white:#FDFDFD;
    --primary-black:#333333;
    --primary-blue:#11438a;
    --primary-lite-blue:#ecf2f6;
    --primary-yellow:#deb523;
    --contentWidth:88%;
    --contentPadding:0 6.6%;
}

html{
    font-size: 62.5%;/* 16px * 62.5% = 10px */
}

body{
    font-family: 
        'Zen Kaku Gothic New',
        Arial,
        sans-serif;
    font-style: normal;
    color: var(--primary-black,#333333);
    background-color: var(--primary-white,#FDFDFD);
    line-height: 1.5;
}

img{
    max-width: 100%;
    height: auto;
}

/*　spのタイトル設定 */
.topic{
  color: var(--primary-blue,#11438a);  
  text-align: center;
  font-family: 'Zen Kaku Gothic New';
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin: 0 auto;
}

/* sp問い合わせボタンのスタイル */
.contact__btn_L{
   display: block;
   border-radius: 100px; /* 角丸の設定 */
   background:linear-gradient(to right, #11438a, #55a2e6);
   width: 100%;
   max-width: 450px;
   padding: 16px 20px;
   margin: 0 auto;
   color: var(--primary-white,#FDFDFD);
   text-align: center;
   font-size: 2rem;
   font-weight: 700;
   line-height: 1;
   position:relative;
   transition:0.4s;/* hoverした時の切り替わるスピードの設定 */
}

/* sp問い合わせボタンの三角の装飾のスタイル */
.contact__btn_L::after{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 20px;
    background-image:url(../images/btn_icon.svg) ;
    background-size: contain;/* 画像が見切れないよう設定 */
    background-position: center;
    background-repeat: repeat;/* くり返し表示しないように */
    position: absolute;
    right: 30px;
    top:50%;/* このままだと装飾の上を起点に50%の位置なので少し下がる */
    transform: translateY(-50%);/* これで起点を真ん中の位置に */
}

/* ボタンにカーソルを合わせた時のスタイル */
.contact__btn_L:hover{
    opacity: 0.5;
}

/* common pc */
@media screen and  (min-width:769px) {
    /* pcのタイトル設定 */
    .topic{
        font-size: 3.5rem;
    }
    /* pcの問い合わせボタンの設定 */
    .contact__btn_L{
        max-width: 600px;
        height: 90px;
        padding: 30px 60px;
        font-size: 3rem;
    }
    .contact__btn_L::after{
        width: 30px;
        height: 30px;
    }
}


/*=========================
header
=========================*/
.header{
    position: fixed; /* スクロールしても固定 */
    width: 100%; /* 横幅を画面全体に広げる */
    z-index: 100; /* 他の要素より前面に表示 */
    background-color: var(--primary-white, #FDFDFD); /* 背景色を設定 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 下に影を追加 */
}

.main{
    padding-top: 50px; /* headerの高さ分だけ余白を作る */
}

.normal__header,
.nav__header{
   padding: 0 6.6%;
   height: 50px;
   display: flex;/* 要素を横並びに */
   align-items: center;/* 水平中央に */
   justify-content: space-between;/* 幅いっぱいに均等に広げる */ 
}

.logo,
.nav__logo{
    height: 30px;
}

/* header問い合わせボタンのスタイル */
.contact__btn_S{
    display: block;
    border-radius: 100px; /* 角丸の設定 */
    background:linear-gradient(to right, #11438a, #55a2e6);
    padding: 9px 15px;
    color: var(--primary-white,#FDFDFD);
    text-align: center;
    font-size: 1.4rem;
    font-weight:700;
    line-height: 1;
    transition:0.4s;/* hoverした時の切り替わるスピードの設定 */
}

/* header問い合わせボタンにカーソルを合わせた時のスタイル */
.contact__btn_S:hover{
    background: #deb523;
}

/* ハンバーガー開閉ボタンのスタイル */
.header__btn,
.nav__btn{
    margin-left:15px ;
    width: 30px;
    height: 30px;
}

.nav__btn__group,
.header__btn__group{
    display: flex; 
}

/* navの初期表示 */
.nav{
    background: rgb(253, 253, 253,0.95);
    width: 100%;
    height: 100vh;
    position: fixed;/* 画面にいつもついてくるように */
    top:0;
    left: 0;
    z-index: 100;/* 画面の一番表に表示 */
    transform: translateX(-100%);/* menu押すまで隠す */
    transition: transform 0.4s;/* hoverした時の切り替わるスピードの設定 */
}

.nav__list{
    margin:50px 6.6%;
}

.nav__item{
  color: var(--primary-blue,#11438a);  
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
}

/* navの線のスタイル */
.nav__item::before{
    content: '';
    display: block;/* 表示させる */
    width: 100%;
    height: 2px;
    background-color: var(--primary-blue,#11438a); 
    margin-top: 27px;
    margin-bottom: 27px;
}

/* 最初の線のスタイル */
.nav__item:first-child::before{
    display: none;/* 非表示 */
}

/* 事業紹介のスタイル */
.nav__item2{
    color: var(--primary-blue,#11438a);  
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    display: flex;/* 横並びに表示させる:親要素に */
    align-items: center;/* 水平中央に */
    margin-top:30px;
  }

  .nav__item2:hover{
    opacity: 0.5;
}

/* 事業紹介の線のスタイル */
  .nav__item2::before{
    content: '';
    display: inline-block;/* 横並びに表示させる:子要素に */
    width: 20px;
    height: 2px;
    background-color: var(--primary-blue,#11438a); 
    margin:0 25px;
}

/* navをactiveした時の表示 */
.nav.active{
    transform: translateX(0);
}

  /* hoverできるデバイスで見た時のスタイル */
  @media (hover:hover){
    .nav__item-btn:hover{
        opacity: 0.5;
    }

    .nav__item-btn[href="#"]:hover {
        pointer-events: none; /* hoverを無効化 */
        opacity: 1; /* スタイルを上書き */
    }
}

/* pcのheader */
@media screen and  (min-width:1100px) {
    .header{
        height: 70px;
        margin: 0 auto;
        padding: 10px 8%;
        display:block;
    }

    .main{
        padding-top: 70px; /* headerの高さ分だけ余白を作る */
    }

    .normal__header{
        margin: 0 auto;
        padding: 0;
        max-width: 1000px;
    }

    .logo{
        height: 50px;
    }

    .contact__btn_S{
    padding: 15px 30px;
    font-size: 1.8rem;
    margin: 0 0 0 auto;
    }

    .header__btn,
    .nav__header{
        display: none;
    }

    .nav{
        background: transparent;/* 背景に色をつけない設定 */
        width: auto;
        height: auto;
        padding: 0;
        position: static;/* 元のHTML基準に戻す */
        transform: translateX(0);/* 元の表示に戻す */
    }

    .nav__list{
        margin:0;
        display: flex;/* 横並びに */
        justify-content: space-between;/* 幅いっぱいに均等に広げる */
        gap: 25px;/* 要素の間隔を設定 */
    }

    .nav__item{
        font-size: 1.5rem;
        display: flex;
        align-items: center; /* 上下中央揃え */
    }

    .nav__item-btn{
        padding: 20px 0;
    }

    .nav__item:first-child{
        margin-left: 0px;
    }

    .nav__item::before,
    .nav__item:last-child::after{
        display: none;
    }

  

    /* ドロップダウンメニューのスタイル */
    .dropdown__menu {
        display: none; /* 初期状態では非表示 */
        position: absolute; /* 親要素を基準に絶対位置で配置 */
        top:100%; /* 親要素の下に配置 */
        left: 0; /* 左端を揃える */
        background-color: var(--primary-white); /* 背景色を白に設定 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
        z-index: 100; /* 他の要素より前面に表示 */
    }

    /* 吹き出しの三角形を作成 */
    .dropdown__menu::before {
        content: ''; /* 疑似要素を生成 */
        position: absolute; /* 親要素を基準に配置 */
        top: -5px; /* メニューの上に配置 */
        left: 108px; /* 左からの位置を調整 */
        border-width: 0 8px 8px 8px; /* 三角形のサイズを設定 */
        border-color: transparent transparent var(--primary-blue) transparent; /* 下側だけ青い線を設定 */
        z-index: 100; /* メニューの前面に表示 */
    }

    /* 親要素またはメニューにホバーしたときに表示 */
    .nav__item.dropdown:hover .dropdown__menu,
    .dropdown__menu:hover {
        display: block; /* 表示 */
    }
    
    /* ドロップダウンメニュー内のリンクのスタイル */
    .nav__item-btn2 {
        display: block; /* リンク全体をブロック要素にする */
        padding: 30px 50px;
    }

    /* ドロップダウンメニュー内のホバー時のスタイル */
    .dropdown__menu li:hover {
        background-color:var(--primary-blue); /* 背景色を青に */
        color: var(--primary-white);
    }

    .nav__item2{
        margin-top: 0px;
    }

    .nav__item2:hover,
    .nav__item-btn2:hover{
        opacity: 1;
    }

    /* 線のスタイル */
    .nav__item2::before{
        display: none;
    } 
}


/*=========================
footer
=========================*/

.footer{
    padding: 80px 6.6% 50px;
    background:linear-gradient(to right, #11438a, #55a2e6);
    color: var(--primary-white,#FDFDFD);
}

.footer__nav__item{ 
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
  }

  /* footer_navの線のスタイル */
.footer__nav__item::before{
    content: '';
    display: block;/* 表示させる */
    width: 100%;
    height: 1px;
    background-color: var(--primary-white,#FDFDFD); 
    margin-top: 27px;
    margin-bottom: 27px;
}
/* footer_navの最初の線削除 */
.footer__nav__list1 li:first-child::before{
    content: none;
}


/* 事業紹介のスタイル */
.footer__nav__item2{  
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    display: flex;/* 横並びに表示させる:親要素に */
    align-items: center;/* 水平中央に */
    margin-top:30px;
  }

/* 事業紹介の線のスタイル */
.footer__nav__item2::before{
    content: '';
    display: inline-block;/* 横並びに表示させる:子要素に */
    width: 20px;
    height: 1px;
    background-color: var(--primary-white,#FDFDFD); 
    margin:0 25px;
}

.address__title{
    text-align: center;
    padding: 80px 0;
}

.address__title h2{
    font-size: 1.6rem;
    font-weight: 400;
    padding-bottom: 10px;
}

.address__title p{
    font-size: 1.4rem;
    font-weight: 400;
}

.copy{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
}

/* pcのfooter 900pxから変わる */
@media screen and  (min-width:900px) {
    .footer{
        padding-top: 100px;
    }

    .footer__group{
        max-width: 1000px;
        margin: 0 auto;
    }
    
    .address__title{
        text-align:left;
        padding:0;
    }

    .address__title h2{
        font-size: 2.0rem;
        padding-bottom: 25px;
    }
    
    .address__title p{
        font-size: 1.5rem;
    }
    
    .footer__nav{
        float:right;/* 左に回り込ませる */
    }

    .footer__nav__list1{
        margin:0 50px 80px 0;
        float:left;/* 右に回り込ませる */
    }
    .footer__nav__list2{
        display:inline-block;/* !! */
    }

    .footer__nav__item{ 
        font-size: 1.5rem;
      }
    
      /* footer_navの線のスタイル */
    .footer__nav__item::before{
        width: 230px;
        margin-top: 30px;
        margin-bottom: 30px;
    } 
    
        /* footer_navの最初の線削除 */
    .footer__nav__list2 li:first-child::before{
        content: none;
    }

    /* 事業紹介のスタイル */
    .footer__nav__item2{  
        font-size: 1.4rem;
    }

    .copy{
        clear:both;/* この要素は回り込ませない */
        font-size: 1.4rem;
    }
}

@media (hover:hover){
    .footer__nav__list1 a:hover{
        opacity: 0.5;
    }

    .footer__nav__list2 a:hover{
        opacity: 0.5;
    }
}