@charset “utf-8”;

/*CSS(フォントと色)をロード*/
@import url("font_and_color.css");

/*CSS(ヘッダー(ナビゲーションバー))をロード*/
@import url("header_nav.css");


body {
  padding-top: 0px;
  height: 2000px;
  width:960 pax;
  min-width: 960px;
  background-color: #FFFFFF; 
  margin:0px;
  
  /*default font*/
    /*指定のフォントがない場合明朝体(serif)にする*/
  font-family:  Times, 'Times New Roman', serif;
  color: #444;
}


main {
  width: 100%;
  text-align:center;
  clear: left;
}

.パンくず{
  width:800px;
  margin:0 auto;
  padding-left:0px;
}
.パンくず li{
  float : left;
  list-style : none ;
  color: #444;
}
.パンくず li:last-child{
  border-bottom: dotted 1px #444;
}
.パンくず li:after{
  content:"»";
  margin : 0 1em ;
}
.パンくず li:last-child:after {
    content : none ;
}
.パンくず a:link, a:visited{
  color: #444;
}
.パンくず span{
vertical-align: -3px ;
}

/*トップタイトル*/
.top_title div{
  text-align: center;
  list-style: none;
  margin: 100px 0px 50px 0px;
}
.top_title h1{
  text-align: center;
  margin: 50px 0px 0px 0px;
}

.top_title small {
  font-size: .6em;
}

.description div{
  list-style: none;
}


.f-container3{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;/* 幅 */
  text-align: center;/* 文章を中央揃えに */
  list-style-type: none;/* 項目のドットを削除 */
}

.f-container4{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;/* 幅 */
  text-align: center;/* 文章を中央揃えに */
  list-style-type: none;/* 項目のドットを削除 */
}

.f-container4 ul{
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
}


.f-container5 div{
  max: 70%;
  max-width: 600px;/* 最大幅 */
  margin: 0 auto;
  vertical-align: bottom;/* 画像間の隙間をなくす */
}


.f-container5 div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
  margin: 0 auto;
}




/*汎用6*/
.f-container6{
  border: solid 1px #BBD7E8;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0px 0px 10px 0px;
}

.f-container6 .d1 {/*見出し*/
  Background-color: #BBD7E8;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.f-container6 .d2 {/*上側コンテナ*/ 
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.f-container6 .d3 {/*中央コンテナ*/
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: flex-start;    /*全ての要素の高さを揃える*/
}

.f-container6 .d3 {/*中央コンテナの各リスト*/
  margin: 5px;
  text-align: left;
}

.f-container6 .d4 {/*下側コンテナ*/
  display: flex;
  align-items: center;
  justify-content: center;
  
}







/*vulgaris25.html*/
.box1{
  display: flex;
  width: 65%;/* 中央からの幅 */
  min-width: 65%;
  margin: auto;
}
.box1 ul{
  list-style-type: none;
  min-width: 65%;/* 文章を折り返しさせる */
  padding: 0; /* 左にできる隙間を消す */
}






/*coffee.htmlのCSS*/



/*contact.htmlのCSS*/
.contact{
  display:flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0px 30px 0px;
}

.contact div{

  
}

.contact li {
  list-style: none;
}


/*画像ギャラリー*/
.画像ギャラリー div{
margin:0 auto;
}
.画像ギャラリー div div{
  display: flex;
  max-width: 70%;
  flex-wrap: wrap;
  justify-content: space-around;
  
}

.画像ギャラリー div div img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  box-shadow: 6px 6px 6px -3px rgba(0, 0, 0, 0.8);
  }
.画像ギャラリー div div li{
  display: flex;
  max-width: 70%;
  list-style-type: none;
  margin: 10px;
}
.画像ギャラリー div div li p{
  text-align: center;
}


/*contact.htmlのsection id="imege-objects"で使用*/

