@charset "UTF-8";
/*
Theme Name: 公益財団法人山崎香辛料振興財団
Theme URL: テーマのサイトのURI
Description: 公益財団法人山崎香辛料振興財団のホームページです。
Author: 公益財団法人山崎香辛料振興財団
*/
/*--------------------------------------------
    ヘッダー
--------------------------------------------*/
@media screen and (max-width: 928px) {
.sp_header{
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
  box-sizing: border-box;
}
.sp_header .logo{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.sp_header .logo img{
  width: 15rem;
  height: 50px;
}
.sp_header a.btn.contact {
  display: inline-block;
  margin-top: 1rem;
  font-size: 1.4rem;
  margin-right: 5rem;
  margin-bottom: 1rem;
}
.sp_header a.btn.contact:hover {
  background: #E4572D;
}
.nav{
  position: fixed;
  width: 67%;
  text-align: right;
}
/*ハンバーガーMENU*/
nav.NavMenu{
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  background: #ECE8E9;
  text-align: center;
  width: 100%;
  height: 100%;
  display: none;
}

nav.NavMenu ul{
width: 100%;
margin: 0 auto;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
padding: 0 5%;
transform: translateY(-50%) translateX(-50%);
}

nav.NavMenu ul li{
width: 100%;
padding-bottom: 0px;
}
nav.NavMenu ul li img{
  max-width: 200px;
}
nav.NavMenu ul li a{
  display: block;
  padding: 10px 0;
  font-size: 1.8rem;
  font-weight: 700;
  color:#5E2D2E;
  text-decoration: none;
}
nav.NavMenu ul li dl dt a{
  padding-bottom: 4px;
}
nav.NavMenu ul li dl dd a{
  font-weight: 400;
  padding: 4px;
}
nav.NavMenu .contact .btn{
  margin: 1rem auto 0;
}

/*ボタンのスタイル*/
.Toggle {
  position: fixed;
  right: 5%;
  top: 1%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  z-index: 13;
  display: block;
}
.Toggle span {
  display: block;
  position: absolute;
  width: 2.9rem;
  border-bottom: solid 3px #5E2D2E;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  left: 6px;
}
.Toggle span:nth-child(1) {
  top: 22%;
}
.Toggle span:nth-child(2) {
  top: 41%;
  width: 2.2rem;
  left: 1.2rem;
}
.Toggle span:nth-child(3) {
  top: 60%;
  width: 1.5rem;
  left: 1.9rem;
}
.Toggle.active span:nth-child(1) {
top: 18px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
border-bottom: solid 3px #5E2D2E;
}
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
border-bottom: solid 3px #5E2D2E;
}
.Toggle.active span:nth-child(2) {
  width: 2.9rem;
  left: 7px;
}
.Toggle.active span:nth-child(3) {
  width: 2.9rem;
  left: 7px;
}

#exam05 .icon{
  max-width: 140px;
}
}
/*===============================================
●style_sp.css  画面の横幅が767px以下
===============================================*/
@media screen and (max-width: 767px) {
  .for_pc {
    display: none;
  }
/*--------------------------------------------
    サイト基本設定
--------------------------------------------*/
html {
  scroll-behavior: smooth;
}
body {
  font-size: 1.6rem;
  line-height: 1.8;
}
/*セクション*/
section {
  padding: 60px 0;
}
.sec{
  margin-bottom: 60px;
}
.sub_sec{
  margin-bottom: 30px;
}
.inner {
  max-width: 100%;
  padding: 0 5%;
}
/*タイトル*/
h2 {
  font-size: 2.4rem;
  line-height: 1.5;
}
h3 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  line-height: 1.5;
}
h3:after{
  content: url(img/h3_img_sp.svg);
  margin-top: -1.5rem;
}
h4 {
  font-size: 1.8rem;
  padding: 4px 16px;
}
h4:before{
  vertical-align: -10px;
  max-height: 21px;
}
/*タイトルエリア*/
.ttl{
  font-size: 1.8rem;
}
/*ボタン*/
.btn  {
  padding: 12px 0;
  width: 100%;
  max-width: 300px;
}
.sub_btn {
  padding: 10px 0;
  width: 100%;max-width: 240px;
}
/*追従ボタン*/
.fix-btn{
 display: none;
}
.cvarea{
  position: fixed;
  z-index: 1;
  background: #EFF3EB;
  padding: 12px 0;
  right: 0;
  width: 100%;
  bottom: 0;
  -ms-writing-mode: tb-rl;
  text-align: center;
  box-sizing: border-box;
}
/*タイトルエリア*/
.ttlArea {
  background-position: right -18% top 0px;
  padding: 40px 0;
}

