@charset "UTF-8";

/* 全体 */
html{
    scroll-behavior: smooth;  /* ページ内リンクの遷移をゆっくりにする */
}

body{
    color: #674196;  /* 文字の色を変える */
    background: #464349;  /* 背景の色を変える */
    margin: 0 auto;  /* 隙間を消す */
}

h1{
    font-family: "Yu Mincho";
}

h2{
    font-family: "MS Mincho";
    font-weight: 800;
}
p{
    font-family: "Yu Gothic";
    font-weight: 500;
    text-indent: 1rem;
}

/* ハイパーリンク */
a{
    text-decoration: none;  /* リンクの下線を消す */
}

/* 画像 */
.image{
    box-sizing: border-box;
    width: 1200px;  /* 横幅を狭くする */
    margin: 0 auto;  /* 中央寄せにする */
}

#image1{
    padding-top: 77px;
}
#image1,#image2{
    display: block;  /* 要素をブロックにする */
    width: 100%;  /* 親要素に合わせる */
    object-fit: cover;  /* サイズに合うように切り取る */
}
/* ヘッダー */
#headerwrapper{
    position: fixed;  /* 位置を固定する */
}
header{
    display: flex;  /* ヘッダー内を横並びにする */
    box-sizing: border-box;
    width: 1200px;  /* 横幅 */
    height: 77px;
    margin: 0 auto;
    background: white;  /* 背景の色を変える */
    justify-content: space-around;
}
/* ヘッダー ＞ アイコン＋タイトル */
#company{
    display: flex;  /* 要素を横並びにする */
}

/* ヘッダー ＞ タイトル */
#headertitle{
    margin: 0;  /* 周囲の余計なスペースを消す */
}

/* ヘッダー ＞ ナビリンク */
nav{
    list-style: none;  /* リストの装飾を消す */
}

/* ヘッダー ＞ ナビリンク ＞ ボタン */
.pc-nav-ul{
    display: flex;  /* ナビリンク内を横並びにする */
    margin: 0;  /* 隙間をなくす */
    padding: 0;  /* 隙間をなくす */
}
li{
    position: relative;  /* ブロックを相対的に動かせる */
    box-sizing: border-box;
    width: 150px;  /* ボタンの幅を変える */
    height: 77px;  /* ボタンの高さを変える */
    overflow: hidden;  /* ブロックの中に表示されていない要素を隠す */
}

   /* ボタン全般 */
a.button{
    position: absolute;  /* アニメーションのための属性変更 */
    display: inline-block;  /* widthを反映させるために属性を変える */
    font-size: 1rem;  /* 文字のサイズを変える(1.5倍) */
    text-align: center; /* 文字を中央に動かす */
    box-sizing: border-box;
    width: 150px;  /* ボタンの幅を変える */
    height: 77px;
    padding: 1.5rem 0;  /* 文字の背景(リンク)の範囲を変える */
    color: #674196;  /* 文字の色を変える */
}

   /* kjmjkのボタン */
#button7,#button8{
    padding: 0;  /* 余計な隙間を消す */
}

#button7{
    font-size: 1rem;  /* 文字のサイズを変える */
    color: #2E2E99;  /* 文字の色を変える */
}

#button8{
    top: 100%;  /* 通常ボタンの下(ヘッダー枠外)に隠す */
    color: white;  /* 文字の色を変える */
    background: #2E2E99;  /* 文字の背景色を変える */
    transition: .2s;  /* アニメーションの追加:時間を変える */
}

   /* ページ内リンクのボタン(英語) */
#button2,#button4,#button6{
    top: 100%;  /* 通常ボタンの下(ヘッダー枠外)に隠す */
    color: white;  /* 文字の色を変える */
    background: #674196;  /* 文字の背景色を変える */
    transition: .2s;  /* アニメーションの追加:時間を変える */
}

   /* ボタンの上にカーソルを置いた時の挙動 */
#btnbox1:hover #button2{
    top: 0;  /* 位置を上にずらす */
}

#btnbox2:hover #button4{
    top: 0;  /* 位置を上にずらす */
}

#btnbox3:hover #button6{
    top: 0;  /* 位置を上にずらす */
}

#btnbox4:hover #button8{
    top: 0;  /* 位置を上にずらす */
}

.sp-nav{
    display: none;
}

/* スマホ版 */
@media (max-width: 900px){
    .pc-nav{
        display: none;
    }
}

/* 画像 */

/* 外枠 */
.all{
    width: 1200px;
    box-shadow:  0 0 10px rgba(0,0,0,0.5);
    margin: 0 auto;
}
.wrapper{
    box-sizing: border-box;
    width: 1200px;  /* 画面に対して表示するメインコンテンツの横幅の割合 */
    padding: 0 5%;  /* 左右に空白をいれる */
    margin: 0 auto;  /* 中央に移動する */
}

