/*****************************
Theme Name:coletteテーマ
Discription:coletteのオリジナルテーマです。
Author: MOCA.Inc
******************************/
@media screen and (max-width: 750px) {
  html { scroll-padding-top: 74px; // ヘッダーの高さ分設定
    scroll-behavior: smooth;
  }
a {
	text-decoration:none;
}
.pc {
	display:none;
}
.sp {
	display:flex;
}
/* --------------------------------------------
 * 　スクリプト用
 * -------------------------------------------- */

/* --------------------------------------------
 * 　基本設計
 * -------------------------------------------- */

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

    .c-header__logo img{
      width:90px;
    } 
    .head_button a {
      color: #000000;
      line-height: 1;
      transition: 0.3s all ease;
      display: block;
      padding: 12px 14px 12px;
      border: 1px solid #000000;
      width:48px;
      margin: 15px 0;
    }
    
    .head_button a:hover {
      text-decoration: none;
      background: #ffffff;
      color: #000000;
      border:#000000 1px solid;
      transition: 0.3s all ease;
    }
    .c-hamburger-menu__list {
      background-color: rgba(255, 255, 255, .9);
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      left: 0;
      padding: 2rem; /* カスタマイズしてください */
      position: absolute;
      transform: translateX(-100%);
      transition: 0.3s; /* カスタマイズしてください */
      top: 100%;
      width: 100%;
      z-index: 20;
    }
    .c-header__list-link {
      color: #000000; /* カスタマイズしてください */
      display: block;
      margin-right: 20px; /* カスタマイズしてください */
      text-decoration: none;
      padding: 10px 0px; /* カスタマイズしてください */
      font-size: 1.6rem;
    }
    
    #hamburger:checked ~ .c-hamburger-menu__list {
      transform: translateX(0%);
      transition: 0.3s;
    }
    .c-hamburger-menu__button {
      align-items: center;
      appearance: none;
      background-color: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 5px; /* カスタマイズしてください */
      height: 32px; /* カスタマイズしてください */
      justify-content: center;
      width: 32px; /* カスタマイズしてください */
    }
    #hamburger:checked
      ~ .c-hamburger-menu__button
      .c-hamburger-menu__button-mark:nth-of-type(1) {
      transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
      transform-origin: 0%; /* カスタマイズしてください */
    }
    #hamburger:checked
      ~ .c-hamburger-menu__button
      .c-hamburger-menu__button-mark:nth-of-type(2) {
      opacity: 0;
    }
    #hamburger:checked
      ~ .c-hamburger-menu__button
      .c-hamburger-menu__button-mark:nth-of-type(3) {
      transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
      transform-origin: 0%; /* カスタマイズしてください */
    }

/* --------------------------------------------
 * 　フッター
 * -------------------------------------------- */

    #go_top {
      position: fixed;
      bottom: 50px;
      right: 0px;
      width: 120px;
      display: none;
      z-index:30;
    }
    #go_top img{
      width:100%;
      opacity: 0.9;
    }
    #go_top:hover {
      cursor: pointer;
      opacity: 1;
    }
/* --------------------------------------------
 * 　基本設計（テストサイト元のままcss）
 * -------------------------------------------- */


/* --------------------------------------------
 * 　記事フォーマット　お知らせ / ブログ（テストサイト元のままcss）
 * -------------------------------------------- */


/* --------------------------------------------
 * 　お知らせ一覧（テストサイト元のままcss）
 * -------------------------------------------- */

 /* --------------------------------------------
 * 　↓ブログ 記事リスト（テストサイト元のままcss）
 * -------------------------------------------- */

  .container_article_list .col_3_wrap {
    flex-direction: column;
  }

  .container_article_list .col_3_wrap>* {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .container_article_list .col_3_wrap>*:last-child {
    margin-bottom: 0;
  }

  .container_article_list .col_3_wrap>*:nth-child(3n + 2) {
    margin-right: 0px;
    margin-left: 0px;
  }

/* --------------------------------------------
 * 　↑ブログ 記事リスト（テストサイト元のままcss）
 * -------------------------------------------- */

 /* --------------------------------------------
 * 　404
 * -------------------------------------------- */

 /* --------------------------------------------
 * 　メインヴィジュアル
 * -------------------------------------------- */

	.mv_wrap {
		width:100%;
	}
	.mv .b_contents .contarea{
		width:100%;
		margin:15px auto;
		padding:30px;
		display:flex;
		flex-wrap:wrap;
	}
}