:root {
  /* Colors */
	--keycol-bg:#faf7ef;
	--keycol-purple:#462976;
	--keycol-green:#197a4a;
	--keycol-lightgreen:#e1ff05;
	--keycol-navy:#131a67;
	--keycol-red:#a51624;
	--keycol-ume:#b46883;
	--keycol-take:#92904a;
	--keycol-matu:#6d8e77;
	--keycol-green2:#a8cfbc;
	--keycol-red2:#c5858b;
	--keycol-purple2:#988cab;
  /* Fonts */
  /* Effects */

}

body{
background: var(--keycol-bg);
font-size:12px;
	background-image: url(/image/bg_sp.webp);
background-size: auto;
background-repeat: repeat;

}

img{ width:100%; height:auto; }

main{
	width:100%;
	margin:0 auto 50px;
	padding-bottom: 5px;
	min-height: calc(100vh - 97px - 360px);
}

h1{ font-size:2.4rem;}

h1 img{border-radius:5px ; margin-bottom: 0px;}

h2{
	padding:6px 1%;
	margin: 50px 0 10px;
	font-size:2.2rem; 
	letter-spacing: 2px;
    color: #FFF;
    font-weight: bold;
    text-align:center;
    background-image: url(/biz/img/h2bg.png);
   	font-family:"YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
   	display:flex;
   	align-items: center;
   	justify-content:center;
   	gap:10px;
 }

h2 img.ac{
    width: 18px;
    height: auto;
    margin-top: -4px;
}
h2 img.h2txt{
	width:auto;
	height:18px;
}

h3{
	color:#060f20;
	margin: 0 0%;
    padding: 5px 1% 0;
	font-size:1.8rem;
	font-weight:bold;
   	font-family:"YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}


.bg1{
	background-image: url(/image/bg_sp.webp);
}
.bg2{

}
.separator{
    margin: 90px 0;
    padding: 10px 0;
    text-align: center;
    color: #ffffff;
    font-size: 1.6rem;
    letter-spacing: 3px;
	background: #2D343C;
    border-top: 30px solid #AAAE93;
    border-bottom: 30px solid #350023;
}
section{
	width:700px;
	margin:0 auto;
	padding:5px 1%;
}

p{
	padding:5px 1%;
	font-size: 1.4rem;
	color: #282828;
	line-height: 1.6;
	color:inherit;
}

small{
	font-size:0.8em;
	font-weight:inherit;
	line-height:1;
}


a {
	color: #2f6189;
	text-decoration: none;
}

header{
	width:100%;
	padding: 0px 0%;
	background-color: #000;
	color:#fff;
}

#header .header-inner{
/*	display:flex;
	justify-content:flex-start;
	width:780px;
	margin: 0 auto;*/
	width:780px;
	margin: 0 auto;
}
#header .header-inner span{
/*	font-size:1.4rem;
	color:#fff;
	text-align:right;
	display: inline-flex;
    align-items: center;
    font-family:  "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    letter-spacing: 1px;*/
}
#header img{
width:100%;
height:auto;
}


/*-----------------*/
/*  見積・注文フォーム  */
/*-----------------*/

#hero{
	padding:0;
	padding-top: 15px;
/*	padding-bottom: 60px;*/
/*    margin-bottom: 5px;*/
}

.first-view-wrap{
	display:flex;
}
.first-view{
	width:100%;
	padding: 10px 0% 10px;
	text-align:center;
}
.first-view img{
	margin: 10px 0 0 0;
}