/*live_art.htmlのCSS*/
.旬舌旬話 {
  margin: 100px 0px 0px 0px;
  display: flex;
  Justify-content: center;
}

.旬舌旬話 .item1 img{
  width: 100px;
}


.f-box3{
  width: 700px;
  display: flex;
  flex-direction: column;
}

.f-box3 .d1{
  display: flex;
  flex-direction: row;/*横並び*/
  align-items: flex-start;/*横並びなら左配置*/

  position: relative;
  list-style-type: none;
}
.f-box3 .d1-1{/*縦並び。画像の次に見出し*/
  display: flex;
  flex-direction: column;/*縦並び*/
  justify-content: flex-start;/*左詰め*/
  align-items: flex-start;
  list-style-type: none;
}

/*のぼってみませんかとやまのてっぺん*/
.f-box3 > .d1 >.d1-1 > .header {
  position: relative;
  text-align:center;
}
.f-box3 > .d1 >.d1-1 > .item1 {
  position: absolute;
  top: 50%;
  left: 33%;
}

/*ちょっとお洒落なおさそい*/
.f-box3 > .d1 >.d1-1 > .header {
  position: relative;
  text-align:center;
}
.f-box3 > .d1 >.d1-1 > .item2 {
  position: absolute;
  top: 50%;
  left: 37%;
}

.f-box3 .d2{/*横並びの画像と文章*/
  display: flex;
  flex-direction: row;/*横並び*/
  /*中央寄せ*/
  align-items: center;
  justify-content: space-around;
  
  list-style-type: none;
}

.f-box3 .d2 li{
  text-align: center;/*文章を中央寄せ*/
}

.f-box3 .d2 img{
  width: 80;
}

.f-box3 .d2 .item3{
  width: 150px;
  height: 120px
}

.f-box3 .d3{
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
}

/*珈琲紹介*/
.coffee{
  width: 700px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 0 50px 0;
}
.coffee  {
  Display: flex;
  flex-direction: row;
  
}
.coffee  .history {
  width:320px;
  Background-color: lavender;
  List-style:none;
}
.coffee  h3 {
  text-align: center;
}
.coffee  li {
  text-align: left;
  padding: 10px;
}
.coffee  .history div{
  padding: 0px 10px 5px 10px;
  line-height: 1.2em;
}

/*呉羽山頂 魔法の泉 呉仁館 天然水*/
.CoffeePrice {
  width:280px;
  height:300px;

  List-style:none;
  Padding: 2px;
  Margin: 0 0 0 30;
}
.CoffeePrice__Outer{
   display: flex;
   flex-direction: column;
   list-style: none;
   border-style: solid;
   border-color: #05c575;
   border-width: 1px;;
   
}
.CoffeePrice__InnerTitle {
  text-align: center;
  Color: #fff;
  Background-color: #05c575;
}
.CoffeePrice__InnerText{
  background-color: #fff;
  text-align: center;
  list-style: none;
  padding: 4px;
  
}
.CoffeePrice__InnerText__Menu{
  display:flex;
  Justify-content: center;
  text-align: left;
  line-height: 1.5em;
}
.CoffeePrice__InnerText__Menu__LeftBox{
  text-align: center;
  padding: 0px 10px 0px 0px;
}
.CoffeePrice__InnerText__Menu__RightBox{
  padding: 0px 0px 0px 10px;
}

/*section(live&gallery)で使用。
内部のコンテナはstyle.cssから汎用クラスを適用*/
.live_gallery {
  display: flex;
  Justify-content: center;
}

.live_gallery > div {
  width: 700px;
  display: flex;
  justify-content: center;
  margin: 0px 0px 50px 0px;
  
  /*上下に線を引く*/
  border: solid 3px #ccc ;
  border-left: none;
  border-right: none;
}

.live_gallery section {
  margin: 10px;
}

.live_gallery li {
  list-style: none;
}

.box5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*contents.htmlのCSS*/

