@charset "utf-8";


/*　ページ全体に関わるCSSの設定　*/

html *,
::before,
::after {
    box-sizing: border-box;
}
html{
    font-size: 16px;
}

@media (min-width: 768px){
    .post .header-container .main-container .footer-container .about-container .page-main  {
        max-width: 920px;
        margin: 0 auto;
        padding: 40px 40px 0 40px;
    }

    html {
        font-size: 18px;
    }
}
body {
	font-family: "tt-commons-pro", "見出ゴMB31", "Midashi Go MB31", sans-serif;
}

/*　標準的なリンクのテキスト色　*/
a {
    color: rgb(0, 0, 210);
}

/*　レスポンシブイメージと画像下のスペース防止　*/
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}



/* ヘッダーコンテナ */

.post .header-container {
    margin: 0 auto;
    padding: 40px 8% 0 8%;
}

@media (min-width: 768px){
    .post .header-container {
        max-width: 920px;
        margin: 0 auto;
        padding: 40px 8% 0 8%;
    }
}

/* ヘッダーモジュール */
/* ヘッダーロゴとナビボタン */

.site-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-logo {
    margin: 0;
    font-size: 0;
    line-height: 0;
}
.header-logo img{
    width:180px;
}
@media (min-width: 768px){
    .header-logo img{
    width: 280px;
    }
}


/* ハンバーガーメニュー */
.drawer-hidden {
    display: none;  /* チェックボックスを非表示に */
  }
  /* メニューアイコンの設定 */
  .drawer-open {
    position: relative;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 100;  /* 一番上に */
    cursor: pointer;
  }
  .drawer-open span,
  .drawer-open span:before,
  .drawer-open span:after {
    position: absolute;
    content: '';
    display: block;
    height: 2px;
    width: 40px;
    border-radius: 0px;
    background: #000;
    transition: 0.25s;
  }
  .drawer-open span:before {
    bottom: 8px;
  }
  .drawer-open span:after {
    top: 8px;
  }
  /* アイコンをクリックでX印に */
  #drawer-check:checked ~ .drawer-open span {
    background: transparent;
  }
  #drawer-check:checked ~ .drawer-open span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  #drawer-check:checked ~ .drawer-open span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  @media (min-width: 768px){
    .drawer-item {
        margin: 0;
        font-size: 1.74rem;
        text-align: center;
    }
}


  /* メニューのデザイン */
  .drawer-content {
    position: fixed;
    top: 120px;
    left: 100%;  /* 画面右側に押し込めておく */
    width: 100%;
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 500;
    font-size: 1.56rem;
    text-align: right;
    background: #fff;
    transition: 0.24s;
    z-index: 99;
  }
  .drawer-list {
    margin: 0;
    padding: 0 0 80px 0;
    width: 100%;
  }
  .drawer-item {
    list-style-type: none;
    padding: 0 8% 0 8%;
  }
  .drawer-item a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: .7em .7em;
  }
  .drawer-item a:hover {
    text-decoration: none;
    color:rgb(0, 0, 210);
  }
  /* 背景用オーバーレイ */
  .drawer-overlay {
    display: block;
    position: fixed;
    top: 120px;
    left: 100%;  /* 画面右側に押し込めておく */
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 98;  /* 一番下に */
  }
  /* アイコンをクリックでメニュー＆オーバーレイ表示 */
  #drawer-check:checked ~ .drawer-content {
    left: 0;
  }
  #drawer-check:checked ~ .drawer-overlay {
    left: 0;
  }


    /* メインコンテナ */
.post .main-container {
    margin: 20px 0 80px 0;
    padding: 0 8% 0 8%;
}

@media (min-width: 768px){
    .post .main-container {
        max-width: 920px;
        margin: 0 auto;
        padding: 0 40px 0 40px;
    }
}


 
/* slider */
.fadeslide {
	position: relative;
	width: 100%;
    height: 700px;
    max-width: 90vw;
    max-height: 120vh;
    padding-bottom: 40px;
    margin: auto;
    overflow: hidden; 
    z-index: 0;
}

