/* mobile対応(max-width: 640px) */

.twitt{
  display: none;
}
.rightview{
  display: none;
}
.date{
  display: none;
}
.sitename{
  color             : #e95464;
  text-decoration   : none;
  padding           : 5px;
  text-align        : center;
}
.top{
  text-align        : center;
  padding           : 3px;
  margin            : 0px;
}
.menu{
  margin            : 3px;
  line-height       : 120%;
  text-align        : center;
}
.anker0{
  text-decoration   : none;
}
.mbileicon{
  width             : 70px;
  hight             : auto;
}

.mobile{
  display: none;
}

/*ケーキタブ*/

.cakecolor{
  margin            : 0px;
  background-color  : #fffff9;
  background-image  : linear-gradient(-45deg, rgba(250,177,177,.5) 25%, transparent 25%, transparent 50%, rgba(250,177,177,.5) 50%, rgba(250,177,177,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,177,177,.5) 25%, transparent 25%, transparent 50%,  rgba(250,177,177,.5) 50%, rgba(250,177,177,.5) 75%, transparent 75%, transparent 100%);
  background-size   : 52px 52px;
}
.cakecolor2{
  margin            : 0px;
  background-color  : #fffff9;
  background-image  : linear-gradient(-45deg, rgba(250,177,177,.5) 25%, transparent 25%, transparent 50%, rgba(250,177,177,.5) 50%, rgba(250,177,177,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,177,177,.5) 25%, transparent 25%, transparent 50%,  rgba(250,177,177,.5) 50%, rgba(250,177,177,.5) 75%, transparent 75%, transparent 100%);
  background-size   : 36px 36px;
  height            : 20px;
}
.cakecolor3{
  margin            : 0px;
  background-color  : #fffff9;
  background-image  : linear-gradient(-45deg, rgba(250,177,177,.5) 25%, transparent 25%, transparent 50%, rgba(250,177,177,.5) 50%, rgba(250,177,177,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,177,177,.5) 25%, transparent 25%, transparent 50%,  rgba(250,177,177,.5) 50%, rgba(250,177,177,.5) 75%, transparent 75%, transparent 100%);
  background-size   : 18px 18px;
  height            : 10px;
}
.cakeframe {
  max-width         : 300px;
  height            : auto;
  padding           : 8px;
  margin            : auto;
  background-color  : #fef4f4;
  text-align        : center;
  object-fit        : scale-down;
  border            : 1px solid #dcd6d9;
  border-radius     : 10px;
  display           : block;
}
.cakename{
  background-image  : linear-gradient(-45deg, rgba(248,229,140,.5) 25%, transparent 25%, transparent 50%, rgba(248,229,140,.5) 50%, rgba(248,229,140,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(248,229,140,.5) 25%, transparent 25%, transparent 50%,  rgba(250,177,177,.5) 50%, rgba(248,229,140,.5) 75%, transparent 75%, transparent 100%);
  margin-top        : 2px;
  background-color  : #fff8dc;
  font-size         : 18pt;
  text-align        : center;
  padding           : 8px;
  border-radius     : 10px 10px 0 0;
  width             : border-box;
}
.title20{
  font-size         : 20pt;
  text-align        : center;
  padding           : 10px;
  margin            : 0px;
}
.titleline{
  margin            : 0px;
  background-color  : #bd6856;
  height            : 6px;
}
.cakeframeend{
  clear             : left;
}
.contbar{
  border-radius     : 20px;
  font-size         : 14pt;
  padding           : 5px;
  margin            : 5px;
  color             : #bd6856;
  border            : 3px double #bd6856;
  text-align        : center;
}
.cakecat{
  font-size         : 8pt;
  color             : #006e54;
  margin            : 2px 10px;
}
.cakeshop{
  font-size         : 10pt;
}
.catshop{
  text-align        : right;
  margin            : 2px 10px;
}
.cakeline{
  margin            : 0px;
  background-color  : #bd6856;
  height            : 3px;
}
.cakeprice{
  text-align        : right;
  font-size         : 10pt;
  margin            : 2px 10px;
}
.cakerepo{
  background        : repeating-linear-gradient(#fde8d0, #fde8d0 5px, #fef4f4 0, #fef4f4 10px);
  padding           : 10px;
  border-radius     : 10px;
  width             : auto;
  overflow          : auto;
  font-size         : 13pt;
  line-heigh        : 160%;
  margin            : 5px 10px;
}
.cakemat{
  font-size         : 9pt;
  border-radius     : 10px;
  border            : 1px solid #e9dfe5;
  width             : auto;
  padding           : 5px;
  margin            : 5px 10px 5px 5px;
  overflow          : auto;
}
.comingsoon{
  text-align        : center;
  font-size         : 12pt;
  padding           : 5px;
  border-radius     : 10px;
  border            : 3px double #ec6800;
}
.caketype2{
    display: inline-block;
    text-decoration: none;
    background: #e597b2;
    color: #FFF;
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #e597b2;
    border: dashed 1px #FFF;
    transition: .4s;
  margin            : 10px;
  font-size         : 16pt;
}
.caketype2 : hover {
  background: #fef4f4;
  color: #c53d43;
}
.cake-list{
  text-align   : center;
  padding      : 3px;
  margin-bottom     : 3px;
}
.cakeshop2{
    display: inline-block;
    text-decoration: none;
  background: repeating-linear-gradient(90deg, #e0ebaf, #e0ebaf 10px, #d8e698 0, #d8e698 20px);
    color: #69821b;
    width: 400px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #d8e698;
  margin            : 10px;
  font-size         : 16pt;
}
.cakeshop2 : hover {
  color             : #aa4c8f;
  text-decoration   : none;
  border-radius     : 15px 15px 0 0;
  font-size         : 10pt;
  border-left       : 1px solid #aa4c8f;
  border-top        : 1px solid #aa4c8f;
  border-right      : 1px solid #aa4c8f;
}
.shopback{
    text-align: center;
}
.cakeprice2{
  text-decoration   : none;
  border-radius     : 5px;
  font-size         : 10pt;
  margin            : 5px;
  color             : #d66a35;
}
.priceback{
  background        : repeating-linear-gradient(#f2f2b0, #f2f2b0 3px, #f8f4e6 0, #f8f4e6 6px);
  padding           : 10px;
  width             : auto;
  margin            : 5px;
}
.toptab{
  display: inline-block;
  padding: 5px 15px;
  font-family     : "Meiryo UI", "MS UI Gothic", sans-serif;
  font-size: 14px;
  color: #ba2636;
  background-color: #fdeff2;
  cursor: pointer;
  box-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.3);
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
  text-decoration   : none;
}
.toptab:hover{
  color: #fdeff2;
  background-color: #ba2636;
}

.cake-content input[type="radio"] {
  display: none;
}
.cake-content label {
  display: inline-block;
  padding: 5px 10px;
  font-family     : "Meiryo UI", "MS UI Gothic", sans-serif;
  font-size: 18px;
  color: #6c3524;
  background-color: #fff;
  cursor: pointer;
  border-radius: 1px;
  box-sizing: border-box;
}
.cake-content label:hover,
.cake-content input[type="radio"]:checked + label {
  color: #fff;
  background-color: #6c3524;
}
.cake-content .tabbak{
  background-color: #fff8dc;
}
.cake-content .tab-box {
  padding: 10px;
  border: 1px solid #6c3524;
  border-radius: 0 5px 5px 5px;
  box-sizing: border-box;
}

.cake-content > .tab-box > div {
  display: none;
}

#tab0:checked ~ .tab-box > #r0 {
  display: block;
}

#tab1:checked ~ .tab-box > #r1 {
  display: block;
}

#tab2:checked ~ .tab-box > #r2 {
  display: block;
}

