@charset "UTF-8";
/*-----------------------------------------------------

-----------------------------------------------------*/
/*-----------------------------------------------------

  HTML & Body

-----------------------------------------------------*/
body {
  background: url("../img/index_bodybg.jpg") #000000 center top;
  background-size: 375px 375px;
  overflow-x: hidden;
}


/*-----------------------------------------------------

  Main Area

-----------------------------------------------------*/
.main-area {
  display: block;
  position: relative;
  width: 100%;
  margin-bottom: 90px;
  height: 100vh;
}

.main-area .scroll {
  position: absolute;
  right: 5px;
  bottom: 0;
  width: 30px;
  height: 85px;
  padding-left: 10px;
}

.main-area .scroll::before {
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 30px;
  width: 1px;
  height: 30px;
  background: #000000;
  content: "";
  animation: scrollmove 2s ease-in-out infinite;
}

@keyframes scrollmove {
  0% {
    opacity: 0;
    top: 0;
    height: 0;
  }
  30% {
    opacity: 1;
    height: 50px;
  }
  100% {
    opacity: 0;
    top: 85px;
    height: 0;
  }
}

.main-area .scroll p {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

/*SmartPhone横向き*/
@media only screen and (orientation: landscape) {
  .main-area {;
    height: auto;
  }
}

/*1000px以上*/
@media only screen and (min-width: 1000px) {
  .main-area {
    height: auto;
    margin-bottom: 0;
  }
  .main-area .scroll {
    display: none;
  }
}

/*-----------------------------------------------------
  Slick Slider
-----------------------------------------------------*/
.main-area .slick-slider .slider {
  padding-top: 50px;
  background: #ffffff;
}

.main-area .slick-slider .slider:not(:nth-of-type(1)) {
  display: none;
}
.main-area .slick-slider .slider:not(:nth-of-type(1)).slick-initialized {
  display: block; /*slick-initializedが付与されたら表示*/
}

.main-area .slick-slider .slider .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
  height: calc(100vh - 120px);
}

.main-area .slick-slider .slider a {
  display: block;
}

.main-area .slick-slider .slider .inner .lead {
  text-align: center;
}

.main-area .slick-slider .slider .inner .lead img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.main-area .slick-slider .slick-dots {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  justify-content: center;
}

.main-area .slick-slider .slick-dots li {
  width: 10px;
  height: 0;
  margin: 0 5px;
  padding-top: 10px;
  overflow: hidden;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.6);
      -ms-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.main-area .slick-slider .slick-dots li button {
  display: block;
  width: 10px;
  height: 10px;
  padding-top: 10px;
  overflow: hidden;
}

.main-area .slick-slider .slick-dots .slick-active {
  background-color: rgba(255, 255, 255, 1);
}


/*SmartPhone横向き*/
@media only screen and (orientation: landscape) {
  .main-area .slick-slider .slider .inner {
    height: auto;
  }
  .main-area .slick-slider .slider .inner .lead img {
    height: 100%;
    width: 50%;
    object-fit: contain;
  }
}

/*768px以上（iPad 縦）*/
@media only screen and (min-width: 768px) and (orientation: portrait) {
  .main-area .slick-slider .slider {
    height: auto;
    padding-top: 50px;
  }
}

/*1000px以上*/
@media only screen and (min-width: 1000px) {
  .main-area .slick-slider .slider {
    height: auto;
    background: none !important;
  }
  .main-area .slick-slider .slider .inner {
    height: auto;
    background: #ffffff;
  }
  .main-area .slick-slider .slider a {
    display: block;
  }
  .main-area .slick-slider .slider a picture {
    transition: 1.0s;
  }
  .main-area .slick-slider .slider a:hover picture {
    opacity: 0.5;

  }
  .main-area .slick-slider .slider .inner {
    padding: 0;
  }
  .main-area .slick-slider .slider .inner .lead {
    width: 100%;
    text-align: center;
    height: auto;
  }
  .main-area .slick-slider .slider .inner .lead img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/*1024px以上*/
@media only screen and (min-width: 1024px) {
  .main-area .slick-slider .slider {
    padding-top: 100px;
  }
}



/*-----------------------------------------------------

  Contents

-----------------------------------------------------*/
.contents {
  padding: 60px 0 75px 0;
  text-align: center;
}

.contents .headline {
  width: 9.33vw;
  margin: 0 auto;
  margin-bottom: 30px;
}

.contents > .inner {
  padding: 0 15px;
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  .contents {
    padding: 90px 0 150px 0;
  }
  .contents .headline {
    width: 4.833vw;
    max-width: 58px;
    margin-bottom: 75px;
  }
  .contents > .inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
  }
}


/*-----------------------------------------------------

  Main Menu

-----------------------------------------------------*/
#mainmenu {
  padding-bottom: 0;
}
#mainmenu .headline {
  width: 42vw;
}

#mainmenu article {
  position: relative;
  margin-bottom: 50px;
}

