@charset "UTF-8";

/* 機能部分タグ追加の部分コメント部分削除 */
/*////////////////////////////////
共通部分
////////////////////////////////*/
.Serif{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

.center{
  text-align: center;
}

.left{
  text-align: left;
}

/* 文字白 */
.font_white{
 color:#fff;
}

/* 文字サイズ */
.font_big{
  font-size: 45px;
 }

.font_middle{
 font-size: 25px;
}

.font_middle_small{
  font-size: 23px;
}

.font_middle_small_max{
  font-size: 18px;
}

.bule_color{
 color:#0075B1;
}

@keyframes shiny {
  0% { left: -20%; }
  60% { left: 120%; }
  100% { left: 120%; }
}

.width_btn{
  width: 50%;
  max-width: 90%;
  margin:auto;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: block;
}

.width_btn:hover{
  position: relative; top: 5px; left: 1px;
}

.width_btn::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  transform: scale(2) rotate(20deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}



/* 余白 */
.top_10{
  margin-top:10px;
}


.top_20{
  margin-top:20px;
}

.top_30{
  margin-top:30px;
}

.top_40{
  margin-top:40px;
}

.bottom_10{
  margin-bottom:10px;
}

.bottom_20{
  margin-bottom:20px;
}

.bottom_30{
  margin-bottom:30px;
}

.bottom_40{
  margin-bottom:40px;
}


.bottom_50{
  margin-bottom:50px;
}

.width_middle{
  width: 760px;
  max-width: 100%;
  margin:auto;
}

.width_gacha{
  width: 300px;
  max-width: 100%;
  margin:30px auto;
}

.width_big{
  width: 1000px;
  max-width: 100%;
  margin:auto;
}

.com_ttl{
  width: 680px;
  max-width: 100%;
  margin:auto;
}


@media screen and (max-width: 1025px) {
  .width_btn{
    width: 250px;
    max-width: 80%;
    margin:auto;
  }

  .font_big{
    font-size: 23px;
   }
  
  .font_middle{
   font-size: 18px;
  }
  
  .font_middle_small{
    font-size: 16px;
  }
  
  .bule_color{
   color:#0075B1;
  }

  .com_ttl {
    width: 380px;
  }

  .bottom_30 {
    margin-bottom: 15px;
  }

  /* .top_20 {
      margin-top: 10px;
  } */

}


/*////////////////////////////////
 全ページ
////////////////////////////////*/
:root {
  --now-view-height: 1144px;
}

.body{
  position:relative;
}

.body::before{
  content: "";
  display: block;
  background: url(../img/ttl_img.png) no-repeat 50% 50%/contain;
  position: absolute;
  left: 0px;
  top: -30px;
  width: 235px;
  height: 447px;
  z-index: 10;
}


/* header .hrader_txt{
  width: 600px;
  max-width: 100%;
  margin-right:auto;
  margin-left:auto;
}

header .hr_top{
  width: 100%;
  height: 6px;
  background-color: #C13432;
  margin:10px auto 30px;
} */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 92px 0 27px;
  width: 100%;
  height: 120px;
  background-color: #fff;
  border-bottom: 1px solid #000;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 50;
  transition: box-shadow .3s;
}
.headerLogo {
  width: 240px;
}
.headerNavPc {
  display: flex;
}
.headerNavPc__link {
  font-size: 1.6rem;
  line-height: 1;
  text-indent: 0;
  font-weight: 700;
  text-decoration: none;
  color: #000;
  display: flex;
  margin: 0 20px;
  position: relative;
}
.headerNavPc__link:not(:last-of-type)::after {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background-color: #231815;
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}
.headerNavSp {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100vh; */
  height: var(--now-view-height);
  /* height: 100dvh; */
  background-color: #e6e5dc;
  transform: translateY(-100%);
  transition: transform .3s;
  overflow: auto;
  overscroll-behavior: none;
}
[data-is-headernav=true] .headerNavSp {
  transform: translateY(0);
}
.headerNavSp__box {
    display: flex;
    flex-direction: column;
    padding: 62px 40px 39px;
}
.headerNavSp__link,
.headerNavSp__childLink {
  color: #000;
  text-decoration: none;
}
.headerNavSp__link,
.headerNavSp__linkListTitle,
.headerNavSp__linkListContents {
  font-size: 1.7rem;
  line-height: 1;
  text-indent: 0;
  font-weight: bold;
}
.headerNavSp__linkListContents {
  font-size: 1.5rem;
  position: relative;
  padding-left: calc(.6em + 5px);
}
.headerNavSp__childLink {
  font-size: 1.5rem;
  line-height: 1;
  text-indent: 0;
  font-weight: bold;
}
.headerNavSp__childLink::before {
  content: "−";
  position: absolute;
  left: 0;
}
.headerNavSp__box>*:not(:first-child) {
  margin-top: 30px;
}
.headerNavSp__linkList>.headerNavSp__linkListContents {
  margin-top: 13px;
}
.headerHumburger {
  display: none;
  width: 30px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none;
  background-color: rgba(0,0,0,0);
  position: relative;
}
.headerHumburger__stick {
  width: 100%;
  height: 1.5px;
  display: block;
  background-color: #969696;
  position: absolute;
  left: 50%;
}
.headerHumburger__stick:nth-of-type(1) {
  top: 0;
  transform: translateX(-50%);
  transition: top .3s,transform .3s;
}
[data-is-headernav=true] .headerHumburger__stick:nth-of-type(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.headerHumburger__stick:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .3s;
}
[data-is-headernav=true] .headerHumburger__stick:nth-of-type(2) {
  opacity: 0;
}
.headerHumburger__stick:nth-of-type(3) {
  bottom: 0;
  transform: translateX(-50%);
  transition: bottom .3s,transform .3s;
}
[data-is-headernav=true] .headerHumburger__stick:nth-of-type(3) {
  bottom: 50%;
  transform: translate(-50%, 50%) rotate(-45deg);
}
@media screen and (max-width:1400px) {
  .headerNavPc__link {
    font-size: 1.4rem;
    margin: 13px;
  }
}
@media screen and (max-width:1200px) {
  .header {
    padding: 0 27px;
  }
  .headerNavPc {
    display: none;
  }
  .headerNavSp {
    display: block;
  }
  .headerHumburger {
    display: block;
  }
}
@media screen and (max-width:767px) {
  .header {
    padding: 0 13px;
    height: 58px;
  }
  .headerLogo {
    width: 142px;
}
}


