/* ==========================================================================




   ========================================================================== */

/* --------------------------------------------------------------------------

   Clearfix

   -------------------------------------------------------------------------- */

.clearfix:after {
   content: " ";
   display: block;
   clear: both;
}

/* --------------------------------------------------------------------------

   foundation

   -------------------------------------------------------------------------- */

html {
   font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
   font-size: 62.5%;
   /* フォントサイズ 10px をベースにして計算しやすくする */
   touch-action: manipulation;
   /* スマホのダブルタップ拡大を無効化 */
}

button {
   font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

body {
   font-size: 16px;
   /* for IE 8 */
   font-size: 1.6rem;
   color: #333;
   background-color: #FFF;
}

h1 {
   font-size: 32px;
   /* for IE 8 */
   font-size: 3.2rem;
   margin: 0;
}

p,dl,dt,dd {
   margin: 0;
}

ol,
ul {
   list-style-type: none;
   padding: 0;
   margin: 0 auto;
}

img{
   width: 100%;
   height: auto;
}

/* 基本カラー */
:root {
   --main-color: #40220f;
   --sub-color: #c89643;
}



/* --------------------------------------------------------------------------

   layout

   -------------------------------------------------------------------------- */

html,
body {
   margin: 0;
   padding: 0;
   font-feature-settings: "palt";
   scroll-behavior: smooth;
}

.main-container {
   max-width: 1024px;
   margin-left: auto;
   margin-right: auto;
}

.u-mt10 {
   margin-top: 10px;
}

.u-mt20 {
   margin-top: 20px;
}

.u-mt30 {
   margin-top: 30px;
}

.u-mt50 {
   margin-top: 50px;
}

.u-mt60 {
   margin-top: 60px;
}

.u-pb50 {
   padding-bottom: 50px;
}

.flex {
   display: flex;
}

/* PCのみ表示 */
.sp480-ver,
.tb-ver,
.sp-ver {
   display: none;
}

.pc-ver {
   display: block;
}

a {
   text-decoration: none;
   color: #333;
}

/* --------------------------------------------------------------------------

   objects

   -------------------------------------------------------------------------- */

/* ----------------- ヘッダー ----------------- */
.header{
   background-color: var(--main-color);
   color: #FFF;
   padding: 20px;
}

.header h1{
   width: 660px;
   font-size: 2.8rem;
   line-height: 1.4;
   margin: 0 auto;
   position: relative;
   text-align: center;
}

.header h1::before {
   content: "";
   position: absolute;
   left: -90px;
   top: 8px;
   width: 70px;
   aspect-ratio: 79 / 69;
   background: url('../images/logo_higuma_w.png') no-repeat center / contain;
}

.header h1::after {
   content: "";
   position: absolute;
   right: -120px;
   top: 0px;
   width: 120px;
   aspect-ratio: 137 / 84;
   background: url('../images/logo_hokkaido_w.png') no-repeat center / contain;
}


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



/* ---------------- 　トップページ　 ---------------- */

/* メインビジュアル */
section{
   margin: 60px auto;
}

.mv{
   margin-top: 50px;
}

.navi{
   display: flex;
   justify-content: space-between;
   margin: 30px auto;
}

.cookie{
   text-align: center;
   width: 158px;
   aspect-ratio: 187 / 86;
   background: url('../images/bg_nav.png') no-repeat center / contain;
}

.cookie a{
   display: flex;
   height: 100%;
   justify-content: center;
   padding: 0 10px;
   align-items: center;
   font-weight: bold;
}

#news,
#project,
#company,
#information {
   scroll-margin-top: 30px;
}

.message{
   line-height: 1.6;
   margin-bottom: 12px;
   font-weight: 500;
}

.txt_ind{
   text-indent: 1em;   
}


section h2{
   background-color: var(--main-color);
   color: #FFF;
   font-size: 2.1rem;
   padding: 10px 20px;
   font-weight: normal;
}


.date{
   display: flex;
   font-size: 1.8rem;
   margin: 15px;
}