#mainmenu article h3 img {
  -webkit-filter: drop-shadow(0px 5px 20px rgba(0,0,0,0.3));
          filter: drop-shadow(0px 5px 20px rgba(0,0,0,0.3));
}

#mainmenu article .text-area {
  z-index: -10;
}

#mainmenu article .sushi {
  width: 90%;
}

#mainmenu article dl {
  position: relative;
  padding: 0 30px;
  text-align: left;
}

#mainmenu article dl dt {
  margin-bottom: 10px;
}

#mainmenu article dl dd {
  /*font-size: 1.3rem;*/
  font-size: 3.46vw;
  line-height: 1.8;
}
#mainmenu article dl dd.note {
  font-size: 2.8vw;
}

/*768px未満*/
@media only screen and (max-width: 767px) {
  #mainmenu article .text-area {
    overflow: hidden;
  }
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  #mainmenu .headline {
    width: 20%;
    max-width: 260px;
  }
  #mainmenu article {
    display: flex;
    margin-bottom: 100px;
  }
  #mainmenu h3 {
    width: 54.16%;
  }
  #mainmenu article .text-area {
    width: 45.84%;
  }
  #mainmenu article .sushi {
    width: 50vw;
  }
  #mainmenu article dl {
    padding: 0 40px 0 30px;
  }
  #mainmenu article dl dt {
    /*margin-bottom: 20px*/
    margin-bottom: 1.66vw;
  }
  #mainmenu article dl dd {
    /*font-size: 1.8rem;*/
    font-size: 1.5vw;
  }
  #mainmenu article dl dd.note {
    font-size: 1.2vw;
  }
}

/*1600px以上*/
@media only screen and (min-width: 1600px) {
  #mainmenu article {
    width: 1600px;
    margin-right: auto;
    margin-left: auto;
  }
  #mainmenu article .sushi {
    width: 800px;
  }
  #mainmenu article dl dt {
    margin-bottom: 26px;
  }
  #mainmenu article dl dd {
    font-size: 2.4rem;
  }
  #mainmenu article dl dd.note {
    font-size: 1.8rem;
  }
}

/*-----------------------------------------------------
  Maguro
-----------------------------------------------------*/
#mainmenu .maguro h3 {
  background: url("../img/index_mainmenu_maguro_bg.jpg") 50% 50% no-repeat;
  background-size: cover;
}

#mainmenu .maguro .sushi {
  /*margin-left: -50px;*/
  margin-left: -13.33vw;
}

#mainmenu .maguro dl {
  float: right;
  margin-top: -20px;
}

#mainmenu .maguro dl dt {
  /*width: 218px;*/
  width: 58.13vw;
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  #mainmenu .maguro .sushi {
    /*margin-bottom: 15px;*/
    margin-bottom: 1.25vw;
    /*margin-left: -30px;*/
    margin-left: -2.5vw;
  }
  #mainmenu .maguro dl {
    /*margin-top: 20px;*/
    margin-top: 1.66vw;
  }
  #mainmenu .maguro dl dt {
    /*width: 328px;*/
    width: 27.33vw;
  }
}

/*1600px以上*/
@media only screen and (min-width: 1600px) {
  #mainmenu .maguro .sushi {
    margin-bottom: 20px;
    margin-left: -40px;
  }
  #mainmenu .maguro dl {
    margin-top: 26px;
  }
  #mainmenu .maguro dl dt {
    width: 438px;
  }
}

/*-----------------------------------------------------
  Japan
-----------------------------------------------------*/
#mainmenu .japan h3 {
  background: url("../img/index_mainmenu_japan_bg.jpg") 50% 50% no-repeat;
  background-size: cover;
}

#mainmenu .japan .sushi {
  margin-bottom: 15px;
  /*margin-left: 100px;*/
  margin-left: 26.66vw;
}

#mainmenu .japan dl dt {
  /*width: 244px;*/
  width: 65.06vw;
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  #mainmenu .japan {
    flex-direction: row-reverse;
  }
  #mainmenu .japan .sushi {
    /*margin-bottom: 45px;*/
    margin-bottom: 3.75vw;
    /*margin-left: -100px;*/
    margin-left: -8.33vw;
  }
  #mainmenu .japan dl {
    float: right;
  }
  #mainmenu .japan dl dt {
    /*width: 370px;*/
    width: 30.83vw;
  }
}

/*1600px以上*/
@media only screen and (min-width: 1600px) {
  #mainmenu .japan .sushi {
    margin-bottom: 60px;
    margin-left: -134px;
  }
  #mainmenu .japan dl dt {
    width: 494px;
  }
}

/*-----------------------------------------------------
  Hitotema
-----------------------------------------------------*/
#mainmenu .hitotema h3 {
  background: url("../img/index_mainmenu_hitotema_bg.jpg") 50% 50% no-repeat;
  background-size: cover;
}

#mainmenu .hitotema .sushi {
  /*margin-left: -55px;*/
  margin-left: -14.66vw;
}

#mainmenu .hitotema dl {
  float: right;
  margin-top: 5px;
}