.fadeslide div {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity    : 0;
    animation: fadeslide 15s infinite;
}

.fadeslide div:nth-child(1) { animation-delay: 0s; }
.fadeslide div:nth-child(2) { animation-delay: 5s; }
.fadeslide div:nth-child(3) { animation-delay: 10s; }


@keyframes fadeslide {
    0% { opacity: 0; }
    10% { opacity: 1; }
    30% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}


@media (min-width: 768px) {
    .fadeslide {
        max-width: 90vw;
        

        margin: auto;
        padding: 80px 0 196px 0;
    }
}

.statement {
font-size: 1.2rem;
line-height: 1.5;
margin: 0 8% 0 8%;
}

@media (min-width: 768px){
    .statement {
        font-size: 1.4rem;
        max-width: 920px;
        text-align: center;
        margin: 0 auto;
        padding: 0 8% 0 8%;
    }
}
/* フッターコンテナ */

.post .footer-container {
    padding: 0 8% 0 8%;
}

@media (min-width: 768px){
    .post .footer-container {
        max-width: 920px;
        margin: 0 auto;
        padding: 0 8% 0 8%;
    }
}

/* フッターモジュール */

/* フッターナビ */

.footer-nav1 {
    display: flex;
    flex-direction: row;
    align-items: left;
    margin: 120px 0px 60px 0;
    padding: 0;
    list-style: none;
}

.footer-nav1 li {
    margin: 0 0 2rem 0;
    font-size: 100%;
}

.footer-nav1 li a {
    color: #000;
    text-decoration: none;
}

.footer-nav1 li a:hover {
    color: rgb(0, 0, 210);
    text-decoration: underline;
}
@media (min-width: 768px) {
.footer-nav1 {
    flex-direction: row;
    justify-content: center;
}
}

.footer-nav1 li {
    margin: 0 1rem;
}


/* フッターコピーライト */
.copyright {
    font-size: .8rem;
}

@media (min-width: 768px) {
.copyright {
    text-align: center;
}
}



/* About container */

.menu-nav {
    text-align: right;
    margin: 48px 8% 48px 8%;
}

.menu-nav li {
    font-family: "tt-commons-pro", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    list-style: none;
    text-align: right;
}

@media (min-width: 768px){
    .about-container {
        max-width: 920px;
        margin: 0 auto;
        padding: 0 40px 0 40px;
    }
}
/* About contentsの1つめの要素の上マージンを0にする */
.about-header .about-contents-jp .about-contents-en > *:first-child {
    margin-top: 0;
}
/*　About header　*/
.about-header {
    margin: 0 8% 20px 8%;
}
@media (min-width: 768px) {
    .about-header {
        max-width: 600px;
        margin: 0 auto 40px auto;
    }
}
.about-header h2 {
    margin-bottom: 0px;
    font-family: "見出ゴMB31", "tt-commons-pro",;
    font-weight: 500;
    font-style: normal;
    font-size: 1.4rem;
}
.about-header h2-ja {
    font-family: "見出ゴMB31", "tt-commons-pro",;
    font-size: 1.22rem;
}
.header-cap {
    font-size: 0.6rem;
    margin-bottom: 20px;
    padding-top: 0;
}
/*　About contents jp　*/
.about-contents-jp {
    margin: 0 8% 80px 8%;
    font-family: "見出ゴMB31", "tt-commons-pro",;
}
@media (min-width: 768px) {
    .about-contents-jp {
        max-width: 600px;
        margin: 0 auto 80px auto;
    }
}
/*　About contents en　*/
.about-contents-en {
    margin: 0 8% 80px 8%;
}
@media (min-width: 768px) {
    .about-contents-en {
        max-width: 600px;
        margin: 0 auto 80px auto;
    }
}
/* p */
.about-contents-jp p {
    margin: 8px 0;
    line-height: 1.8;
    text-align: justify;
}
.about-contents-en p {
    margin: 8px 0;
    font-size:1.1rem;
    line-height: 1.5;
    text-align: justify;
}

