@charset "UTF-8";

body {
  font-family: "Yu Gothic", YuGothic, Helvetica, Arial,
  "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
  Meiryo, メイリオ, sans-serif;
  color: #333333;
}

img {
  /*imgの最大横幅を100%に設定する*/
  max-width: 100%;
  }


/** -----------------------------------
    セクション共通
-------------------------------------**/
#company, #work, #environment, #member, #recruit, #entry {
  /* 上に40px 下に56pxに余白をつけてみましょう */
  padding: 80px 0 80px 0;
}
p.small{
  padding-bottom: 60px;
}

.section-inner {
  /* コンテンツの最大幅を1000pxに */
  max-width: 1000px;  
  /* 中央に寄せに */
  margin: 0 auto;  
  }


.pc-only {
  /* PCの時は（横幅769px以上の時は）表示する */
  display: block;
}

.sp-only {
  /* SPの時は（横幅768px以下の時は）表示しない */
  display: none;
}



/* 3/6追加分 */


/* .navigation__list { 
  display: none;
  
} */




/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  .section-inner {
    /* 左右に24pxの余白（padding） */
    padding: 0 24px;

    /* 最大幅を550pxに */
    max-width: 550px;

  }
  .pc-only {
    /* PCの時は（横幅769px以上の時は）表示しない */
    display: none;
  }
  .sp-only {
    /* SPの時は（横幅768px以下の時は）表示する */
    display: block;
  }
  #concept, #system, #plan, #faq, #access {
    padding: 40px 0 30px 0;
  }
}



/** -----------------------------------
    テキスト ※各文章のフォント指定※
-------------------------------------**/

/* 私たちについて */
h2.large {
  font-weight: bold;
  font-size: 40px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin-bottom: 60px;
  color: #110e35;
}

/* 事業内容の各項目番号 （画像挿入するかも）*/
h3.medium {
  font-weight: bold;
  font-size: 50px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #110e35;
}

h4.small{
  font-weight: bold;
  font-size: 25px;
  line-height: 2.5;
  letter-spacing: 0em;
  color: #110e35;
}

h5.small{
  font-weight: medium;
  font-size: 16px;
  margin-top: 15px;
  letter-spacing: 0em;
  color: #110e35;
}

p.large {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: medium;
  color: #110e35;
}

p.medium {
  font-size: 25px;
  line-height: 1.0;
  letter-spacing: 0.02em;
  color: #110e35;
}

p.small {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #110e35;
}



@media screen and (max-width: 768px) {
  h2.large {
    font-weight: bold;
    font-size: 25px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #110e35;
    
  }
}

/** -----------------------------------
    レイアウト
-------------------------------------**/
  
.col-1 {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}

.col-2 {
  display: flex;
  justify-content: space-between;
}
.col-2 .item {
  width: calc((100% - 102px)/2);
}

.col-3 {
  display: flex;
  justify-content: space-between;
}
.col-3 .item {
  width: calc((100% - 220px)/3);
}

.col-4 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.col-4 .item {
  width: calc((100% - 62px)/2);
  margin-bottom: 30px;
}