.旬舌旬話ようこそ先輩__text1{
  margin: 0 0 0 0;
}
.旬舌旬話ようこそ先輩__text1 li{
  list-style: none;
}
/*ボタン*/
.旬舌旬話ようこそ先輩__btn-flat-vertical-border {
  position: relative;
  display: inline-block;
  margin: 10px 0px 10px 0px;
  font-weight: bold;
  padding: 0.5em 1em;
  text-decoration: none;
  border-left: solid 4px #8d476a;
  border-right: solid 4px #8d476a;
  color: #8d476a;
  background: #FFF;
  transition: .4s;
}
.旬舌旬話ようこそ先輩__btn-flat-vertical-border:hover {
  background: #478d6a;
  color: #FFF;
  text-decoration: none;
}

.薬業王国呉羽__text1{
  margin: 0 0 0 0;
}
.薬業王国呉羽__text1 li{
  list-style: none;
}
/*ボタン*/
.薬業王国呉羽__btn-flat-vertical-border {
  position: relative;
  display: inline-block;
  margin: 10px 0px 10px 0px;
  font-weight: bold;
  padding: 0.5em 1em;
  text-decoration: none;
  border-left: solid 4px #478d6a;
  border-right: solid 4px #478d6a;
  color: #478d6a;
  background: #FFF;
  transition: .4s;
}
.薬業王国呉羽__btn-flat-vertical-border:hover {
  background: #478d6a;
  color: #FFF;
  text-decoration: none;
}

.愛と平和の音楽祭__text1{
  margin: 0 0 0 0;
}
.愛と平和の音楽祭__text1 li{
  list-style: none;
}
/*ボタン*/
.愛と平和の音楽祭__btn-flat-vertical-border {
  position: relative;
  display: inline-block;
  margin: 10px 0px 10px 0px;
  font-weight: bold;
  padding: 0.5em 1em;
  text-decoration: none;
  border-left: solid 4px #8d6a47;
  border-right: solid 4px #8d6a47;
  color: #8d6a47;
  background: #FFF;
  transition: .4s;
}
.愛と平和の音楽祭__btn-flat-vertical-border:hover {
  background: #8d6a47;
  color: #FFF;
  text-decoration: none;
}

/*maxf.htmlのCSS*/
.text1{
  margin: 0 0 0 0;
}
.text1 li{
  list-style: none;
}


/*ボタン*/
.btn-flat-vertical-border {
  position: relative;
  display: inline-block;
  margin: 10px 0px 10px 0px;
  font-weight: bold;
  padding: 0.5em 1em;
  text-decoration: none;
  border-left: solid 4px #478d6a;
  border-right: solid 4px #478d6a;
  color: #478d6a;
  background: #FFF;
  transition: .4s;
}

.btn-flat-vertical-border:hover {
  background: #478d6a;
  color: #FFF;
  text-decoration: none;
}


/*maxf2.htmlのCSS*/
/*縦並びで中央配置*/
.vcenter{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0px 10px 0px;
}
.vcenter li{
  list-style-type: none;
}

.profile {
  display: flex;
  Justify-content: center;
  
}

.profile > div {
  width: 700px;
  display: flex;
  justify-content: center;
  margin: 0px 0px 0px 0px;
 
}

.profile section {
  margin: 0px;
}

.profile li {
  list-style: none;
}
/*汎用6より引用*/
.f-container8{
  /*border: solid 1px #BBD7E8;*/
  width: 700px;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0px 0px 0px 0px;
}