/* CONTACT container */
.section-contact {
    padding: 0 8%; /* モバイルでも左右8％の余白を常に確保 */
  }
  
  @media (min-width: 768px) {
    .section-contact {
      max-width: 600px;      /* ABOUTと同様 */
      margin: 0 auto 80px auto;        /* センター配置 */
    }
  }
  
  /* 上部テキスト */
  .contact-intro p {
    font-family: "見出ゴMB31", "tt-commons-pro",;
    margin: 0 0 80px 0;      /* 上マージンはなし、下に80px */
    line-height: 1.8;
    text-align: justify;
  }
  
  /* フォーム全体にも左右余白 */
  .contact-form {
    margin: 0 auto;
    max-width: none;         /* 幅制限なしに */
  }
  
  /* フォーム内の入力フィールドとテキストエリア */
  .form-group input,
  .form-group textarea {
    padding: .75rem;
    border: 1px solid #333; /* ボタンと同色に統一 */
    border-radius: 0;       /* 角丸を削除 */
    font-size: 1rem;
  }
  
  /* ボタン */
  .btn-submit {
    background-color: #333;
    color: white;
    border: 1px solid #333;
    padding: .75rem 1.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 0;
  }
  .btn-submit:hover {
    background-color: #555;
  }
  
  /* ラベル余白など */
  .form-group {
    margin-bottom: 1.5rem;
  }
  .form-group label {
    display: block;
    margin-bottom: .5rem;
    font-weight: bold;
  }
  
  /* ボタンまわり余白 */
  .form-actions {
    text-align: center;
    margin-top: 2rem;
  }

/* CONTACTページのフォーム幅調整 */
.form-group {
    margin: 0 8% 80px 8%;
    font-family: "見出ゴMB31", "tt-commons-pro",;
  }
  
  @media (min-width: 768px) {
    .form-group {
      max-width: 600px;
      margin: 0 auto 80px auto;
    }
  }

  .contact-form {
    margin: 0 8% 80px 8%;
    font-family: "見出ゴMB31", "tt-commons-pro",;
  }
  
  @media (min-width: 768px) {
    .contact-form {
      max-width: 600px;
      margin: 0 auto 80px auto;
    }
  }
/* WORKS container */
@media (min-width: 768px){
    .works-container {
        max-width: 920px;
        margin: 0 auto;
        padding: 0 40px 0 40px;
    }
}
/* works contentsの1つめの要素の上マージンを0にする */
.works-header .works-contents .works-bottom > *:first-child {
    margin-top: 0;
}
/*　works header　*/
.works-header {
    margin: 0 16% 20px 16%;
}
@media (min-width: 768px) {
    .works-header {
        max-width: 600px;
        margin: 0 auto 20px auto;
    }
}
.works-header h3 {
    margin-bottom: 8px;
    font-family: "見出ゴMB31", "tt-commons-pro",;
    font-weight: 400;
    font-style: normal;
    font-size: 1.16rem;
}

.works-header span {
    font-family: "見出ゴMB31", "tt-commons-pro",;
    font-weight: 300;
    font-style: normal;
    font-size: 0.9rem;
    padding-bottom: 16px;
}
/*　works contents　*/
.works-contents {
    margin: 0 0 80px 0;
}
@media (min-width: 768px) {
    .works-contents {
        max-width: 800px;
        margin: 0 auto 80px auto;
    }
}


/* 複数画像切り替え　追加する*/



/*　ここからWork-detailについて　works bottom　*/

.works-bottom {
    margin: 0 8% 100px 8%;
}

@media (min-width: 768px) {
    .works-bottom {
        max-width: 920px;
        margin: 0 auto 100px auto;
    }
}
/* p */
.works-bottom p {
    font-family: "見出ゴMB31", "tt-commons-pro",;
    font-weight: 400;
    font-style: normal;
    margin-top: 8px;
    font-size: .76rem;
    line-height: 1.66;
    text-align: justify;
}