#mainmenu .hitotema dl dt {
  /*width: 188px;*/
  width: 50.13vw;
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  #mainmenu .hitotema .sushi {
    /*margin-bottom: 20px;*/
    margin-bottom: 1.66vw;
    /*margin-left: -10px;*/
    margin-left: -0.83vw;
  }
  #mainmenu .hitotema dl {
    margin-top: 0;
  }
  #mainmenu .hitotema dl dt {
    /*width: 285px;*/
    width: 23.75vw;
  }
}

/*1600px以上*/
@media only screen and (min-width: 1600px) {
  #mainmenu .hitotema .sushi {
    margin-bottom: 26px;
    margin-left: -14px;
  }
  #mainmenu .hitotema dl dt {
    width: 380px;
  }
}




/*-----------------------------------------------------

  News

-----------------------------------------------------*/
#news .button-area li {
  margin-bottom: 15px;
}
#news .button-area li:last-child {
  margin-bottom: 0;
}

#news .twitter a[target="_blank"] span {
  margin-right: 25px;
}
#news .twitter a[target="_blank"] span::after {
  content: none;
}

#news .twitter a[target="_blank"] span::before {
    display: inline-block;
    width: 25px;
    margin-right: 12px;
    padding-top: 4px;
    content: url("../img/index_logo_twitter.svg");
}

@media screen and (min-width:767px){
#news .twitter a:hover span::before {
    content: url("../img/index_logo_twitter_w.svg");
}
}
#news .news_list{
  background-color: rgba(255, 255, 255, 0.6);
}
#news .news_list .list_data{
  display: flex;
  align-items: center;
  padding-top: 1.2em;
  padding-bottom: 1.2em;
  border-top: 1px solid #D3DAD6;
  text-align: left;
}
#news .news_list .list_data:first-child{
  padding-top: 0;
  border-top: 0;
}
#news .news_list .list_data:last-child{
  padding-bottom: 0;
}
#news .news_list .list_data .date{
  white-space: nowrap;
  letter-spacing: 0.05em;
}
#news .news_list .list_data .tag{
  background-color: #2B615F;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
}
#news .news_list .list_data .tag.sushiro{
  background-color: #a9151a;
}
#news .news_list .list_data .tag.misaki{
  background-color: #3a80ba;
}
#news .news_list .list_data .txt{
  line-height: 1.4;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
#news .news_list .list_data .txt a{
  text-decoration: none;
  color: #000;
}
#news .news_list .list_data .txt a:hover{
  text-decoration: underline;
}
@media print, screen and (min-width:768px){
  #news .button-area {
    display: flex;
    justify-content: center;
  }
  #news .button-area li {
    margin: 0 20px;
  }
  #news .news_list{
    width: 1000px;
    padding: 35px 70px;
    margin:0 auto 60px;
  }
  #news .news_list .list_data{
    padding-top: 17px;
    padding-bottom: 17px;
  }
  #news .news_list .list_data .date{
    width: 105px;
    font-size: 14px;
  }
  #news .news_list .list_data .tag{
    width: 100px;
    padding: 0.8em 0.5em;
    font-size: 12px;
  }
  #news .news_list .list_data .txt{
    width: calc(100% - 205px);
    padding-left: 25px;
    font-size: 15px;
  }
}
@media screen and (max-width:767px){
  #news .inner{
    padding: 0;
  }
  #news .news_list{
    padding: 4vw 5vw;
    margin-bottom: 35px;
  }
  #news .news_list .list_data{
    flex-wrap: wrap;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #news .news_list .list_data .date{
    width: 90px;
    font-size: 14px;
  }
  #news .news_list .list_data .tag{
    width: 70px;
    padding: 0.65em 0.5em;
    font-size: 10px;
  }
  #news .news_list .list_data .txt{
    flex-basis: 100%;
    margin-top: 10px;
    font-size: 14px;
  }
}




/*-----------------------------------------------------

  Menu List

-----------------------------------------------------*/
#menulist {
  background: url("../img/index_menulist_bg_sp.jpg") no-repeat center top;
  background-size: cover;
}

#menulist ul {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*期間限定がない場合*/
@media only screen and (max-width: 768px) {

  #menulist ul {
    justify-content: center;
  }

  #menulist ul li {
    margin: 0 5px;
  }
    .menulist-col2 ul li {
    width: calc( (100% - 133px) / 2) !important;
    margin-bottom: 30px;
}
}
#menulist ul li {
  width: calc( (100% - 30px) / 3);
  margin-bottom: 20px;
}


/*SmartPhone横向き*/
@media only screen and (orientation: landscape) {
  #menulist ul li {
    width: calc( (100% - 75px) / 6);
  }
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  #menulist ul li {
    width: 12.5%;
    margin-bottom: 0;
  }
}

/*1024x以上*/
@media only screen and (min-width: 1024px) {
  #menulist {
    background: url("../img/index_menulist_bg_pc.jpg") no-repeat center top;
    background-size: cover;
  }

  #menulist ul li a {
    transition: all 0.3s;
  }
  #menulist ul li a:hover {
    opacity: 0.5;
  }
}