.col-5{
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.col-6{
  display: flex;
  justify-content: right;
  margin-right: 70px;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

  .col-1 {
    /* 横並びだったものを縦積みになるようにする */
    display: block;
    
  }
  .col-1 .item {
    /* calcで計算していた横幅は全てよこいっぱいに広がるようにする */
    width: 100%;
  }  
  .col-2 {
    /* 横並びだったものを縦積みになるようにする */
    display: block;

  }
  .col-2 .item {
    /* calcで計算していた横幅は全てよこいっぱいに広がるようにする */
    width: 100%;

  }
  .col-3 {
    /* 横並びだったものを縦積みになるようにする */
    display: block;

  }
  .col-3 .item {
    /* calcで計算していた横幅は全てよこいっぱいに広がるようにする */
    width: 265px;
    margin: auto;
  }

  .col-4 {
    /* 横並びだったものを縦積みになるようにする */
    display: block;


  }
  .col-4 .item {
    /* calcで計算していた横幅は全てよこいっぱいに広がるようにする */
    width: 100%;
    row-gap: 20px;

  }

}

/** -----------------------------------
    ヘッダー
-------------------------------------**/

#header {
  background: linear-gradient(#81e7f6,white); 
  width: 100%;
  padding: 0 80px;
  /* 高さを144pxに */
  height: 144px;

  /* ロゴとそれ以外を横並びに */
  display: flex;

  /* 左右に散るように指定 */
  justify-content: space-between;

}



.header-nav {
  white-space: nowrap !important; /* 改行を防ぐ */
}

.header-nav-item {
  flex-shrink: 0 !important; /* 文字の折り返しを防ぐ */
}



.header-logo {
  display: flex;
  align-items: center;
  width: 170px;
}

.header-logo a {
  display: flex;
}

.gnav-pc-wrap {
  /* 右半分（リストとリンクボタンがさらに横並びになるように指定） */
  display: flex;
  justify-content: space-between;

  /* 垂直方向に中央に揃うように指定 */
  align-items: center;
  
}

ul.gnav-pc li {
  margin-right: 90px;

  /* リストを横並びにする */
  display: inline;


}

ul.gnav-pc li a {
  font-family: "Yu Gothic", YuGothic;
  font-size: 25px;
  letter-spacing: 0.13em;
  color: #110e35;
  font-weight: bold;
}


/* 3/6FB追加分 */
#sp-menu{
  display: none;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #header {
    height: 60px;
    padding: 0;
  }

  #header h1 {
    padding-left: 20px;
  }

  #header h1 a {
    display: flex;
  }

  .gnav-pc-wrap {
    /* PCのナビゲーションをスマホでは非表示にする */
    display: none;
  }

  #menu-button {
    display: block;
    width: 60px;
    height: 60px;
    padding: 22px 18px;
  }

  .menu-button-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;    
  }

  .menu-button-inner span {
    display: block;
    /* 高さ2px 横幅100%の矩形にする */
    height: 2px;
    width: 100%;

    /* 矩形の背景色を#333333に */
    background-color: #110e35;
    position: absolute;
  }

  .menu-button-inner span:nth-child(1) {
    top: 0;
  }

  .menu-button-inner span:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .menu-button-inner span:nth-child(3) {
    bottom: 0;
  }

  

  
  /* ここから追加分 */
/* メニュー開閉アニメーション */



.menu-button-inner span {
  z-index: 1000; /* メニューアイコンを前面に持ってくる */
}


.menu-open .menu-button-inner span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);

  /* 追加分 */
  background-color: #110e35; /* メニューが開いているときの色 */
  
}

.menu-open .menu-button-inner span:nth-child(2) {
  opacity: 0;
}

.menu-open .menu-button-inner span:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg);

  background-color: #110e35; /* メニューが開いているときの色 */
}

/* メニューのスタイル */
#sp-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #ffffffcc;
  z-index: 999;
  text-align: center;
  padding-top: 100px;
}


/* 追加分 */

#sp-menu.open {
  display: block; /* 'open' クラスが追加されると表示 */
}



#sp-menu ul {
  list-style: none;
  padding: 0;
}

#sp-menu li {
  margin: 27px 0;
}

#sp-menu a {
  color: #110e35;
  font-weight: bolder;
  font-size: 22px;
  text-decoration: none;
  transition: 0.3s;
}

#sp-menu a:hover {
  color: #81e7f6;
}



/* 3/5追加分 */

.menu {
  display: none; /* 初期状態では非表示 */
}

.menu.open {
  display: block; /* 'open' クラスがついたら表示 */
}


}



/** -----------------------------------
    メインビジュアル
-------------------------------------**/ 
/* メインビジュアルの羽 */
.wing-logo1{
  position: absolute;
  top: 700px;
  margin: auto 0;  
}


.wing-logo2{
  position: absolute;
  bottom: 0px;
  right: 0px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  .wing-logo1 {
    position: absolute;
    top: 420px;
    margin: auto 0; 
  }

  .wing-logo2 {
    position: absolute;
    right:0px;
    margin: auto 0; 
  }
}



#mainvisual {
  /* 背景色はこちらを使ってください → #fff */
  background-color: #fff;
  /* 横幅を画面いっぱいに広げる */
  width: 100%;
  /* 高さをヘッダー分（144px）減らして指定 */
  height: calc(170vh - 144px);
  /* 背景画像を配置 */
  background-image: url("../images/mainvisual-pc.png");
  /* 背景画像が常に縦横比を維持したまま前面を覆うようにサイズ指定 */
  background-size: cover;
  /* 背景画像が常に中央に配置されるように指定 */
  background-position: center;
  /* 背景画像が繰り返さないように指定 */
  background-repeat: no-repeat;
  /* 位置取りの指示 */
  position: relative;
}

.copy-wrap {
  /* メインコピーが左から120px下から447pxの位置 */
  position: absolute;
  left: 120px;
  top: 600px;
}

.maincopy {
  /*文字の色を白色（#110e35）に*/
  color: #110e35;
  /* 文字サイズを設定 */
  font-size: 60px;
  /* 文字のウェイトを設定 */
  font-weight: bold;
  /* 行間を設定 */
  line-height: 1.2;
  /* 文字間を設定 */
  letter-spacing: 0.01em;
}