#topview{
  margin:auto;
  width: 100%;
}

#topview .hrader_txt2{
  width: 360px;
  max-width: 65%;
  max-width: 80%;
  margin:30px auto 50px;
  padding-top: 70px;
}


#topview .hrader_txt2.tewaza_txt2{
  width: 300px;
  max-width: 55%;
}

#topview .hrader_txt3{
  width: 460px;
  max-width: 80%;
  margin:30px auto 50px;
  padding-top: 70px;
}

#topview .btn_item{
  width: 1080px;
  max-width: 100%;
  margin:auto;
}

#topview .btn_item .top_btn{
  width: 23%;
}

/* ホバー効果 */
#topview .top_btn:hover{
  opacity: 0.6;
}

 .top_ttl{
  border-top: 2px solid #980014;
  border-bottom: 2px solid #980014;
  text-align: center;
  padding: 10px;
  margin-bottom: 30px;
  color:#980014;
}

.top_ttl.ttl_blue{
  border-top: 2px solid #6B95CC;
  border-bottom: 2px solid #6B95CC;
  color:#6B95CC;
}

.top_ttl.ttl_purple{
  border-top: 2px solid #171C61;
  border-bottom: 2px solid #171C61;
  color:#171C61;
}

.ttl_yellow{
  border-top: 2px solid #C39700;
  border-bottom: 2px solid #C39700;
  color:#C39700;
}

.f_wrap_bet .fif{
  width: 49.5%;
  margin-bottom: 2%;
}

.f_wrap_bet .fif_fif{
  width: 49%;
  margin-bottom: 1.4%;
}

.com_btn{
  background-color: #980014;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  width: 600px;
  max-width: 100%;
  margin:auto;
  padding:13px 0px;
  border-radius: 30px;
  border-bottom: 6px solid #3a0008;
}

.btn_blue{
  background-color: #6B95CC;
  border-bottom: 6px solid #122948;
}

.btn_purple{
  background-color: #171C61;
  border-bottom: 6px solid #060936;
  margin-top: -4px;
}

.btn_yellow{
  background-color: #C39700;
  border-bottom: 6px solid #4e3d03;
  margin-top: -4px;
}

.btn_blue_line{
  color:#036EB8;
  background-color: #fff;
  border: 2px solid #036EB8;
  border-bottom: 6px solid #033254;
  margin-top: -4px;
}

a.com_btn:hover {
  margin-top: 4px;
  border-bottom: 2px solid #3a0008;
}