.date span{
   display: block;
   font-size: 1.6rem;
   font-weight: bold;
   margin-right: 10px;
   flex-shrink: 0;
}

.pj_flex{
   display: flex;
}

.logo_b{
   display: block;
   width: 180px;
   height: 100%;
   aspect-ratio: 225 / 189;
   margin-right: 20px;
   flex-shrink: 0;
}

.text{
   font-size: 1.8rem;
   line-height: 1.4;
}

.text p{
   margin-bottom: 20px;
}

#information{
   position: relative;
}

.warning{
   position: absolute;
   width: 110px;
   aspect-ratio: 129 / 109;
   left: calc(50% + 130px);
   top: 130px;
}

.aid{
   font-size: 1.8rem;
   text-align: right;
}

.aid::before{
   content: "※";
   font-size: 1.8rem;
   position: relative;
   left: -45px;
   top: -32px;
}

.qr_info{
   display: flex;
   justify-content: space-between;
   margin: 90px auto 130px;
}

.qr_link{
   justify-content: space-between;
   display: flex;
   align-items: center;
}

.arrow{
   display: flex;
   width: 300px;
   aspect-ratio: 348 / 187;
   background: url('../images/bg_qr.jpg') no-repeat center / contain;
   font-size: 2.1rem;
   align-items: center;
}

.arrow p{
   width: 60%;
   margin: 0 auto;
   line-height: 1.5;
   font-weight: bold;
}

.arrow.second p {
   width: 50%;
   margin: 0 auto;
}

.qr{
   height: 140px;
   width: auto;
   margin-left: 20px;
}


.higuma{
   display: flex;
   justify-content: space-between;
   margin-bottom: 50px;
}

.bear{
   display: flex;
   justify-content: space-between;
   width: 45%;
}

.bear dl{
   background-color: var(--sub-color);
   color: #FFF;
   border-radius: 10px;
   text-align: center;
   width: 140px;
   height: 71px;
   padding: 5px 0;
   font-size: 1.8rem;
   flex-shrink: 0;
}

.bear dt{
   border-bottom: 1px solid #FFF;
   padding-bottom: 3px;
   margin-bottom: 5px;
}

.bear img{
   width: 62%;
}

#company .logo_b{
   display: block;
   margin: 40px auto 80px;
}

#company .flex{
   width: 90%;
   justify-content: space-between;
   margin: 0 auto;   
}

.company_name{
   width: 48%;

}


.name span{
   margin-right: 30px;
}


/*******************************************

tb-ver(1280px未満〜769px以上のとき)

********************************************/

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

   /* --- 表示切り替え --- */
   .sp480-ver,
   .pc-ver,
   .sp-ver {
      display: none;
   }

   .tb-ver {
      display: block;
   }

   .main-container {
      max-width: 720px;
   }

   .flex{
      display: block;
   }

   /* ----------------- ヘッダー ----------------- */
   .header h1 {
      width: 418px;
      text-align: center;
   }

   .header h1::before {
      left: -110px;
      top: 20px;
      width: 90px;
   }

   .header h1::after {
      right: -150px;
      top: 10px;
      width: 150px;
   }

   /* ---------------- 　トップページ　 ---------------- */

   /* メインビジュアル */
   .navi {
      flex-wrap: wrap;
   }

   .cookie{
      width: 190px;
      margin-bottom: 20px;
   }

   .warning_info{
      display: flex;
      justify-content: space-between;

   }

   .design{
      width: 140px;
      margin-left: 30px;
      text-align: center;
      flex-shrink: 0;
   }

   .warning {
      position: static;
      width: 110px;
      aspect-ratio: 129 / 109;
   }

   .aid {
      text-align: left;
      text-indent: -2em;
      margin-left: 1em;
      font-size: 1.6rem;
   }

   .aid::before {
      left: 110px;
      top: -92px;
      font-size: 1.6rem;
   }

   .qr_info {
      margin: 40px auto 80px;
   }

   .arrow {
      width: 210px;
   }

   .arrow p {
      width: 85%;
   }

   .arrow.second p {
      width: 70%;
   }

   .qr {
      height: 100px;
   }

   .higuma{
      margin-bottom: 30px;
   }

   .bear {
      display: block;
   }

   .bear.reverse{
      display: flex;
      flex-wrap: wrap-reverse;
      align-items: flex-end;
   }

   .bear dl {
      width: 100%;
      height: 51px;
   }

   .bear dt {
      border-bottom: 1px solid #FFF;
      padding-bottom: 3px;
      margin-bottom: 5px;
   }

   .bear img {
      margin: 30px 0;
      width: 100%;
   }

   #company .logo_b {
      width: 250px;
      margin: 40px auto;
   }

   .company_name {
      width: 100%;
   }

}