#hero h2{
/*	margin: 20px 0 5px;
	padding: 0px 0% ;
	font-size: 2.8rem;
	line-height:1.2;
	letter-spacing: 0.5px;
	color: #ab0104;
	font-family:  "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	text-align: center;*/
}
#hero p{
	font-size:1.1rem;
	letter-spacing: 0.5px;
	line-height:1.2;
}
#hero .card-wrap{
	width: 100%;
	display: flex;
	padding: 10px 0px 0px;
	gap: 10px;
}
.hero-card{
	width: 24%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	padding: 15px 3% 20px;
	gap: 3px;
	background: #ae0519;;
	border-radius: 5px;
	text-align: center;
}
.hero-card div{
    line-height: 1.2;
    font-size: 1.8rem;
    font-weight: bold;
    color:#fff;
}
.hero-card .hero-card-area{
	font-size:1.6rem;
	line-height: 1.4;
}
.hero-card img{
	width:80px;
	height:80px;
	opacity: 1;
}
.itemimage{
	height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0 0%;
    opacity: 1;
	border-radius: 5px;
	width:700;
	height:500;
}
.hero-card dl{
	width:100%;
}
.hero-card dt{
	font-size:1.4rem;
	font-weight:bold;
	padding: 2px 2px 0;
    margin-bottom: 2px;
    border-bottom: 1px solid #aaa;
    color:#69090b;
}

.hero-card dd{
	font-size:1.1rem;
}

.first-view-wrap .cta{
	width:56%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first-view-wrap .cta .btn {
    display: block;
	width: 340px;
    margin: 0 auto;
    padding: 50px;
    color: #fff;
    background-color: #7d0700;
    text-align: center;
    font-size: 2.1rem;
    font-weight: bold;
    border-radius: 10px;
}
#hero .row{
	display:flex;
	padding: 5px 3% 5px;
	margin-bottom: 5px;
    font-size: 1.4rem;
	justify-content:center;
}

.poli_wrap{
	padding:5px 0%;
	display:flex;
	flex-wrap:nowrap;
	position:relative;
	justify-content: space-between;
	margin-bottom: 20px;
	gap:2px;
}

.poli_card{
	width:calc(100% / 3);
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color:#fff;
	border: 1px solid #aaa;
	padding: 10px 5px;
	border-radius:5px;
}
.poli_wrap .ico-num{
	width:30px;
	height:30px;
}
.poli_card_title_wrap{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.poli_card_title{
    font-size: 1.7rem;
    letter-spacing: -0.3px;
	line-height:1;
	margin:10px 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS PGothic", sans-serif;
	font-weight:bold;
	text-align:center;
}

#hero .poli_card p{
	padding: 10px 11px;
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: 0.3px;
	text-align: left;
}

.poliimg.selected {
	width: 100%;
	height:auto;
	z-index: 102; /* overlayより前に */
}

.menu_wrap{
	padding:10px 3%;
/*	margin-bottom: 30px;*/
	text-align: center;
}
.menu_wrap .menu_set{
	width: 502px;
	margin: 30px auto;
	height:auto;
	border: 1px solid #aaa;
}

.menu_wrap .menu{
	width:500px;
	height:auto;
    border: 1px solid #aaa;
    background: #ffffff;
}





#reviews{
	margin: 0px auto 20px;
	padding: 30px 0% 20px;
	border-radius: 0px;
}
#reviews h2{
/*	padding: 3px 3%;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 90%;
    margin: 0px auto;
    color: #232631;
    border-radius: 0px;
    font-size:2.6rem;*/
}
.review_wrap{
	display:flex;
	gap: 10px;
}
.review{
	display:flex;
	width: 32%;
    margin: 5px auto;
    gap: 5px;
    position:relative;
    border: 4px solid #d7d6c5;
    border-radius: 5px;
    border: 1px solid #ddd
}
.review h3{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS PGothic", sans-serif;
	font-size:1.4rem;
	font-weight:bold;
	color: #232631;
}

.review p{
	padding: 7px 1%;
	font-size:1.3rem;
	color: #222e37;
}

.review img{
    width: 110px;
    height: 110px;
}

.review .ico-circle{
	position:absolute;
	bottom: -12px;
	right:0px;
}
.review .txt{
    width: 100%;
    background: #fff;
    padding: 20px 20px 80px;
}
.bgcol-1{

}
.bgcol-2{

}
.bgcol-3{

}



#shopinfo{
    margin: 0px auto 30px;
    padding: 15px 0% 20px;
    border-radius: 0px;
}
#shopinfo .photo-wrap{
	width:100%;
	margin:5px auto;
	display:flex;
	justify-content:center;
	gap:15px;
}
#shopinfo .photo-wrap img{
	width: calc((100% - 30px) / 3);
	border-radius:5px;
}