/*-----------------------------------------------------

  TakeOut

-----------------------------------------------------*/
#takeout {
  padding: 0;
  background: url("../img/index_takeout_bg_sp.jpg") #f1f1f1 no-repeat left top;
  background-size: cover;
}
#takeout .inner {
  padding: 0;
}

#takeout .inner a {
  display: flex;
  padding: 50px 30px;
  color: #000000;
  text-decoration: none;
}

#takeout .inner a dl {
  width: 50.79%;
  margin-left: 49.21%;
}

#takeout .inner a dl dt {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#takeout .inner a dl dt span {
  display: block;
  width: 36vw;
}

#takeout .inner a dl dt:before {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #000000;
  content: "";
  transition: all 0.3s;
}

#takeout .inner a dl dt:after {
  position: absolute;
  right: -1px;
  bottom: 4px;
  transform: rotate(45deg);
  width: 10px;
  height: 1px;
  background: #000000;
  content: "";
  transition: all 0.3s;
}

#takeout .inner a dl dd {
  text-align: left;
}

/*375px以下*/
@media only screen and (max-width: 375px) {
  #takeout {
    background-position: 55% 0;
  }
}


/*768px以上*/
@media only screen and (min-width: 768px) {
  #takeout {
    position: relative;
    padding: 0;
  }
  #takeout .inner {
    position: relative;
    z-index: 10;
    padding: 0 40px;
  }
  #takeout .inner a {
    padding: 140px 0;
  }
  #takeout .inner a dl {
    width: 50%;
    margin-left: 50%;
  }
  #takeout .inner a dl dt {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  #takeout .inner a dl dt span {
    width: 16.83vw;
    max-width: 193px;
  }
  #takeout .inner a dl dd {
    font-size: 2.08vw;
  }
}

/*1024px以上*/
@media only screen and (min-width: 1024px) {
  #takeout {
    background: none;
    background-color: #f1f1f1;
  }
  #takeout::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 50%;
    height: 100%;
    background: #f7f7f9;
    content: "";
  }
  #takeout .inner a {
    background: url("../img/index_takeout_bg_pc.jpg") #f1f1f1 no-repeat left top;
    background-size: cover;
  }
  #takeout .inner a:hover dl dt::before {
    opacity: 0;
    right: -100px;
  }
  #takeout .inner a:hover dl dt::after {
    opacity: 0;
    right: -101px;
  }
  #takeout .inner a dl {
    width: 31.66%;
    margin-left: 68.34%;
  }
  #takeout .inner a dl dd {
    font-size: 2.5rem;
  }
}

/*-----------------------------------------------------

  Commit

-----------------------------------------------------*/
#commit .headline-area {
  position: relative;
}

#commit .headline-area::before {
  display: block;
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 0;
  transform: skewY(5deg);
  transform-origin: top right;
  width: 100%;
  height: calc(100% + 20px);
  background: url("../cmn/img/cmn_paper_bg.jpg") #f1f1f1 center top;
  background-size: 500px 500px;
  content: "";
}

#commit .headline-area .headline {
  position: relative;
  z-index: 10;
}

#commit .lead-area {
  display: block;
  position: relative;
  z-index: 50;
  transform: skewY(-5deg);
  transform-origin: top right;
  margin-top: -10px;
  overflow: hidden;
  overflow: hidden;
  background: #3d4040;
}

#commit .lead-area::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: url("../img/index_commit_bg_sp.jpg") #3d4040 no-repeat center top;
  background-size: contain;
  content: "";
}

#commit .lead-area dl {
  display: flex;
  position: relative;
  z-index: 10;
  transform: skewY(5deg);
  padding: 50vw 30px 50px 30px;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#commit .lead-area dl dt {
  width: 40%;
}

#commit .lead-area dl dd {
  padding-top: 100px;
  color: #ffffff;
  line-height: 2;
  text-align: left;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

#commit .photo-area {
  position: relative;
  z-index: 10;
}
#commit .photo-area::after {
  display: block;
  position: absolute;
  top: -30px;
  left: 0;
  z-index: 0;
  transform: skewY(5deg);
  transform-origin: top right;
  width: 100%;
  height: 100%;
  background: url("../cmn/img/cmn_paper_bg.jpg") #f1f1f1 center top;
  background-size: 500px 500px;
  content: "";
}

#commit .photo-area ul {
  position: relative;
  z-index: 10;
  margin: 60px 60px 0 60px;
  padding-bottom: 80px;
}

