@charset "UTF-8";
html {
  font-size: 13.375px; }
  @media screen and (min-width: 768px) {
    html {
      font-size: 11px; } }

body {
  display: none;
  font-size: 1.2rem; }
  @media screen and (min-width: 768px) {
    body {
      font-size: 1.4rem; } }

body {
  font-family: "Sawarabi Gothic" "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /*font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  color: #231815;
  background-color: #FFE6CA;
  background-repeat: repeat; }

h2, h3, h4 {
  text-align: center;
  margin: 20px auto;
  font-size: 2.4rem; }
  @media screen and (max-width: 399px) {
    h2, h3, h4 {
      font-size: 1.8rem; } }

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

/*color定義*/
.orange_txt {
  color: #E37537; }

.green_txt {
  color: #39AE4A; }
  .green_txt a {
    color: #39AE4A; }

.blue_txt {
  color: #00AAE7; }
  .blue_txt a {
    color: #00AAE7; }

.pink_txt {
  color: #E66EA0; }
  .pink_txt a {
    color: #E66EA0; }

.white_txt {
  color: white; }

.mincho {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

.wf-roundedmplus1c {
  font-family: "M PLUS Rounded 1c"; }

.xl_font {
  font-size: 5.0rem; }
  @media screen and (max-width: 768px) {
    .xl_font {
      font-size: 2.0rem; } }

.ruby_txt {
  font-size: 1.5rem;
  color: rgba(0, 0, 0, 0.5) !important; }

.fwb {
  font-weight: bold; }

.wf-sawarabigothic {
  font-family: "Sawarabi Gothic"; }

.notice {
  font-size: 1.4rem; }

a {
  color: #231815;
  transition: .5s ease; }
  a:hover {
    text-decoration: none;
    opacity: .5; }
    a:hover img {
      opacity: .5; }
  a a,
  a img {
    transition: .5s ease; }

.parent {
  text-align: center;
  position: relative; }
  .parent h2 {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px; }

.fixedWidget {
  position: fixed;
  top: 0px;
  opacity: 1.0 !important;
  transition: .5s ease;
  z-index: 15; }

#area_btn {
  width: 1120px;
  opacity: 0;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: .5s ease; }
  #area_btn li {
    margin: 10px; }
  #area_btn a {
    font-size: 2.4rem;
    padding: 10px 20px;
    border-radius: 30px; }
  @media screen and (max-width: 1280px) {
    #area_btn {
      width: 940px; } }
  @media screen and (max-width: 1000px) {
    #area_btn {
      width: 700px; } }
  @media screen and (max-width: 768px) {
    #area_btn {
      display: none !important; }
      #area_btn a {
        font-size: 1.8rem; } }

/*****************
ヘッダー
*****************/
#orange_bg {
  position: relative;
  z-index: 0; }

#header_container {
  /*#orange_bg {
  		@include  mq-down-xl-2 {
  		width: 100% !important;
  		height: auto !important;
  			
  	}
  }IE 対応要求の為コメントアウト*/ }
  #header_container #main_img {
    position: relative;
    background-image: url("images/bg/orange_dot.png");
    background-position: top center;
    background-repeat: no-repeat; }
    @media screen and (max-width: 1000px) {
      #header_container #main_img {
        background-image: none; } }
    #header_container #main_img use {
      position: relative;
      top: 95px;
      z-index: 0; }
    #header_container #main_img #logo {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%); }
    @media screen and (max-width: 1280px) {
      #header_container #main_img a img {
        display: block;
        width: 70%;
        margin: auto; } }
    #header_container #main_img .center_container {
      position: relative; }
      #header_container #main_img .center_container nav {
        z-index: 100; }
  #header_container #blue_dot_bg {
    position: relative;
    top: -247px;
    margin-bottom: -247px; }
    @media screen and (max-width: 1920px) {
      #header_container #blue_dot_bg {
        top: -180px;
        margin-bottom: -180px; } }
    @media screen and (max-width: 1280px) {
      #header_container #blue_dot_bg {
        top: -100px;
        margin-bottom: -100px; } }
    @media screen and (max-width: 768px) {
      #header_container #blue_dot_bg img {
        display: none; } }

.center_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }

/*****************
ヘッダーメニュー
******************/
#main_menu {
  background-color: white;
  border: 3px #E37537 solid;
  padding: 25px 0;
  border-radius: 15px; }
  #main_menu a {
    padding: 20px 50px; }
  #main_menu .current a {
    background-color: #E37537;
    color: white;
    border-radius: 50%; }
  @media screen and (max-width: 768px) {
    #main_menu {
      display: none; } }