.entry-button {
  /* 横幅70pxと高さを200pxに設定する */
  width: 70px;
  height: 200px;

  /* 上から44px 右から 0pxの位置に配置する */
  position: absolute;
  top: 44px;
  right: 0px;
}



/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #mainvisual {
    /* 横幅と高さを常に同じサイズで表示する（横幅は100vw） */
    width: 100vw;
    height: 160vw;

    /* スマホ用の背景画像を表示する */
    background-image: url("../images/mainvisual-sp.png");

  }
 
  .maincopy {
    /* フォントサイズを40px, line-heightを1.6, 文字間を0に */
    font-size: 40px;
    line-height: 1.6;
    letter-spacing: 0;
  }
  .copy-wrap {
    /* 左から21px 上から272pxの位置に配置 */
    left: 24px;
    top: 272px;
  }
  
  .entry-button {
    /* 横幅を60px、高さを165pxに */
    width: 60px;
    height: 165px;

    /* 上から23px 右から0pxの位置に配置 */
    top: 16px;
    right: 0px;  
  }
}


/** -----------------------------------
    私たちについて
-------------------------------------**/ 
/* 私たちについての羽 */
#company .wing-logo3{
  position: absolute;
  left: 100px;
}
/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #company .wing-logo3 {
    position: absolute;
    left: 20px;
  }
}

#company {
  background-color: #fff;
  height: 90%;
}
#company h2.large {
  text-align: center;

}


#company .section-inner{
  /* 背景画像を配置 */   
  background-image: url("../images/canpany_pc_icon.png");

  /* 背景画像が繰り返さないように指定 */
  background-repeat: no-repeat;

  /* 背景画像が常に左に配置されるように指定 */
  background-position: left;

  width: 100%;    /* 要素の幅を100%に設定 */
  height: 600px;
  
  padding: 0 0 100px 0;  
}


.text-background1 {
  display: inline-block;
  background:#ffffffaa;
  margin-left: 380px;
  margin-top: 50px;
}


@media screen and (max-width: 768px) {
  #company .section-inner {
      /* 背景画像を配置 */ 

    background-image: url("../images/canpany_sp_icon.png");

  }

  .text-background1{
    display: none;

  }

  #company .know-button{
    position: absolute;
    right: 120px;  
    top: 1300px;
  }

}



/* ☆各セクションの『もっと知る』ボタン */
.know-button {
  /* 横幅130pxと高さを30pxに設定する */
  width: 130px;
  height: 30px;

  /* 中央に寄せに */
  margin: 0 auto;  
  /* 上幅60px  */
  margin-top: 60px;
}

.icon{
/* アイコンの横幅を550pxに設定 */
  width: 550px;
}



/** -----------------------------------
    事業内容
-------------------------------------**/ 
/* 事業内容の羽 */
#work .wing-logo4{
  position: absolute;
  right: 100px;
}


#work {
  background-color: #fff;
}
/* 見出しと本文を中央寄せに設定しましょう  */
#work h2.large {
  text-align: center;
}
#work p.small {
  text-align: center;
}


/* 事業内容 work */
#work {
  /* 背景画像を配置 */
  background-image: url("../images/background_work.png");
 
  /* 背景画像が常に縦横比を維持したまま前面を覆うようにサイズ指定 */
  background-size: auto;

  /* 背景画像が常に中央に配置されるように指定 */
  background-position: center;

  /* 背景画像が繰り返さないように指定 */
  background-repeat: no-repeat;

  padding: 90px 0;

}


.card {
  box-shadow: 3px 3px 10px #9f9d9d;
}


.card-text {
  height: 348px;
  background-color: #fff;
  border-radius: 0 15px 15px 0;

  padding: 24px 24px 32px 24px;
}


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

  .card{
    image-rendering: auto;
      
  }

  .card-text {
    image-rendering: auto;
    height: 200px;
  
    background-color: #fff;
    padding: 20px 27px 20px 23px;
    border-radius: 0 0 15px 15px;   
        
  }

  h3.medium {
    font-weight: bold;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #110e35;  
  }

  h4.small{
    font-weight: bold;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0em;
    color: #110e35;
    margin-bottom: 25px;
  }

  h5.small{
    font-weight: medium;
    font-size: 14px;
    margin-top: 15px;
    letter-spacing: 0em;
    color: #110e35;
  }

  .card-title {
    display: flex;
    gap: 26px;
  }
  
}



/** -----------------------------------
    働く環境
-------------------------------------**/ 

#environment {
  background-color: #fff;
}

#environment h2.large {
  text-align: center;
}

#environment h4.small {
  text-align: center;
  margin-top: 20px;
}
#environment p.small {
  text-align: center;
}