/*SmartPhone横向き*/
@media only screen and (orientation: landscape) {
  #commit .headline-area::before {
    top: 60px;
  }
  #commit .lead-area::after {
    background: url("../img/index_commit_bg_landscape.jpg") #3d4040 no-repeat center top;
    background-size: cover;
  }
  #commit .lead-area dl {
    padding: 60px 30px 0 30px;
  }
  #commit .lead-area dl dt {
    width: 18.33vw;
  }
  #commit .photo-area ul {
    display: flex;
  }
  #commit .photo-area ul li {
    width: calc(100% / 3);
  }
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  #commit {
    padding-bottom: 50px;
  }
  #commit .headline-area::before {
    top: 60px;
  }
  #commit .lead-area {
    margin-top: -70px;
  }
  #commit .lead-area::after {
    background: url("../img/index_commit_bg_pc.jpg") #3d4040 no-repeat center top;
    background-size: contain;
  }
  #commit .lead-area dl {
    padding: 40px 40px 0 40px;
  }
  #commit .lead-area dl dt {
    width: 18.33vw;
    max-width: 220px;
  }
  #commit .photo-area {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #commit .photo-area::after {
    top: 80px;
    height: calc(100% - 160px);
  }
  #commit .photo-area ul {
    display: flex;
  }
  #commit .photo-area ul li {
    width: calc(100% / 3);
  }
}


/*1024px以上*/
@media only screen and (min-width: 1024px) {
  #commit .lead-area dl {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 40px 0 40px;
  }
  #commit .photo-area ul {
    max-width: 1280px;
    margin: 100px auto 0 auto;
    padding: 0 40px;
  }
}

/*1280px以上*/
@media only screen and (min-width: 1280px) {
  #commit .photo-area::after {
    height: calc(100% - 80px);
  }
  #commit .photo-area ul {
    margin-top: 150px;
  }
}

/*-----------------------------------------------------

  Commit-2

-----------------------------------------------------*/

#commit-2 .commit-bg_area{
    margin-top: -90px;
    background-image: url(../img/index_commit_bg.png);
    background-size: cover;
    background-position: center;
    padding: 90px 0 300px 0;
}
#commit-2 .commit-bg_area .inner{
    width: 1190px;
    margin: auto;
}

#commit-2 .commit_copy{
    width: 55rem;
    margin-bottom: 6rem;
}
#commit-2 .commit_txt{
    width: 67.8rem;
    margin-bottom: 10rem;
}
#commit-2 .commit_txt_{
    font-size: 2.2rem;
    text-align: left;
    margin-bottom: 10rem;
    font-weight:600;
}

#commit-2 .commit_logo{
    width: 20.2rem;
}

#commit-2 .commit_img_list{
    width: 1000px;
    margin: auto;
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
}
#commit-2 .commit_img_list li{
    width: 32.5%;
}

#commit-2 .image_att{
    width: 1000px;
    margin: auto;
    margin-top: 1rem
}
#commit-2 .image_att{
    text-align: right;
    font-size: 1.4rem; 
}

#commit-2.contents{
        padding: 90px 0 60px 0;
}

@media only screen and (max-width: 1200px) {
    #commit-2 .commit-bg_area .inner {
        padding: 0 20px;
        width: 100%;
    }

    #commit-2 .commit_copy {
        width: 55vw;
    }

    #commit-2 .commit_txt_ {
        font-size: 2.2vw;
    }

    #commit-2 .commit_logo {
        width: 20vw;
    }
    
    #commit-2 .commit_img_list{
        width: 90%;
    }
    #commit-2 .image_att{
    width: 90%;
        margin-top: -1rem;
}
}


@media only screen and (max-width: 768px) {
    
    #commit-2 .commit-bg_area .inner {
        padding: 0px;
    }
    
    #commit-2 .commit_txt_ {
        font-size: 2.7vw;
        margin-bottom: 2rem;
    }
    
    #commit-2 .commit-bg_area{
    background-image: url(../img/index_commit_bg_sp.png);
    padding: 10vw 0 90vw 0;;
}
    #commit-2 .commit-bg_area .inner{
    width: 85%;
}
    #commit-2 .commit_copy{
    width: 64vw;
    padding-top: 4rem;
    margin-bottom: 4rem;
}
#commit-2 .commit_txt{
    width: 100%;
    margin-bottom: 4rem;
}

#commit-2 .commit_logo{
    width: 20vw;
    margin: auto;
}
    #commit-2 .commit_img_list{
    width: 75%;
    display: block;
}
    #commit-2 .image_att{
    width: 75%;
}
#commit-2 .commit_img_list li{
    width: 100%;
    margin-bottom: 20px;
}
    
}



/*-----------------------------------------------------

  Shop

-----------------------------------------------------*/
#shop {
  padding: 0;
  background: #ffffff;
}

#shop > .inner {
  width: 100%;
  margin: 0 auto;
  padding: 60px 30px 150px 30px;
  background: url("../cmn/img/cmn_paper_bg.jpg") #f1f1f1 center top;
  background-size: 500px 500px;
}

#shop .shop-list li {
  position: relative;
  padding-bottom: 40px;
}

#shop .shop-list li dl dt {
  margin-bottom: 15px;
}

#shop .shop-list li dl dt .logo {
  width: 240px;
}