a.com_btn.btn_blue:hover {
  margin-top: 4px;
  border-bottom: 2px solid #122948;
}

a.com_btn.btn_purple:hover {
  margin-top:4px;
  border-bottom: 2px solid #060936;
}

a.com_btn.btn_yellow:hover {
  margin: 4px auto 0;
  border-bottom: 2px solid #4e3d03;
}


.btn_blue_line:hover{
  margin-top:4px;
  border-bottom: 2px solid #033254;
}

.txt_pink{
  color: #D98EB0;
}

.txt_yellow{
  color: #C39700;
}

.txt_green{
  color: #00A29A;
}

.text_left{
  margin-left:35px;
}

@media screen and (max-width: 1180px) {
  .body::before{
    width: 130px;
    height: 247px;
  }
}


@media screen and (max-width: 740px) {
  .body::before{
    top: -35px;
    width: 100px;
    height: 200px;
  }

  .f_wrap_bet .fif{
    width: 100%;
  }

  .f_wrap_bet .fif_fif{
    margin-bottom: 2%;
  }
  
  #topview .btn_item .top_btn{
    width: 50%;
  }

  .com_btn{
    font-size: 18px;
  }

  #topview .hrader_txt2 {
    padding-top: 45px;
    width: 260px;
  }

  .underlayer_top {
    height: 300px;
  }
}


/*////////////////////////////////
日本伝統工芸士会作品展
////////////////////////////////*/
.exhibition .exhibition_img{
  width: 500px;
  max-width: 90%;
  margin: 40px auto 60px;
}

.table {
  width: 650px;
  max-width: 95%;
  margin:auto;
}

.table th, .table td{
  font-size: 18px;
  text-align: left;
  padding:10px 5px 10px 15px;
  font-weight: normal;
}

@media screen and (max-width: 740px) {
  .exhibition .exhibition_img{
    width: 500px;
    max-width: 90%;
    margin: 20px auto 30px;
  }

  .table th, .table td{
    font-size: 15px;
    padding:10px 2px 10px 0px;
  }

  .table th{
    min-width: 100px;
  }
}

/*////////////////////////////////
  匠市
////////////////////////////////*/
.takumi{
  background-color: #EAEDF7;
}

.takumi h2.takumi_ttl {
  width: 500px;
  max-width: 100%;
  margin: 0 auto 50px;
}

/*////////////////////////////////
  伝統的工芸品とは
////////////////////////////////*/
.about{
  background-color: #727171;
  color:#fff;
  margin-top:50px;
  position: relative;
}

.about::before{
  content: "";
  display: block;
  background: url(../img/about_img.png) no-repeat 50% 50%/contain;
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 222px;
  height: 447px;
  z-index: 10;
}


.about .about_ttl{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:30px;
    color:#fff;
}

.about .about_ttl:before, .about .about_ttl:after {
  border-top: 2px solid;
  content: "";
  width: calc(100% - 650px);
}

.about .about_ttl:before {
  margin-right: 15px; 
}

.about .about_ttl:after {
  margin-left: 15px;
}

.about .about_ttl:before, .about .about_ttl:after {
  border-top: 2px solid;
  content: "";
  width: 320px;
}


@media screen and (max-width: 1180px) {
  .about::before{
    width: 82px;
    height: 167px;
  }

  .about .about_ttl:before, .about .about_ttl:after {
    width: 200px;
  }
}

@media screen and (max-width: 750px) {
    .about .about_ttl:before, .about .about_ttl:after {
      width: 50px;
    }
}

/*////////////////////////////////
  特別企画
////////////////////////////////*/
.mirai_story_img{
  width: 400px;
  max-width: 80%;
  margin: 30px auto 20px;
}

.mirai_story h3, .coordinate h3{
  color:#fff;
  background-color: #00A29A;
  text-align: center;
  padding:10px;
  margin-bottom: 30px;
  border-radius: 30px;
}

.coordinate h3{
  background-color: #C39700;
}