/** -----------------------------------
    働くメンバー
-------------------------------------**/
/* 働くメンバーの羽 */
#member .wing-logo5{
  position: absolute;
  left: 50px;
  
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #member .wing-logo5 {
    position: absolute;
    left: 10px;
  }
}



#member {
  background-color: #fff;
}

/* ↓見出し文章の中央寄せ */
#member h2.large {
  text-align: center;
}
#member p.small {
  text-align: center;
}

/* 各メンバーの肩書き＆氏名の中央寄せ */
#member h5 {
  text-align: center;
}
#member h4 {
  text-align: center;
}


#member {
  /* 背景色 */ 
  background: linear-gradient(white,#ffe89d,white);  
}





/** -----------------------------------
    募集職種 recruit
-------------------------------------**/

/* 募集職種の羽 */
#recruit .wing-logo6{
  position: absolute;
  right: 100px;   
  top: 6900px;
}

#recruit {
  background-color: #fff;
}

#recruit h2.large {
  text-align: center;
}
#recruit p.small {
  text-align: center;
}

/* 神田先生追加分 */
#recruit .col-4 {
  flex-wrap: wrap;
}

#recruit .col-4 .item{
  width: 470px;
}

@media screen and (max-width: 768px) {
  #recruit .col-4 .item {
    width: 250px;
    margin: 0 auto 20px;
  }
}






/** -----------------------------------
    エントリー　entry
-------------------------------------**/
/* エントリーの羽 */
#entry .wing-logo7{
  position: absolute;
  left: 20px; 
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #entry .wing-logo6 {
    position: absolute;
    right: 10px;
    top: 7500px;
  }
}


#entry {
  background-color: #fff;
}

.entry-button2 {
  /* 横幅470pxと高さを90pxに設定する */
  width: 470px;
  height: 90px;

  margin: 0 auto;

}

#entry {
  /* 背景画像を配置 */
  background-image: url("../images/background_entry_pc.png");
 
  /* 背景画像が常に縦横比を維持したまま前面を覆うようにサイズ指定 */
  background-size: cover;

  /* 背景画像が常に中央に配置されるように指定 */
  background-position: center;

  /* 背景画像が繰り返さないように指定 */
  background-repeat: no-repeat;

  padding: 90px 0;

  height: 625px;
}

#entry h2.large{
  text-align: left;  
  padding-left: 200px;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #entry {
    /* スマホ用の背景画像を配置する */
    background-image: url("../images/background_entry_sp.png");

    padding: 90px 0;
    margin: 30px 0;
  }


  #entry h2.large{
    text-align: left;  
    padding-left: 60px;
  }
  
  .entry-button2{
    max-width: 100%;
    padding-top: 200px;
  }

}



/** -----------------------------------
    フッター
-------------------------------------**/
 
#footer {
  background: linear-gradient(white,#81e7f6); 
  width: 100%;
  padding: 0 80px;
  /* 高さを144pxに */
  height: 160px;

  /* ロゴとそれ以外を横並びに */
  display: flex;

  /* 左右に散るように指定 */
  justify-content: space-between;
}

/* リンクを右に寄せる */
#footer {
  text-align: right;
  padding: 40px 0;
}

/* リンクの色を紺色にする */
#footer a {
  color: #110e35;
}

.footer-link, .copyright {
  font-size: 15px;
}

.footer-logo{
  text-align: left;
  margin-left: 47px;
  margin-bottom: 20px;
  width: 363px;
  height: 43px;
}

#footer .col-2{
  display: flex;
  justify-content: flex-end;
}



/* コピーライトの色を紺色、左寄せにする */
.copyright {  
  color: #110e35;  
  text-align: left;
  margin-left: 125px;
}

.footer-link {
  margin-bottom: 20px;
  margin-top: 20px;
}

/* リストを横並びにする */
.footer-link li {
  display: inline;

  margin-right: 60px;
}

.container {
  display: block;
  align-items: center; /* 垂直方向の中央揃え */
  margin-bottom: 42px;
}

.logo{
 margin-right: 20px;
}




/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #footer {
    padding: 40px 0 20px 0;
  }
  .footer-link {
    margin-bottom: 70px;
  }
  .footer-link li {
    /* 横並びになっているのを縦積みにする */
    display: block;
    margin: 0 auto;

    margin: 0 0 20px 0;
  }

    /* 神田先生追加分 */
    #footer{
      flex-direction:column-reverse;
      height: auto;
    }
  
    #footer .container{
      display: flex;
      flex-direction: column-reverse;
    }

  /* 以上 */

    .footer-link{
      text-align: center;
    }

    .logo{
      margin: 0 auto;
    }

    .copyright {
      text-align: center;
      margin: 0 auto;
    }

}