#tab3:checked ~ .tab-box > #r3 {
  display: block;
}

#tab4:checked ~ .tab-box > #r4 {
  display: block;
}

#tab5:checked ~ .tab-box > #r5 {
  display: block;
}

#tab6:checked ~ .tab-box > #r6 {
  display: block;
}

#tab7:checked ~ .tab-box > #r7 {
  display: block;
}

#tab8:checked ~ .tab-box > #r8 {
  display: block;
}

#tab9:checked ~ .tab-box > #r9 {
  display: block;
}

#tab10:checked ~ .tab-box > #r10 {
  display: block;
}

#tab11:checked ~ .tab-box > #r11 {
  display: block;
}

#tab12:checked ~ .tab-box > #r12 {
  display: block;
}
#tab13:checked ~ .tab-box > #r13 {
  display: block;
}
#tab14:checked ~ .tab-box > #r14 {
  display: block;
}
#tab15:checked ~ .tab-box > #r15 {
  display: block;
}
#tab16:checked ~ .tab-box > #r16 {
  display: block;
}
#tab17:checked ~ .tab-box > #r17 {
  display: block;
}
#tab18:checked ~ .tab-box > #r18 {
  display: block;
}
#tab19:checked ~ .tab-box > #r19 {
  display: block;
}
#tab20:checked ~ .tab-box > #r20 {
  display: block;
}
#tab21:checked ~ .tab-box > #r21 {
  display: block;
}
#tab22:checked ~ .tab-box > #r22 {
  display: block;
}

/*ショップタブ*/
.shop-content input[type="radio"] {
  display: none;
}
.shop-content label {
  display: inline-block;
  padding: 5px 10px;
  font-family     : "Meiryo UI", "MS UI Gothic", sans-serif;
  font-size: 18px;
  color: #69821b;
  background-color: #fff;
  cursor: pointer;
  border-radius: 1px;
  box-sizing: border-box;
}
.shop-content label:hover,
.shop-content input[type="radio"]:checked + label {
  background-color: #69821b;
  color: #fff;
}

.shop-content .tab-box {
  padding: 10px;
  border: 1px solid #6c3524;
  border-radius: 0 5px 5px 5px;
  box-sizing: border-box;
}

.shop-content > .tab-box > div {
  display: none;
}

/*アレルゲン*/
/*Radio Check*/
.Checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  overflow: hidden;
  padding: 0;
  clip: rect(0, 0, 0, 0);
}

.Checkbox + label {
  display: inline-block;
  position: relative;
  padding-left: 1.25em;
  cursor: pointer;
}

/* 擬似要素で楕円を作る。 */
.Checkbox + label:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  border: 1px solid #767676;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-size: contain;
}

/* フォーカスが当たると楕円の色などを変える。 */
.Checkbox:focus + label:before {
  border-color: #1589ee;
  box-shadow: 0 0 5px #1589ee;
}

/* チェックボックスがチェックされるとボーダーは非表示、画像でチェックボックスを表示する。 */
.Checkbox:checked + label:before {
  border: 0;
  background-image: url("./parts/checkbox.gif");
}

/* disabled（非活性）時にはスタイルを変える。 */
.Checkbox:disabled,
.Checkbox + label[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}