#shop .shop-list .master dl dt {
  display: flex;
  height: auto;
  justify-content: center;
  align-items: flex-start;
}
#shop .shop-list .master dl dt span {
  display: flex;
  align-items: center;
}
#shop .shop-list .master {
  margin-bottom: 40px;
}

#shop .shop-list .master::after {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  content: "";
}

#shop .shop-list li dl dt .logo-master {
  width: 38px;
  margin-right: 3%;
}

#shop ul.notes {
  margin-top: 40px;
}


/*768px以上*/
@media only screen and (min-width: 768px) {
  #shop > .inner {
    padding-top: 90px;
  }
  #shop .shop-list {
    display: flex;
    max-width: 1000px;
    margin: 0 auto 40px auto;
  }
  #shop .shop-list li {
    width: 50%;
    padding: 0;
  }
  #shop .shop-list .master {
    margin-bottom: 0;
    justify-content: stretch;
    align-items: stretch;
  }
  #shop .shop-list .master::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
  }
  #shop ul.notes {
    margin-top: 40px;
  }
  #shop ul.notes li {
    text-align: center;
  }
}

/*1024px以上*/
/*
@media only screen and (min-width: 1024px) {
  #shop > .inner {
    position: relative;
    width: 71.66%;
    max-width: 71.66%;
    padding-bottom: 240px;
  }
  #shop > .inner::before, #shop > .inner::after {
    display: block;
    position: absolute;
    top: 0;
    width: calc( (100vw - 5.41vw - 71.66%) / 2);
    height: 100%;
    content: "";
  }
  #shop > .inner::before {
    left: calc( (-100vw + 71.66%) / 2);
    background: url("../img/index_shop_bg_l.png") no-repeat right 50%;
    background-size: 305px 500px;
  }
  #shop > .inner::after {
    right: calc( (-100vw + 71.66%) / 2);
    background: url("../img/index_shop_bg_r.png") no-repeat left 50%;
    background-size: 305px 500px;
  }
  #shop .shop-list li dl dd:not(.notes) {
    font-size: 1.5rem;
  }

}
*/


/*-----------------------------------------------------

  PayPay

-----------------------------------------------------*/

.pc-show {
    display: block;
}

.sp-show {
    display: none;
}

