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

body{background-color:#fff;  color:#666; letter-spacing:0.05em; margin:0; line-height:200%; font-size:14px; background-image:url(img/bg.png); background-size:50px;
font-family: 'Noto Sans JP', sans-serif; font-weight:400;
}

a{color:#e7280e; text-decoration:none;}
a:hover{color:#FF6009; }
a img:hover{opacity: 0.72;}


.red{ color: #DA1317;}
.black{ color:#000;}

.mp,
.sp,
.mw500{ display:none;}


#main{ width:100%; margin:0 auto; max-width: 1098px; border-right: 1px solid #ff9999;border-left: 1px solid #ff9999;}
#main img{ width:100%; }
#content{ background-color:#fef9ec; width:100%; margin:0 auto;max-width: 1098px; border-right: 1px solid #ff9999;border-left: 1px solid #ff9999;}

#read{  font-size:120%; padding:3% 0 0;}
#read .readIn h1{ color:#e7280e; margin-bottom:30px; margin-left:6%; font-size:40px;}
#read .readIn h2{ color:#e7280e;text-align:center; line-height:150%; font-size:30px; font-weight: bold; margin-bottom: 0;}
#read .readIn h3{ color:#e7280e;text-align:center; line-height:130%;margin-bottom:5%; font-size:36px; font-weight: bold; margin-top: 0px;}
#read .readIn h3.end{ color: #FF8A8C;font-size:24px;}

#read .readIn h2 span{ font-size:24px;}
#read .readIn h3 span{ font-size:24px;}
	
	
#read table{ width:59%; margin:0 auto 0 3%; background-color:#fff;border-collapse: collapse;border: solid 2px #e7280e; float:left; line-height:170% !important;color:#444;}
#read table th, #read table td { border: dashed 1px rgba(255,219,186,1.00);/**/
}

#read td{ padding:15px;text-align:center;font-weight:700 ;}
#read tr:nth-of-type(1) td{ padding-top:0; font-size: 18px; }
#read tr td span{ font-size:13px; font-weight: normal;}

#read :nth-of-type(4) td p{ font-size:13px; font-weight:bold; color:rgba(215,0,3,1.00); line-height:18px; margin-top: 15px;}
#read tr:nth-of-type(5) td{ text-align:left; margin:0;}

#read th{padding:15px;font-size:85%; background-color:#e7280e; color:#fff; width:90px; font-weight: bold;}
#read hr{ border:none; border-bottom:2px rgba(194,194,194,1.00) dotted; margin: 0% 20%;}


#read table td ul{ margin:0px;}
#read table td ul li{ text-align:left; list-style:none;font-weight:bold; }
#read table td ul li span{ font-size:13px; font-weight:bold;}

@media screen and (max-width:767px) {

body{line-height:150%; }
.pc{ display:none;}
.mp{display: block;}

#read{line-height:160%;}
#read h1{ margin-left:5%;}
#read .readIn h2{ font-size: 24px;margin-bottom: 20px;}
#read .readIn h3{ font-size: 24px;}
#read .readIn h2 span{ font-size:18px;}
#read .readIn h3 span{ font-size:18px;}

#read table{ width:95%; font-weight:bold; float:none; margin:0 auto;}
#read table th{ display:block;font-size:18px; width:auto; border: none;}
#read table td{ display:block; font-size:18px; line-height:160%;border: none;}
#read tr:nth-of-type(1) td{ padding-top:0; font-size: 20px; }

#read td p{ font-size:18px; line-height:160%;}

#read hr{ border:none; border-bottom:2px rgba(194,194,194,1.00) dotted; margin: 5% 20%;}
#read tr:nth-of-type(1) td{ padding-top:0; padding-bottom:50px;}

#read table td span{ font-size:13px;}

#read ul li{ font-size:16px; line-height:20px; letter-spacing:0; margin-bottom: 15px; font-weight: bold;}
#read tr:nth-of-type(5) td{ padding:30px 15px 40px;}
#read table td ul li span{ font-size:100%; }

#read ul li:nth-of-type(4){letter-spacing: -0.05em;}

}

@media screen and (max-width:767px) {
}

@media screen and (max-width:600px) {
/*.mp{ display:none;}*/
.sp{ display:inline;}
	
}



#read table tr:nth-of-type(5) td ul li:nth-of-type(1){ letter-spacing: -0.01em;}

.kirin{ width: 200px;}
.free{color: #DA1317; font-size:20px !important; font-weight:bold !important;}


a.link-L { color:#444; font-size:24px; font-weight:bold;}
a.link-L:hover{ text-decoration:none; color:#999;}


.photo{ width:32%; float:right; margin:0px 3% 0 0;}
.photo2{ width:32%; float:right; margin:0px 3% 0 0;}
.photo2020{ width:100%; margin:5% auto 0;}
.photo2020_sp{ display:none;}


/*.sns{ text-align:center; margin:50px 0 0 0;float:left;}*/
/*.tw{ width:60px; float:left; margin:40px 1% 0 23%;}*/
.tw-timeline{float:right; margin: 0px 3% 0 0; /*border:1px solid #e7280e;*/ padding:0 5px; /*background-color:#fff;*/ width: 31%; text-align: center;}
.tw-timeline-sp{ display:none; text-align: center;}
.tw-timeline img,
.tw-timeline-sp img
{width: 200px; border-radius: 100px;}

.k-title-img{ width:250px;}
.gojitsu{ text-align:center; margin-top:30px;}

@media screen and (max-width:767px) {
 .kirin{ width: 300px;}
 .free{font-size:28px;}
 a.link-L { font-size:40px; }
 
 .photo,
 .photo2,
 .photo2020{ display:none;}

 .photo2020_sp{ display:block}
 .photo2020_sp img{ width:100%;}
 .photo2020_sp img:nth-of-type(1){ margin-top:50px;}
 .photo2020_sp img:nth-of-type(2){ margin-top:-10px;}

 .sns{font-weight:bold;margin:40px 0 0 0; font-size:26px;}
 .tw{ margin:40px 2% 0 10%;}
 .tw-timeline{ display:none;}
 .tw-timeline-sp{ width:90%; margin:50px auto 80px; display:block;padding:0 5px; }

 .k-title-img{ width:80%; margin-bottom:10px;}
 .gojitsu{ text-align:left; margin:10% 3%; font-weight:bold; font-size:18px;}

}




#karaage{  padding-top:20px; width: 100%; max-width: 1000px; margin: 0 auto; text-align: center;}
#karaage::after { content: " "; display: block; clear: both;}

#karaage ul li{ list-style:none; margin:10px auto 20px; text-align: left;}
#karaage ul li::after { content: " "; display: block; clear: both;}

.shop,
#sapporo{ background-color:#fff; padding:10px 10px 20px; width:84%; 
border-radius: 30px; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);}

.shop img{ width:30%; float:left; margin:20px 5px 5px;}
.shop h2{ margin:0 0 10px 0px; color:#000; font-size:30px; font-weight: bold;}
.shop h4{margin:0 0 15px; color:#f18b00; line-height:140%;font-weight: bold; font-size: 16px;}
.shop h5{margin:15px 0 0px; color: #DA1317; font-size:15px;line-height:140%;font-weight: bold;}

.k-text{ float:left; margin:25px 0 0 15px; width:65%;}

#karaage ul li#sapporo{ text-align: center; display: block;}
#karaage ul li#sapporo img{width: 66%; margin: 20px auto ; }
#karaage ul li#sapporo .s-text {margin: 0px auto 20px;  display: inline-block; text-align: left;}

/*.shop:last-child .k-text p{padding-top: 20px;}*/


.first{ background-image:url(img/first.png); background-size:100px; background-repeat:no-repeat; background-position:98% 10px;}
.second{ background-image:url(img/second.png); }
.third{ background-image:url(img/third.png); }
.fourth{ background-image:url(img/fourth.png);}
.fifth{ background-image:url(img/fifth.png); }
.sixth{ background-image:url(img/sixth.png); }
.seventh{ background-image:url(img/seventh.png); }
.eighth{ background-image:url(img/eighth.png); }

.second,
.third,
.fourth,
.fifth,
.sixth,
.seventh,
.eighth{  background-size:70px; background-repeat:no-repeat; background-position:98% 10px;}

.shop p{ line-height:150%; margin:10px 0 20px;}
/*.shop:last-child .k-text p{ margin:10px auto;text-align: left; display: inline-block}*/
.shop p.red{ font-size:16px; font-weight:bold; color:rgba(215,0,3,1.00); line-height:26px; text-align:center; margin:20px 175px 20px 0; }


@media screen and (max-width:1050px) {

#karaage ul li#sapporo .s-text{  width: 94%; }

}


@media screen and (max-width:767px) {

  #karaage ul { margin:0 auto; }
  #karaage ul li{float:none;}

  .shop{ width:91%; padding:10px 30px 20px 10px; margin-bottom:10% !important;}
  
  .shop img{ width:90%; max-width: 400px; float:none; margin:0px;}
  .k-text{ width:100%; float:none; margin-bottom:20px;}

#karaage ul li#sapporo{ width:92%; padding:10px 10px 20px 10px;}
#karaage ul li#sapporo img{width:100%;  margin:0px auto; }
#karaage ul li#sapporo .s-text{  width: 98%; line-height:150% !important; font-size:17px; font-weight:bold; padding-top: 20px;}

/*.shop:last-child .k-text p{padding-top: 0px;}*/


  .first{ background-size:130px;background-position:98% 20px;}

  .second,
  .third,
  .fourth,
  .fifth,
  .sixth,
  .seventh,
  .eighth{  background-size:80px; background-position:99% 20px;}


  .shop h2{margin:10px 0 15px; color:#000; font-size:30px;line-height:120%;}
  .shop h4{margin:0 0 10px; }
  .shop h5{ margin-bottom:40px; font-size:12px;line-height:160%; letter-spacing:0;}

  .shop p{ line-height:150% !important; font-size:17px; font-weight:bold;}
  .shop p.red{ font-size:24px; line-height:34px; margin:20px auto; }
}


#att{ font-size:90%; line-height:150%; width:90%; margin:5% auto; color:#666;}
#att p{ font-weight:bold; margin:10px 0;}
#att ul{  margin:5px 0 0 0;}
#att ul li{ padding:5px 0;list-style-type: square;}

#att ul.maru{ list-style-type:circle;}


@media only screen and (max-width: 767px) {
.pc{ display:none;}
.sp{ display:block;}


#att{ width:95%; margin:100px 20px 10px 10px;}
#att p{ margin:20px 5px 20px 10px; font-size:150%;line-height:130%;}
#att ul{ margin:10px 0 ;font-size:120%;line-height:130%;}
#att ul li{ padding:10px 0; margin-left: 5px;list-style-position: inside; }
}


@media only screen and (max-width: 550px) {
.mw550{ display: block;}

  .shop img{ width:100%; max-width: 400px;}
  
  .first{ background-size:90px;background-position:98% 460px;}
  .android .first{ background-size:90px;background-position:98% 490px;}
  
  .second,
  .third,
  .fourth,
  .fifth,
  .sixth,
  .seventh,
  .eighth{  background-size:80px; background-position:98% 530px;}
  
    .android .second,
    .android .third,
    .android .fourth,
    .android .fifth,
    .android .sixth,
    .android .seventh,
    .android .eighth{  background-size:80px; background-position:98% 490px;}

}

@media only screen and (max-width: 400px) {
  .shop img{ width:100%;}
  
  .second,
  .third,
  .fourth,
  .fifth,
  .sixth,
  .seventh,
  .eighth{  background-position:95% 470px;}

}