#shopinfo .row.rev{
	margin-top: 10px;
	display:flex;
	flex-direction: row-reverse;
	justify-content:center;
	gap: 15px;
}

#shopinfo h2{
/*	padding: 3px 3%;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 90%;
    margin: 0px auto;
    color: #232631;
    border-radius: 0px;
    font-size:2.6rem;*/
}

/* table */
#shopinfo .table-wrap{overflow-x:auto;background:#fff;}

#shopinfo table{
	border-collapse :collapse;
	width: calc(50% - 15px);
	margin: 10px 0 0;
	border: 1px solid #ddd;
}
#shopinfo tr{
	border-bottom:1px solid #9f9a9a;
}
#shopinfo tr:last-of-type{border-bottom::0px:}
#shopinfo th,#shopinfo td{
	padding:8px 10px;
	text-align:left;
	border-bottom:1px solid #eef2f7;
	font-size:1.3rem;
}
#shopinfo td{
	background-color:#fff;
}
#shopinfo th{
	width:63px;
	font-weight: 700;
	color: #e5e5e5;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	line-height: 1.2;
	background: #363545;
}


#shopinfo .cor1{border-radius:5px 0 0 0;}
#shopinfo .cor2{border-radius:0 5px 0 0;}
#shopinfo .cor4{border-radius:0 0 5px 0;}
#shopinfo .cor3{border-radius:0 0 0 5px;}


#shopinfo tbody tr:hover{background:#fbfdff}
#shopinfo td.small{font-size:1.1rem;}

.fa-square-instagram{
	width:14px;
	height:14px;
	margin-right:2px;
	background: #d6249f;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fa-line{
	width:14px;
	height:14px;
	margin-right:2px;
	background: #FFF;
	color:#339b24;;
}


.map-wrap{
	margin: 10px 0% 0;
	width: 50%;
	padding: 10px 0 0 0;
	border:1px solid #ddd;
}

.map-wrap iframe{
    width: 100%;
    height: 415px;
    border-radius: 5px;
    overflow: hidden;
}

.groupmemo{
	margin:5px 0;
	text-align:right;
	font-size:1.2rem;
}



#delivery-area{
    margin: 0px auto 30px;
    padding: 15px 0% 20px;
    border-radius: 0px;
}
#delivery-area h2{
/*	padding: 3px 3%;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 90%;
    margin: 0px auto;
    color: #232631;
    border-radius: 0px;
    font-size:2.6rem;*/
}
#delivery-area .deli-map{
    height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
}
#delivery-area p{
	text-align:center;
    font-size: 1.6rem;
}




#mokuzi{
	width: 330px;
	border: 1px solid #333;
	border-width: 1px 0;
	margin: 50px auto 90px;
	padding: 5px 1% 15px;
	font-size: 1.5rem;
}
#mokuzi h2{
	margin:5px 0 5px;
    padding: 5px 5px;
    text-align: center;
    font-size: 1.6rem;
    color: #2f6189;
    background:none;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS PGothic", sans-serif;
}
#mokuzi li{
	line-height: 1.8;
}


.imgwrap{
	margin: 0px 2% 0;
}

.imgwrap img{
	border-radius: 5px;
}




#usecase{
	margin-top: 10px;
	padding:0px 0%;
}
#usecase h2{
/*	padding: 6px 2% 4px;
	margin: 0 0 5px 0;
    background-color: #b5b1b19c;
    border-radius: 5px;*/
}
#usecase h3{
	margin: 10px 0 0;
    font-weight: bold;
    border-bottom: #b7b7b7 1px solid;
}

#usecase p{
	font-size:1.6rem;
	color:#060f20;

}

#usecase .imgwrap{
    margin: 10px 0;
	height:200px;
	overflow:hidden;
	border-radius: 5px;
}
#usecase .imgwrap img{
	margin-top:-108px;
}




