@charset "utf-8";
/* CSS Document */
/* base */
ol, ul, li {
  list-style: none;
}
#wrapper {
  width: 100%;
  margin: auto;
  max-width: 2000px;
}
a:hover {
  cursor: pointer;
}
.contents {
  width: 100%;
  margin: 5% auto 7%;
  max-width: 1280px;
}
.left {
  text-align: left !important;
}
@media screen and (max-width: 768px) {
  .tb_none {
    display: none !important;
  }
}
@media screen and (min-width: 601px) {
  .pc_none {
    display: none !important;
  }
}
@media screen and (max-width: 600px) {
  .sp_none {
    display: none !important;
  }
}
/*===========================
	TOP
===========================*/
.main {
  background-color: #0e43c8;
  width: 100%;
  height: 80vh;
  background: url("../ehimecraftbeer/images/main.jpg") center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.main h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
}
.main_bk_r {
  position: absolute;
  right: 0;
  top: 0;
  width: 25%;
}
.main_bk_l {
  position: absolute;
  left: 0;
  bottom: -15%;
  width: 20%;
}
@media screen and (max-width: 768px) {
  .main {
    height: 40vh;
  }
}
@media screen and (max-width: 600px) {
  .main {
    display: none;
  }
  .main_sp {
    background: url("../ehimecraftbeer/images/main_sp.jpg") center center;
    width: 100%;
    height: 35vh;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  .m_ttl {
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-30%) translateX(-50%);
    -webkit- transform: translateY(-30%) translateX(-50%);
  }
}
/*===========================
	navi
===========================*/
#navi {
  background: #F39700;
  padding: 1.5% 0;
}
#navi ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
#navi ul a {
  color: #FFF;
  width: 12%;
  padding-bottom: 10px;
  text-align: center;
  margin: 0 20px;
}
#navi ul a li span {
  display: block;
  border-bottom: 2px solid #FFF;
  padding-bottom: 10px;
}
#navi ul a li::after {
  display: block;
  font-family: "Font Awesome 5 Free";
  content: '\f0d7';
  font-weight: 900;
}
.padding-top10 {
  padding-top: 1.5em;
}
#w2, #online_tour, #brewery {
  padding-top: 40px;
  margin-top: -40px;
}
@media screen and (max-width: 768px) {
  #navi ul a li span {
    font-size: 0.8em;
  }
}
@media screen and (max-width: 600px) {
  #navi {
    padding: 3% 5%;
  }
  #navi ul {
    display: block;
  }
  #navi ul a {
    display: table-row-group;
    text-align: left;
  }
  #navi ul a li span {
    font-size: 1.2em;
    display: inline;
    border-bottom: none;
  }
  #navi ul a li::after {
    display: inline;
    font-family: "Font Awesome 5 Free";
    content: '\f0d7';
    font-weight: 900;
    padding-left: 10px;
  }
}
/*===========================
	愛媛クラフトツーリズムとは
===========================*/
.w_bk_l {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.w_bk_r {
  position: absolute;
  right: 0;
  z-index: 1;
}
.ttl_area {
  width: 40%;
  display: block;
  margin: 0 auto 5%;
  text-align: center;
}
h2, h3 {
  position: relative;
  display: inline-block;
  font-size: 1.8em;
  font-weight: bold;
}
h2::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 2px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #FFF;
  border-radius: 2px;
}
h3::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 2px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 2px;
}
.w1 {
  background: #0C1E30;
  color: #FFF;
  padding: 3% 0 2%;
  position: relative;
  z-index: 0;
}
.fb_new {
  position: absolute;
  right: 10%;
  width: 15%;
}
.top_box_movie {
  width: 100%;
  z-index: 5;
}
.top_box_movie iframe {
  width: 70vw;
  height: 70vh;
  margin: 5% 15%;
}
ul.w1_txt_area {
  display: flex;
  width: 80%;
  margin: 0 auto;
}
li.txt {
  font-size: 1.2em;
  padding-left: 5%;
  line-height: 2.5;
}
.w1_logo {
  padding-top: 10px;
}
.w1_photo_area {
  width: 80%;
  margin: 0 auto;
  padding: 3% 0 0;
  display: flex;
  justify-content: space-around
}
.w1_photo_area li {
  z-index: 2;
  margin: 0 1%;
}
.w1_photo_area li:first-child {
  margin-left: 0;
}
.w1_photo_area li:last-child {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  .fb_new {
    right: 3%;
  }
  .top_box_movie iframe {
    width: 100%;
    height: 40vh;
    margin: 10% auto;
  }
  .w1_logo {
    width: 50%;
    margin: 0 auto;
  }
  .ttl_area {
    width: 90%;
  }
  li.txt {
    font-size: 1em;
    line-height: 2;
  }
}
@media screen and (max-width: 600px) {
  .w1 {
    padding: 8% 0;
  }
  .fb_new {
    width: 25%;
    top: 7%;
    right: 4%;
  }
  .w_bk_l, .w_bk_r {
    width: 40%;
  }
  .ttl_area {
    margin: 0 auto 8%;
  }
  h2, .ttl2 {
    font-size: 1.3em;
  }
  .top_box_movie iframe {
    height: 25vh;
  }
  ul.w1_txt_area {
    display: block;
  }
  li.txt {
    padding-left: 0;
  }
  ul.w1_txt_area {
    width: 90%;
  }
}
/*===========================
	愛媛ってどんなところ
===========================*/
.w2 {
  padding: 3% 0 2%;
}
.map_area {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: center;
}
.map_area li:first-child {
  width: 40%;
}
.map_area li:last-child {
  width: 50%;
}
li.txt2 {
  font-size: 1.2em;
  line-height: 2.5;
}
.w2_photo_area {
  width: 80%;
  margin: 0 auto;
  padding: 3% 0 0;
  display: flex;
  justify-content: space-around
}
@media screen and (max-width: 768px) {
  li.txt2 {
    font-size: 1em;
    line-height: 2;
  }
}
@media screen and (max-width: 600px) {
  .w2 {
    padding: 8% 0;
  }
  .map_area {
    display: block;
  }
  .map_area li:first-child {
    width: 100%;
    text-align: left;
  }
  .map_area li:last-child {
    width: 100%;
  }
  .w2_photo_area {
    width: 100%;
  }
}
/*===========================
	オンラインツアー
===========================*/
.online_tour {
  background: #F3C544;
  padding: 3% 0 2%;
  position: relative;
}
.ot_bk_l {
  position: absolute;
  left: 3%;
  width: 10%;
}
.ot_bk_r {
  position: absolute;
  right: 3%;
  width: 10%;
}
.txt2 {
  text-align: left;
  font-size: 1.3em;
  font-weight: bold;
}
.txt3 {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}
.mainset_area {
  display: flex;
}
.mainset1 {
  width: 45%;
  text-align: center;
  display: block;
  margin: 2% auto;
  color: #FFF;
  padding: 10px 2%;
  font-size: 1.35em;
  font-weight: bold;
  border-radius: 30px;
  background: linear-gradient(#ffb806, #fc5672);
}
.mainset2 {
  width: 45%;
  text-align: center;
  display: block;
  margin: 2% auto;
  color: #FFF;
  padding: 10px 2%;
  font-size: 1.35em;
  font-weight: bold;
  border-radius: 30px;
  background: linear-gradient(#99ff00, #00cc99);
}
.omiya_area {
  background: #F3C544;
  margin: 0 0 3%;
  padding: 3.5% 2% 2%;
}
.omiya {
  display: flex;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}
.icon_beer {
  padding-right: 5%;
}
.ot_box {
  margin: 3% auto;
  background: #FFF;
  width: 70%;
  padding: 3% 2.5%;
  position: relative;
}
.ot_box2 {
  padding: 0 !important;
}
.ot_box2 {
  background: url("../ehimecraftbeer/images/ot_img.png") no-repeat center;
  background-size: contain;
  width: 70%;
  height: 430px;
}
.ot_box3 {
  background: url("../ehimecraftbeer/images/ot_img2.png") no-repeat center;
  background-size: contain;
  width: 70%;
  height: 430px;
}
.otbox_bk_l {
  position: absolute;
  top: 10px;
  left: 10px;
}
.otbox_bk_r {
  position: absolute;
  top: 10px;
  right: 10px;
}
.ot_ribbon {
  text-align: center;
  padding-bottom: 3%;
}
.ot_item2 {
  display: flex;
  color: #00913A;
  justify-content: center;
}
.ot_item2 li:first-child {
  width: 32%;
  padding: 3% 2%;
  border: 1px solid #F39700;
  border-radius: 10px;
  font-size: 0.8em;
  text-align: center;
}
.ot_item2 li:first-child a:hover {
  color: #F39700;
}
.ot_item2 li:last-child {
  width: 58%;
  margin: 0 3% 0 3%;
}
.ot_item li:last-child .ot_date, .ot_item2 li:last-child .ot_date {
  font-size: 1.1em;
  font-weight: bold;
}
.ot_item li:last-child .ot_ttl, .ot_item2 li:last-child .ot_ttl {
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 5%;
}
.ot_item {
  display: flex;
  color: #00913A;
  justify-content: center;
}
.ot_item li:first-child {
  width: 38%;
  padding-right: 2%;
}
.ot_link {
  display: block;
  color: #00913A;
  text-decoration: underline;
  padding-bottom: 5px;
}
.ot_link:hover {
  opacity: 0.6;
}
.ot_link::after {
  font-family: "Font Awesome 5 Free";
  content: '\f0da';
  font-weight: 900;
}
.ot_box_area {
  display: flex;
  width: 90%;
  margin: 0 5%;
}
.border_bottom_shiro {
  border-bottom: 3px dotted #FFF;
}
.ot_box_end {
  width: 60%;
  margin: 3% 0;
  background: #FFF;
  padding: 3% 1%;
}
.ot_box_movie div{
	margin: 0 0 0 10%;
}
.ot_box_movie div:first-child{
	margin: 10% 0 3% 10%;
}
.ot_box_movie iframe {
  width: 27vw;
  height: 35vh;
}
@media screen and (max-width: 768px) {
  .ot_bk_l, .ot_bk_r {
    width: 12%;
  }
  .ot_box_area {
    display: block;
  }
  .ot_box_end {
    width: 100%;
    margin: 10% auto;
  }
  .ot_box {
    width: 90%;
    padding: 5%;
    margin: 5% auto 0;
  }
  .ot_box_movie iframe {
    width: 100%;
    height: 40vh;
    margin: 0 auto 5%;
  }
  .ot_box_movie {
    padding-bottom: 7%;
    border-bottom: 1px solid #000;
  }
  .ot_ttl {
    font-size: 1.3em;
  }
  .ot_box2, .ot_box3 {
    height: 300px;
  }
  .box_btn span {
    padding: 10px 50px !important;
  }
}
@media screen and (max-width: 600px) {
  .online_tour {
    padding: 5% 0;
  }
  .mainset_area {
    display: block;
    margin: 5% 0 8%;
  }
  .mainset1, .mainset2 {
    width: 90%;
    font-size: 1.1em;
    padding: 10px 20px;
    margin-bottom: 5%;
  }
  .ot_item {
    display: block;
  }
  .ot_item li:first-child {
    width: 100%;
  }
  .ot_box2, .ot_box3 {
    height: 150px;
  }
  .txt2 {
    margin: 5% 0;
  }
  .border_bottom_shiro {
    padding-top: 7%;
  }
.ot_box_movie{
	width: 100% !important;
}	
  .ot_box_movie iframe {
    width: 100%;
    height: 30vh;
    margin: 5% auto;
  }
  .ot_item2 {
    display: block;
  }
  .ot_item2 li:last-child {
    width: 90%;
    margin: 0 auto;
  }
  .ot_item2 li:first-child {
    width: 75%;
    margin: 0 auto 5%;
  }
}
/*===========================
	otsumami_area
===========================*/
/*===========================
	box_btn
===========================*/
.box_btnarea {
  text-align: center;
  margin: 3% 0 0;
}
.box_btn, .box_btn_end {
  position: relative;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  background: transparent;
  border-radius: 35px;
  outline: none;
  transition: all 0.2s ease;
}
.box_btn_end {
  border: 1px solid rgba(253, 7, 11, 1.00);
}
.box_btn span, .box_btn_end span {
  font-size: 1em;
  font-weight: 700;
  position: relative;
  z-index: 2;
  display: block;
  padding: 10px 100px;
  background: #FFF;
  border-radius: 35px;
  color: #000;
  transition: all 0.3s ease;
}
.box_btn span::after {
  font-family: "Font Awesome 5 Free";
  content: '\f0da';
  font-weight: 900;
  padding-left: 20px;
}
.box_btn:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  border-radius: 35px;
}
.box_btn:hover {
  border-color: transparent;
}
.pushright:hover span {
  background-color: #E49812;
  color: #fff;
  transform: translate(4px, 4px);
}
.pushright2:hover span {
  background-color: #00913A;
  color: #fff;
  transform: translate(4px, 4px);
}
.pushright3:hover span {
  background-color: #76AF2B;
  color: #fff;
  transform: translate(4px, 4px);
}
.pushright4:hover span {
  background-color: #B9D300;
  color: #fff;
  transform: translate(4px, 4px);
}
.pushright5:hover span {
  background-color: #45AAB9;
  color: #fff;
  transform: translate(4px, 4px);
}
.pushright6:hover span {
  background-color: #00569A;
  color: #fff;
  transform: translate(4px, 4px);
}
.pushright7:hover span {
  background-color: #643919;
  color: #fff;
  transform: translate(4px, 4px);
}
.pushright8:hover span {
  background-color: #887755;
  color: #fff;
  transform: translate(4px, 4px);
}
.b-orange {
  border: solid 1px #E49812;
}
.b-orange:before {
  background-color: #E49812;
}
.b-green1 {
  border: solid 1px #00913A;
}
.b-green2 {
  border: solid 1px #76AF2B;
}
.b-green3 {
  border: solid 1px #B9D300;
}
.b-blue {
  border: solid 1px #45AAB9;
}
.b-blue2 {
  border: solid 1px #00569A;
}
.b-brown {
  border: solid 1px #643919;
}
.b-gray {
  border: solid 1px #887755;
}
.b-green1:before {
  background-color: #00913A;
}
.b-green2:before {
  background-color: #76AF2B;
}
.b-green3:before {
  background-color: #B9D300;
}
.b-blue:before {
  background-color: #45AAB9;
}
.b-blue2:before {
  background-color: #00569A;
}
.b-brown:before {
  background-color: #643919;
}
.b-gray:before {
  background-color: #887755;
}
.target {
  pointer-events: none;
}
@media screen and (max-width: 600px) {
  .box_btn span, .box_btn_end span {
    font-size: 1.2em !important;
  }
  .box_btnarea {
    margin: 8% 0;
  }
  .sp_ex {
    font-size: 12px;
    margin: 0 5%
  }
  .box_btn_end span {
    padding: 10px 20px;
  }
}
/*===========================
	Brewery
===========================*/
.brewery {
  padding: 3% 0 2%;
}
.brewery_box {
  margin-bottom: 4%;
}
.brewery_box ul {
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  border: 1px solid #000;
  padding: 3%;
}
.reverce {
  flex-direction: row-reverse;
}
.brewery_box ul li dl dt::before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("../ehimecraftbeer/images/icon_star.png");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
}
.brewery_box2 {
  margin: 4% 0;
}
.brewery_box2 ul li dl dt::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("../ehimecraftbeer/images/icon_star.png");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
}
.brewery_box_txt {
  width: 650px;
}
.brewery_box ul li dl dt {
  font-size: 1.4em;
  font-weight: bold;
  display: inline-block;
  padding: 1% 3%;
  color: #FFF;
}
.brewery_box2 ul li dl dt {
  width: 100%;
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  padding: 2%;
  color: #FFF;
}
.brewery_box ul li dl dd {
  width: 100%;
  font-size: 1.2em;
  margin: 3% 0 5%;
  line-height: 2;
}
.DD4D {
  background: #00913A;
}
.omishima {
  background: #76AF2B;
}
.bakushuku {
  background: #B9D300;
}
.dougo {
  background: #45AAB9;
}
.umenishiki {
  background: #00569A;
}
.imabari {
  background: #643919;
}
.garyu {
  background: #887755;
}
.brewery_box ul li:first-child {
  padding: 0 3.8%;
}
.brewery_box2 ul {
  display: flex;
  width: 70%;
  margin: 0 auto;
  justify-content: space-between;
}
.brewery_box2 ul li {
  width: 47%;
  padding: 2%;
  border: 1px solid #000;
}
.brewery_box2 ul li dl dd {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .brewery_box ul, .brewery_box2 ul {
    width: 95%;
  }
  .brewery_box2 ul li {
    width: 48.5%;
  }
  .brewery_box ul li:first-child {
    padding: 0 3%;
  }
  .brewery_box ul li dl dt::before, .brewery_box2 ul li dl dt::before {
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }
  .brewery_box2 ul li dl dt {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 600px) {
  .brewery {
    padding: 8% 0 2%;
  }
  .brewery_box ul {
    width: 100%;
    display: block;
    margin-top: 5%;
    margin-bottom: 8%;
  }
  .brewery_box ul li:first-child {
    padding: 1% 0 5%;
    width: 100%;
  }
  .brewery_box ul, .brewery_box2 ul {
    width: 90%;
    display: block;
  }
  .brewery_box2 ul li {
    width: 100%;
    margin-bottom: 8%;
  }
  .brewery_box ul li dl dt {
    width: 100%;
  }
}
/*===========================
	beer link
===========================*/
.beer_link {
  width: 100%;
  height: 50vh;
  background: url("../ehimecraftbeer/images/beer_link_bk.png") center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.beer_link_btnarea {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
}
.beer_link_btn {
  display: inline-block;
  text-align: center;
  border-radius: 35px;
}
.beer_link_btn span {
  font-size: 1.3em;
  font-weight: 700;
  position: relative;
  z-index: 2;
  display: block;
  padding: 20px 100px;
  background: #E49812;
  border-radius: 45px;
  color: #FFF;
  transition: all 0.3s ease;
}
.beer_link_btn span::before {
  font-family: "Font Awesome 5 Free";
  content: '\f06b';
  font-weight: 900;
  padding-right: 20px;
}
.beer_link_btn span::after {
  font-family: "Font Awesome 5 Free";
  content: '\f0da';
  font-weight: 900;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  .beer_link {
    width: 100%;
    height: 30vh;
  }
  .beer_link_btnarea {
    width: 90%;
    margin: 0 2.5%;
    left: 58.5%;
  }
}
@media screen and (max-width: 600px) {
  .beer_link {
    width: 100%;
    height: 20vh;
  }
  .beer_link_btnarea {
    left: 53.5%;
  }
  .beer_link_btn span {
    font-size: 1em;
    padding: 10px 20px 15px;
  }
  .beer_link_btn span::after {
    display: none;
  }
}
/*===========================
	modal
===========================*/
.modal-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background-color: #dfdddd;
  border-radius: 5px;
  z-index: 11;
  padding: 2rem;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 1.5);
  width: 100%;
  height: 100%;
  z-index: 10;
}
.modal_txt {
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
}
.modal_btnarea {
  display: block;
  width: 80%;
  margin: 8% auto;
  padding: 8px 100px;
  text-align: center;
  font-size: 1.5em;
  border: 2px solid #E49812;
  background: #FFF;
}
.modal_btnarea:hover {
  background: #E49812;
  color: #FFF;
}
.modal_btnarea::after {
  font-family: "Font Awesome 5 Free";
  content: '\f0da';
  font-weight: 900;
  padding-left: 10px;
}
/* 閉じるボタン */
.button-close {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  padding: 1em;
  background-color: #414040;
  color: #FFF;
  border-radius: 20rem;
  cursor: pointer;
}