@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/
/*ヘッダー*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');
* {margin: 0;padding: 0;box-sizing: border-box;}
header {position: fixed;top: 0;left: 0;width: 100%;display: flex;justify-content: space-between;align-items: center;z-index: 10;padding: 15px 7vw;transition: 0.5s;margin-top: 0px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  padding: 3px 15px;
  background: rgba(255,255,255,0.9);}
.logo {color: #fff;text-decoration: none;font-size: 23px;letter-spacing: .2em;transition: 0.5s;}
ul {display: flex;justify-content: center;align-items: center;}
li {list-style: none;}
li:hover { opacity:0.5; }
header a {display: inline-block;margin-left: 12px;font-size: 14px;text-decoration: none;letter-spacing: .2em;transition: 0.5s;font-size: 15px;letter-spacing: 3px;margin: 0 25px;  }
header a:hover{opacity: 0.5;}
header a span{text-align: center;font-weight: bold;letter-spacing: 8px;line-height: 23px;margin-top: -5px; width:100%; }
header a span small{font-size: 11px;letter-spacing: .2em;font-weight: initial;}
.section-a {background: #000;}
.section-b {background: #fff;}
header a.logo{width: 250px;}
/* header.scroll-nav {padding: 10px 7vw;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);background: rgba(255,255,255,0.9);margin-top: 0px;} */
.logo_black{display: none;}
.logo_white_sp{display: none;}
.logo_black_sp{display: none;}
/* header.scroll-nav .logo,header.scroll-nav ul li a {color: #3d3d3d;}
header.scroll-nav ul li a .circle {
  background-color: #3d3d3d;
  color: #fff; border:#3d3d3d;
} */
/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
/* header.scroll-nav .logo_white{display: none;}
header.scroll-nav .logo_black{display: block;} */

.far{font-size: 20px;}
.circle {width: 50px;height: 50px;border-radius: 50%;border: 1px solid;position: relative; margin-top:0; color:#fff; }
.circle i{position: absolute;top: 15px;left: 14px;}
.kanbai {padding: 10px 18px;background: red;color: white;font-weight: bold;}

.INTRO_TEXT { font-size:14px; }

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

  /*全ページ共通ここから*/
  #willproduce ul{width: 95vw;padding-left: 0;margin: 0 auto;}
  #footer span{width: 100vw;}
  .kanbai {padding: 10px 10px;font-size: 13px;}
  
  /*ヘッダー*/
  header{width: 100vw;padding: 10px 15px;border-bottom: 1px solid #fff;padding: 4px 15px;}
  header.scroll-nav {padding: 8px 15px;}
  header a.logo {width: 40vw;margin: 0;}
  .circle {border: none;margin-right: 0;width: auto;margin: 0;}
  header a span{font-size: 17px;letter-spacing: 5px;line-height: 17px;}
  .logo_white{display: none;}
  header .logo .logo_black{display: none;}
  .logo_white_sp{display: block;}
  .logo_black_sp{display: none;}
  header.scroll-nav .logo_white_sp{display: none;}
  header.scroll-nav .logo_black_sp{display: block;}
  .circle i {position: absolute;top: 8px;left: 14px;font-size: 37px;}
  /*中ページトップ共通*/
.IN_MAIN h1{font-size: 27px;top: 34vw;}

/*イントロ部分*/
.INTRO{width: 90vw;margin: 0 auto;}
.INTRO h2 {font-size: 24px;text-align: left;margin-top: 15px;margin-top: 40px;}
.INTRO_TEXT{text-align: justify;}



/*ハンバーガー*/
.menu-btn{display: block;}
.menu{display: block;}

/*----------------------------
* メニュー開閉ボタン
*----------------------------*/
.menu-btn{
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    color: #fff;
    background: none;
    border: none;
  }

  /*----------------------------
  * メニュー本体
  *----------------------------*/
  .menu{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #898989;  }
  .menu__item{
    width: 100%;
    height: auto;
    padding: .5em 1em;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
  }

  /*----------------------------
  * アニメーション部分
  *----------------------------*/

  /* アニメーション前のメニューの状態 */
  .menu{
    transform: translateX(100vw);
    transition: all .3s linear;
  }
  /* アニメーション後のメニューの状態 */
  .menu.is-active{
    transform: translateX(0);
  }

  .menu-btn i{font-size: 32px;color: #3d3d3d;}
  header.scroll-nav .menu-btn i {color: #3d3d3d;}/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */

  header .menu a{font-size: 18px;margin: 8px 15px;}
  .mail{width: 30px;margin-left: 30vw;margin-top: 3px;}

  /* ギャラリー */

  .concept_tytles { display:block;}

}


@media screen and (max-width: 740px){
  /* メニューボタン */
.menu-btn {
  position: fixed;
  top: 5px;
  right: 20px;
  z-index: 99999;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
}

/* メニュー本体 */
.menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99998;
  width: 250px; /* 好きな幅 */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #7e3f3f;
  transform: translateX(100%); /* 初期は右に隠す */
  transition: transform 0.3s ease;
}

/* メニュー開いた状態 */
.menu.active {
  transform: translateX(0);
}

/* メニュー内リンク */
.menu__item {
  width: 100%;
  padding: 1em;
  text-align: center;
  color: #fff;
}

/* メニュー内 a タグ */
.menu a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

/* メニューと重なる要素のクリック無効化対策 */
body > *:not(header):not(.menu) {
  pointer-events: auto;
}

}