#knowhow{
	padding:20px 0%;
}
#knowhow h2{
/*	padding: 6px 2% 4px;
	margin: 0 0 5px 0;
    font-weight: bold;
    background-color: #b5b1b19c;
    border-radius: 5px;*/
}
#knowhow h3{
    font-weight: bold;
    border-bottom: #b7b7b7 1px solid;
}

#knowhow p{
	font-size:1.4rem;
}

#knowhow .imgwrap{
	height:200px;
	overflow:hidden;
    margin: 10px 0;
    border-radius: 5px;
}
#knowhow .imgwrap img{
	margin-top:-108px;
}


#osusume{
	padding:20px 0%;
}

#osusume h2{
/*	padding: 6px 2% 4px;
	margin: 0 0 5px 0;
	background-color: #b5b1b19c;
	font-weight: bold;
    border-radius: 5px;*/
}

#osusume p{
	padding:0px 2% 10px;
	font-size:1.4rem;
	letter-spacing: 0.5px;

}

/* table */
#osusume .table-wrap{overflow-x:auto;}
#osusume table{width:100%;border-collapse:collapse;overflow:hidden}
#osusume tr{border-bottom:1px solid #eef2f7;}
#osusume tr:last-of-type{border-bottom:0px;}
#osusume th, #osusume td{padding:10px 10px;text-align:left;font-size:1.4rem;}
#osusume th:nth-of-type(2){width: 93px;}

#osusume th{
	font-weight: 700;
	color: #e5e5e5;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	line-height: 1.2;
	background: #363545;
}
#osusume td{
	background:#fff;
}
#osusume tbody tr:hover{background:#fbfdff}

#osusume td.small{font-size:1.4rem;}
#osusume .cor1{border-radius:5px 0 0 0;}
#osusume .cor2{border-radius:0 5px 0 0;}
#osusume .cor4{border-radius:0 0 5px 0;}
#osusume .cor3{border-radius:0 0 0 5px;}

.note{
	color:#333;
	font-size:1.1rem;
}


/* CTA */
.cta{
	padding: 20px 2% 20px;
}
.cta .btn{
	display: block;
	width: 500px;
	margin: 0 auto;
	padding: 25px 0;
	color: #fff;
	background-color: #fd0e00;
	text-align: center;
	font-size: 2.6rem;
	font-weight: bold;
	border-radius: 10px;
	box-shadow: 1px 1px 3px #333;
}


/*faq*/

#faq{
	padding:20px 0%;
}
#faq h2{
/*	padding: 6px 2% 4px;
	margin: 0 0 5px 0;
	background-color: #b5b1b19c;
	font-weight: bold;
    border-radius: 5px;*/
}
#faq details{
	margin:5px 0;
	background-color: #fff;
	&[open] .icon {
        transform: rotate(180deg);
    }
    border-radius: 5px;
}
#faq summary{
	display: flex;
    justify-content: space-between;
    align-items: center;
	font-size:1.4rem;
	padding: 6px 18px; 
	border-bottom: 1px solid #f1f0f0;
    list-style: none;
    font-weight: bold;
    color: #873432;
}
#faq dl{
	padding:10px 2% 0;
}
#faq dl:last-of-type{
	padding:10px 2% 10px;
}
#faq dt{
	padding: 6px 15px; 
	background-color: #e3e3e3;
	font-size: 1.3rem;
	border-radius: 5px;
}

#faq dd{
	padding: 10px 15px; 
	background-color: #ffffff;
	font-size: 1.3rem;
}

#faq .icon, #faq .icon {
    display: block;
    position: relative;
    width: 20px;
    margin-left: 8px;
    flex-shrink: 0;
    transform-origin: center 43%;
    /* transition: transform 0.2s; */
    &::before, &::after {
        content: "";
        position: absolute;
        display: block;
        width: 12px;
        height: 3px;
        background-color: #d9d4d4;
    }
        &::before {
        left: 0;
        transform: rotate(45deg);
    }
        &::after {
        right: 0;
        transform: rotate(-45deg);
    }

}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}
#faq .takeout{
	width:200px;
	height:auto;
	border-radius:5px;
}