.paypay {
    max-width: 800px;
    margin: auto;
    margin-top: 90px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.paypay:hover{
    opacity: .6;
}

@media only screen and (max-width: 768px) {
    .pc-show {
        display: none;
    }
    .sp-show {
        display: block;
    }
    .paypay {
        width: 80%;
        margin-top: 0px;
    }
}

/*-----------------------------------------------------

  赤しゃり_230612

-----------------------------------------------------*/
.akasyari_box {
    max-width: 1600px;
    margin: auto;
    background-image: url(../img/akasyari/bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 6rem 14rem;
    margin-bottom: 10rem;
}

.akasyari_main_ti {
    margin: auto;
    width: 100% !important;
    margin-top: -2rem;
}

.akasyari_3col_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
}

.akasyari_logo_box {
    width: 25%;
}

.akasyari_img_box {
    width: 42%;
    margin-right: -4rem;
    margin-left: 4rem;
}

.akasyari_txt_box {
    width: 25%;
    text-align: left;
    color: #fffde5;
    font-size: 2.1rem;

}

.akasyari_txt_box p {
    font-weight: bold;
}

.akasyari_txt_box h4 {
    width: 96%;
    margin-top: 5rem;
    margin-bottom: 1.66vw;
}

@media only screen and (max-width: 1600px) {
    .akasyari_txt_box {
        font-size: 1.2vw;
    }
}

@media only screen and (min-width: 1600px) {
    .akasyari_txt_box h4 {
        margin-bottom: 26px;
    }
}

@media only screen and (max-width: 1200px) {
    .akasyari_txt_box {
        font-size: 1.1vw;
    }

    .akasyari_box {
        padding: 4rem 10rem;
    }
}

@media only screen and (max-width: 900px) {
    .akasyari_box {
        padding: 4rem 4rem;
        margin-bottom: 6rem;
    }

    .akasyari_txt_box {
        padding-left: 2rem;
    }
}

@media only screen and (max-width: 768px) {
    .akasyari_box {
        padding: 6rem 2.5rem;
        margin-bottom: 6rem;
    }

    .akasyari_main_ti {
        width: 100%;
        padding-right: 0%;
        margin-top: 0rem;
    }

    .akasyari_3col_box {
        display: block;
    }

    .akasyari_logo_box {
        width: 48%;
        margin: auto;
        margin-bottom: 4rem;
    }

    .akasyari_img_box {
        width: 100%;
        padding-left: 8%;
        margin-right: 0rem;
        margin-left: 0rem;
    }

    .akasyari_txt_box {
        width: 100%;
/*        font-size: 1.6rem;*/
        font-size: 3.46vw;
        margin-top: 2rem;
        padding-left: 0rem;
    }

    .akasyari_txt_box h4 {
        margin-top: 2rem;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 600px) {
        .akasyari_txt_box {
        font-size: 3.34vw;
    }
}


/*-----------------------------------------------------

  赤しゃり_230920

-----------------------------------------------------*/
.about_akasyari {
    background-image: url(../img/about_akasyari/about_akasyari.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 12rem;
    margin-bottom: 12rem;
}

@media only screen and (max-width: 768px) {
    .about_akasyari {
        background-image: url(../img/about_akasyari/about_akasyari_sp.jpg);
        padding-bottom: 6rem;
        margin-bottom: 6rem;
    }
}

.about_akasyari .main_dev{
    width: 85%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .about_akasyari .main_dev{
        width: 100%;
        flex-direction: column;
    }
}

.about_akasyari .main_dev .akasyari_ti{
    margin-top: 8rem;
    width: 30%
}

@media only screen and (max-width: 768px) {
    .about_akasyari .main_dev .akasyari_ti{
        margin-top: 10vw;
    width: 48vw;
    margin-right: 6rem;
}
}

.about_akasyari .main_dev .akasyari_txt{
    margin-top: 16rem;
    width: 30%;
    color: #fff;
    text-align: left;
}

.about_akasyari .main_dev .akasyari_txt p{
    font-size: 2.1rem;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold !important;
    line-height: 2;
}

.about_akasyari .main_dev .akasyari_txt .att{
/*    text-align: right;*/
    margin-top: 1rem;
    font-size: 1.6rem;
    font-weight: normal !important;
    padding-right: 7.5rem;
}

@media only screen and (max-width: 1628px) {
    .about_akasyari .main_dev .akasyari_txt{
    width: 31%;
    }
}

@media only screen and (max-width: 1580px) {
    .about_akasyari .main_dev .akasyari_txt p{
         font-size: 1.3vw;
    }
    .about_akasyari .main_dev .akasyari_txt .att{
        font-size:1.2vw;
    }
}

@media only screen and (max-width: 768px) {
    .about_akasyari .main_dev .akasyari_txt {
        width: 85%;
        margin: auto;
        margin-top: 74vw;
        text-align: center;
    }
    .about_akasyari .main_dev .akasyari_txt p{
        font-size: 1.6rem;
    }
    .about_akasyari .main_dev .akasyari_txt .att{
        font-size: 1.4rem;
    padding-right: 0rem;
        margin-top: 0rem;
    }
}

.about_akasyari .sub_dev{
    margin-top: 14rem;
}

.about_akasyari .sub_dev .akasyari_ti{
    margin: auto;
    margin-bottom: 3rem;
}

.about_akasyari .sub_dev p{
    font-size: 2.2rem;
    color: #fff;
}
@media only screen and (max-width: 1580px) {
    .about_akasyari .sub_dev p{
    font-size: 1.8vw;
}
}

@media only screen and (max-width: 768px) {
    .about_akasyari .sub_dev {
        margin-top: 6rem;
    }

    .about_akasyari .sub_dev .akasyari_ti {
        width: 85%;
        margin-bottom: 2rem;
    }

    .about_akasyari .sub_dev p {
        font-size: 1.8rem;
        color: #fff;
        width: 88%;
        margin: auto;
        text-align: left
    }
}

.about_div {
    width: 86rem;
    margin: auto;
    margin-top: 6rem;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.about_div .akasyari_sub_ti{
    position: relative;
}

.about_div .akasyari_sub_ti span{
    display: block;
    position: absolute;
    top: -24px;
    left: 0;
}

.about_div .about_div_inr{
    padding: 5rem 3rem 3rem 3rem;
    font-size: 1.8rem;
    color: #fff;
}
@media only screen and (max-width: 1580px) {

    .about_div {
        width: 60vw;
    }

    .about_div .akasyari_sub_ti span {
        top: -1.7vw;
    }

    .about_div .about_div_inr {
        font-size: 1.2vw;
        padding-top: 4vw;
    }
}

@media only screen and (max-width: 768px) {
    .about_div {
    width: 85%;
    margin-top: 4rem;
}
    .about_div .akasyari_sub_ti span{
    top: -13px;
}
    .about_div .about_div_inr{
    padding: 3rem 1.5rem 1.5rem 1.5rem;
    font-size: 1.6rem;
    text-align: left;
}
     
}

.akasyari_set{
    width: 135rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

@media only screen and (max-width: 768px) {
    .akasyari_set {
        width: 100%;
        flex-direction: column;
        margin-bottom: 9rem !important;
    }
    .last_akasyari_set{
        margin-bottom: 5rem !important;
    }
}

.akasyari_set .akasyari_set_txt{
    width: 52%;
    text-align: left;
    font-size: 2.4rem;
}

.akasyari_set .akasyari_set_txt h2{
    margin-bottom: 3rem;
}
.akasyari_set .akasyari_set_txt h2 img{
    height: 154px;
    width: auto;
}
.akasyari_set .akasyari_set_txt .att{
    margin-top: 1rem;
    font-size: 1.8rem;
    text-indent: -1.8rem;
    margin-left: 1.8rem;
    line-height: 1.6;
}
.akasyari_set .akasyari_set_txt .att-2{
     margin-top: .5rem;
}

.akasyari_set .akasyari_set_img{
    width: 42%;
}
.akasyari_set .akasyari_set_img.wid_{
    width: 44%;
}

@media only screen and (max-width: 1580px) {
    .akasyari_set{
        width: 90%;
        margin: auto;
    }
    .akasyari_set .akasyari_set_txt{
    font-size: 1.55vw;
}
    .akasyari_set .akasyari_set_txt .att{
    font-size: 1.3vw;
            text-indent: -1.3vw;
    margin-left: 1.3vw;
}
    .akasyari_set .akasyari_set_txt h2 img{
        height: 10vw;
    }
}

@media only screen and (max-width: 768px) {
    .akasyari_set .akasyari_set_txt {
        order: 1;
        width: 90%;
        font-size: 1.7rem;
        margin-bottom: 2rem;
    }
    .akasyari_set .akasyari_set_txt h2{
        margin-bottom: 1.5rem;
    }
    .akasyari_set .akasyari_set_txt h2 img{
        height: 100px;
    }

    .akasyari_set .akasyari_set_img {
        order: 2;
        width: 80%;
    }

    .akasyari_set .akasyari_set_img.wid_ {
        width: 85%;
    }
    .akasyari_set .akasyari_set_txt .att{
        font-size: 1.4rem;
         text-indent: -1.4rem;
    margin-left: 1.4rem;
    }
    
}

#commit-3 .headline{
    width: 22%;
    max-width: 280px;
}

#commit-3 .commit-bg_area{
    margin-top: -90px;
    background-image: url(../img/index_thought_bg.png);
    background-size: cover;
    background-position: center;
    padding: 100px 0 140px 0;
}
#commit-3 .commit-bg_area .inner{
    width: 1190px;
    margin: auto;
}



#commit-3 .thought_img{
    width: 66rem;
    margin: auto;
    padding-bottom: 2rem;
}

#commit-3 .thought_sub_ti img{
    width: auto;
    height: 32px;
    margin: 4rem auto;
}

