@charset "UTF-8";

/*------------共通部分------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
}

html {
  font-size: 100%;
  font-size: 13px;
  font: inherit;
}

body {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Meiryo UI", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
  line-height: 1.7;
  letter-spacing: 0.1rem;
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  background-color:#F0F0F0;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
}

input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

.bold {
  font-family: "ヒラギノ角ゴ ProN W3 bold", sans-serif;
  font-weight: 800;
}

.white {
  background-color: #FFFFFF;
}

.center {
  text-align: center;
}


/*------------
top
------------*/
.container{
	background-color:#F0F0F0;
}

#main {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
	margin-top:110px;
}

.top {
  display: block;
  max-width: 100%;
  height: 460px;
  position: relative;
  background-image: url("../img/selection/top_image.jpg");
}

.top_text {
  position: absolute;
  top: 40%;
  left: 6%;
  color:#FFFFFF;
}

.top_text h1{
  color:#FFFFFF!important;
}

.top_text .title {
  /*font-family: "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
  font-size: 38px;
}

.top_text h2 {
  font-family: Futura,Arial,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Meiryo UI", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
  font-size: 17px;
  letter-spacing: 0.15rem;
  padding-top: 2%;
}

h3{
	padding: 5% 0% 1% 0%;
	font-size: 20px;
}

.sommelier_list {
	display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
	list-style: none;
}

@media screen and (max-width:850px) {
   .top {
 	 height: 300px;
	 position: relative;
  	 background-image: url("../img/selection/top_image_tb.jpg");
	 background-repeat: no-repeat;
  }
  .top_text .title {
    font-size: 30px;
    line-height: normal;
  }
  .top_text {
    position: absolute;
    top: 35%;
    left: 6%;
    color:#FFFFFF;
  }
  .top_text {
    left: 10%;
  }
  .top_text h2 {
    font-size: 14px;
  }
  h3{
	padding: 5% 0% 2% 10%;
	font-size: 15px;
  }
  .sommelier_list {
	display: block;
  }
  .sommelier_list li{
	padding: 0% 10% 5% 10%;
  }
}

@media screen and (max-width:400px) {
	#main {
		margin-top:70px;
	}
   .top {
 	 height: 150px;
	 position: relative;
  	 background-image: url("../img/selection/top_image_sp.jpg");
	 background-repeat: no-repeat;
  }
  .top_text {
    top: 25%;
    left: 10%;
  }
  .top_text .title {
    font-size: 20px;
	padding-bottom: 1%;
  }
  .top_text h2 {
    font-size: 12px;
	letter-spacing: 0.05rem;
	line-height: 1.5;
  }
}