/*-----------------
  見積・注文フォーム
-----------------*/

/*パンくず*/
#pan{
	width:700px;
	margin:0 auto;
	padding:10px 0;
}

/*注文の流れ*/
#flow{
/*	background-color: #7d0700;*/
	color:#fff;
    padding: 0px 0 10px;
    margin: 10px auto 0px;
    border-radius:5px 5px 0 0;
}
.flow-next{
/*	background-color: #7d0700;*/
	margin: 0 auto 20px;
	padding: 0 3%;
	width: 700px;
	display: flex;
	justify-content: center;
    border-radius:0 0 5px 5px;
}
#flow h2{
/*	color: #fff;*/
	text-align: center;
	margin: 0 0 10px;
/*	background-image: none;*/
}
#flow .flow-text-wrap{
	display:flex;
	justify-content: space-evenly;
}

#flow .flow-text-wrap div{
	line-height:1;

}

.flow_wrap{
	display:flex; 
	flex-direction:column;
	justify-content:center;
	gap:10px;
}

.flow {
	margin:0 auto;
  width: calc(100% - 30px); /* ステップフロー全体の横幅を指定 */
  display: flex;            /* flexboxで横並びにする */
  justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
}
.flow2{
	margin:0 auto;
  width: calc(100% - 30px); /* ステップフロー全体の横幅を指定 */
  display: flex;            /* flexboxで横並びにする */
  justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
}
.flow li {
  color: #fff;        /* 文字色を黒に指定 */
  font-size: 2.2rem;    /* 文字サイズを指定 */
  font-weight:bold;
  width: calc(100% / 3); /* 横幅を三等分した1つの大きさに指定 */
  background: #6db2e9;   /* 背景色をグレーに指定 */
  height: 50px;  /* 行間(高さの代わり)を指定 */
  text-align: center; /* 文字を中央寄せにする */
  position: relative; /* 基準位置とする */
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow2 li {
	width:150px;
	color: #000;
	font-size: 1.4rem;
	background: none;
	height: 32px;
	text-align: center;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height:1;
}
.flow2 li span{
	color:#1b7cc9;
	font-size:1.6rem;
	font-weight:bold;
}

.flow li:first-of-type{	border-radius:5px 0 0 5px;}
.flow li:last-of-type{	border-radius:0 5px 5px 0 ;}
.flow li:not(:first-child):not(:last-child) { 
  padding: 0 0 0 10px;  /* 最初と最後以外には左に適度な余白を指定 */
}

.flow li::before,
.flow li::after {
  content: "";  /* 疑似要素では必須 */
  width: 0;     /* 横幅を0に指定 */
  height: 0;　　/* 高さを0に指定 */
  display: block;  /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.flow li::before {
  border: solid 32px transparent;     /* 32pxのborderを指定 */
  border-right: solid 13px transparent;  /* 幅を合わせるため右線は13pxにする */
  border-left: solid 13px #f5f1ee;          /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: -7px;  /* 重ねる位置(縦軸)を調整 */
  left: 0;    /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}

.flow li::after {
  border: solid 25px transparent;  /* 25pxのborderを指定 */
  border-left: solid 10px #6db2e9; /* 左のborderで背景色と同じ▶の部分を作成する */
  border-right: solid 10px transparent; /* 幅を合わせるために右線は10pxにする */
  top: 0;       /* 重ねる位置(縦軸)を調整 */
  right: -20px; /* 重ねる位置(横軸)を調整 */
  z-index: 2;   /* 重なり順の優先度を他よりも上げる */
}
.flow li:first-child{
  width: 0px;
  align-items: center;
}
.flow li:first-child::after{
  content: none;
}

.flow li.current {
  color: #FFF;
  background: #FCC;
}

.flow li.current::after {
  border-left: solid 10px #FCC;
}

.flow li.selected{
  background: #ffff84;
}
.flow li.selected::after{
  border-left:#ffff84;
}


.bt-tel {
    margin: 0px auto 0px;
/*    background-color: #fd0e00;*/
   background-color: #7d0001;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: bold;
}
.bt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 86px;
    margin: 16px auto;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.telwrap {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}





img.setsumei-ico{
	width:30px;
	height:auto;
}


/*入力フォーム*/

#form{
	width:700px;
	margin:0 auto;
	font-size:1.4rem;
}

#form h3{
	color: #424154;
    padding: 10px 1% 0;
    font-size: 1.6rem;
    border-top: 1px solid #aaa;
    margin-top: 20px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS PGothic", sans-serif;
}