/*//////////////////////////////////////////////////////////////////
  下層ページ　TOP
//////////////////////////////////////////////////////////////////*/
.underlayer_top{
  width: 100%;
  height: 350px;
  background-image: url(../img/tewaza_back.jpg) ;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.underlayer_top.topview_craft{
  background-image: url(../img/craft_back.jpg) ;
}

.underlayer_top.topview_dentou{
  background-image: url(../img/dentou_back.jpg) ;
}


.underlayer_top.topview_story{
  background-color: #D7A600;
  background-image: none;
}

@media screen and (max-width: 740px) {
.underlayer_top {
  height: 250px
}
}

/*//////////////////////////////////////////////////////////////////
  伝統的工芸品とは / 全国暮らしの工芸展
//////////////////////////////////////////////////////////////////*/
.com_list_item{
  width: 23%;
  border: 1px solid #BE9D34;
  display: flex;
  flex-direction: column;
  margin-bottom:4%;
  position: relative;
}

.com_list_item:hover{
  opacity: 0.7;
}

.com_list_item.experience_tag::before{
		content: "";
    display: block;
    background: url(../img/experience_tag.png) no-repeat 50% 50%/contain;
    position: absolute;
    right: -4px;
    top: 0px;
    width: 60px;
    height: 60px;
    z-index: 10;
}

.com_list_item.demonstration_tag::before{
  content: "";
  display: block;
  background: url(../img/demonstration_tag.png) no-repeat 50% 50%/contain;
  position: absolute;
  right: -4px;
  top: 0px;
  width: 60px;
  height: 60px;
  z-index: 10;
}

.com_list_item.star_tag::after{
  content: "★";
  display: block;
  color: #980014;
  position: absolute;
  font-size: 25px;
  left:10px;
  top: 5px;
  width: 60px;
  height: 60px;
  z-index: 10;
}

.com_list_item:not(:nth-of-type(4n)){
  margin-right:2%;
}

.com_list_item .item_inner{
  margin:10px;
}

.com_list_item h4{
  text-align: center;
  font-size: 19px;
  margin-top:10px;
}

.com_list_item .en{
  text-align: center;
  font-size: 12px;
  margin-bottom:7px;
}

.com_list_item .prefecture{
  text-align: center;
  font-size: 16px;
  color:#fff;
  background-color: #980014;
  margin-bottom:7px;
  border-radius: 20px;
  width: 150px;
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.com_list_item .union{
  text-align: center;
  font-size: 12px;
  color:#980014;
  font-weight: bold;
}

.com_list_item .list_btn{
  text-align: center;
  font-size: 14px;
  color:#fff;
  background-color: #BE9D34;
  padding:5px 0;
  margin-top: auto;
}

 .three{
  width: 32%;
}

@media screen and (max-width: 1080px) {
  .com_list_item{
    width: 48%;
  }

  .com_list_item:not(:nth-of-type(4n)){
    margin-right:0%;
  }

  .com_list_item:not(:nth-of-type(2n)){
    margin-right:4%;
  }

  .com_list_item .prefecture {
    font-size: 14px;
  }

  .com_list_item .list_btn {
    font-size: 11px;
  }

  .com_list_item.demonstration_tag::before{
    width: 45px;
    height: 45px;
  }
  
  .com_list_item.experience_tag::before{
    width: 45px;
    height: 45px;
  }
}

@media screen and (max-width: 740px) {
  .com_list_item h4 {
    font-size: 17px;
  }
}


/*//////////////////////////////////////////////////////////////////
  伝統工芸ふれあい広場
//////////////////////////////////////////////////////////////////*/
.craft_kapsel .ttl{
  color:#fff;
  background-color: #F19EC2;
  text-align: center;
  padding:10px;
  margin-bottom: 30px;
  border-radius: 30px;
}

.craft_kapsel .width_six{
  width: 80%;
}

.craft_kapsel .width_auto{
  width: 10%;
  margin-top: -5%;
  margin-bottom: 20px;
}

.tradition .table_area{
  width: 90%;
  margin:0 auto 20px;
}

.tradition .table_area p{
  font-size: 16px;
  font-weight: bold;
  margin-left:5px;
}

.tradition .hr_line{
  width: 90%;
  margin:5px auto 10px;
  background-color: rgb(159, 159, 159);
  height: 1px;
}

.tradition .experience_txt{
  width: 90%;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 auto 15px;
}

.tradition table th, .tradition table td{
  font-size: 15px;
  padding:2px 10px 2px 0px;
}

.tradition table th{
  width: 50px;
}

.tradition table.demo th{
  width: 100px;
}

@media screen and (max-width: 740px) {
  .craft_kapsel .width_six{
    width: 75%;
  }

  .craft_kapsel .width_auto{
    width: 20%;
    margin-right: 5%;
  }

  .tradition table th, .tradition table td{
    padding:2px 0px 2px 0px;
  }
  
  .tradition table th{
    width: 40px;
  }

  .tradition table.demo th{
    width: 65px;
  }

}

.craft_kapsel .fif{
  width: 47%;
  padding: 3%;
  border: 2px solid #F19EC2;
}



/*//////////////////////////////////////////////////////////////////
  全国暮らしの工芸展
//////////////////////////////////////////////////////////////////*/

.craft .com_list_item .prefecture{
  background-color: #6B95CC;
}

.craft .com_list_item .union{
  color: #6B95CC;
}


/*//////////////////////////////////////////////////////////////////
  伝統的工芸品とは / 全国暮らしの工芸展
//////////////////////////////////////////////////////////////////*/
.dentou_greeting .ttl{
  text-align: center;
  padding: 10px;
  border-top:2px solid #333;
  border-bottom:2px solid #333;
  margin-bottom:30px;
}

.dentou_greeting h3{
  margin-top:35px;
  margin-bottom:10px;
}

.dentou_greeting .three{
  width: 32%;
}


@media screen and (max-width: 740px) {
  .dentou_greeting .three{
    width: 48%;
    margin:0 auto 10px;
  }
}


/*////////////////////////////////
  フッター
////////////////////////////////*/
/***トップへ戻るボタン***/
.gotop{
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #E0937B;
  padding-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  font-size: 85%;
  text-decoration: none;
  color: #fff;
  opacity: 1;
  position: relative;
  margin: 30px 50px 30px auto;
}

.gotop::before{
  content: "";
  display: block;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 25%;
  height: 25%;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  transform: rotate(-45deg);
}

.gotop:hover{
  opacity: 0.7;
}

html{
  scroll-behavior: smooth;
}

/* .foot_sec{
  padding-bottom:0px;
  padding-top:50px;
  margin:auto;
  width: 1200px;
  max-width: 90%;
}

.footer06 {
  padding: 30px 30px 10px;
  border-top: 5px solid #980014;
 }

 .footer06 .box{
  width: 30%;
 }

 .footer06 li a:hover {
  text-decoration: underline;
 }
 .footer06 .wrap {
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 }
 .footer06 .wrap h3 {
  margin: 0 0 10px 0;
  padding: 0;
  border-bottom: 1px #c4c4c4 solid;
 }
 .footer06 .wrap p {
  margin: 0;
  padding: 0 0 10px 0;
 }
 .footer06 .wrap .box {
  width: 50%;
 }
 .footer06 .wrap .box ul li{
  margin: 0;
  padding: 0 0 10px 0;
  list-style: none;
  font-size: 14px;
 }

 .footer06 .copyright{
  width: 100%;
  padding: 20px 0 0 0;
  font-size: 13px;
  text-align: center;
  margin:auto;
 }
 
 @media only screen and (max-width: 599px) {
  .footer06 .wrap {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .footer06 .wrap h3 {
    border: none;
  }
  .footer06 .wrap .box {
    width: 100%;
  }

  .footer06 .box{
    width: 100%;
   }

  .footer06 .wrap .box ul li a {
    display: block;
    padding: 5px 15px;
  }

  .footer06 .wrap .copyright {
    font-size: 9px;
   }

} */

.footer {
  padding: 77px 0 60px;
  border-top: 1px solid #231815;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footerNav {
  display: flex;
  margin-bottom: 43px;
}
.footerNav__link {
  font-size: 1.6rem;
  line-height: 1;
  text-indent: 0;
  text-decoration: none;
  color: #000;
  display: flex;
  margin: 0 20px;
  position: relative;
  font-weight: bold;
}
.footerNav__link:not(:last-of-type)::after {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background-color: #231815;
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}
.footer__akitaLogo {
  width: 516px;
  max-width: 100%;
}
.footer__info {
  font-size: 1.5rem;
  line-height: 2.5rem;
  text-indent: 0;
  font-weight: 300;
  text-align: center;
  margin-top: 27px;
}
.footer__logo {
  margin-top: 33px;
  width: 240px;
  transition: opacity .3s;
}
.footer__copyright {
  font-size: 1.2rem;
  line-height: 1;
  text-indent: 0;
  margin-top: 36px;
}
@media screen and (max-width:1200px) {
  .footerNav {
    display: none;
  }
}
@media screen and (max-width:767px) {
  .footer {
    padding: 32px 37px;
  }
  .footer__info {
    font-size: 1.3rem;
    line-height: 2rem;
    text-indent: 0;
    text-align: justify;
    margin-top: 23px;
  }
  .footer__logo {
    margin-top: 23px;
    width: 90%;
    max-width: 240px;
  }
  .footer__logoImage {
    max-width: 100%;
  }
  .footer__copyright {
    font-size: 1.1rem;
    margin-top: 27px;
  }
}