/* 中身 */
main{
    background: white;  /* 背景の色を変える */
}

/* 調査研究 */
#research{
    padding-top: 10%;  /* 上に隙間を作る */
    text-align: center;  /* 文字を中央に寄せる */
}

h1{
    margin-bottom: 7%;  /* 下に隙間を作る */
    font-size: 2rem;  /* 文字のサイズを変える */
}
/* 3カラム(3分割) */
.column3{
    display: flex;  /* 横並びにする */
    justify-content: space-around;  /* 要素を均等に並べる */
    margin: 5% 0;  /* 上下に隙間を作る */
}

.column3 .column{
    width: 30%;  /* 横幅を変える */
    padding: 0 1.1%;  /* 左右に隙間を作る */
}

  /* 3カラム ＞ 真ん中のブロック */
.column3 .column:nth-child(2){
    border-style: none solid;  /* 左右に線を追加する */
    border-color: #674196;  /* 線の色を変える */
    border-width: 1px;  /* 線の幅を変える */
}

/* 2カラム(2分割) */
.column2{
    display: flex;  /* 横並びにする */
    justify-content: space-around;  /* 要素を均等に並べる */
    margin-top: 5%;  /* 上に隙間を作る */
}

.column2 .column{
    width: 45%;  /* 横幅を変える */
    padding: 0 5%;  /* 左右に隙間を作る */
}

  /* 2カラム ＞ 最初のブロック */
.column2 .column:first-child{
    border-right: 1px solid #674196;  /* 右に線を追加する */
}

/* 会社概要 */
#company-profile{
    padding-top: 10%;  /* 上に隙間を作る */
}

#company-profile h1{
    text-align: center;  /* 文字を中央寄せにする */
}

  /* 写真 */
#company-profile img{
    margin-right: 5%;  /* 右に隙間を作る */
    margin-left: 5%;  /* 左に隙間を作る */
}

.nofrex{
    display: inline-block;  /* ブロックの属性を変える */
}
  /* 会社概要 ＞ リスト */
dl{
    display: flex;  /* 要素を横並びにする */
    padding: 8% 0;  /* 上下に隙間を作る */
    border-bottom: 1px solid #674196; /* 下に線を追加する */
}

  /* 会社概要 ＞ リスト ＞ 最後 */
dl:last-child{
    border-bottom: none;  /* 下の線を消す */
}
  /* 会社概要 ＞ リストの左側 */
dt{
    width: 150px;  /* 横幅を変える */
}

dd{
    margin: 0;
}
.frex{
    display: flex;  /* 要素を横並びにする */
}

#privacy_policy{
    margin: 15% 0 0 34%;
}

#privacy_policy-name{
    text-indent: -0.03em;
}

/* お問い合わせ */
#contact{
    text-align: center;  /* 文字を中央寄せにする */
    padding: 5%;  /* 隙間を作る */
}

#contact p{
    text-align: left;  /* 文字を左寄せにする */
    margin: 0;  /* 隙間を消す */
    padding: 10% 0;  /* 上下に隙間を作る */
    border-bottom: 1px solid #674196;  /* 下に線を追加する */
}

  /* お問い合わせ ＞ 最初 */
#contact p:first-child{
    padding-bottom: 0;  /* 下の隙間を消す */
    border-bottom: none;  /* 下の線を消す */
}

  /* お問い合わせ ＞ 最後 */
#contact p:last-child{
    border-bottom: none;  /* 下の線を消す */
}
#contact .nofrex{
    padding-left: 5%;  /* 左に隙間を作る */
}

footer{
    width: 1200px;
    background: white;
    margin: 0 auto;
    text-align: center;
}

footer p{
    margin: 0;
}

/* 個人情報保護方針 */
.modal-wrapper {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 60px 10px;
    text-align: center
  }
  
.modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  
.modal-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s;
  }
  
.modal-wrapper::after {
    display: inline-block;
    height: 100%;
    margin-left: -.05em;
    vertical-align: middle;
    content: ""
  }
  
.modal-window {
    box-sizing: border-box;
    display: inline-block;
    z-index: 20;
    position: relative;
    width: 60%;
    padding: 30px 30px 15px;
    border-radius: 2px;
    background: white;
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    vertical-align: middle
  }
  
.modal-content {
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
  }
  
  .modal-content h1{
    margin: auto;
    text-align: center;
  }
  
.modal-overlay {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .8)
  }
  
.modal-close {
    z-index: 20;
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    color: #674196 !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    text-indent: 0
  }
  
.modal-close:hover {
    color: #464349 !important
}

#signature{
margin-left: 70%;
}

#signature p{
    text-indent: -0.1em;
}