#form h3:first-of-type{
	border:none;
	margin-top:0;
}

#form .customer, #form .order{
	margin: 0px 0 20px;
	padding: 10px 20px;
	border: 1px solid #c3bcbd;
	border-radius: 5px;
}

#form .card-wrap{
	width:100%;
    margin: 10px 0;
	padding:0 0%;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap:10px 10px;
}

#form .card{
	width:calc((100% - 20px) / 3);
	background-color:#fff;
	padding:10px;
	position:relative;
	border-radius: 5px;
}

#form table{
	width:100%;
}

#form td{
	font-size:1.4rem;
	border:none;
    padding: 10px;
}
#form td:first-child{
	width:170px;
}
#form .customer td:first-child{
	width:230px;
}
#form td.top{
	vertical-align: top;
}
#form td .row{
	display:flex;
	align-items:center;
}

#form .card img{
	width:128px;
	height:auto;
	margin: 0 0 10px 0;
	border-radius:5px;
}

#form .item_price,#form .yen{
	font-size:1.5rem;
	font-weight:bold;
	color:#c11b2d;
}

#form .bt-wrap{
	display:flex;
	align-items:center;
}

#form input{
	background-color:#fff;
	border: 1px solid #ccc;
	border-radius:5px;
	padding:5px 5px ;
}

#form label{
	color:#111;
	padding:2px 5px 2px 0;
	font-size:1.4rem;
}

#form  input.quantity{
	width: 4em;
    padding: 2px 5px 2px 5px;
    margin: 0;
    text-align: center;
    border-radius:0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 0;
    border-left: 0;
}
#form input#sum{
	width:90px;
	text-align:right;
	font-size:1.8rem;
    padding: 5px 10px;
    background: #f1f1f1;
    color: #575757;
}

#form input[type="radio"]{
	width:16px;
	height:16px;
	margin: 0 3px 0 0;
}

#form input[type="radio"]{
	margin: 0;
	appearance: none;
	display: none;
}

#form .radio_wrap{
	margin:10px 0;
	display:flex;
    flex-wrap: wrap;
    gap:10px;
}


#form input[type="radio"] + label {
    background: #f4f0ed;
    color: #ff5252;
    border: 1px solid #ff5252;
    margin: 0;
    border-radius: 5px;
    text-align: center;
    padding: 10px 20px;
    min-width: 180px;
    display: inline-block;
}
#form input[type="radio"]:checked + label {
    background: #ff5252;
    color: #fff;
    border: 1px solid #ff5252;
}
#form input[type="radio"]:disabled + label {
    background: #ccc;
    color: #999;
    border: 1px solid #999;
}

#form input[type="checkbox"]{
	width:20px;
	height:20px;
	margin: 0 3px 0 0;
}

#form input[type="number"]::-webkit-outer-spin-button, 
#form input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 
#rcv_add{
	width:350px;
}

#form button{
	width:30px;
	border:1px solid #ccc;
	padding: 2px;
	font-size: 1.4rem;
	display: flex;
    justify-content: center;
    align-items: center;
}
#form button[data-pt="minus"]{
	border-radius:5px 0 0 5px;
}
#form button[data-pt="plus"]{
	border-radius:0 5px 5px 0;
}
#form select{
	background-color:#fff;
	border: 1px solid #ccc;
	border-radius:5px;
	padding:5px 5px ;
}
.card .desc{
	padding:0 0 0 10px;
}
.card .item_name{
	font-size:1.5rem;
	letter-spacing:1px;
	color:#111;
	font-weight:bold;
	padding:2px 0px;
}