.f-container8 .d1 {/*見出し*/
  Background-color: #BBD7E8;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.f-container8 .d2 {/*上側コンテナ*/ 
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.f-container8 .d3 {/*中央コンテナ*/
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: flex-start;    /*全ての要素の高さを揃える*/
}

.f-container8 .d3 {/*中央コンテナの各リスト*/
  margin: 5px;
  text-align: left;
}
.f-container8 .d3 li {/*中央コンテナの各リスト*/
  margin: 10px;
  
}

.f-container8 .d3 img{
  width: 150px;

}
.f-container8 .d4 {/*下側コンテナ*/
  display: flex;
  align-items: center;
  justify-content: center;
  
}



/*msc.htmlのCSS*/
/*汎用7*/
/*見出し*/
.f-container7 h1{
  text-align: center;
}


/*色付きコンテナ全体*/
.f-container7  .d1{
  max-width: 900 ;/* 最大幅 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  list-style-type: none;
}



/*各コンテナ*/
.f-container7 .d1 li{
  height: ;
}
/*コンテナタイトル(濃い色の背景)*/
.f-container7 .d1 .artist h2{
  max-width: 300px;
  text-align: center;
  margin:0;
}

/*コンテンツ本文(薄い色の背景)*/
.f-container7 .d1 .artist div{
  max-width:300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}


/*(1)写真*/
.f-container7 .d1 .artist .item1{
  text-align: center;
  
}
.f-container7 .d1 .artist .item1 img{
  width: 200px;
  height: 210px;
  margin: 10px;
}

.f-container7 .d1 .artist .style7-1{
  height: 250px;
  padding: 10px;
}

.f-container7 .d1 .artist .bottom{
  position:static;
  bottom: 10px;
  Text-align: center;
}


/*rgjnkn.htmlのCSS*/
.documents div{
  width: ;/* 中央からの幅を指定 */
}
.documents{
  /*縦に積む*/
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /*中央寄せ*/
  justify-content: center;
  align-items: center;
}

.documents li {
  list-style-type: none;/* 項目のドットを削除 */

}

.documents img { 
  vertical-align: bottom;/* 画像間の隙間をなくす */
  width: 900px;
  max-width: 900px;/* 中央からの幅に対してどれだけの比率にするか */
}

.pdf{

  /*縦に積む*/
  display: flex;
  
  /*中央寄せ*/
  justify-content: center;
  align-items: center;
}

/*twfmf.htmlのCSS*/
/*

*/


/*vulgaris25.htmlのCSS*/
.VulgariseTitle {
  list-style: none;
  margin: 100px 0px 50px 0px;
}
.VulgariseTitle__Img1{
  width: 580px;
  height: 70px;
}
.VulgariseTiitle__Img2{
  width: 620px;
  height: 110px;
}

.VulgarisePictures{
  display: flex;
  flex-direction: row;
  justify-align: center;
  list-style: none;
}
.VulgarisePictures .VulgarisePictures__InGojinkan{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}
.VulgarisePictures__InGojinkan--Layer1{
  color: #000;
}

.oogaki-kinen{
  display: flex;
  flex-direction:column;
  align-items: center;
  margin: 20px;
}
.oogaki-kinen__image {
  width: 900px;
  margin: 20px
}

/*vulgaris25eng.htmlのCSS*/
/*

*/

/*welcome.htmlのCSS*/
/* 
    MainVisual 「メインビジュアル」（親）
                                                                      */
.MainVisual {
  display: flex;
  flex-direction: column;
  background-color: #5E7FCC;
  border: 0px;
  padding: 0px;
  list-style: none;
}
/* MainVisual__Title 「タイトル」（子1） */
.MainVisual__Title {
  display: flex;
  flex-direction: column-reverse;/*flexコンテナを下部に配置する*/
  background-color: #5E7FCC;
  height: 130px;/*空部分の高さ*/
  border: 0px;
  padding: 0px;
}
/* MainVisual__Title--Image 「タイトル（子1）の画像本体」（子1の子） */
.MainVisual__Title--Image {
}
.MainVisual__Title--Image img {
  align-items: center;
  max-width: 100%;
  height: auto;
}
/* MainVisual__Background「背景となるくりかえし立山連峰の画像」（子2） */
.MainVisual__Background {
  background-image: url(../images/top_town-01.jpg);
  padding: 0px;
  border: 0px;
  width: 100%;
}
.MainVisual__Background img{
  width: 20px;
  height: 120px;/*156px;*/
  padding: 0px;
  border: 0px;
  vertical-align: bottom;
}

/* 
    NaturalGoodtasteと呉羽山頂呉仁館 
                                                                   */
.NaturalGoodtasteと呉羽山頂呉仁館呉羽山頂呉仁館 {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin-top: 20px;
}
.NaturalGoodtaste img {
  width: 300px;
  /*height: 51px;*/
}

.自然のままに、おいしいひとときを。{
  width: 245px;
  margin-bottom: 10px;
}



.呉羽山頂呉仁館呉羽山頂呉仁館 img {
  margin-top:10px;
  margin-bottom:10px;
}
.CafeRestaurant {
  font-family: Times, 'Times New Roman', serif;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 20px;
  color: #584698;
  line-height: 0.3em;/*文字の行間を狭める*/
  font-size: 28px;
  font-style: italic;
  margin: 5px 0px 10px 0px;
}


/* つぼ画像とタイトル */
}
.つぼ画像とタイトル {
  list-style-type: none;/* 項目のドットを削除 */
  position: relative;/* 親の位置 */
  
}
/* つぼ画像とタイトル__つぼ画像 */
.つぼ画像とタイトル__つぼ画像 {
  list-style-type: none;/* 項目のドットを削除 */
  vertical-align: bottom;
  width: 300px;
  height: 225px;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}
/* つぼ画像とタイトル__タイトル */
.つぼ画像とタイトル__タイトル--black {
  position: absolute;/* 子の位置 */
  transform: translate(-50%, -50%);
  font-size: 100px;
  top: 172px;
  left: 50%;
  color: #444;
  z-index: -1;
}
.つぼ画像とタイトル__タイトル--white {
  position: relative;
  width: 100%;
  height: 225px;
  /*overflow: hidden;*/
}

.つぼ画像とタイトル__タイトル--white::after {
  position: absolute;/* 子の位置 */
  transform: translate(-50%, -50%);
  font-size: 100px;
  top: 10px;
  left: 50%;
  content: "Gojinkan";
  white-space: pre;
  font-weight:bold;
  text-shadow: 1px -2px 0 white;
  color: #584698;/*青色系なら#584698 灰色系なら#444*/
  z-index: 1;
}


/*
   立山連峰
                  */
.立山連峰 {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 list-style: none;
 margin: 0px 0px 0px 0px;
}
.立山連峰__タイトル h2{
  color: #584698;
  font-weight:bold;
}
.triangle{
  width: 0px;
  height: 0px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid black;
}
.立山連峰__image01 div{
  position: relative;
  width: 600px;
  height: 100px;
  overflow:hidden;
  margin: 0px;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}
.立山連峰__image01 div img {
  position: absolute;
  transform: translate(-50%, 0%);
  width: 105%;
  height: 100%;
  object-fit: cover;
  margin: 0px;
}
.立山連峰__image01--text {
  padding: 0px;
  margin: 0px 0px 30px 0px;
}
.立山連峰__image02 div{
  position: relative;
  width: 600px;
  height: 100px;
  overflow:hidden;
  margin: 0px;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}
.立山連峰__image02 div img {
  position: absolute;
  transform: translate(-50%, 0%);
  width: 105%;
  height: 100%;
  object-fit: cover;
  margin: 0px;
}
.立山連峰__image02 p {
  padding: 0px;
  margin: 0px 0px 30px 0px;
}

.日本海{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 list-style: none;
 padding: 0px 0px 0px 0px;
}

.omijin img{
Margin: 50px 0px 50px 0px;
width:70%;
}

.日本海__image01 img {
width:100%;
}

.言葉{
  font-family: serif;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 20px;
  color: #000;
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;/* 幅 */
  text-align: left;/* 文章を中央揃えに */
  list-style-type: none;/* 項目のドットを削除 */
}