/*メニューエリア*/
.menu{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.menu li {
  width: 32.8%;
  text-align: center;
  line-height: 1.5;
  vertical-align: middle;
  border-radius: 10px;
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: -ms-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-box-align: center;
  box-align: center;
}
.menu li a {
  background-color: #EFF3EB;
  font-weight: 700;
  padding: 14px 0;
  display: block;
  text-decoration: none;
  width: 100%;
  color: #566E3D;
  border-radius: 10px;
}
.menu li a:after {
    content: "";
    display: block;
    margin-left: 50%;
    vertical-align: 1px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #566E3D;
    border-bottom: 2px solid #566E3D;
    transform: rotate(45deg);
}
.menu li a:hover {
  background-color: #E3EADB;
}
/*テーブル*/
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px 2px;
  line-height: 1.5;
}
table tr th {
  width: 33%;
  background: #F2D3D4;
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
}
table tr td {
  padding: 10px 14px;
  background: #F8E7E7;
  text-align: left;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
/*開封パーツ*/
.pageSubTitle2 {
  font-size: 1.6rem;
}
.qa {
  padding-top: 180px;
  padding-bottom: 278px;
}
.qa__box {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: auto;
}
.qa__box > dl > dt {
  background-color: #ECE8E9;
  display: flex;
  font-weight: 700;
  align-items: center;
  padding: 6px 14px;
  position: relative;
}
.qa__box > dl > dt:hover{
  cursor: pointer;
}
.qa__box > dl > dt .crossBar {
  width: 18px;
  height: 18px;
  right: 14px;
}
.qa__box > dl > dt .crossBar::before {
  width: 3px;
  border-radius: 3px;
}
.qa__box > dl > dt .crossBar::after {
  border-radius: 3px;
  height: 3px;
}
.document li a:after{
  margin-right:0;
}
.document a{
  width: 85%;
}
/*ステータス*/
.status{
  font-size:2rem;
  padding: 0px 24px;
  margin-bottom: 30px;
}

/*--------------------------------------------
    フッター
--------------------------------------------*/
footer {
  padding: 50px 0;
  margin-top: -1px;
}
footer ul {
  display: flex;
  flex-flow: column wrap;
  max-height: 150px;
}
footer ul li{
  width: 47%;
  margin-bottom: 14px;
}
footer ul li:nth-child(4){
  font-size: 1.5rem;
}
footer ul li:nth-child(4) dl{
  margin-bottom: 0;
}
footer ul dl {
  margin-bottom: 24px;
  font-weight: 700;
  line-height: 1.4;
}
footer .logoArea{
  line-height: 1.4;
  text-align: center;
}
footer .logoArea p{
  margin-bottom: 20px;
}
footer .logoArea .footer_img{
  display: none;
}
footer .bottomArea {
  margin-top: 0;
  display: block;
  font-size: 1.2rem;
}
footer .bottomArea ul{
  display: flex;
  flex-flow: nowrap;
  max-height: none;
  justify-content: space-between;
}
footer .bottomArea ul li{
  margin-right: auto;
  width: auto;
}
footer .bottomArea p{
  text-align: center;
  margin-bottom: 0;
}
footer .top_btn img {
  max-width: 50px;
  position: absolute;
  right: 5%;
  top: -5%;
}
/*--------------------------------------------
    お問い合わせエリア
--------------------------------------------*/
#contactarea{
  padding: 40px 5%;
}
#contactarea .contentsArea{
  padding: 24px 5%;
  max-width: 100%;
}
#contactarea .contentsArea .left{
  left: -5%;
  bottom: 0;
  max-width: 69px;
}
#contactarea .contentsArea .right{
  right: -3%;
  top: -14%;
  max-width: 82px;
}
#contactarea .contentsArea p{
  font-size: 2rem;
  margin-bottom: 14px;
}
#contactarea .btn{
  width: 80%;
}
/*--------------------------------------------
    トップページ
--------------------------------------------*/
/* FV */
#fv {
  padding: 35px 0 30px 0;
}