#commit-3 .thought_txt{
    font-size: 2.2rem;
    line-height: 2;
    margin-bottom: 1.6rem;
}
#commit-3 .thought_logo{
    margin-top: 8rem;
}
#commit-3 .thought_logo img{
    height: 7.7rem;
    width: auto;
}

#commit-3 .commit_img_list{
    width: 1000px;
    margin: auto;
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
}
#commit-3 .commit_img_list li{
    width: 32.5%;
}

#commit-3 .image_att{
    width: 1000px;
    margin: auto;
    margin-top: 1rem
}
#commit-3 .image_att{
    text-align: right;
    font-size: 1.4rem; 
}

#commit-3.contents{
    padding: 90px 0 60px 0;
}
#commit-3 .att{
    margin-top: 4rem;
    font-size: 1.4rem;
    text-indent: -1.4rem;
    padding-left: 1.4rem;
}


@media only screen and (max-width: 1580px) {
    #commit-3 .commit-bg_area {
    padding: 10vw 0 14vw 0;
}
   #commit-3 .commit-bg_area .inner{
    width: 100%;
} 
    #commit-3 .thought_img{
    width: 48vw;
}
    #commit-3 .thought_sub_ti img {
    height: 2.4vw;
   margin: 2vw auto;
}
    #commit-3 .thought_txt {
    font-size: 1.45vw;
    margin-bottom: 1vw;
}
    #commit-3 .att {
    margin-top: 2vw;
    font-size: 1.25vw;
}
    #commit-3 .thought_logo img {
    height: 4.5vw;
}
    #commit-3 .thought_logo {
    margin-top: 5.5vw;
}
    #commit-3 .commit_img_list{
        width: 90%;
    }
    #commit-3 .image_att{
        width: 90%;
    }
    
}

@media only screen and (max-width: 768px) {
    #commit-3 .commit-bg_area .inner {
        width: 100%;
    }

    #commit-3 .headline {
        width: 40%;
    }

    #commit-3 .thought_img {
        width: 85%;
        margin-top: 6rem;
        padding-bottom: 2rem;
    }

    #commit-3 .thought_sub_ti img {
        width: 90%;
        height: auto;
        margin: 3rem auto;
    }

    #commit-3 .thought_txt {
        width: 90%;
        margin: auto;
        text-align: left;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    #commit-3 .thought_logo {
        margin-top: 4rem;
    }

    #commit-3 .thought_logo img {
        height: 4.2rem;
        width: auto;
    }

    #commit-3 .commit_img_list {
        width: 75%;
        display: block;
    }

    #commit-3 .image_att {
        width: 75%;
    }

    #commit-3 .commit_img_list li {
        width: 100%;
        margin-bottom: 20px;
    }
    #commit-3 .att{
    margin-top: 3rem;
    width: 90%;
        text-align: left;
        margin: auto;
        font-size: 1.3rem;
}

}
   


#shop .inner{
    width: 100% !important;
    max-width: inherit !important;
}