/* © 岡田商店 binramune
   https://www.dagashiyasan.co.jp/assets/css/common.css
*/

/* BASE */
a {color:#4C2912; text-decoration:none;}
a:visited {color:#68472F;}
a:active {color:#F4E795;}
a:hover {color:#C19A4D;}

body{
	margin:0 auto;
	font-family:メイリオ, "MS UI Gothic", "ＭＳ ゴシック", sans-serif;
	font-size:16px;
	color:#68472F;
	background-image:url('/assets/img/wall_2.png');
	background-repeat:repeat;
	background-color:#FBF5AE;
	width:100%;
	height:auto;
	white-space:normal;
}

article{
	width:100%;
	height:auto;
	vertical-align:top;
	margin:0.5em 0;
}

.inner{width:100%; height:auto;}

.default{
	display:block;
	width:960px;
	height:auto;
	margin:0 auto;
	font-size:0.96em;
}

/* HEADER */
.headder{
	width:100%;
	height:22%;
	top:0;
	right:0;
	margin:0 auto;
	padding:0.5em 0 1.5em;
	background-image:url('/assets/img/headder_1.png');
	background-repeat:repeat-x;
	background-size:contain;
	box-shadow:inset 0 20px 12px rgba(104,71,47,0.35);
}

.headder_title{
	text-align:center;
	width:100%;
	margin:0 auto;
}

.headder_title img{
	width:100%;
	max-width:960px;
	height:auto;
	display:block;
	margin:0 auto;
	padding-bottom: 30px;
}

/* FOOTER */
.footer{
	font-size: .86rem;
	background-color:#F8982D;
	height:auto;
	color:#fff;
	width:100%;
	margin:0 auto;
	padding:7px;
	position:fixed;
	top:auto;
	bottom:0;
	left:0;
	right:0;
	z-index:5;
	box-shadow:0 -1px 13px #DBD875;
	display:inline-block;
	text-align:center;
}

.footer a{color:#FFF; text-decoration:none; margin:0 1em 0 0;}
.footer a:visited{color:#FFF;}
.footer a:active{color:#FFF;}
.footer a:hover{color:#68472F;}

div.footer p{
	font-weight:bold;
	margin-bottom:0.3em;
}

div.footer p > img{
	vertical-align:middle;
	margin-right:4px;
	margin-top:-1px;
}

.copyright{
	font-weight:normal !important;
	font-size:0.7em;
}

/* original */
.product-status-ended{
	display:inline-block;
	position:relative;
	top:-2px;
	margin:0 0 0 10px;
	padding:4px 12px;
	background:#c62828;
	color:#fff;
	border-radius:2px;
	font-size:0.82em;
	font-weight:bold;
	letter-spacing:0.03em;
	line-height:1.2;
}

/* COLUMNS */
.col-1{
	display:inline-block;
	width:calc(100% - 2.5%);
	height:auto;
	margin:0;
	padding:0 1%;
	vertical-align:top;
}

.col-2{
	display:inline-block;
	width:calc(50% - 2.5%);
	height:auto;
	margin:5px auto;
	padding:0 1%;
	vertical-align:top;
}

.col-2a{
	display:inline-block;
	width:calc(35% - 2.8%);
	height:auto;
	margin:0;
	padding:0 1%;
	vertical-align:middle;
}

.col-2b{
	display:inline-block;
	width:calc(65% - 2.8%);
	height:auto;
	margin:0;
	padding:0 1%;
	vertical-align:middle;
}

.col-3{
	display:inline-block;
	width:calc(33% - 3%);
	height:auto;
	margin:0;
	padding:0 1%;
	vertical-align:top;
}

/* SHARED PAGE CLASSES */
.gaiyou{
  display:flex;
  gap:1.5em;
  align-items:flex-start;
  width:100%;
  height:auto;
}

.gaiyou_01{
  order:1;
  flex:0 0 36%;
  height:auto;
  border:none;
  padding:10px 0.5em 60px;
  box-sizing:border-box;
}

.gaiyou_02{
  order:2;
  flex:1 1 auto;
  min-width:0;
  height:auto;
  border:none;
  margin:10px 0;
  padding:0 0.5em;
  box-sizing:border-box;
}

.gaiyou_01t{
  width:100%;
  line-height:22px;
  vertical-align:top;
}

.gaiyou_01td{
  line-height:22px;
  padding:10px;
  vertical-align:top;
  border:1px #AD9D59 solid;
  text-align:left;
}

.gaiyou_01 p{
  text-align:left;
}

.toiawase{
	display:flex;
	gap:30px;
	align-items:stretch;
	width:calc(100% - 2.5%);
	height:auto;
	margin:5px auto;
	padding:0 1%;
	box-sizing:border-box;
}

.toiawase2{
	display:block;
	width:calc(100% - 30px);
	height:auto;
	margin:20px auto 10px;
	padding:15px;
	text-align:center;
	box-sizing:border-box;
}

.toiawase .col-2{
	flex:1;
	background:rgba(255, 255, 255, 0.341);
	border:1px solid rgba(120,80,20,0.18);
	border-radius:12px;
	padding:18px 22px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
}

.toiawase .title{
	border-bottom:2px solid rgba(120,80,20,0.25);
	padding-bottom:6px;
	margin-bottom:12px;
}

.toiawase ul{
	padding-left: 1.6em;
	line-height: 1.4;
}
.toiawase ul li{
	margin-top:1em; 
}

.original01{
	display:inline-block;
	width:calc(100% - 2.6em);
	height:auto;
	padding:1em;
	border:2px #F8F295 solid;
	border-radius:10px;
	background-color:#FFF;
	margin-bottom:1em;
	vertical-align:middle;
}

.original02{
	display:inline-block;
	width:calc(50% - 1.6em);
	height:190px;
	padding:0.5em;
	vertical-align:middle;
	border:2px #F8F295 solid;
	border-radius:10px;
	background-color:#FFF;
}

.spacer{
	width:100%;
	height:1px;
}

hr{
	border:none;
	border-top:#68472F 1px solid;
	height:1px;
	padding-top:0;
	margin:1em 0;
}

/* LINK ARROW */
.link_arrow{
	display:inline-flex;
	align-items:center;
	gap:0.45em;

	font-weight:bold;
	white-space:nowrap;
}

.link_arrow::before{
	content:"▶";

	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:15px;
	height:15px;

	border-radius:50%;

	background:#68472F;
	color:#FFF;
	padding: 2.1px 1px 0 1px;
    font-size: 13px;
	line-height:1;

	flex-shrink:0;
}

.link_arrow:hover::before{
	background:#C19A4D;
}

/* UTILITIES */

.mg30_0 {margin: 30px 0;}
.mg50_0 {margin: 50px 0;}

.mgt5{margin-top:5px;}
.mgt10{margin-top:10px;}
.mgt15{margin-top:15px;}
.mgt20{margin-top:20px;}
.mgt25{margin-top:25px;}
.mgt30{margin-top:30px;}
.mgt50{margin-top:50px;}
.mgt60{margin-top:60px;}

.mgl8{margin-left:8px;}

.mgb5{margin-bottom:5px;}
.mgb10{margin-bottom:10px;}
.mgb15{margin-bottom:15px;}
.mgb20{margin-bottom:20px;}
.mgb25{margin-bottom:25px;}
.mgb30{margin-bottom:30px;}
.mgb50{margin-bottom:50px;}
.mgb60{margin-bottom:60px;}

.pad5{padding:5px;}
.pad8{padding:8px;}
.pad10{padding:10px;}
.pad15{padding:15px;}
.pad20{padding:20px;}

.pad010{padding:0 10px;}
.pad01005{padding:0 10px 0 5px;}
.padb10{padding-bottom:10px;}

h1{
	font-weight:bolder;
	font-size:1.5em;
}

h2{
	font-weight:bolder;
	font-size:0.96em;
}

.kakomi01{
	padding:2px 1px;
	margin-right:10px;
	border:1px #68472F solid;
	background-color:#68472F;
	color:#fff;
}

.kakomi02{
	padding:3px 8px;
	background-color:#F8E857;
	border-radius:20px;
}

.font20{font-size:20px;}
.font16{font-size:16px;}
.font10{font-size:10px;}
.font8{font-size:8px;}

.font_s{font-size:80%;}
.font_m{font-size:90%;}

.bol{font-weight:bold;}

span.red{color:red;}
span.uline{text-decoration:underline;}

.txt-ct{text-align:center;}
.txt-r{text-align:right;}
.txt-l{text-align:left;}

img.left{display:inline-block;}
img.right{float:right;}

span.marker01{
	background:linear-gradient(transparent 25%, #FFD98D 70%);
	border-radius:3px;
}

span.inl{display:inline-block !important;}

.title{
	font-weight:bolder;
	font-size:1.2em;
}

.img{
	text-align:center;
	padding:0.5em 0;
}

.txt{
	text-justify:inter-ideograph;
	text-align:justify;
	overflow-wrap:break-word;
	word-break:break-all;
}

.note{
	display:block;
	color:red;
	font-size:0.8em;
	font-weight:normal;
}

.pc_on{display:block;}
.sp_on{display:none;}

/* RESPONSIVE */
@media screen and (max-width:688px){

  *{
    box-sizing:border-box;
  }

  body{
    overflow-x:hidden;
  }

  .col-1,
  .col-2,
  .col-2a,
  .col-2b,
  .col-3{
    display:block;
    width:100%;
    height:auto;
    margin:5px 0;
    padding:0 1%;
    vertical-align:top;
  }

  .col-2b > .col-3{
    display:inline-block;
    width:48%;
    height:auto;
    margin:5px 0;
    padding:0 1%;
  }

  .default{
    display:block;
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0 2%;
  }

  .sp_on{display:block;}
  .pc_on{display:none;}

  span.inl{display:block !important;}

  .title{
    font-weight:bolder;
    font-size:1em;
  }

  h1{
    font-weight:bolder;
    font-size:1.2em;
  }

  h2{
    font-weight:bolder;
    font-size:0.90em;
  }

  .headder{
    height:auto;
    padding:0.35em 0 0.7em;
    background-size:auto 100%;
  }

  .headder_title img{
    width:96%;
    max-width:520px;
    height:auto;
    padding-bottom:8px;
  }

  .footer{
    font-size:0.8em;
    background-color:#F8982D;
    height:auto;
    color:#fff;
    width:100%;
    margin:0 auto;
    padding:0.2em 0;
    position:fixed;
    top:auto;
    bottom:0;
    left:0;
    right:0;
    z-index:5;
    box-shadow:0 -1px 13px #DBD875;
    display:block;
  }

  .footer p{
    line-height:1.6em;
  }

  .gaiyou{
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
  }

  .gaiyou_02{
    order:1;
    width:100%;
    margin:10px 0;
    padding:0 10px;
  }

  .gaiyou_01{
    order:2;
    width:100%;
    padding:25px 10px 60px;
    margin-top:25px;
  }

  .original01,
  .original02{
    display:block;
    width:100%;
    height:auto;
    margin:0 0 1em;
    padding:0.5em;
    border:2px #F8F295 solid;
    border-radius:10px;
    background-color:#FFF;
  }

  .toiawase{
    flex-direction:column;
    gap:15px;
    width:100%;
    padding:0;
  }

  .toiawase2{
    display:block;
    width:100%;
    height:auto;
    margin:10px auto;
    padding:0 10px;
    text-align:left;
  }
}

#pagetop{
  position:fixed;
  right:18px;
  bottom:113px;
  z-index:9999;

  opacity:0;
  visibility:hidden;
  transition:0.25s ease;

  width:36px;
  height:36px;

  border-radius:50%;

  background:rgba(255, 223, 42, 0.353);
  /* border:2px solid #b59d32; */

  box-shadow:
    0 3px 10px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.45);

  backdrop-filter:blur(2px);
}

#pagetop.show{
  opacity:1;
  visibility:visible;
}

#pagetop a{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#6b4a00;

  font-size:36px;
  font-weight:bold;

  text-decoration:none;

  transition:0.2s ease;
}

#pagetop a:hover{
  transform:translateY(-2px);
}

/* scroll control */
html{
  scroll-behavior:smooth;
}

[id]{
  scroll-margin-top:20px;
}

/* news */
.news-more{
  display:block;
  box-sizing:border-box;
  width:100%;
  margin-top:6px;
  padding-right:1em;
  text-align:right;
  font-weight:normal;
  color:#68472F;
  text-decoration:none;
}

.news-more i{
  margin-right:4px;
  font-size:0.86em;
}

.news-more:hover{
  text-decoration:underline;
}

.news-title{
    font-weight: 700;
	padding-bottom: 8px;
}

.news-label{
    font-weight: 700;
}

/* scrollbar */
/* Chrome / Edge / Safari */
/* Chrome / Edge / Safari */
.info_text::-webkit-scrollbar{
  width:12px;
}

.info_text::-webkit-scrollbar-track{
  background:#fff;
  border-radius:999px;
}

.info_text::-webkit-scrollbar-thumb{
  background:#2d7aa0;
  border-radius:999px;
  border:2px solid #fff;
}

.info_text::-webkit-scrollbar-thumb:hover{
  background:#2c8bbb;
}

/* Firefox */
.info_text{
  scrollbar-color:#9b7a52 #fff;
}

/* for tablet */
@media screen and (min-width:689px) and (max-width:1100px){
.default{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;
	font-size:0.96em;
  padding:0 1em 0;
  box-sizing:border-box;
}
}