/* お知らせ */
#top_news{
  padding-bottom: 100px;
}
#top_news .top_news{
  max-width: 80px;
  right: 5%;
  bottom: 1%;
}
#top_news ul{
  max-width: 100%;
  margin-bottom: 30px;
}

/* おもな事業内容 */
#top_service ul{
  display: block;
  margin-bottom: 30px;
}
#top_service ul li{
  max-width: 100%;
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: left;
  text-align: -webkit-left;
  margin-bottom: 10px;
}
#top_service ul dl{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#top_service ul li img{
  margin-bottom: 0;
  width: 75px;
  max-width: 100%;
}
#top_service ul li .txtArea{
  max-width: 71%;
}

/* 研究助成事業 */
#top_research{
  padding-bottom: 100px;
}
#top_research .contentsArea{
  display: flex;
  flex-direction: column-reverse;
  max-width: 100%;
  margin: 0 auto;
}
#top_research .contentsArea .txtArea{
  width: 100%;
}
#top_research .imgArea{
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
#top_research .imgArea img{
  width: 65%;
}
#top_research .top_research{
  position: absolute;
  max-width: 100px;
  left: 5%;
  bottom: 2%;
}

/* スパイス＆ハーブ検定 */
#top_exam .contentsArea{
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
#top_exam .imgArea{
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
#top_exam .contentsArea .txtArea{
  width: 100%;
}
#top_exam .imgArea img{
  width: 65%;
}
#top_exam ul{
  display: block;
  justify-content: space-between;
  margin-bottom:30px;
}
#top_exam li{
  width: 100%;
  margin-bottom: 10px;
}
#top_exam li .title{
  font-size: 1.6rem;
}
/*--------------------------------------------
    山崎香辛料振興財団について
--------------------------------------------*/
#about .menu li {
  width: 49%;
  margin-bottom:2%;
}
#about .menu li:not(:nth-child(4)){
  line-height: 1.5;
}
#about .menu li:nth-child(4){
  font-size: 1.3rem;
  line-height: 1.9;
}

/*理事長ご挨拶*/
#about #about01 .imgArea {
  width: 100%;
}
#about #about01 .txtArea {
  margin-bottom: 20px;
}
#about #about01 .txtArea .name {
  font-size: 1.8rem;
}
#about #about01 .txtArea .name span{
  margin-bottom: 1rem;
  margin-bottom: -0.5rem;
}
#about #about01 .openArea dt{
  margin-bottom: 3rem;

}
/*財団概要*/
#about #about02 .imgArea{
  position: relative;
  margin-bottom: 30px;
}
#about #about02 .imgArea .icon{
  position: absolute;
  max-width: 70px;
  right: -1rem;
  bottom: -2rem;
}

/*組織について*/
#about #about03 img{
  max-width:100%;
  margin: 0 auto 30px;
}
#about #about03 .unei{
  margin-bottom: 10px;
}

/*業務・財務関係の各種資料*/
#about #about04 .qa__child,#about #about05 .qa__child{
  margin-bottom: 4px;
}

