@charset "UTF-8";

/*-------------------------
__base_style
-------------------------*/
body{ font-family:'游ゴシック Medium','Yu Gothic Medium','游ゴシック体', YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;}
body.open{width:100%;overflow:hidden;position:fixed;}

@media screen and (min-width: 768px) {
  body{ min-width: 1060px;}
  .pc_none{ display: none;}
}

@media screen and (max-width: 767px) {
  .sp_none{ display: none;}
}

.fontS { font-size: 50% }
.fontM { font-size: 62.5% }
.fontL { font-size: 75% }

#wrap{ text-align: left;}

/*-------------------------
__header
-------------------------*/
#header .inner{ padding: 30px 30px 0; box-sizing: border-box; position: relative;}
#header .inner .header_top .text_size{ display: flex; justify-content: center; align-items: center; position: absolute; top: 30px; right: 30px;}
#header .inner .header_top .text_size p.title{ font-size: 1.5em; margin-right: 5px; font-weight: 700;}
#header .inner .header_top .text_size .mod_headerbox_size ul{ display: flex;}
#header .inner .header_top .text_size .mod_headerbox_size ul li{ width: 34px; height: 34px; margin: 0 3px;}
#header .inner .header_top .text_size .mod_headerbox_size ul li span{ background-color: #fff; border: 1px solid #d2d2d2; cursor: pointer; display: inline-block; font-size: 1rem; line-height: 1; padding: 5px; text-align: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; box-sizing: border-box; line-height: 22px;}
#header .inner .header_top .text_size .mod_headerbox_size ul li span:hover,
#header .inner .header_top .text_size .mod_headerbox_size ul li.active span{ background-color: #eea500; border: 1px solid #eea500; color: #fff;}
.globalnav-wrap { color: #333; background: #fff; display: flex; justify-content: space-between;}
.globalnav .dropdown-btn,
.globalnav > li{ position: relative; display: inline-block; padding: 25px 8px; cursor: pointer; font-weight: 700;}
.globalnav > li.pc_end{padding: 25px 0 25px 8px;}
.globalnav > li a{  text-decoration: none; color: #333; font-weight: 700;}
.globalnav .dropdown{ z-index: 1000; position: absolute; left: 0; top: 66px; display: none;}

@media screen and (min-width: 1201px) {
  .globalnav-wrap { font-size: 16px;}
}

@media screen and (min-width: 767px) and (max-width:1200px) {
  .globalnav-wrap { font-size: 14px;}
  .globalnav .dropdown{ top: 64px;}
}

@media screen and (min-width: 767px) {
  .globalnav > li a{ transition: .3s ease;}
  .globalnav > li a:hover{ color: #8c6e32;}
  .globalnav .dropdown.drop01{ width: 255px;}
  .globalnav .dropdown.drop02{ width: 255px;}
  .globalnav .dropdown.drop03{ width: 315px;}
  .globalnav .dropdown.drop04{ width: 140px;}
  .globalnav .dropdown.drop05{ width: 220px;}
  .globalnav .dropdown.drop06{ width: 125px;}
  .globalnav .dropdown li{ display: block; border-bottom: 1px solid #7e5c19;}
  .globalnav .dropdown li a{ display: block; color: #fff; padding: 20px 20px; background-color: rgba(140,110,50,0.85); transition: .3s;}
  .globalnav .dropdown li a:hover{ background-color: rgba(126,92,25,1);}
  .globalnav > li.pc_none{ display: none!important;}
}

.globalnav .nav-button-wrap, .globalnav .open { display: block;}
.globalnav .close { display: block;}

@media screen and (max-width: 768px) {
  #header .inner{ padding: 15px 15px; box-sizing: border-box;}
  #header .inner .header_top .logo{ max-width: 250px; height: auto;}
  #header .inner .header_top .logo a img{ width: 100%; height: auto;}
  #header .inner .header_top .text_size{ display: none;}
  header { position: relative; width: 100%;}
  .nav-button-wrap { display: block; position: absolute; right: 0; top: 0; z-index: 1000; cursor: pointer; padding: 17px 15px; }
  .globalnav { display: none;}
  .globalnav .close { display: none;}
  .globalnav-wrap.open .globalnav { z-index: 999; display: block; margin-top: 54px; position: fixed; left: 0; top: 0; background-color: #efebe2; width: 100%; height: calc(100% - 54px); overflow-x: hidden; overflow-y: auto; box-sizing: border-box;}
  .globalnav-wrap.open .globalnav > li { display: block; padding: 0;}
  .globalnav-wrap.open .globalnav > li span{ display: block; background-color: rgba(140, 110, 50, 1); font-size: 1.4em; font-weight: 700; color: #fff; padding: 6px 15px;}
  .globalnav-wrap.open .globalnav > li:hover { background: transparent;}
  .globalnav-wrap.open .globalnav > li > a{ font-size: 1.5em; line-height: 1.5; font-weight: 700; color: #fff; display: block; background-color: rgba(140, 110, 50, 1); padding: 12px 15px; border-bottom: 1px solid rgba(255, 255, 255, .6); position: relative;}
  .globalnav-wrap.open .globalnav > li > a::after{ content: ""; display: block; width: 6px; height: 6px; border: 0; border-top: solid 1px #fff; border-right: solid 1px #fff; position: absolute; top: 50%; right: 12px; transform: translateY(-50%) rotate(45deg);}
  .globalnav-wrap.open .globalnav > li.bd_none > a {border:none;}
  .globalnav-wrap.open .globalnav li ul li{ padding: 0;}
  .globalnav-wrap.open .globalnav li ul li:not(:last-child){ border-bottom: 1px solid rgba(255, 255, 255, .6);}
  .globalnav-wrap.open .globalnav li ul li a{ font-size: 1.4em; line-height: 1.5; font-weight: normal; display: block; padding: 10px 15px; position: relative;}
  .globalnav-wrap.open .globalnav li ul li a::after { content: ""; display: block; width: 6px; height: 6px; border: 0; border-top: 1px solid rgba(140, 110, 50, 1); border-right: 1px solid rgba(140, 110, 50, 1); position: absolute; top: 50%; right: 12px; transform: translateY(-50%) rotate(45deg);}
  .globalnav-wrap.open .globalnav .dropdown { display: block; position: static; margin: 0 auto;}
  .nav-button, .nav-button span { display: inline-block; transition: all 0.3s;}
  .nav-button { z-index: 20; width: 25px; height: 19px; position: relative;}
  .nav-button span { position: absolute; left: 0; width: 100%; height: 3px; border-radius: 4px;}
  .nav-button span:nth-of-type(1) { top: 0; background-color: #000;}
  .nav-button span:nth-of-type(2) { top: 8px; background-color: #000;}
  .nav-button span:nth-of-type(3) { bottom: 0; background-color: #000;}
  .active .nav-button{ margin-top: -2px;}
  .active .nav-button span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg);}
  .active .nav-button span:nth-of-type(2) { opacity: 0;}
  .active .nav-button span:nth-of-type(3) { transform: translateY(-6px) rotate(45deg);}
}

@media screen and (max-width: 374px) {
#header .inner .header_top .logo{ max-width: 240px;}
}

/*-------------------------
__content
-------------------------*/
/* コンテンツページh1タイトル */
.contents .page_title{height: 230px; position: relative;}
.contents .page_title h1,
.contents .page_title .title{ font-size: 100%; text-align: center; width: 100%; position: absolute; top: 50%; right: auto; left: auto; transform: translate(0, -50%);}
.contents .page_title h1 span,
.contents .page_title .title span{ font-size: 3.6em; line-height: 1.2; font-weight: 700; color: #fff;}

/* ぱんくずリスト */
.contents .topic_path{ width: 1000px; margin: 0 auto; padding: 20px 0; clear:both;}
.contents .topic_path ul{width:100%;text-align:left;}
.contents .topic_path li{font-size:1.4em;line-height:1.4;color:#000;vertical-align:top;display:inline-block;}
.contents .topic_path li:before{content:">";color:#000;margin-left:10px;margin-right:10px;}
.contents .topic_path li:first-child:before{content:"";margin:0;}
.contents .topic_path li a{color:#000;text-decoration:underline;}
.contents .topic_path li a:hover{text-decoration:none;}

/* ボタンリスト */
.contents .page_btn_list{ width: 1000px; margin: 0 auto 30px; text-align: center; overflow: hidden;}
.contents .page_btn_list ul{ display: flex; flex-wrap: wrap; margin: 0 -10px;}
.contents .page_btn_list ul.side5 li{ width: calc(20% - 20px); margin-bottom: 20px;}
.contents .page_btn_list ul.side4 li{ width: calc(25% - 20px); margin-bottom: 20px;}
.contents .page_btn_list ul.side3 li{ width: calc(33.33333% - 20px); margin-bottom: 20px;}
.contents .page_btn_list ul.side2 li{ width: calc(50% - 20px); margin-bottom: 20px;}
.contents .page_btn_list ul li{ margin: 0 10px;}
.contents .page_btn_list ul li a{ border: 1px solid #eea500; box-sizing: border-box; color: #eea500; text-decoration: none; height: 90px; font-size: 1.5em; line-height: 1.3em; font-weight: 700; display: flex; position: relative;}
.contents .page_btn_list ul li a span{ width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

@media screen and (min-width: 1000px) {
  .contents .page_btn_list ul li a{ transition: background-color 0.3s ease;}
  .contents .page_btn_list ul li a:hover{ background-color: #eea500; color: #fff;}
}

/* 基本のh2見出し */
.contents .index_basic h2,
.contents .index_basic .ttl{ color: #9b814b; font-size: 2.5em; font-weight: 700; text-align: center; margin-bottom: 30px;}
.contents .index_basic h2 span,
.contents .index_basic .ttl span{ padding-bottom: 15px; border-bottom: 4px solid #9b814b; display: inline-block;}

@media screen and (max-width: 767px) {
  /* コンテンツページh1タイトル */
  .contents .page_title{ height: 120px;margin-bottom: 20px;}
  .contents .page_title h1 span,
  .contents .page_title .title span{ font-size: 2.4em;}

  /* ぱんくずリスト */
  .contents .topic_path{ display: none;}

  /* ボタンリスト */
  .contents .page_btn_list{ width: 100%; margin: 0 auto 15px; padding: 0 15px; box-sizing: border-box;}
  .contents .page_btn_list ul{ margin: 0 -5px;}
  .contents .page_btn_list ul.side5 li,
  .contents .page_btn_list ul.side4 li,
  .contents .page_btn_list ul.side3 li,
  .contents .page_btn_list ul.side2 li{ width: calc(50% - 10px); margin: 0 5px 10px;}
  .contents .page_btn_list ul li a{ font-size: 1.3em; line-height: 1.3; height: 60px;}
  .contents .page_btn_list ul li a span{ padding: 0 10px; box-sizing: border-box;}

  /* 基本のh2見出し */
  .contents .index_basic h2,
  .contents .index_basic .ttl{ font-size: 1.7em; line-height: 1.2; margin-bottom: 15px;}
  .contents .index_basic h2 span,
  .contents .index_basic .ttl span{ padding-bottom: 7px;}
}

@media screen and (max-width: 374px) {
.contents .page_title h1 span,
.contents .page_title .title span{ font-size: 2.1em;}
}

/*-------------------------
__footer
-------------------------*/
#footer a{ text-decoration:none; color: #fff;}
#footer{ background-image: url(../images/footer_back.jpg); background-size: cover; background-position: center;}
#footer .inner{ width: 100%; max-width: 1000px; margin: 0 auto; padding: 100px 0 60px; box-sizing: border-box;}
#footer .inner .block01{ display: flex; justify-content: center; margin-bottom: 60px;}
#footer .inner .block01 dl{ margin-right: 70px;}
#footer .inner .block01 dl:last-child{ margin-right:0;}
#footer .inner .block01 dl dt{ font-size: 1.7em; line-height: 1.3; color: #fff; font-weight: 700; margin-bottom: 20px;}
#footer .inner .block01 dl dd ul li{ font-size: 1.5em; line-height: 1.3; color: #fff; margin-bottom: 10px;}
#footer .inner .block02{ margin-bottom: 60px;}
#footer .inner .block02 ul{ display: flex; justify-content: center; flex-flow: wrap; align-items: center;}
#footer .inner .block02 ul li{ margin-right: 25px; text-align: center;}
#footer .inner .block02 ul li:last-child{ margin-right:0;}
#footer .inner .block02 ul li a{ font-size: 1.7em; line-height: 1.3; font-weight: 700;}
#footer .inner .block03{ margin-bottom: 60px;}
#footer .inner .block03 ul{ display: flex; justify-content: center;}
#footer .inner .block03 ul li{ font-size: 1.5em; line-height: 1.3; color: #fff;}
#footer .inner .block03 ul li:not(:last-child)::after{ content: "｜"; margin: 0 10px;}
#footer .inner .com_data{ display: flex; justify-content: center; align-items: center; margin-bottom: 60px;}
#footer .inner .com_data .logo{ margin-right: 25px; max-width: 325px; height: auto;}
#footer .inner .com_data .logo a img{ width: 100%; height: auto;}
#footer .inner .com_data .detail p{ font-size: 1.4em; line-height: 1.3; color: #fff; margin-bottom: 10px;}
#footer .inner .com_data .detail ul li{ display: inline-block; font-size: 20px; font-weight: 700; color: #fff; margin-right: 10px;}
#footer .inner .com_data .detail ul li a{ color: #fff;}
#footer .inner .bnr_wrap{display: flex;justify-content: center;}
#footer .inner .insta_bnr,
#footer .inner .fb_bnr{font-size:1px;line-height:0;background-color:#fff;width:300px;margin:0 15px 30px;}
#footer .inner .insta_bnr a,
#footer .inner .fb_bnr a{display: block;}
#footer .inner .insta_bnr a img,
#footer .inner .fb_bnr a img{transition:opacity .3s;}
@media screen and (min-width: 1000px) {
  #footer .inner .insta_bnr a:hover img,
  #footer .inner .fb_bnr a:hover img{opacity:.7;}
}
#footer .inner .copylight{ text-align: center; font-size: 1.5em; line-height: 1.3; color: #fff;}

@media screen and (min-width: 768px) {
  #footer .inner .block01 dl dd ul li a,
  #footer .inner .block02 ul li a,
  #footer .inner .block03 ul li a{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
  #footer .inner .block01 dl dd ul li a:hover,
  #footer .inner .block02 ul li a:hover,
  #footer .inner .block03 ul li a:hover{ opacity: 0.5;}
}

@media screen and (max-width: 767px) {
  #footer .inner{ padding: 35px 20px 10px;}
  #footer .inner .block01{ display: block; margin-bottom: 25px;}
  #footer .inner .block01 dl{ margin-right: 0; margin-bottom: 15px; text-align: center;}
  #footer .inner .block01 dl dt{ font-size: 1.5em; line-height: 1.3; margin-bottom: 10px;}
  #footer .inner .block01 dl dd ul li{ font-size: 1.4em; line-height: 1.5; margin-bottom: 5px; display: inline-block;}
  #footer .inner .block01 dl dd ul li:not(:last-child)::after{ content: "｜";}
  #footer .inner .block02{ margin-bottom: 0;}
  #footer .inner .block02 ul{ display: block; text-align: center;}
  #footer .inner .block02 ul li{ margin-right: 0; margin-bottom: 10px;}
  #footer .inner .block02 ul li a{ font-size: 1.5em; line-height: 1.3;}
  body.fontM #footer .inner .block02,
  body.fontL #footer .inner .block02{ width: 100%; margin: 0 auto 30px;}
  #footer .inner .block03{ margin-bottom: 40px;}
  #footer .inner .block03 ul li{ font-size: 1.4em;}
  #footer .inner .block03 ul li:not(:last-child)::after{ margin: 0;}
  #footer .inner .com_data{ display: block; margin-bottom: 40px; text-align: center;}
  #footer .inner .com_data .logo{ width: 100%; height: auto; margin: 0 auto 10px;}
  #footer .inner .com_data .detail p{ font-size: 1.4em; line-height: 1.3; color: #fff; margin-bottom: 10px;}
  #footer .inner .com_data .detail ul li{ display: block; margin-right: 0; margin-bottom: 5px;}
  #footer .inner .bnr_wrap{display: block;}
  #footer .inner .insta_bnr,
  #footer .inner .fb_bnr{width:240px;margin: 0 auto 20px;}
  #footer .inner .insta_bnr img,
  #footer .inner .fb_bnr img{height:auto;width:100%;}
  #footer .inner .copylight{ font-size: 1.4em;} 
}