/* ==========================================================================
   スマートフォン用メディアクエリ
   ========================================================================== */
@media screen and (max-width: 768px) {

   /* --- 表示切り替え --- */
   .sp480-ver,
   .tb-ver,
   .pc-ver {
      display: none;
   }

   .sp-ver {
      display: block;
   }

   .main-container {
      max-width: 94%;
   }

   /* ----------------- ヘッダー ----------------- */
   .header h1 {
      width: 314px;
      font-size: 2.1rem;
   }

   .header h1::before {
      left: -58px;
      top: 24px;
      width: 50px;
   }

   .header h1::after {
      right: -75px;
      top: 20px;
      width: 80px;
   }

   /* ---------------- 　トップページ　 ---------------- */

   /* メインビジュアル */
   .mv img{
      margin: 0 calc(50% - 50vw);
      width: 100vw;
   }

   .cookie {
      width: 30%;
      margin-bottom: 20px;
   }

   .date,
   .text{
      font-size: 1.6rem;
   }

   .date{
      display: block;
   }

   .date span{
      margin-bottom: 6px;
   }

   p.text{
      margin-top: 30px;
   }

   .qr_link {
      width: 48%;
   }

   .arrow {
      width: 65%;
      font-size: 1.6rem;
   }

   .arrow p{
      width: 94%;
      line-height: 1.3;
   }

   .arrow.second p{
      width: 80%;
   }

   .qr {
      width: 31%;
      height: auto;
      margin-left: 0;
   }

   #company .logo_b {
      width: 220px;
   }

   #company .flex{
      width: 96%;
   }
   
}

@media screen and (max-width: 480px) {
   /* ----------------- ヘッダー ----------------- */
   .header h1 {
      width: 210px;
      font-size: 1.8rem;
      left: -5px;
   }

   .header h1::before {
      left: -35px;
      top: 32px;
      width: 35px;
   }

   .header h1::after {
      right: -60px;
      top: 28px;
      width: 60px;
   }

   /* ---------------- 　トップページ　 ---------------- */
   .sp480-ver{
      display: block;
   }

   /* メインビジュアル */
   .mv{
      margin-top: 30px;
   }

   .cookie{
      width: 46%;
   }

   section h2 {
      font-size: 1.8rem;
      padding: 8px 16px;
   }

   .pj_flex,
   .warning_info {
      display: block;
   }

   .logo_b {
      width: 180px;
      margin: 0 auto 20px;
   }

   .design {
      width: 100%;
      margin-left: 0;
      margin-top: 20px;
      display: flex;
      justify-content: center;
   }

   .aid {
      margin-left: 2em;
   }

   .aid::before {
      left: -32px;
      top: 0;
   }

   .qr_info {
      display: block;
      margin: 50px auto 90px;
   }

   .qr_link {
      width: 90%;
      margin: 0 auto 30px;
   }

   .arrow p {
      width: 80%;
   }

   .arrow.second p {
      width: 70%;
   }

   .higuma {
      display: block;
   }

   .bear{
      width: 100%;
      margin: 0 auto;
      text-align: center;
   }

   .bear dl{
      font-size: 1.6rem;
      height: 48px;
   }

   .bear img {
      width: 80%;
      margin: 30px auto;
   }

}