/*定款等*/
#about #about05 .document li span{
  display: block;
  font-weight: 700;
}
/*--------------------------------------------
    おもな事業内容
--------------------------------------------*/
#service .contentsArea{
  display: block;
  margin-bottom: 30px;
}
#service .imgArea{
  width: 100%;
  margin-bottom: 30px;
}
#service .imgArea .icon{
  position: absolute;
  max-width: 74px;
  right: -1rem;
  left: auto;
  top: -3rem;
}
#service .contentsArea ul{
  width: 100%;
}
#service .contentsArea ul li dl{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#service .contentsArea ul li dl img{
  width: 75px !important;
  max-width: 100%;
}
#service .contentsArea ul li dl .top_service{
  width: 100%;
}
#service .contentsArea ul li dl .txtArea{
  font-size: 1.6rem;
  line-height: 1.8;
  max-width: 71%;
}

/*--------------------------------------------
    研究助成事業
--------------------------------------------*/
/*研究助成事業について*/
#research #research01 .contentsArea{
  display: block;
  margin-bottom: 30px;
}
#research #research01 .imgArea,#research #research01 .txtArea {
  width: 100%;
}
#research #research01 .imgArea{
  margin-bottom: 30px;
}
#research #research01 .imgArea .icon{
  max-width: 70px;
  right: -1rem;
  bottom: -2rem;
}

/*研究助成の募集*/
#research #research02 .document,#research #research02 .btnArea{
  margin-bottom: 30px;
}
#research #research02 .date{
  font-size: 1.8rem;
  margin-bottom: 30px;
}

/*令和5年度の研究助成*/
#research #research03 .total{
  font-size: 1.8rem;
  margin-bottom: 30px;
}
#research #research03 p,#research #research04 p{
  margin-bottom: 0;
}

/*--------------------------------------------
    スパイス＆ハーブ検定
--------------------------------------------*/
/*メニュー*/
#exam .menu li{
  width: 49%;
}
#exam .menu li:nth-child(-n+2){
  margin-bottom: 2%;
}
/*冒頭*/
#exam #exam01{
  text-align: center;
}
#exam #exam01 .ttl{
  font-size: 1.8rem;
  margin-bottom: 20px;
  margin-top: 0px;
}
#exam #exam01 .con{
  padding: 20px 20px;
  max-width: 100%;
  margin: 0 auto 30px;
}
#exam #exam01 .con .icon{
  position: absolute;
  max-width: 54px;
  left: -1rem;
  top: -2rem;
}
#exam #exam01 .con .ttl{
  font-size: 2rem;
  margin-bottom: 20px;
}
#exam #exam01 .con .ttl:before{
  content: '';
  position: absolute;
  top: 5.5rem;
  width: 46px;
}
#exam #exam01 .con .infoArea{
  padding: 2.2%;
  max-width: 100%;
  margin: 10px auto;
}
#exam #exam01 .con .infoArea .strong{
  font-size: 1.8rem;
}
#exam #exam01 .con .infoArea p{
  margin-bottom: 4px;
}

/*スパイス＆ハーブ検定*/
#exam #exam02 .imgArea .icon{
  max-width: 66px;
  right: -1rem;
  bottom: -1rem;
}

/*試験概要*/
#exam #exam03 .level{
  margin-bottom: 30px;
}
#exam #exam03 .infoArea{
  display: block;
  margin-bottom: 30px;
}
#exam #exam03 .infoArea .txtArea{
  width: 100%;
  margin-bottom: 10px;
}
#exam #exam03 .infoArea .txtArea span{
  font-size: 1.6rem;
}
#exam #exam03 .giftArea{
  text-align: center;
  margin: 0 auto;
}
#exam #exam03 .giftArea img{
  max-width:80%;
}
#exam #exam03 .giftArea p{
  margin-top: 20px;
  text-align: left;
}

