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

/*全ページ共通ここから*/
body{margin: 0;font-family: YuGothic,'Yu Gothic','Noto Sans JP',sans-serif; color: #161616;font-size: 14px;width: 100vw; overflow-x: hidden;}
img{display: block;width: 100%;}
h2{letter-spacing: 4px;font-weight: bold;margin-bottom: 5px;font-size: 40px;letter-spacing: 0.25em; line-height: 1.5em;}
h2::after { content: ""; display: block; width: 40px; height: 3px; margin: 12px auto 0; background-color: #1097DA; }
@media screen and (max-width: 740px) {
  h2 {font-size: 32px;}
  h2::after { width: 30px; height: 2px; margin: 10px auto 0; }
}
a{display: block;text-decoration: none; color: black;}
ol, ul {list-style: none;}
.back_gray{background:#EDEDED;}
.back_darkgray{background:#B3DAF1;}
.back_white{background:#FFF;}
/* .text_white{color: white;} */
.text_gray{color:#00000020}
.text_white {color: #FFF;}

/* 予告広告 */
.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;background: #707070;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: rgb(28, 24, 24);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: 10px 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 25px;}
header a:hover{opacity: 0.5;}
header a span{text-align: center;font-weight: normal;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: 340px;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);margin-top: 0;}
.logo_black_sp{display: none;}
.logo_white_sp{display: none;}
.logo_black_sp{display: none;}
.logo_black_sp.mail{transform: translateY(3px);}
.logo_white_sp.mail{transform: translateY(3px);}
header.scroll-nav .logo,header.scroll-nav ul li a {color: #3d3d3d;}/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
header.scroll-nav .logo_white{display: none;}
.logo_black{ 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;}

/*ボタン*/
.BUTTONS_BACK{padding-top: 120px;padding-bottom: 120px;}
.BUTTONS {display: flex;margin-bottom: 70px;width: 960px;flex-wrap: wrap;margin: 0 auto;justify-content: center;flex-direction: column;}
.BUTTON{display: flex;justify-content: center;}
.btn{position: relative;overflow: hidden;text-decoration: none;display: inline-block;text-align: center; outline: none; transition: ease .2s;width: 270px;text-align: center;margin: 10px;padding: 15px 0;border-radius: 10px;background: #F2714A;}
.BUTTON_TOP .btn { width: 160px; }
.btn span {position: relative;z-index: 3;color:#FFF;font-size: 17px;letter-spacing: 2px; line-height: 30.8px;}
.btn:hover span{color:#fff;}
.bgskew::before {content: '';position: absolute;top: 0;left: -130%;width:120%;height: 100%;transform: skewX(-25deg); background: #FFFFFF50;}
.bgskew:hover::before {animation: skewanime .5s forwards;}
@keyframes skewanime {100% {left:-10%;}}
.BUTTONS small{font-size: 13px;letter-spacing: 1px;}

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



/*中ページトップ共通*/
.IN_MAIN{position: relative; padding-top: 100px;}
.IN_MAIN img { height: 240px; object-fit: cover; }
.IN_MAIN h1{position: absolute; color: white;top: 190px;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;font-weight: 600;}
.INTRO_TEXT{text-align: center;text-align: center;line-height: 2;letter-spacing: 2px;margin: 30px 0;font-size: 16px;}

/*フッターー*/
#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: #EFEFEF;}
#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;}
.logo_white_sp{width: 55vw;}
.logo_black_sp{width: 55vw;}
.BUTTON {flex-direction: column;}

/*予告広告*/
.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;border-bottom: 1px solid #fff;padding: 8px 15px; background: white; }
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: block;}
header .logo .logo_white{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: 25vw;}
.IN_MAIN{padding-top: 57px;}
.IN_MAIN img{height: 120px;}

/*イントロ部分*/
.INTRO{width: 90vw;margin: 0 auto;}
.INTRO h2 {text-align: left;margin-top: 15px;margin-top: 40px;font-size: 24px;font-weight: 600;}
.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: 20vw;margin-top: 3px;}

  .btn{ margin: 10px auto; }
  .BUTTONS { width: 100vw; }

}


#willproduce .imazato{display: none;}