@charset "UTF-8";
/*共通部分
----------------------------------------------*/
html{
    font-size: 62.5%;
    font-family： 'M PLUS Rounded 1c'、sans-serif;
}
body{
    margin: 0;
    padding: 0;
}
/*スマホ向け559px以下---------------------文字サイズは300px~819px---820px~1280px対応させる-------デザインはレイアウト崩れあるからこまめに変更----560px~819px-----820px~1280pxまで---------*/

#wrapper{
    line-height: 1.7;
    max-width: 559px;
    min-width: 300px;
    width: 100%;
    height: 100%;
    padding: 0.1%;
    min-height: 100vh;
    margin: 0 auto;
    background-image: linear-gradient(to bottom right, #ffffff, #EEFFFF);
}

/*ロゴメニューヘッダー-------------------------------------------共通部分-----------*/
.logo{
    width: 100%;
    height: 100%;
    margin:0 auto;
    position: relative;
}
.logo img{
     width: 100%;
     height: 100%;
     object-fit: fill;
}
.logoButton{
     width: 100%;
     height: 100%;
     display: block;
}
/*ロゴメニュー全体　ヘッダーボタンナビ常に画面上に浮かせるためにfixed指定！！！*/
#logoNav{
     max-width: 1920px;/*ここで最大のサイズ決めとけば、レスポンシブコード書く必要なくなる*/
     margin: 0 auto;
     width: 100%;
     padding: 0.1%;
     height: 60px;  /*スクロールナビの高さ幅。*/
     position:fixed; /*ヘッダーボタンナビ常に画面上に浮かせるためにfixed指定！！！*/
     display: block;
     z-index: 10; /*常に画面上部にしたいからz-ondex指定*/
     background-color: white; /*画像くるまで使用----------------------------------*/
}

.logoTitle{
    display: block;
    position: absolute;
    top: 4px;
    width: 170px;
    height: 50px;
}
.logoTitle a:hover{
   opacity: 0.7;
}
.logoTitle img{
   width: 100%;
   height: 100%;
   object-fit: fill;
}