/*スマホメニュー*/
#sp_menu_container {
  position: absolute;
  top: 0;
  height: 70px;
  display: none;
  z-index: 50; }
  @media screen and (max-width: 768px) {
    #sp_menu_container {
      display: block;
      position: fixed; } }
  #sp_menu_container .hamburger-box {
    width: 30px;
    height: 21px; }
  #sp_menu_container .hamburger {
    padding: 5px; }
  #sp_menu_container .hamburger-inner {
    margin-top: 0; }
    #sp_menu_container .hamburger-inner:before {
      top: -8px; }
    #sp_menu_container .hamburger-inner:after {
      bottom: -8px; }
  #sp_menu_container .hamburger-inner, #sp_menu_container .hamburger-inner::before, #sp_menu_container .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #DC7333; }
  #sp_menu_container #sp_btn {
    z-index: 100;
    position: absolute;
    top: 23px;
    right: 20px;
    /*width: 50px;
    height: 50px;*/
    background-color: white;
    border: 2px solid #DC7333;
    border-radius: 5px; }
  #sp_menu_container #sp_menu {
    width: 100vw;
    height: 100vh;
    background-color: #DC7333;
    opacity: 0.9;
    top: 0;
    z-index: 10; }
    #sp_menu_container #sp_menu li {
      border-bottom: 1px solid #DC7333; }
    #sp_menu_container #sp_menu a {
      display: block;
      width: 100%;
      background-color: white;
      padding: 15px; }
  #sp_menu_container .sp_close {
    transform: translateX(-100%);
    transition: .5s; }
  #sp_menu_container .sp_open {
    transform: translateX(0%);
    transition: .5s; }
  #sp_menu_container li {
    width: 100%;
    text-align: center; }

/*****************
コンテンツ
******************/
main {
  margin-bottom: 80px; }
  main #main {
    background-color: white;
    border-radius: 25px; }
    main #main #orange_title {
      color: #E37537;
      font-weight: bold; }
    main #main .info_container {
      max-width: 600px;
      margin: auto;
      line-height: 2.8rem;
      text-align: justify; }
  @media screen and (max-width: 768px) {
    main {
      margin-top: 50px;
      padding: 10px; } }

#orange_history_box {
  background-color: #E37537;
  color: white;
  border-radius: 15px; }
  #orange_history_box li {
    margin: 5px 0;
    font-weight: bold; }

/*****************
農家を知る
******************/
.farm_info_contiainer {
  max-width: 810px;
  margin: 30px auto;
  border: 3px solid #ffffff;
  border-image: url("images/content/border_img.png") 15 round;
  padding: 10px 0; }

/*****************
グルメを探す 共通スタイル
******************/
@media screen and (max-width: 768px) {
  #awajishi #main,
  #sumotoshi #main,
  #minamiawajishi #main {
    margin-top: 80px; } }