#form .rankheader{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eeeac2;
    border: 1px solid #bfbca9;
    padding: 5px 10px;
    border-radius: 5px;
    line-height: 1.2;
}
#form .rankheader .size_wrap{
	display:inline-flex;
	align-items:center;
	justify-content:flex-start;
	gap:5px;
    margin: 0 5px 0 0;
	flex-wrap:nowrap;
}

#form .rankheader p{
	width:100%;
	margin:5px 0;
	padding:8px;
	background-color:#fff;
	border-radius:5px;
	border:1px solid #bfbca9;
	text-align: center;
}

#form .rankheader .img_rank{
	width:30px;
	height:auto;
}
#form .card .img_rank{
	width:30px;
	height:auto;
}
#form .card .img_size{
	width:28px;
	height:auto;
}
#form input[type="submit"] {
    display: block;
	width: 340px;
    margin: 0 auto;
    padding: 20px;
    color: #fff;
    background-color: #7d0700;
    text-align: center;
    font-size: 2.1rem;
    font-weight: bold;
    border-radius: 10px;
}
#form textarea{
	background-color:#fff;
	border: 1px solid #ccc;
	border-radius:5px;
	padding:5px 5px ;
	margin: 0 10px;
    width: 96%;
    height: 120px;
}
#form .required{
    color: #fff;
    font-size: 1rem;
    margin: 0 10px;
    background: #7d0700;
    padding: 1px 3px;
}

.toi_type_box{
	font-size:1.6rem;
	text-align:center;
	margin-bottom: 10px;
}
#form .toi_type_box .radio_wrap{
	justify-content:center;
}
#form .toi_type_box input[type="radio"] +label{
	font-size:1.8rem;
	margin-top: 20px;
}

.no-disp{
	display:none;
}

/*バリデーション用*/
.error-box{
	width:750px;
	margin:0 auto;
	color:#dc2626;
	background-color:#fecaca;
	padding:10px 15px;
	border-radius:5px;
}
.error-box p{
	padding:0px 0px;
}
.errtxt{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	font-size:1.4rem;
	color:#dc2626;
	background-color:#fecaca;
	padding:2px 10px;
	border-radius:5px;
}
.infosvg{
	width:20px;
	height:20px;
}
input:invalid {
  border: solid 1px red;
}
input[type="text"] &.errors {
        border:1px solid red;
      }


/*-----------------
　送信内容確認ページ
-----------------*/
#confirm_table{

}
#confirm_table h1{
	color:#7d0700;
	text-align:center;
	font-size:1.8rem;
	font-weight:bold;
}

#confirm_table table{
	border-collapse: collapse;
	max-width:600px;
	width:98%;
	margin:10px auto;
	background-color:#fff;
}

#confirm_table th,#confirm_table td{
	font-size:1.4rem;
	border:1px solid #333;
	padding: 2px 5px;
}
#confirm_table th{
	background-color:#ddd;
}
#confirm_table .total th{
	background-color:#e7c2c2;
}


#confirm_table td.price{
	text-align:right;
}

#confirm_table td.quantity{
	text-align:center;
}
#confirm_table td.sum{
	font-weight:bold;
	text-align:right;
}


.submit_wrap input[type="submit"]{
    display: block;
	width: 340px;
    margin: 0 auto;
    padding: 20px;
    color: #fff;
    background-color: #7d0700;
    text-align: center;
    font-size: 2.1rem;
    font-weight: bold;
    border-radius: 10px;
}

.result_box{
	width: 500px;
    margin: 10px auto;
}


.nami,.zyou,.tokuzyou{
	border:4px solid;
}

.nami{
	border-color:var(--keycol-green);
}
.zyou{
	border-color:var(--keycol-red);
}
.tokuzyou{
	border-color:var(--keycol-purple);
}
.card .item_name.ume{
	background-color:var(--keycol-ume);
}
.card .item_name.take{
	background-color:var(--keycol-take);
}
.card .item_name.matu{
	background-color:var(--keycol-matu);
}