@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/

/*全ページ共通ここから*/
body{margin: 0;font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif; color: #161616;font-size: 14px;}
img{display: block;width: 100%;}
h2{letter-spacing: 4px;font-weight: 500;margin-bottom: 5px;font-size: 35px;
letter-spacing: 0.25em;
font-weight: 500;}
a{display: block;text-decoration: none; color: black;}
ol, ul {list-style: none;}
.back_gray{background:#EDEDED}
.text_gray{color: rgba(81, 78, 95, 0.23);}

/* 予告広告 */
.yokoku_wrap {position: absolute;z-index: 100;display: flex;flex-direction: row;width: 100vw;right: 0;left: 0;margin: 0 auto;align-items: center;padding-top: 15px;padding-bottom: 10px;justify-content: center;}
.yokoku_logo{width: 160px;}
.yokoku_chui{color: white;display: flex;flex-direction: row;align-items: center;}
.yokoku_text{font-size: 14px;letter-spacing: 1px;line-height: 16px;}
.yokoku_tytle{background: white;color: black;padding: 5px 15px;margin: 0 1vw 0 3vw;height: 27px;}

/*ヘッダー*/
@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: 25px 15px;transition: 0.5s;}
.logo {color: #fff;text-decoration: none;font-size: 23px;letter-spacing: 1px;transition: 0.5s;}
ul {display: flex;justify-content: center;align-items: center;}
li {list-style: none;}
header a {display: inline-block;margin-left: 12px;color: white;font-size: 14px;text-decoration: none;letter-spacing: 1.5px;transition: 0.5s;font-size: 15px;letter-spacing: 3px;margin: 0 15px;}
header a:hover{opacity: 0.5;}
header a span{text-align: center;font-weight: bold;letter-spacing: 8px;line-height: 23px;margin-top: -5px;}
header a span small{font-size: 11px;letter-spacing: 3px;font-weight: initial;}
.section-a {background: #000;}
.section-b {background: #fff;}
header a.logo{width: 16vw;margin-left: 3vw;}
header.scroll-nav {padding: 10px 15px;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);padding: 10px 15px;background: rgba(255,255,255,0.9);margin-top: 0;}
.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;}/* 「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;}
.circle i{position: absolute;top: 15px;left: 14px;}

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



/*中ページトップ共通*/
.IN_MAIN{position: relative;}
.IN_MAIN h1{position: absolute; color: white;top: 10vw;font-size: 33px;letter-spacing: 5px;right: 0;left: 0;margin: 0 auto;text-align: center;font-weight: initial;}

/*イントロ部分*/
.INTRO{margin-top: 80px;}
.INTRO h2 {text-align: center;font-size: 26px;letter-spacing: 0.1em;}
.INTRO_TEXT{text-align: center;text-align: center;line-height: 25px;letter-spacing: 2px;margin: 30px 0;}

/*フッターー*/
#willproduce {background: #f3f3f1;width: 100%;padding: 30px 0;text-align: center;}
#willproduce ul {width: 960px;margin: 0 auto;display: flex;flex-wrap: wrap;gap: 20px 20px;justify-content: space-between;}
#willproduce ul li {width: 30%;}
#willproduce p {letter-spacing: 2px;}
#footer {padding: 0px 0;text-align: center;font-size: 1.3rem;background: #f3f3f1;}
#footer span {width: 100%;display: inline-block;font-size: 14px;display: flex;width: 400px;margin: 0 auto;justify-content: center;align-items: center;}
#footer small{font-size: 12px;}
#footer .logo{width: 270px;margin: 0 auto;margin-bottom: 15px;}

.kanbai {padding: 10px 18px;background: red;color: white;font-weight: bold;}



@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 a{margin: 0 5vw 0 -5vw;}
/* header{margin-top: 89px;} */
.logo_white_sp{width: 45vw;}
.logo_black_sp{width: 45vw;}

/*予告広告*/
.yokoku_wrap{width: 100vw;margin-top: 0px;padding: 2.5vw;}
.yokoku_text{font-size: 11px;line-height: 16px;letter-spacing: 0;margin-top: 5px;}
.yokoku_chui{display: flex;}
.yokoku_tytle {font-size: 13px;width: 35vw;margin-left: 0;height: initial;padding: 5px 15px;line-height: 1.2;text-align: center;}

/*ヘッダー*/
header{width: 100vw;padding: 10px 15px;border-bottom: 1px solid #fff;padding: 4px 15px;}
header.scroll-nav {padding: 8px 15px;}
header a.logo {width: auto;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;}
/* .IN_MAIN{padding-top: 89px;} */

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



/*ハンバーガー*/
.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: white;}
  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;}

}


#willproduce .akuranaka{display: none;}