/*****************
グルメを探す 淡路市
******************/
.green_bg_title {
  background-color: #39AE4A; }

.single_box .sp-grab {
  pointer-events: none !important; }

#awajishi .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail::after {
  border-right: 13px solid #45AD35; }

#awajishi .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail::before {
  border-left: 5px solid #45AD35; }

.gourmet_container {
  margin-bottom: 100px;
  background-image: url("images/bg/black_wave_line.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 0 50px 60px; }
  .gourmet_container h3 {
    font-weight: bold; }
  @media screen and (max-width: 768px) {
    .gourmet_container {
      margin-bottom: 30px;
      padding: 10px; } }

.gourmet_info_box:before {
  content: url("images/ico/naruto_orange_ico.png");
  position: relative;
  z-index: 10; }
.gourmet_info_box .orange_txt {
  font-weight: bold; }

.arrow_box {
  position: relative;
  top: -20px;
  z-index: 1;
  padding: 30px 10px;
  width: 100%;
  background: #F4FFCC;
  border: 2px dotted #4D4D4D;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px; }
  .arrow_box:after, .arrow_box:before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    bottom: 100%;
    left: 17%; }
  .arrow_box:after {
    border-color: rgba(244, 255, 204, 0);
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
    border-bottom-color: #F4FFCC; }
  .arrow_box:before {
    border-color: rgba(77, 77, 77, 0);
    border-top-width: 11px;
    border-bottom-width: 11px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
    margin-bottom: 1px;
    border-bottom-color: #4D4D4D; }
  @media screen and (max-width: 768px) {
    .arrow_box {
      padding: 10px 5px; } }

.staff_name {
  font-size: 1.1rem; }

@media screen and (max-width: 768px) {
  .gourmet_box {
    margin-top: 30px !important; } }

/*****************
グルメを探す map
******************/
@media screen and (max-width: 1000px) {
  #area_map img {
    width: 100%;
    height: auto; } }

/*****************
グルメを探す 州本市エリア
******************/
.blue_bg_title {
  background-color: #00AAE7; }

#sumotoshi .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail::after {
  border-right: 13px solid #00AAE7; }

#sumotoshi .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail::before {
  border-left: 5px solid #00AAE7; }

/*****************
グルメを探す 南あわじ市エリア
******************/
.pink_bg_title {
  background-color: #E66EA0; }

#minamiawajishi .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail::after {
  border-right: 13px solid #E66EA0; }

#minamiawajishi .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail::before {
  border-left: 5px solid #E66EA0; }

/*****************
スライダー
*****************/
.sp-image-container {
  overflow: visible; }

/*****************
footer
******************/
footer {
  background-image: url("images/bg/footer_bg.png");
  background-repeat: repeat; }
  @media screen and (max-width: 768px) {
    footer {
      background-image: none; } }
  footer #campany_info {
    border-right: 11px dotted #E37537; }
    @media screen and (max-width: 768px) {
      footer #campany_info {
        border: none; } }
  footer #group_info_container {
    background-color: white;
    border-radius: 20px;
    border: 3px solid #E37537; }
    @media screen and (max-width: 768px) {
      footer #group_info_container {
        padding: 10px !important; } }
  footer .tel_no {
    font-size: 2.2rem; }
    footer .tel_no a {
      color: #39AE4A; }
  footer #footer_menu {
    text-align: center; }
    footer #footer_menu li {
      border-right: 1px solid black; }
      footer #footer_menu li:last-child {
        border-right: none; }
  footer .copyright {
    text-align: center;
    margin-top: 10px; }

@media screen and (min-width: 769px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }


.ttl1 {
	font-weight: bold;
	font-size: 2.5em;
	color: #df7537;
	text-align: center;
	font-family: "Sawarabi Gothic" "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

p.setumei {
	margin: 0 0 40px;
}
table.datatbl {
	width: 100%;
	background: #fff;
	
}

table.datatbl th {
	width: 220px;
	padding: 16px 8px;
	background: #fff1e2;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
}

table.datatbl td {
	padding: 16px;
	border-bottom: 1px solid #ccc;
	vertical-align: middle;
}

p.slidecapt {
	margin: 20px 0;
	text-align: center;
	font-size: 1.2em;
}

div.btn3t {
	margin: 10px 0 0;
	text-align: left;
}
div.btn3t a {
	display: inline-block;
	width: 180px;
	margin: auto;
	padding: 10px 0;
	text-align: center;
	line-height: 1em;
	font-size: 0.9em;
	border-radius: 20px;
	border: 1px solid #f1cb08;
	text-decoration: none;
	position: relative;
	color: #f1cb08;
	background: #fff;
}

div.btn3t a:hover {
	border-color: #f1cb08;
	background: #f1cb08;
	color: #fff;
}

.nokadata {
	margin: 0 0 40px;
	padding-bottom: 40px;
}

.r_img_box img {
	width: 77px;
	height: 77px;
	object-fit: cover;
	object-position: center center;
	border-radius: 12px;
}

.areattl1{
	background-color: #39AE4A;
}
.areattl2{
	background-color: #00AAE7;
}
.areattl3{
	background-color: #E66EA0;
}

.gourmettl {
	color: ##39AE4A;
	font-size: 2em;
	font-weight: bold;
}

.staffbox {
	display: table;
	width: 960px;
	margin: 40px auto 0;
}

.staffimg {
	display: table-cell;
	width: 100px;
	vertical-align: top;
}

.staffimg img {
	width: 100%;
	border-radius: 12px;
}

.staffcmnt {
	display: table-cell;
	width: 800px;
	padding-left: 60px;
	vertical-align: top;
}

.staffname {
	margin: 5px 0 0;
	font-weight: bold;
}

.staffgaiyo {
	
	font-weight: bold;
}
.staffmemo {
	margin: 1em 0 0;
}

.slidebox {
	margin: 40px 0 0;
}
.databox {
	width: 960px;
	margin: 40px auto 0;
}

.area_content {
	padding-bottom: 80px;
}

@media screen and (max-width: 768px) {
	table.datatbl {
		width: 100%;
		background: #fff;
	}

	table.datatbl th {
		display: block;
		width: auto;
		padding: 8px 8px;
	}

	table.datatbl td {
		display: block;
		width: auto;
		padding: 8px 8px;
		border-bottom: none;
		vertical-align: middle;
	}
	
	.staffbox {
		width: 100%;
		margin: 40px auto 0;
	}

	.staffimg {
		display: table-cell;
		width: 100px;
		vertical-align: top;
	}

	.staffimg img {
		width: 100%;
		border-radius: 12px;
	}

	.staffcmnt {
		display: table-cell;
		width: auto;
		padding-left: 20px;
		vertical-align: top;
	}
	.databox {
		width: auto;
	}

}