/*過去の開催状況*/
#exam #exam04 tbody th:first-child {
  width: 80px;
  box-sizing: border-box;
}
#exam #exam04 tbody td, #exam #exam04 tbody th {
  border-right: 2px solid #fff;
  width: 160px;
  box-sizing: border-box;
}
#exam #exam04 tbody th:last-child,#exam #exam04 tbody td:last-child {
  width: 110px;
}
#exam #exam04 .table-scroll {
  overflow-x: scroll;
}
#exam #exam04 .qa__box {
  margin-top: 20px;
}
/*認定テキスト*/
section#exam05 {
  padding: 60px 0 100px;
}
#exam05 .contentsArea{
  padding-bottom: 100px;
}
#exam05 .contentsArea{
  display: block;
  padding-bottom: 0;
}
#exam05 .contentsArea .imgArea{
 width: 100%;
 margin-right: 0%;
 margin-bottom: 30px;
 text-align: center;
}
#exam05 .contentsArea .imgArea img{
  max-width: 60%;
}
#exam05 .contentsArea .txtArea .ttl{
  font-size: 1.8rem;
} 
#exam05 .icon{
  max-width: 83px;
  right: 1rem;
  bottom: 0;
}

.exam-btn {
  padding: 1em 48px 1em 1em;
}
.exam-btn::after {
  right: 24px;
}
.exam-btn--large{
  border-radius: 80px;
  text-align: center;
}
/*--------------------------------------------
    例題
--------------------------------------------*/
/* メニュー */
#qa .menu li a {
  border-radius: 10px 10px 0 0;
  border-bottom: 2px solid #566E3D;
  padding: 10px 0;
}
/* QA */
#qa .qaArea p{
  margin-bottom: 10px;
}
#qa .qaArea .qanda{
  margin-bottom: 20px;
}
#qa .qaArea .qanda .question{
  padding: 14px;
}

/*--------------------------------------------
    お知らせ
--------------------------------------------*/
#news .inner {
  display: block;
}
#news .inner #main {
  width: 100%;
}
#news .inner #main ul li:last-child,#news .inner #side ul li:last-child{
  margin-bottom: 0;
}
/* カテゴリー */
#news .inner #side {
  width: 100%;
  margin-top: 60px;
}
/* ページネーション */
.pagination .page-numbers {
  margin: 14px auto 0;
}
.pagination .page-numbers li a {
  margin-right: 10px;
}
.pagination .current {
  margin-right: 10px;
}

.pagination a.next,
.pagination a.prev {
  width: 30%;
  padding: 10px 12px 2px 12px !important;
}
/*--------------------------------------------
    記事ページ
--------------------------------------------*/
#news #main h2 {
  font-size: 2.4rem;
  color: #472021;
  margin-bottom: 30px;
}
#news #main h3 {
  margin-bottom: 20px;
  font-size: 2rem;
}
#news #main h4 {
  font-size: 1.8rem;
}
#news #main .txtArea img {
  width: 100%;
  max-width: 100%;
}
/*--------------------------------------------
    過去の研究課題
--------------------------------------------*/
#research_single tbody th:first-child,#research_single tbody td:first-child {
  width: 70px;
  box-sizing: border-box;
}
#research_single tbody td, #research_single tbody th {
  border-right: 2px solid #fff;
  width: 180px;
  box-sizing: border-box;
}
#research_single tbody th:last-child,#research_single tbody td:last-child {
  width: 110px;
}
#research_single .table-scroll {
  overflow-x: scroll;
}
/*--------------------------------------------
    お問い合わせ
--------------------------------------------*/
#contact .send_button p:after {
  content: "";
  background-image: url(img/red_arrow.svg);
  position: absolute;
  background-repeat: no-repeat;
  top: 41%;
  right: 21%;
  width: 2em;
  height: 2rem;
  color: #fff;
}
#contact input, #contact textarea {
    box-sizing: border-box;
}



}