/*ハンバーガーメニューボタン-------------------------------*/
.btn {
  /* ボタンの配置位置  */
  position:absolute;/*#logoNav端に配置するため*/
  top: 10.2px;
  right: 16px;
  /* ボタンの大きさ  */
  width: 40px;
  height: 40px;
  /* 最前面に */
  background-image: linear-gradient(to top right,#434241,#ffffff);
  display: block; /*ブロック要素にする*/
  cursor: pointer;
}
/* 上ののバーガー線 --------------------------------------------*/
.btn-line0 {
	display: block;
	position: relative;  /* バーガー線の位置基準として設定 */
  bottom: 12px;
	width: 100%;  /* 線の長さと高さ */
	height: 4px;
  background-image: linear-gradient(#684E08,#ffffff); /* バーガー線の色 */
}
/*真ん中のバーガー線------------------------------------------*/
.btn-line1{
   display: block;
   position: relative;  /* バーガー線の位置基準として設定 */
   width: 100%;  /* 線の長さと高さ */
   height: 4px;
   background-image: linear-gradient(#684E08,#ffffff); /* バーガー線の色 */
}
/*一番下のバーガー線----------------------------------------*/
.btn-line2{
  display: block;
  position: relative;  /* バーガー線の位置基準として設定 */
  top: 12px;
  width: 100%;  /* 線の長さと高さ */
  height: 4px;
  background-image: linear-gradient(#684E08,#ffffff); /* バーガー線の色 */
}

/*クリックされた時のバーガー線--------------------------------------------------*****/
.btn-line0.after {
  position: absolute;
  width: 100%;
  height: 4px;
  background-image: linear-gradient(#684E08,#ffffff); /* バーガー線の色 */
  transition: .5s;
  transform: translateY(-6px) translateX(0px) rotate(315deg);
}
.btn-line1.after {
  position: relative; /*クリックされた時のバーガー線の位置基準として設定 */
  width: 100%;
  height: 4px;
  background-image: linear-gradient(#684E08,#ffffff); /* バーガー線の色 */
  opacity: 0;
  transition: 1s; /*opacityとtransitionの秒数を指定してふわっと消えたように見せれる。*/
}
.btn-line2.after {
  position: absolute;
  width: 100%;
  height: 4px;
  transition: .5s;
  transform: translateY(6px) translateX(0px) rotate(-315deg);
}

/*メインナビ　リスト----------------------------:*/
#mainNav{
   width: 100%;
   height: 100%;
   margin: 0 auto;
   color: #ffffff;
   display: none;
   position: absolute; /*絶対位置指定しておかないと、アニメーションが始まる位置変わる*/
}
@keyframes move {
      0%{width: 33%; height: 33%};
      50%{width: 66%; height: 66%};
      100%{width: 100%; height: 100%};
}
#mainNav.on{
   display:block;
   width: 100%;
   height: 100%;
   padding: 0;
   animation-name: move;
   animation-duration: .4s;
   animation-timing-function: ease-out;
   z-index: 10;
}
.navList{
     background-color: rgba(0,0,0,0.8); /*ナビのバックグラウンド背景*/
}
.nav{
  display: block;
  text-align: center;
  border-bottom: dashed thin #c74438;
  padding-top: 6px;
}
.nav a{
  color: white;
  text-decoration-line: none;
  font-size: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14px~16pxで可変*/
}
.nav:hover{
  color: #c74438;
  background: linear-gradient(#110000,#111111);/*ナビホバー全体の背景色*/
}
.nav a:hover{
  color: #c74438;
  transition: color 0.2s;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}


/*TOPメイン画像----------------------------------------------------------------------------------------------------------*/
.mainImages{
    display: block;
    position: relative;
    top: 60px;
    width: 100%;
    height: 100%;/*メイン画像縦枠の大きさ指定----画像トリミングで縦45%になるように指定したから100%でおｋ*/
    margin: 0 auto;
    padding: 0.1% 0.1% 0.5% 0.1%; /*画面一杯だと見づらいから*/
}

/*PC時横枠はみ出た画像出力しない*/
.swiper-container {
  position: relative;
  overflow: hidden;
}
.swiper-container.visible {
  overflow: visible;
}

.imagesItem{
    width: 100%;
    height: 100%; /*メイン画像枠の大きさ----*/
    background-color: #000011;
}
.swiper-main img{
    width: 100%;
    height: 100%;
    object-fit: fill;
    cursor: grab;
}
.swiper-slide img{
   width: 100%;
   height: 100%;
   object-fit: fill;
   cursor: grab;
}


.imagesItem img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/*イメージ画僧----------フレックスボックス---------------------------------------------*/
.subImages{
    display: block;
    position: relative;
    top: 60px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.imgFlex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.ifItem{
     display: block;
     width: 48%;
     height: 48%; /*画像サイズバラバラなためpx指定。ファイル画像サイズ一緒なら%指定でできるからレスポンシブ楽*/
     padding: 0.5%;
}

.imgFlex img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.imgFlex a:hover{
    opacity: 0.5;
    cursor: pointer;
}

/*メインタイトル---------------------------------------------------*/
.mainTitle{
    display: block;
    position: relative;
    top: 60px;
    padding-top: 32px;
    width: 100%;
    margin: 0 auto;
}
.mainTitle h3{
    text-align: center;
    font-size: calc(2.0rem + (1vw - 0.30rem) * 0.3854); /*20px~22pxで可変*/
}
/*タイトルGOOD、spanタグ文字色-------------------------*/
.good{
     font-weight: bold;
}
.red{
     color:#FF00FF;
}
.blue{
     color: blue;

}
.yellow{
     color:#FF4F02;
}
.green{
     color: green;
}
/*メインタイトル文字上ミニグッド君イラスト*/
.goodItem{
     display: block;
     position: absolute; /*各デバイス変わっても高さはほぼ変わらないため。px指定*/
     bottom: 30px;
     right: 42%; /*各デバイスの幅広くなるにつれて場所変わってしまうため%指定*/
     width: 22px;
     height: 22px;
}
.goodItem img{
     width: 100%;
     height: 100%;
     object-fit: fill;
}

/*メインコンテンツ全体----------------------------------------------------------------------------------------------------------*/
.letterContent{
    display: block;
    position: relative;
    top: 60px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
/*メインコンテンツ１--三共食事株式会社--理想---願い--想い---------------------------------------------------------------*/
.letter1{
    display: block;
    position: relative; /*deco1の位置基準*/
    width: 100%;
    height: 100%;
    border-bottom: dashed thin #d6d5d5; /*コンテンツ内容ボーダーで囲む、bottom*/
}
.letter1 h1{
     text-align: center; /*タイトルなのでセンター揃え*/
     font-size: calc(1.8rem + (1vw - 0.30rem) * 0.3854);/*18px~20pxで可変*/
}
/*タイトルとコンテンツの間に太いボーダー線----------タイトル文字サイズ指定----------------------------------*/
.h1-border{
     text-align: center; /*タイトルなのでセンター揃え*/
     font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16~18pxで可変*/
     border-bottom: solid thick #d6d5d5; /*タイトルとコンテンツの間に太いボーダー線*/
}
.p-border{
     text-align: center; /*タイトルなのでセンター揃え*/
     font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16~18pxで可変*/
     border-bottom: solid thick #d6d5d5; /*タイトルとコンテンツの間に太いボーダー線*/
     font-weight: bold;
}
.ceoSize{
    float: right;
    width: 50%;
    height: 50%;
    max-width: 500px;
    max-height: 333px;
    padding: 0.1% 3% 0.1% 0.1%;
    text-align: right;
    font-size: calc(1.0rem + (1vw - 0.30rem) * 0.3854); /*10~12pxで可変*/
}
.ceoSize img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.pachinko{
    text-align: left; /*コンテンツは左揃え*/
    display: block;
}
.pachinko p{
    font-size: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14~16pxで可変*/
    text-indent: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14~16pxで可変*/
    padding: 1% 2%; /*長文で文字幅間隔がないと見ずらいため*/
}
.pachinko2{
    text-align: left; /*コンテンツは左揃え*/
    display: block;
}
.pachinko2 p{
    font-size: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14~16pxで可変*/
    text-indent: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14~16pxで可変*/
    padding: 1% 2%; /*長文で文字幅間隔がないと見ずらいため*/
}

.centerMozi{
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14~16pxで可変*/
}
.san{
    font-weight: bold; /*『三』の装飾 */
}
.kyo{
   font-weight: bold; /*『共』の装飾 */
}
.maruRed{
    background-color: #FFABCE; /*喜びの背景カラー-----------------*/
    border-radius: 40%;
}
.maruBlue{
    background-color: #A7F1FF; /*感動の背景カラー---------------*/
    border-radius: 40%;
}
.maruGreen{
    background-color: #AEFFBD; /*成長の背景カラー---------------*/
    border-radius: 40%;
}
.murasaki{
     color: #4B0082;
}
/*メインコンテンツ２---企業理念--箇条--------------------------------------------*/
.letter2{
    display: block;
    position: relative; /*deco2の位置基準*/
    width: 100%;
    padding-top: 50px; /*各コンテンツブロック要素間隔**/
    border-bottom: dashed thin #d6d5d5; /*コンテンツ内容ボーダーで囲む、bottom*/
}


/*遊び心、本番は使うかどうか微妙-----------------------------------------------------------------------------------------------*/
.deco1{
    display: block;
    position: absolute; /*4辺からposition指定できるし、コンテンツ内容下に配置したいからabsoluteにする。*/
    right: 2px; /*右端配置したいため。ここの位置変えたら不規則なにぎやかな並びにもできる*/
    width: 30px; /*グッド君大きさ*/
    height: 25px;
}
.deco2{
    display: block;
    position: absolute;
    left: 2px; /*左端配置にしたいから。端過ぎてもかっこ悪いから2%右へ*/
    width: 30px;
    height: 25px;
}
.deco3{
    display: block;
    position: absolute; /*4辺からposition指定できるためabsoluteにする。*/
    right: 2px; /*右端配置だけど、あえてdeco1と同じくしないで、にぎやかさだす。不統一感*/
    width: 30px;
    height: 25px
}
.deco1 img{
   width: 100%;
   height: 100%;
   object-fit: fill;
}
.deco2 img{
   width: 100%;
   height: 100%;
   object-fit: fill;
}
.deco3 img{
   width: 100%;
   height: 100%;
   object-fit: fill;
}


/*最新情報--p-world-----------------------------------------------------------------------------------------------------*/
.mainContent{
    display: block;
    position: relative;
    top: 60px;
    padding-top: 55px; /*各コンテンツブロック要素間隔*/
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-bottom: dashed thin #d6d5d5; /*コンテンツ内容ボーダーで囲む、bottom*/
}

.shopItem li{
     list-style: none; /*リストスタイル消す*/
}
.koiRed{
    color: #EE0000;
}
/*p-world-コンテナ---------------------------------------------------------------*/
.shopContainer{
     width: 100%;
     height: 100%;
}
.shopItem{
    width: 100%; /*フレックスアイテム、全店のアイテム幅合計----------*/
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1%; /*画像同士の境目創るため*/
}
.shopItem img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.shopItem a:hover{
    opacity: 0.7;
    cursor: pointer;
}
/*西町店アイテム装飾------------------------------------------------------*/
.content-nishi{
    width: 48%; /*各店のアイテムの幅--各店画像に境目創りたいから50%未満---------*/
    height: 48%;
    display: block;
    position: relative;
}
.shop-name-nishi{
    position: absolute;
    background:red;
    border-radius: 50%;
    color: #fff;
    width: 65px;
    height: 25px;
    text-align: center;
    top:-8px;
    padding-top: 4px;
    font-size: calc(1.2rem + (1vw - 0.30rem) * 0.3854);/*12px~14pxで可変*/
    font-weight: normal;
}

/*南郷店アイテム装飾-----------------------------------------------------*/
.content-nan{
    width: 48%; /*各店のアイテムの幅------------*/
    height: 48%;
    display: block;
    position: relative;
}
.shop-name-nan{
    position: absolute;
    background:red;
    border-radius: 50%;
    color: #fff;
    width: 65px;
    height: 25px;
    text-align: center;
    top:-8px;
    padding-top: 4px;
    font-size: calc(1.2rem + (1vw - 0.30rem) * 0.3854);/*12px~14pxで可変*/
    font-weight: normal;
}
/*ジャパンアイテム装飾------------------------------------------------------*/
.content-ja{
    width: 48%; /*各店のアイテムの幅-------------*/
    height: 48%;
    display: block;
    position: relative;
}
.shop-name-ja{
    position: absolute;
    background:red;
    border-radius: 50%;
    color: #fff;
    width: 65px;
    height: 25px;
    text-align: center;
    top:-8px;
    padding-top: 4px;
    font-size: calc(1.2rem + (1vw - 0.30rem) * 0.3854);/*12px~14pxで可変*/
    font-weight: normal;
}
/*游パチ館アイテム装飾-------------------------------------------------------*/
.content-yuu{
    width: 48%; /*各店のアイテムの幅--------------*/
    height: 48%;
    display: block;
    position: relative;
}
.shop-name-yuu{
    position: absolute;
    background:red;
    border-radius: 50%;
    color: #fff;
    width: 65px;
    height: 25px;
    text-align: center;
    top:-8px;
    padding-top: 4px;
    font-size: calc(1.2rem + (1vw - 0.30rem) * 0.3854);/*12px~14pxで可変*/
    font-weight: normal;
}

/*LINE公式アカウント---------------------------------------------------------------------------------*/
.maruTitle{
    display: block;
    width: 100%;
    text-align: center;
    align-items: center;
    padding: 15px;
    background-color:#FFFFDD;
    border-radius: 50%;
}
.maruTitle h1{
    font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16~18pxで可変*/
}
.maruTitle p{
    font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16~18pxで可変*/
    font-weight: bold;
}
/*文字色リスト--------------------------------------------------------*/
.lRed{
     color:#FF00FF;
}
.lBlue{
     color: blue;
}
.lYellow{
     color:#FF4F02;
}
.lGreen{
     color: #00CC00;
}
/*メインコンテント---店別ラインアカウント--位置--幅指定-----コンテナ------------------------------*/
.lineContent{
    width: 100%; /*フレックスアイテム、全店のアイテム幅合計----------*/
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.lineContent img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.lineContent a:hover{
     opacity: 0.5;
}

.lineContent h1{
     display: block;
     text-align: center; /*ブロック要素にして画像の中央上に文字来るよう配置したいから*/
     font-size: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14px~16pxで可変*/ /*画像店舗名のフォントサイズ*/
}

/*西町店ーーーーーーーーーーーーーーーーーーーーーーーーー*/
.line-nishimachi{
     display: block; /*フレックスアイテム*/
     width: 49%;
     height: 49%;
     padding: 0.5%; /*多店舗との画像の境目を見やすいように作りたいから*/
}

/*南郷店ーーーーーーーーーーーーーーーーーーーーーーーーー*/
.line-nangou{
      display: block; /*フレックスアイテム*/
      width: 49%;
      height: 49%;
      padding: 0.5%; /*多店舗との画像の境目を見やすいように作りたいから*/
}

/*ジャパンーーーーーーーーーーーーーーーーーーーーーーーーー*/
.line-japan{
      display: block; /*フレックスアイテム*/
      width: 49%;
      height: 49%;
      padding: 0.5%; /*多店舗との画像の境目を見やすいように作りたいから*/
}

/*游パチ館ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.line-yuupachi{
      display: block; /*フレックスアイテム*/
      width: 49%;
      height: 49%;
      padding: 0.5%; /*多店舗との画像の境目を見やすいように作りたいから*/
}


/*公式アプリQRコード関連--------------------------------------------------------*/
/*アプリ見出し-------------位置指定---------*/

/*.maruTitle2{
  display: block;
  width: 100%;
  text-align: center;
  align-items: center;
  background-color: #CCFFFF;
  border-radius: 50%;
  padding: 20px;
}
.maruTitle2 h1{
    font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16~18pxで可変
}
.maruTitle2 p{
    font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16~18pxで可変
    font-weight: bold;
}
/*アプリQRコード---画僧---位置指定---------------------------------------*/
/*アップル用、グーグル用アイテム-----コンテナ配置-------*/
/*.appContent{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.appContent a:hover{
    opacity: 0.5;
}
.appContent img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
/*アップル用ロゴ--配置指定----------------------------*/
/*.appleApp{
    display: block;
    width: 50%;
    height: 50%;
    padding: 1%;/*グーグル用ロゴとの間に見やすいように境目つけたいから。
}
/*グーグル用ロゴ--配置指定-----------------------------*/
/*.googleApp{
    display: block;
    width: 49%;
    height: 49%;
    padding: 1%;/*アップル用ロゴとの間に見やすいように境目つけたいから。
}*/


/*サービス一覧--------------------------------------------------------------------------------------------------------*/
.contentService{
     width: 100%; /*サービスアイテムコンテナ枠----------*/
     height: 100%;
     display: flex;
     flex-wrap: wrap;
     padding: 0.5%;
     justify-content: space-around;
}
.contentService img{
     width: 100%;
     height: 100%;
     object-fit: fill;
}
.sItem{
     display: block;
     width: 100%; /*サービスアイテム一個の大きさ横*/
     height: 100%; /*サービスアイテム一個の大きさ縦*/
     list-style: none; /*リストスタイル消す*/
}
.sYellow{
     color: #FF4F02;
}
/*--暴追--社会貢献活動-------------------------------------------------------------------------------*/

.boutuiList{
      padding: 0.5%;
      display: flex;
      justify-content: space-around;
      list-style-type: none;
}
.socialContent{
       width: 100%;
       height: 100%;
       padding:0.5%;
}
.socialContent h4{
       font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16~18pxで可変*/
}
.socialContent p{
       font-size: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14~16pxで可変*/
       text-indent: calc(1.4rem + (1vw - 0.30rem) * 0.3854);/*14~16pxで可変*/
}
.bItem{
      width: 30%;
      height: 30%;
      padding: 1%;
}
.boutuiList img{
      width: 100%;
      height: 100%;
      object-fit: fill;
}

.pachinko2{
  background-image: url("images5/goodLogo-toumei-orange.png"); /*寂しいから背景画像*/
  background-position: center;
}
/*フッター--------------------------------------------------------------------------------------------------*/
.end{
      display: block;
      position: relative;
      top: 65px;
      margin-top: 60px;
      width: 100%;
      height: 100%;
}

.footerNav{
      display:block;
      width: 100%;
      height: 100%;
      background-image: url("images5/footerMobile.jpg");
      background-position:center;
      background-size: cover;
      border-bottom: dashed thin #c74438;
}

.footerList{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 20px 10px;
      list-style-image: url("images5/goodLogoFooter25px.png");
      list-style-position: inside;
}
.fnav{
      text-align: center;
      font-weight: bold;
      padding: 15px 13px 15px;
      vertical-align: middle;
}
.fnav a{
      color: white;
      font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16px~18pxで可変*/
}

.fnav a:hover{
      color: #330404;
      transition: color 0.4s;
}

footer{
      width: 100%;
      background-image: url("images5/casino-footer3.jpg");
      background-position: center;
      background-size: contain;
      background-repeat: repeat;
      text-align: center;
      padding: 12px 0;
}
footer p{
      color: #fff;
      padding-top: 5px;
      font-size: calc(1.2rem + (1vw - 0.30rem) * 0.3854);/*12px~14pxで可変*/
}

/*ipad タブレット向け 560px~819以下 文字サイズ変更無し
------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media all and (min-width:560px){

  #wrapper{
       line-height: 1.7;
       min-width: 560px;
       max-width: 859px;

}

/*小分けイメージ画僧----------フレックスボックス---------------------------------------------*/
.subImages{
    width: 95%;
    height: 95%;
    margin: 0 auto;
}
/*メインタイトル文字上ミニグッド君イラスト*/
.goodItem{
       display: block;
       position: absolute;
       bottom: 33px;
       right: 45.5%; /*各デバイスの幅広くなるにつれて場所変わってしまうため%指定*/
       width: 25px;
       height: 25px;
}
/*遊び心、本番は使わない---------------------レスポンシブ---pcの時のみ出現---------------------------------*/
.deco1{
   right: 0; /*右端配置したいため。*/
   width: 40px;
   height: 35px;
}
.deco2{
   left: 0; /*左配置にしたいから*/
   width: 40px;
   height: 35px;
}
.letterContent{
       width: 95%;
}

.mainContent{
       width: 95%;
}
/*最新情報*/
.shopItem{
    justify-content: space-between;;
    padding: 0.5%; /*画像同士の境目創るため*/
}
/*西町アイテム装飾*-------------------------------------------------------*/
.shop-name-nishi{
    width: 75px;
    height: 30px; /*レスポンシブ*/
    padding-top: 5.5px;
}
/*南郷店アイテム装飾-----------------------------------------------------*/

.shop-name-nan{
    width: 75px;
    height: 30px; /*レスポンシブ*/
    padding-top: 5.5px;

}
/*ジャパンアイテム装飾------------------------------------------------------*/

.shop-name-ja{
    width: 75px;
    height: 30px; /*レスポンシブ*/
    padding-top: 5.5px;
}
/*游パチ館アイテム装飾-------------------------------------------------------*/
.shop-name-yuu{
    width: 75px;
    height: 30px; /*レスポンシブ*/
    padding-top: 5.5px;
}

.footerNav{
      background-image: url("images5/footerPc.jpg");
}
.footerList{
      list-style-image: url("images5/goodLogoFooter30px.png"); /*タグ画像サイズ変更*/
      width: 90%;
      padding: 20px 0px;
}
.fnav{
      padding: 20px 20px 0 20px;
}
.ceoSize{
    padding: 0.1%;
}
}


/*pc用 860px以上--------------文字サイズ変更有り--860px~1200px--------------------------コンテンツ幅全部width:70%;--広がり抑え見やすくするため----------------------------------------------------------------------------------------------------------*/
@media all and (min-width:860px){

#wrapper{
    line-height: 1.7;
    min-width: 860px;
    max-width: 1199px;
}
#logoNav{
     height:80px;  /*スクロールナビの高さ幅。*/
}
.logoTitle{
    top: 10px;
    width: 190px;
    height: 58px;
}

/*メインナビ　リスト----------------------------:*/
#mainNav{
   width: 80%; /*ここ需要レスポンシブ*/
   display: block;
   position: absolute; /*絶対位置指定しておかないと、アニメーションが始まる位置変わる*/
   right: 0px;
   top: 25px;
}
.navList{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-around;
  align-content: center;
  list-style: circle;
  text-align: center;
  border-bottom: none;
  background: none;
  padding: 0 10px;
}
#mainNav.on{
   display:none;
}
.nav{
  display: block;
  text-align: center;
  border-bottom: none;
  padding-top: 6px;
  background-color: none;
}
.nav a{
  color: white;
  text-decoration-line: none;
  font-size: calc(1.6rem + (1vw - 0.30rem) * 0.3854);/*16px~18pxで可変*/
  font-weight: bold;
  padding: 0 20px;
  text-align: justify;
}
.nav:hover{
  color: #c74438;
  background-image: linear-gradient(#110000,#111111);/*ナビホバー全体の背景色*/
  border-radius: 50%;
}
.nav a:hover{
  color: #c74438;
  transition: color 0.4s;
  background-image: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
  border-radius: 50%;
}
/*ハンバーガーメニューボタン-------------------------------*/
.btn {
  display: none;
  /* ボタンの配置位置  */
  top: 20px;
  right: 16px;
  /* ボタンの大きさ  */
  width: 45px;
  height: 45px;
}

/* 上ののバーガー線 --------------------------------------------*/
.btn-line0 {
  bottom: 14px;
	height: 5px;
}
/*真ん中のバーガー線------------------------------------------*/
.btn-line1{
   width: 100%;  /* 線の長さと高さ */
   height: 5px;
}
/*一番下のバーガー線----------------------------------------*/
.btn-line2{
  display: block;
  position: relative;  /* バーガー線の位置基準として設定 */
  top: 14px;
  width: 100%;  /* 線の長さと高さ */
  height: 5px;
}

/*クリックされた時のバーガー線--------------------------------------------------*****/
.btn-line0.after {
  height: 5px;
  transform: translateY(-6px) translateX(0px) rotate(315deg);
}
.btn-line1.after {
  height: 5px;
}
.btn-line2.after {
  height: 5px;
  transform: translateY(6px) translateX(0px) rotate(-315deg);
}

/*各ブロックコンテンツ間隔指定-----------------------------------------------------*/
.letter2{
    padding-top: 60px;
}

.end{
    padding-top: 70px;
}

/*メインタイトル文字上ミニグッド君イラスト*/
.goodItem{
     display: block;
     position: absolute;
     bottom: 35px;
     right: 46.5%; /*各デバイスの幅広くなるにつれて場所変わってしまうため%指定*/
     width: 28px;
     height: 28px;
}


/*遊び心、本番は使わない---------------------レスポンシブ---pcの時のみ出現---------------------------------*/
.deco1{
   right: 0; /*右端配置したいため。*/
   width: 45px;
   height: 40px;
}
.deco2{
   left: 0; /*左配置にしたいから*/
   width: 45px;
   height: 40px;
}


/*最新情報--p-world-------------------------------------------------------*/
.letterContent{
       width: 85%;
}

.mainContent{
       width: 85%;
       padding-top: 70px;
}

.pachinko{
    padding-bottom: 4%; /*代表画像とかぶってしまうから*/
}
/*西町店アイテム装飾------------------------------------------------------*/
.content-nishi{
    width: 45%; /*各店のアイテムの幅------レスポ-----*/
    height: 45%;
}
.shop-name-nishi{
    width: 100px; /*レスポンシブ*/
    height: 35px; /*レスポンシブ*/
    padding-top: 7px;/*レスポンシブ*/
    top:-10px;
}
/*南郷店アイテム装飾-----------------------------------------------------*/
.content-nan{
    width: 45%; /*各店のアイテムの幅---------レスポ---*/
    height: 45%;
}
.shop-name-nan{
    width: 100px; /*レスポンシブ*/
    height: 35px; /*レスポンシブ*/
    padding-top: 7px;/*レスポンシブ*/
    top:-10px;

}
/*ジャパンアイテム装飾------------------------------------------------------*/
.content-ja{
    width: 45%; /*各店のアイテムの幅----------レスポ---*/
    height: 45%;
    margin-top: 5%;/*西町。南郷と画像重なったらみづらいため、レスポンシブ使用*/
}
.shop-name-ja{
    width: 100px; /*レスポンシブ*/
    height: 35px; /*レスポンシブ*/
    padding-top: 7px;/*レスポンシブ*/
    top:-10px;

}
/*游パチ館アイテム装飾-------------------------------------------------------*/
.content-yuu{
    width: 45%; /*各店のアイテムの幅-------------レスポ-*/
    height: 45%;
    margin-top: 5%;/*西町。南郷と画像重なったらみづらいため、レスポンシブ使用*/
}
.shop-name-yuu{
    width: 100px; /*レスポンシブ*/
    height: 35px; /*レスポンシブ*/
    padding-top: 7px;/*レスポンシブ*/
    top:-10px;
}

/*メインコンテント---店別ラインアカウント--位置--幅指定-----コンテナ------------------------------*/
.lineContent{
    width: 100%; /*フレックスアイテム、全店のアイテム幅合計----------*/
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
/*西町店ーーーーーーーーーーーーーーーーーーーーーーーーー*/
.line-nishimachi{
     display: block; /*フレックスアイテム*/
     width: 45%;
     height: 45%;
     padding: 0.5%; /*多店舗との画像の境目を見やすいように作りたいから*/
}

/*南郷店ーーーーーーーーーーーーーーーーーーーーーーーーー*/
.line-nangou{
      display: block; /*フレックスアイテム*/
      width: 45%;
      height: 45%;
      padding: 0.5%; /*多店舗との画像の境目を見やすいように作りたいから*/
}

/*ジャパンーーーーーーーーーーーーーーーーーーーーーーーーー*/
.line-japan{
      display: block; /*フレックスアイテム*/
      width: 45%;
      height: 45%;
      padding: 0.5%; /*多店舗との画像の境目を見やすいように作りたいから*/
}

/*游パチ館ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.line-yuupachi{
      display: block; /*フレックスアイテム*/
      width: 45%;
      height: 45%;
      padding: 0.5%; /*多店舗との画像の境目を見やすいように作りたいから*/
}

/*.appContent{
      justify-content: space-around;/*レスポ
}
/*アップル用ロゴ--配置指定----------------------------*/
/*.appleApp{
      width: 40%;
      height: 40%;
      padding: 1%;/*グーグル用ロゴとの間に見やすいように境目つけたいから。
}
/*グーグル用ロゴ--配置指定-----------------------------*/
/*.googleApp{
      width: 40%;
      height: 40%;
      padding: 1%;/*アップル用ロゴとの間に見やすいように境目つけたいから。
}*/

.footerNav{
      background-image: url("images5/footerPc2.jpg");
}
.footerList{
      list-style-image: url("images5/goodLogoFooter37px.png"); /*タグ画像サイズ変更*/
}
}

/*pc用 1200px以上--------------文字サイズ変更有り--860px~1200px--------------------------コンテンツ幅全部width:70%;--広がり抑え見やすくするため----------------------------------------------------------------------------------------------------------*/
@media all and (min-width:1200px){

#wrapper{
    line-height: 1.7;
    min-width: 1200px;
    max-width: 1920px;
}
/*メインタイトル文字上ミニグッド君イラスト*/
.goodItem{
       display: block;
       position: absolute;
       bottom: 38px;
       right: 47.5%; /*各デバイスの幅広くなるにつれて場所変わってしまうため%指定*/
}
/*遊び心、本番は使わない---------------------レスポンシブ---pcの時のみ出現---------------------------------*/
.deco1{
   right: 0; /*右端配置したいため。*/
   width: 50px;
   height: 45px;
}
.deco2{
   left: 0; /*左配置にしたいから*/
   width: 50px;
   height: 45px;
}

#logoNav{
     height:90px;  /*スクロールナビの高さ幅。*/
}
.logoTitle{
    top: 11.5px;
    width: 205px;
    height: 65px;
}

#mainNav{
   right: 0px;
   top: 27px;
}
.letterContent{
       width: 80%;
}

.mainContent{
       width: 70%;
}
.pachinko{
    padding-bottom: 8%; /*代表画像とかぶってしまうから*/
}

.imgFlex{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.ifItem{
     display: block;
     width: 25%;
     height: 25%; /*画像サイズバラバラなためpx指定。ファイル画像サイズ一緒なら%指定でできるからレスポンシブ楽*/
     padding: 0.5%;
}
/*最新情報*/
/*西町アイテム装飾*-------------------------------------------------------*/
.shop-name-nishi{
    padding-top: 6px;
}
/*南郷店アイテム装飾-----------------------------------------------------*/
.shop-name-nan{
    padding-top: 6px;
}
/*ジャパンアイテム装飾------------------------------------------------------*/
.shop-name-ja{
    padding-top: 6px;
}
/*游パチ館アイテム装飾-------------------------------------------------------*/
.shop-name-yuu{
    padding-top: 6px;
}

.footerNav{
      background-image: url("images5/footerPc3.jpg");
}
}