/*
ベースとなるレイアウトおよび
ユーザ編集可能なエレメントで使用するクラスなど
*/
/*--------------------------------------------------------*
 《コンテンツ全体にかかわる設定》
*---------------------------------------------------------*/
html {
    -webkit-text-size-adjust: none;
}
body,
table,
input,
textarea,
select,
option {
    font-family: "Hiragino Kaku Gothic Pro", Helvetica;
}
body {
    width: 100%;
    line-height: 1.5;
    color: #333;
    /*background-color:#FFF;*/
    /*background-image:url(../img/layout/bg.jpg)!important;*/
    background-image: url(../img/layout/bg03.png) !important;
}
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}
a:link {
    color: #a8602c;
}
a:visited {
    color: #a8602c;
}
.normal {
    font-weight: normal !important;
}
.bold {
    font-weight: bold !important;
}
#head {
    line-height: 200%;
}
#head p {
    font-size: 110%;
    text-align: center;
    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-color: #ff3399;
    margin-right: 10px;
    margin-left: 10px;
}
h1 img {
    border: none;
    max-width: 100%;
    height: auto;
}
#container {
    padding: 0px;
    max-width: 640px;
    margin: 0 auto;
}
/*--------------------------------------------------------*
 《レイアウト枠》
*---------------------------------------------------------*/
.wrap {
    clear: both;
    padding: 10px;
}
.wrap img {
    max-width: 100%;
    height: auto;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
.wrap_white {
    clear: both;
    padding: 10px;
    background-color: white;
}
.wrap_white img {
    max-width: 100%;
    height: auto;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.br_pc {
    display: block;
}

.br_sp {
    display: none;
}

@media screen and (max-width: 480px) {
    .br_pc {
        display: none;
    }

    .br_sp {
        display: block;
    }
}
/*--------------------------------------------------------*
 《パンくずリスト画像》
*---------------------------------------------------------*/
.breadcrumb {
    display: block;
    width: 100%;
}
/*--------------------------------------------------------*
 《ページタイトル》
*---------------------------------------------------------*/
.front_title {
    /* 旧(.search_orange)*/
    color: #fff;
    font-size: 95%;
    background-color: #b98522;
    margin: 0;
    padding: 5px 0 5px 12px;
}

.mypage_top {
    /* 旧(.back_yellow)*/
    color: #333;
    background-color: #fbf2e4;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    text-align: center;
    font-size: 85%;
    margin-bottom: 10px;
}
/*--------------------------------------------------------*
 《ログイン・インデックス・エレメントのテキスト》
*---------------------------------------------------------*/
.text_normal {
    color: #333;
    font-size: 80%;
    padding-bottom: 10px;
    padding-top: 10px;
}
/*--------------------------------------------------------*
 《画面の上部・リンクバー・ロゴなど》
  [front_body_top_linkbar]
  エレメント内で使用
*---------------------------------------------------------*/
.g_navi01 {
    overflow: hidden;
    width: 100%;
    padding-bottom: 15px;
    font-size: 70%;
}
.g_navi01 ul li {
    display: table;
    display: block;
    text-align: center;
    float: left;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dcdcdc;
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-color: #dcdcdc;
    border-left-color: #dcdcdc;
    margin-left: -1px;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#c0ffbf),
        color-stop(50%, #c0ffbf),
        color-stop(50%, #97ea96),
        to(#97ea96)
    );
    background: -webkit-linear-gradient(
        linear,
        left top,
        left bottom,
        from(#c0ffbf),
        color-stop(50%, #c0ffbf),
        color-stop(50%, #97ea96),
        to(#97ea96)
    );
}
.g_navi01 ul li a {
    vertical-align: middle;
    display: table-cell;
    color: #444;
    display: block;
    text-decoration: none;
    text-align: center;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#ffffff),
        color-stop(50%, #ffffff),
        color-stop(50%, #edeceb),
        to(#edeceb)
    );
    background: -webkit-linear-gradient(
        linear,
        left top,
        left bottom,
        from(#ffffff),
        color-stop(50%, #ffffff),
        color-stop(50%, #edeceb),
        to(#edeceb)
    );
    background: -moz-linear-gradient(top, #ffffff, #edeceb);
}
.g_navi01 ul {
    list-style-type: none;
}
.w01 {
    width: 20%;
}
.w01 a {
    width: 100%;
    padding-top: 5px;
    height: 33px;
}
.w02 {
    width: 20%;
}
.w02 a {
    width: 100%;
    padding-top: 5px;
    height: 33px;
}
.w03 {
    width: 20%;
}
.w03 a {
    width: 100%;
    padding-top: 10px;
    height: 28px;
}
.w04 {
    width: 20%;
}
.w04 a {
    width: 100%;
    padding-top: 5px;
    height: 33px;
}
.w05 {
    width: 20%;
}
.w05 a {
    width: 100%;
    padding-top: 5px;
    height: 33px;
}
/*--------------------------------------------------------*
 《画面の下部・リンクバー・ロゴなど》
  [front_body_footer]
  エレメント内で使用
*---------------------------------------------------------*/
.mt40 {
    margin-top: 40px !important;
}

.ta_center {
    text-align: center !important;
}

.footer {
    /*background: url("../img/layout/footer_bg.png") repeat-x center bottom #fafafa;*/
}
.footer_logo {
    /*padding: 50px 0px 10px;*/
    padding: 20px 0px 10px;
}
.twoColFixRtHdr #footer {
    width: 850px;
    padding: 0 0px 0 0px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */
    background: #ffffff;
}
.twoColFixRtHdr #footer p {
    margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
    padding: 0px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
}
.f_img {
    text-align: center;
    padding-top: 10px;
}

.inner ul {
    padding-top: 10px;
}
.inner ul li {
    font-size: 85%;
    padding-bottom: 5px;
}
.inner ul li a {
    color: #fff;
}

.copyright p {
    font-size:65%;
    padding-top:10px;
    width: 100%;
    background: #fff;
    padding: 0px 0 14px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #afafaf;
}
#footer {
	padding: 40px 0 0;
	background:#fff;
    border-top: 1px solid #e2b56e;
	
}
#footer a ,
#footer a:link ,
#footer a:active ,
#footer a:hover ,
#footer a:visited {
	color: #746e68;
}
#footer nav {
    max-width: 767px;
    width: 100%;
    margin: 0 auto;
}
/**/	
.nav_2column{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: 90%;
    margin: 0 auto 20px;
}		
/**/	
#footer ul{
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto 0;
	gap: 31px;
	color:#473312;
	width: 100%;
}
#footer ul:first-of-type {
	margin: 0px auto 0!important;
}
#footer .map .footLink a{
    font-size: .75em;
    padding: .5em;
    margin: 0 0 20px;
    border-bottom: 1px solid #746e68;
    text-align: left;
	width: 90%;
	transition: all .3s 0s ease;
    text-decoration: none;
}
#footer .map .footLink a:hover{
    border-bottom: 1px solid #ffe5cb;
}
/*link_arrow02*/
.link_arrow02 a {
	position: relative;
	display: inline-block;
	width: stretch;
	padding: 0 9px 0 0;
	transition: all .3s 0s ease;
}
.link_arrow02 a::before,
.link_arrow02 a::after{
	position: absolute;
	display: block;
	content:"";
	top: calc(50% - 0.5px);
	right: 0;
	width: 6px;
	height: 1px;
	border-radius: 9999px;
	background-color: #313131;
	transform-origin: calc(100% - 0.5px) 50%;
}
.link_arrow02 a::before {
  transform: rotate(45deg);
}
.link_arrow02 a::after {
  transform: rotate(-45deg);
}
.link_arrow02 a:hover{
	opacity: 0.7;
	padding: 0 16px 0 0;
}
/**/
.marks_wrap{
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap:5px;
}
.marks_wrap img{
	width: 100%;
	/*max-width: 180px;*/
	margin: 0 auto 10px;
}
/**/
.footLink{
	width: auto;
	text-align: center;
	line-height: 1.2;
}
.footLink.logo{
	width: 8em;
	margin: 20px auto 40px;
	transition: all .3s 0s ease;
}
.footLink.logo:hover{
	opacity: .7;
}

/*-------------------------------------------------*
 *  メニュー・インデックスなどのリンクブロック背景
 *-------------------------------------------------*/
.link_block {
    /* 旧(.proce)*/
    padding-top: 10px;
    padding-bottom: 10px;
}
.link_block ul li {
    /* 旧(.proce)*/
    list-style-type: none;
    padding-bottom: 5px;
}
.link_block ul li a {
    /* 旧(.proce)*/
    color: #333;
    font-size: 85%;
    text-decoration: none;
    background-image: url(../img/layout/rink_g.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 10px 10px;
    display: block;
    -webkit-background-size: 10px 10px;
    border: thin solid #ccc;
    background-color: #f6f6f6;
    padding: 12px 30px 12px 5px;
}
/*--------------------------------------------------------*
 《CakePHPからの移植》
  主に、エラー表示・デバッグ表示
*---------------------------------------------------------*/
/* Form errors */
form .error {
    background: #ffdacc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-weight: normal;
}
form .error-message {
    -moz-border-radius: none;
    -webkit-border-radius: none;
    border-radius: none;
    border: none;
    background: none;
    margin: 0;
    padding-left: 4px;
    padding-right: 0;
}
form .error,
form .error-message {
    color: #9e2424;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}
/** Notices and Errors **/
.message {
    clear: both;
    color: #fff;
    font-size: 140%;
    font-weight: bold;
    margin: 0 0 1em 0;
    padding: 5px;
}
.success,
.message,
.cake-error,
.cake-debug,
.notice,
p.error,
.error-message {
    background: #ffcc00;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #ffcc00, #e6b800);
    background-image: -ms-linear-gradient(top, #ffcc00, #e6b800);
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#ffcc00),
        to(#e6b800)
    );
    background-image: -webkit-linear-gradient(top, #ffcc00, #e6b800);
    background-image: -o-linear-gradient(top, #ffcc00, #e6b800);
    background-image: linear-gradient(top, #ffcc00, #e6b800);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 18px;
    padding: 7px 14px;
    color: #404040;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.success,
.message,
.cake-error,
p.error,
.error-message {
    clear: both;
    color: #fff;
    background: #c43c35;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#ee5f5b),
        to(#c43c35)
    );
    background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: linear-gradient(top, #ee5f5b, #c43c35);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.success {
    clear: both;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: #3b8230;
    background-repeat: repeat-x;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#76bf6b),
        to(#3b8230)
    );
    background-image: -webkit-linear-gradient(top, #76bf6b, #3b8230);
    background-image: -moz-linear-gradient(top, #76bf6b, #3b8230);
    background-image: -ms-linear-gradient(top, #76bf6b, #3b8230);
    background-image: -o-linear-gradient(top, #76bf6b, #3b8230);
    background-image: linear-gradient(top, #76bf6b, #3b8230);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
p.error {
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 120%;
    padding: 0.8em;
    margin: 1em 0;
}
p.error em {
    font-weight: normal;
    line-height: 140%;
}
.notice {
    color: #000;
    display: block;
    font-size: 120%;
    padding: 0.8em;
    margin: 1em 0;
}
.success {
    color: #fff;
}
/* excerpt */
.cake-code-dump pre,
.cake-code-dump pre code {
    clear: both;
    font-size: 12px;
    line-height: 15px;
    margin: 4px 2px;
    padding: 4px;
    overflow: auto;
}
.cake-code-dump .code-highlight {
    display: block;
    background-color: rgba(255, 255, 0, 0.5);
}
/** Elements **/
#url-rewriting-warning {
    display: none;
}
/*-------------------------------------------------*
 *  配送情報関連
 *-------------------------------------------------*/
.haisou_info {
    padding: 10px;
    text-align: center;
}
.haisou_info img {
    width: 70%;
}
.haisou_info input {
    /*チェックは見えなくする*/
    display: none;
}
.haisou_info .hidden_show {
    height: 0; /*中身を非表示にしておく*/
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s; /*伸ばす速度*/
}
.haisou_info input:checked ~ .hidden_show {
    /*クリックで中身表示*/
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
.haisou_kigen {
    padding: 10px 0;
}
.haisou_kigen_img {
    float: left;
    width: 28%;
    padding: 5px 0 0 8px;
    text-align: right;
}
.haisou_kigen_tx {
    float: left;
    width: 66%;
    padding: 5px 0 0 15px;
    color: #ff0000;
    font-size: 90%;
    font-weight: bold;
}
.haisou_kigen_img2 {
    float: left;
    width: 35%;
    padding: 0 0 0 7px;
    text-align: right;
}
.haisou_kigen_tx2 {
    float: left;
    width: 60%;
    padding: 5px 0 0 15px;
    color: #ff0000;
    font-size: 90%;
    font-weight: bold;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.box-text {
    display: inline-block;
}
@media screen and (max-width: 480px) {
    .top_button {
        flex-direction: column-reverse;
    }
    .haisou_info img {
        width: 100%;
    }
    .haisou_kigen_img {
        width: 20%;
        padding-top: 9px;
    }
    .haisou_kigen_tx {
        width: 70%;
        padding: 5px 0 0 10px;
    }
    .haisou_kigen_img2 {
        width: 21%;
        padding: 3px 0 0 12px;
    }
    .haisou_kigen_tx2 {
        width: 72%;
        padding: 5px 0 0 8px;
    }
}
@media screen and (max-width: 320px) {
    .haisou_kigen_img2 {
        width: 20%;
        padding: 3px 0 0 5px;
    }
    .haisou_kigen_tx2 {
        width: 73%;
        padding: 5px 0 0 6px;
        font-size: 85%;
    }
}
/*-------------------------------------------------*
 *  ボタンデザイン
 *-------------------------------------------------*/
#btn_keizoku {
    padding: 5px;
    text-decoration: none;
    border: none;
    background: #ff6400;
    text-align: center;
    color: #ffffff;
    font-size: 120%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 2px 2px 2px 0px #b6b6b6;
}
#btn_keizoku_no {
    padding: 5px;
    text-decoration: none;
    border: none;
    background: #767676;
    text-align: center;
    color: #ffffff;
    font-size: 105%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 2px 2px 2px 0px #b6b6b6;
}
.link_box {
    padding: 10px 10px 1px;
}
.link_box .link_button,
.kaiyaku_button {
    display: block;
    margin: 10px 0 0;
    text-align: center;
    font-weight: normal;
    padding: 4px 8px;
    background: #dcdcdc;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fefefe),
        to(#dcdcdc)
    );
    background-image: -webkit-linear-gradient(top, #fefefe, #dcdcdc);
    background-image: -moz-linear-gradient(top, #fefefe, #dcdcdc);
    background-image: -ms-linear-gradient(top, #fefefe, #dcdcdc);
    background-image: -o-linear-gradient(top, #fefefe, #dcdcdc);
    background-image: linear-gradient(top, #fefefe, #dcdcdc);
    color: #333;
    border: 1px solid #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none;
    text-shadow: #fff 0px 1px 0px;
    min-width: 0;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0px 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0px 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-user-select: none;
    user-select: none;
}

.kakudai_button {
    display: block;
    margin: 10px 0 0;
    text-align: center;
    font-weight: normal;
    padding: 4px 8px;
    background: #dcdcdc;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fefefe),
        to(#dcdcdc)
    );
    background-image: -webkit-linear-gradient(top, #fefefe, #dcdcdc);
    background-image: -moz-linear-gradient(top, #fefefe, #dcdcdc);
    background-image: -ms-linear-gradient(top, #fefefe, #dcdcdc);
    background-image: -o-linear-gradient(top, #fefefe, #dcdcdc);
    background-image: linear-gradient(top, #fefefe, #dcdcdc);
    color: #333;
    border: 1px solid #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none;
    text-shadow: #fff 0px 1px 0px;
    min-width: 0;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0px 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0px 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-user-select: none;
    user-select: none;
}

.zentai img {
    display: block;
    padding: 0;
    line-height: 1;
    width: 100%;
}
/*チェックは見えなくする*/
.kaiyaku #label1 {
    display: none;
}
/*中身を非表示にしておく*/
.kaiyaku .wrap {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
/*クリックで中身表示*/
.kaiyaku,
input:checked ~ .wrap {
    padding: 10px 5px;
    height: auto;
    opacity: 1;
}
.kaiyaku .kaiyaku_button {
    margin: 0 5px;
}
#btn_reqOrder {
    background: rgba(0, 0, 0, 0) url("../img/layout/nenkan_henkou_button.gif")
        no-repeat scroll center top;
    border: 0 none;
    height: 80px;
    width: 600px;
}

.sateicl {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: small;
}
.sateicl td {
    border: 1px dotted #999999;
    line-height: 150%;
    text-align: center;
    height: 40px;
    padding: 10px;
}

.txtS {
    font-size: 75%;
}

.txtSS {
    font-size: 60%;
}

.txtL {
    font-size: 130%;
}
.nenkan_thanks_txt img {
    max-width: 160px;
    float: left;
    margin-left: 5px;
}

.nenkan_thanks_txt div {
    padding: 40px 10px 20px 20px;
    font-size: 19px;
}

@media screen and (max-width: 480px) {
    .nenkan_thanks_txt img {
        max-width: 90px;
    }

    .nenkan_thanks_txt div {
        padding: 7px 0px 0px 20px;
        font-size: 18px;
    }
}

.nenkan_thanks_txt {
    margin-top: 10px;
}

.kakudai_button {
    margin: 0 auto;
    font-size: 17px;
    white-space: pre-line;
    word-break: break-all;
}

/*-------------
 * popup
 *-------------*/
/*popup_label*/
.popup_label:hover {
    cursor: pointer;
}
.question {
    position: relative;
    padding-left: 22px;
    text-decoration: underline;
}
.question::before {
    position: absolute;
    display: block;
    left: 0;
    top: -2px;
    content: "?";
    width: 18px;
    height: 18px;
    line-height: 19px;
    text-align: center;
    background: #bb3c00;
    border-radius: 999px;
    font-weight: bold;
    color: #fff;
}
input#popup_01 {
    display: none;
}
/* 背景 */
.overlay {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 70;
    width: 100%;
    height: 100%;
}
.bg_gray {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 80;
}
/* ウィンドウ部分 */
.popup_window {
    box-sizing: border-box;
    width: 90%;
    max-width: 600px;
    padding: 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 0;
    box-shadow: 0px 0px 20px -6px rgba(0, 0, 0, 0.6);
    z-index: 90;
    opacity: 0;
}
@media screen and (max-width: 480px) {
    .popup_window {
        padding: 5%;
    }
}

.popup_message img {
    display: block;
    margin: 0 auto;
    width: 100%;
}
/* 閉じるボタン */
.btn_close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: pointer;
    font-size: 14px;
}
.btn_close:hover {
    opacity: 0.7;
}
.btn_close span {
    display: block;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    text-align: center;
    line-height: 17px;
    background-color: #5b5b5b;
    border-radius: 0;
    color: #fff;
    font-weight: bold;
}
/* クリックで表示 */
#popup_01:checked ~ .overlay {
    visibility: visible;
}
#popup_01:checked ~ .overlay .popup_window {
    animation: fadein 500ms forwards;
    animation-timing-function: ease-in-out;
}
@keyframes fadein {
    100% {
        opacity: 1;
    }
}

.bordered-box {
     border: 1px solid #998d77; 
}
@media screen and (max-width: 767px) {
    .bordered-box {
        border: none; 
    }
}