#container{
	background: #f8f3eb;
}
.contents {
	padding: 70px 0 0;
	margin: 0 auto 0;
}
.contents section.last {
	margin: 40px auto;
    padding: 0;
    display: block;
    border-radius: 8px;
}
p{
	line-height: 1.8;
    margin: 1.5em 0;
}
p:first-of-type{
    margin: 0 0 1.5em;
}
#footer p{
    margin: 0!important;
}
p.center{
	text-align: center;
}
h2{
	color: #746e68;
    padding: 20px 20px 20px;
    margin: 100px auto 80px;
	font-size: 1em;
	line-height: 1.4;
	position: relative;
	width: 100%;
	background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);
}
h2 p.name{
	font-size: 1.65em;
	line-height: 1.5;
	margin: .5em;
}
h2 p.txt{
	font-size: 1.3em;
	width: fit-content;
	margin: 0 auto;
	color: #9e7852;
    letter-spacing: 0.07em;
}
h2 .txt_contents{
    font-size: .65em;
    margin: 0px auto 5px;
	line-height: 1.8;
	color:#bf9b76;
	position: relative;
	display: block;
	width:stretch;
}
h2 .line01{
	position: absolute;
	content: "";
    width: 200px;
    height: 1px;
    display: block;
	background: #bf9b76;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.fo-red {
	font-size: .75em;
	padding: 3px 5px;
	margin: 0 0 0 .5em;
	background: #b8675a;
	color: #fff;
	font-weight: 500;
	display: inline-block;
}

.list_indent { padding-left: 1em;}
.list_indent li { text-indent: -1em;}

.list_disc {padding-left: 60px;line-height: 1.5;margin: 0 auto 20px;}
.list_disc li { list-style: outside disc;}

.list_number { padding: 0 2em 0 2.5em;/*padding-left: 2.5em;*/}
.list_number li { padding: 0 0.5em 0.5em;list-style-type: decimal;}

.list_number2 { padding: 0 2em 0 1em;}
.list_number3 { padding: 0 2em 0 0;}
.list_number2 li,
.list_number3 li { text-indent: -1.3em;padding-left: 1.5em; padding-bottom: 0.3em;list-style: none;}

@media screen and (min-width: 768px) and (max-width: 1024px) {
.contents {
	width:95%;
}
}
@media screen and (max-width: 767px) {
.contents section {
	width: 95%;
	margin: 0 auto;
	padding: 0;
}

h2{
	padding: 10px 20px;
	font-size: 1.1em;
	margin: 30px auto 20px;
}
h2 p.name{
	font-size: 1.3em;
}
h2 p.txt{
	font-size: 1em;
	line-height: 1.8;
}
h2 .txt_contents{
    font-size: .75em;
	line-height: 1.1;
    margin: 0px auto 5px!important;
}
.fo-red {
	padding: 0px 5px;
}
}

/*============================================================================
	GUIDE
============================================================================*/
h3,dt {
	font-family: source-han-serif-japanese, serif!important;
	font-style: normal;
}
dt:not(.innerDl) {
	font-weight: 600;
	font-size:1.25em;

}
.teiki_wrap dt:not(.innerDl) {
	background: linear-gradient(-90deg, rgba(242, 218, 211, 1) 0%, rgba(255, 247, 242, 1) 70%);
}
h3{
	width: fit-content;
    padding: 0 50px;
	font-weight: 400;
	margin: 120px auto 30px;
	font-size: 1.8em;
	text-align: center;
	color: #5b4a37;
}
h3.first{
	margin: 80px auto 30px;
}
@media screen and (max-width: 767px) {
h3{
	font-size: 1.4em;
	line-height: 1.5;
	width: 100%;
	padding: 0;
	margin: 60px auto 25px;
}
h3.first{
	margin: 40px auto 25px;
}
dt:not(.innerDl) {
	font-size:1em;
/*    padding: 1em 2.5em 1em 1em;*/
}
}
/*--------------------------------*/
.accordion_wrap {
	max-width: 720px;
	width: 100%;
    margin: 20px auto;
	padding: 0;
	border: 1px solid #c5876f;
	border-radius: 8px;
}

.acc_item {
	margin: 0 0 16px;
	background: #f8f4ef;
	border-radius: 8px;
	overflow: hidden;
}
.accordion_wrap .acc_item:last-child{
    border-bottom: none;
}
/*------ dt (Q) ------*/
.acc_hl {
	position: relative;
	margin: 0;
	padding: 2% 8%;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.6;
	color: #6f5952;
	text-align: justify;
	cursor: pointer;
	user-select: none;
	transition: background-color .3s ease;
	display: flex;
	align-items: center;
	gap: 1.5em;
	letter-spacing: 0.03em;
	border-radius: 8px;
	background: inear-gradient(-90deg,rgba(242, 218, 211, 1) 0%, rgba(255, 247, 242, 1) 70%);
}
#subscription .acc_hl {
	padding: 0% 8% 0 0;
}
.acc_hl:hover ,
.acc_hl.is-open {
	background-color: #f4e5e0;
}
.acc_hl.is-open {
	border-radius: 8px 8px 0 0 ;
}

.accordion_wrap .acc_hl:last-child {
	border-bottom:none;
}

/*------ 矢印（acc_arrow） ------*/
.acc_hl .acc_arrow {
	position: absolute;
	content: "";
	display: block;
	top: 50%;
	right: 24px;
	width: 12px;
	height: 12px;
	transform: translateY(-50%) rotate(225deg);
	transition: transform .35s ease;
	pointer-events: none;
}
.acc_hl .acc_arrow::before,
.acc_hl .acc_arrow::after {
	position: absolute;
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	background: #c5876f;
	border-radius: 2px;
}
.acc_hl .acc_arrow::before {
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
}
.acc_hl .acc_arrow::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
}
.acc_hl.is-open .acc_arrow {
	transform: translateY(-50%) rotate(45deg);
}

/*------ dd (A) ------*/
.accordion_wrap dd:not(.innerDl) {
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s ease;
}

/* 高さのある項目を閉じる際、アニメーションなしで瞬時に閉じるために使用する（JS側で付け外しする） */
.accordion_wrap dd.no-transition {
	transition: none !important;
}

.acc_inner {
	overflow: hidden;
	padding: 4% 5.5% 6%;
	font-size: 1em;
	line-height: 1.6;
	text-align: justify;
	color: #5f5446;
	background: #fff;
	border-bottom: 2px solid #e6dccb;
}
.seibun_txt{
	font-size: .9em;
	line-height: 1.35;
	margin: 20px 0 0;
	word-break: break-all;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.accordion_wrap {
		width: 100%;
		margin: 50px auto;
		padding: 0 4%;
	}
}
@media screen and (max-width: 767px) {
	.accordion_wrap {
		margin: 10px auto;
		padding: 0;
		width: 94%
	}
	.acc_item {
		margin: 0 0 12px;
		border-radius: 6px;
	}
	.acc_hl {
		padding: 1em 2.4em;
		gap:0.75em;
	}
	.acc_hl .acc_arrow {
		top: 1.8em;
		right: 16px;
		width: 10px;
		height: 10px;
	}
	.acc_inner {
		padding: 5% 1.25em 1.5em 1.25em;
	}
}

/*============================================================================
	GUIDE 追加スタイル（既存トークンでの補完）
	※ HTML側の既存クラスに対するスタイル定義のみ。新規クラス・構造の追加は行っていません。
============================================================================*/

/*----- guide_wrap / guide_inner -----*/
.guide_wrap{
	max-width: 1024px;
	margin: 0 auto;
}
.guide_inner{
    background: #fff;
    padding: 80px 100px;
}
.guide_inner > p{
	line-height: 1.8;
	margin: 1.5em 0;
}
.guide_inner > p:first-child{
	margin: 0 0 1em;
	text-align: center;
}
@media screen and (max-width: 767px) {
.guide_inner{
    padding: 20px 0px;
}
.guide_inner > p{
	margin: 1em 1.5em 1em;
	text-align: justify;
}
.guide_inner > p:first-child{
	margin: 0 1.5em 1em;
	text-align: justify;
}
}
/*----- 見出し h4 / h5 / h6 / h7 -----*/
h4{
	position: relative;
    font-family: source-han-serif-japanese, serif;
    font-weight: 400;
    font-size: 1.5em;
    color: #975c46;
    margin: 50px auto 20px;
    line-height: 1.5;
    text-align: center;
    padding: 4px 0;
    background: #ffffff;
}
h4::before,
h4::after{
	position: absolute;
	content:"";
	display: block;
	top: 50%;
	transform: translateY(-50%);
	width: 30%;
	height: 4px;
	border-top: 1px solid #c5876f;
    border-bottom: 1px solid #c5876f;
}
h4::before{
	left: 0;
}
h4::after{
	right: 0;
}
h5{
    font-weight: 600;
    font-size: 1em;
    color: #313131;
    margin: 100px 0 40px;
    background: #f2d6a9;
    padding: 13px 13px 13px 45px;
    width: 98%;
    border-radius: 0 50px 50px 0;
}
h5:first-of-type{
	margin: 40px 0 40px;
}
h6{
    font-weight: 600;
    font-size: 1.2em;
    color: #b8675a;
    margin: 40px 0 12px;
    padding-left: .7em;
    border-left: 8px double #c48372;
}
h7{
	display: block;
	font-weight: 600;
	font-size: 1em;
	color: #7a5f3f;
	margin: 0 0 10px;
	padding: 2em 0px 0px;
}
h7.red{
	color: #a8452c;
}
@media screen and (max-width: 767px){
h4{
	font-size: 1.15em;
	margin: 40px 0 16px;
}
h4::before,
h4::after{
	width: 20%;
}
h5{
	font-size: 1.05em;
	margin: 30px 0 12px;
	padding: 13px;
}
h5:first-of-type{
	margin: 40px 0 20px;
}
h6{
	margin: 3em 0.5em 10px 1em;
	line-height: 1.6;
}
}

/*----- index（ページ内アンカーナビ） -----*/
.index{
	max-width: 860px;
	width:100%;
	margin: 0 auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.index_item{
	position: relative;
    margin: 0.3%;
    border: solid 1px #6c625b;
    background: #fff;
    width: 49.4%;
    text-align: center;
}
.index_item a{
	position: relative;
	inset: 0;
	font-size: 1.1em;
	color:#6c625b;
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 12px 0;
}
.index_arrow {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 1px;
    background-color: #6c625b;
    transition: background-color 0.4s ease-out;
}
.purchase-btn-icon{
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
	filter: contrast(0);
}
@media screen and (max-width: 767px){
.index{
	width: 90%;
	gap: 10px 18px;
	margin: 30px auto 0;
	display: block;
}
.index_item{
    width: 100%;
}
.index_item a{
	font-size: 1em;
}
}

/*----- teiki_wrap（定期コース種別ブロック） -----*/
.teiki_wrap{
    margin: 0px 0 60px;
    padding: 0px 50px 0;
}
.teiki_wrap:first-of-type{
	border-top: none;
	padding-top: 0;
}
.teiki_table {
    border-radius: 6px;
    overflow: hidden;
    width: 90%;
    margin: 40px 20px;
    padding: 15px;
	background: #ede4de;
}
.teiki_row {
    display: flex;
    align-items: stretch;
}
.teiki_row + .teiki_row {
    margin-top: 2px;
}
.teiki_label {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    font-size: 16px;
    font-weight: 600;
	color: #313131;
    box-sizing: border-box;
    line-height: 1.4;
}
.teiki_value {
    position: relative;
    width: 60%;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
	font-family: source-han-serif-japanese, serif!important;
    font-weight: 600;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
}
.teikiNum{
	font-size: 2.5em;
	width: 1.75em;
    text-align: right;
}
.teikiPer{
	font-size: 1.8em;
    margin: 0 0 0 6px;
}
.teiki_row0 .teikiPer{
	font-size: .8em;
    text-align: center;
	margin: 0 0 0 70px;
}
.teiki_bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.teiki_value span {
    position: relative;
    z-index: 2;
}
/* row0：表説明 */
.teiki_row0 {
    align-items: baseline;
    justify-content: space-around;
}
.teiki_row0 .teiki_label {
    background: transparent;
    font-size: .8em;
	padding: 10px 0;
}
.teiki_row0 .teiki_value {
    font-family: noto-sans-cjk-jp, sans-serif !important;
	background: none;
}
/* row1: 0%基準(バーなし) */
.teiki_row1 .teiki_label {
    background: #bcbcbc;
}
.teiki_row1 .teiki_value {
    color: #606060;
}
/* row2: 10% -> 20%基準で50%幅 */
.teiki_row2 .teiki_label {
    background: #edd7c1;
}
.teiki_row2 .teiki_value span {
    color: #d29c65;
}
.teiki_row2 .teiki_bar {
    width: 50%;
}
/* row3: 15% -> 20%基準で75%幅 */
.teiki_row3 .teiki_label {
    background: #e4c19f
}
.teiki_row3 .teiki_value span {
    color: #ae7a46;
}
.teiki_row3 .teiki_bar {
    width: 75%;
}
/* row4: 20% -> 20%基準で100%幅 */
.teiki_row4 .teiki_label {
    background: #dba37e;
}
.teiki_row4 .teiki_value span {
	color: #a15b1c;
}
.teiki_row4 .teiki_bar {
    width: 100%;
}

.teiki_row1 .teiki_value ,
.teiki_row2 .teiki_value ,
.teiki_row3 .teiki_value ,
.teiki_row4 .teiki_value {
	background: transparent;
}
.teiki_row1 .teiki_bar ,
.teiki_row2 .teiki_bar ,
.teiki_row3 .teiki_bar ,
.teiki_row4 .teiki_bar {
	background: #fff;
}
@media screen and (max-width: 767px) {
.teiki_wrap {
    padding: 0px;
}
.teiki_table {
    width: 95%;
	padding: 10px;
	margin: 10px auto 40px;
}
.teiki_label {
	font-size: 12px;
}
}
/*----- accordion dt 内の tag（割引バッジ） -----*/

.acc_hl .tag{
	flex-shrink: 0;
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	background: #c5876f;
	padding:.5em .5em;
	letter-spacing: .06em;
	white-space: nowrap;
	border-radius: 8px 0 0 8px;
}
.acc_hl.is-open .tag{
	border-radius: 8px 0 0 0;
}
.acc_hl .tag .num{
	font-size: 1em;
}
.acc_hl .tag .per{
	font-size: .75em;
}
@media screen and (max-width: 767px) {
.acc_hl .tag{
	padding:.5em .75em;
}
}
/*----- ex_area（お届け例スケジュール） -----*/
.ex_area{
    position: relative;
	max-width: 380px;
	width: 100%;
    margin: 40px auto 20px;
    padding: 20px 40px 20px;
    background: #f2eae6;
    border-radius: 6px;
    text-align: center;
    font-size: .85em;
    color: #bf9b76;
    letter-spacing: .08em;
}
.ex_area .ex_tit{
	position: absolute;
	top: -10px;
    left: 50%;
	transform: translateX(-50%);
    font-size: 1em;
    font-weight: 400;
    color: #fff;
    background: #ac9082;
    letter-spacing: 0.03em;
    margin: 0;
    text-align: left;
    width: fit-content;
    padding: 0px 30px 2px;
}
.ex_area .flex_area{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto;
    padding: 5px 0;
	background: #fff;
    width: 100%;
}
.ex_area .flexNum{
	width: 26%;
	font-size: 1em;
	font-weight: 600;
	color: #8c644f;
	padding: 0 1em;
	margin: 0;
	border-right: 1px solid #8c644f;
	letter-spacing: normal;
}
.ex_area .flexDate{
	width: 74%;
    font-size: 1.1em;
    color: #5f5446;
    letter-spacing: 0.05em;
    padding: 0 12px;
}
.ex_area .flexAutotxt{
	text-align: center;
	font-size: 1em;
	color: #8c644f;
	font-weight:600;
	position: relative;
	padding: 5px 0;
	background: #e2d2ca;
}

@media screen and (max-width: 767px){
.ex_area{
	padding: 20px 1em 20px;
}
.ex_area .flex_area{
	gap: 10px;
	flex-wrap: wrap;
}
}

/*----- merit_table（メリット・デメリット） -----*/
.merit_table{
	display: flex;
	gap: 20px;
	margin: 20px 0;
}
.merit_table .table_item{
	flex: 1;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #e6dccb;
}
.merit_table h7{
	color: #5f5446;
    border-bottom: 1px solid #e6dccb;
	text-align: center;
    padding: 0 0 13px;
}
.table_item.merit{
	border: 4px double #dd9d7a;
}
.table_item.demerit{
	border: 4px double #b8b8b8;
}
.table_item.demerit .innerList::before{
	filter: grayscale(10);
}
@media screen and (max-width: 767px){
.merit_table{
	flex-direction: column;
	gap: 14px;
}
.merit_table .table_item{
	padding: 18px;
}
}

/*----- caution -----*/
.caution{
    width: 100%;
    margin: 0px 0 24px;
    padding:20px;
    background: #ffffff;
    border: 16px solid #ffeade;
    border-radius: 10px;
    font-size: .95em;
}
.caution h5,
.caution h6,
.caution h7{
	margin-top: 0;
}
.caution .inner_list_wrap {
    margin: 20px auto;
}
.caution .innerList::before{
	top: 10px;
}
@media screen and (max-width: 767px){
.caution{
    padding: 0px .9em;
    border: 4px solid #ffeade;
}
}
/*----- address_area（返送先住所） -----*/
.address_area{
	margin: 20px 0;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid #e6dccb;
	border-radius: 6px;
	line-height: 1.8;
}

/*----- 送料・配送方法比較 PC（.flex_area.send） -----*/
.flex_area.send{
	display: flex;
	border-top: 1px solid #e6dccb;
    border-right: 1px solid #e6dccb;
}
.flex_area.send:last-of-type{
    border-bottom: 1px solid #e6dccb;
}

.flex_area.send > div{
	padding: 18px 16px;
	font-size: .9em;
	line-height: 1.7;
}
.sendList{
	flex: 0 0 160px;
	font-weight: 600;
    color: #313131;
    background: #f9f0e6;
	text-align: center;
}
.sendPacket,
.sendPack{
	flex: 1;
}
.sendPacket{
	border-right: 1px solid #e6dccb;
}
@media screen and (max-width: 767px){
.flex_area.send{
	flex-wrap: wrap;
	border-bottom: 1px solid #e6dccb;
	border-left: 1px solid #e6dccb;
	border-top: none;
    border-right: none;
}
.sendList{
	flex: 0 0 100%;
	padding: 10px 14px;
}
.sendPacket,
.sendPack{
	flex: 0 0 100%;
	font-size: .85em;
	padding: 14px;
}
}
/*----- 送料・配送方法比較 SP（.send_sp_wrap） -----*/
.send_sp_wrap{
	margin: 0 0 30px;
}
.send_sp_wrap:last-of-type{
	margin-bottom: 0;
}
.send_sp_ttl{
	font-weight: 600;
	color: #313131;
	background: #f9f0e6;
	text-align: center;
	padding: 12px 14px;
	font-size: .95em;
	border-bottom: 1px solid #e6dccb;
}

.flex_area.send_sp{
	flex-wrap: wrap;
	border-bottom: 1px solid #e6dccb;
	border-left: 1px solid #e6dccb;
	border-right: 1px solid #e6dccb;
    width: 95%;
    margin: 0 auto;
}
.flex_area.send_sp:first-of-type{
	border-top: 1px solid #e6dccb;
}
.flex_area.send_sp > div{
	padding: 14px;
	font-size: .85em;
	line-height: 1.7;
}
.flex_area.send_sp .sendList{
	flex: 0 0 100%;
	padding: 10px 14px;
}
.flex_area.send_sp .sendData{
	flex: 0 0 100%;
}
/*----- ◯✕アイコン -----*/
/* 共通サイズ設定 */
.icon {
	width: 1.2em;
	height: 1.2em;
	position: relative;
	display: inline-block;
	vertical-align: text-bottom;
    margin: 0 .25em 0 0;
}
/* ◯アイコン */
.icon-circle {
	border: 4px solid #ff8752;
	border-radius: 50%;
	box-sizing: border-box;
}
/* ✕アイコン */
.icon-cross::before,
.icon-cross::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #4e6d88;
	border-radius: 2px;
}
.icon-cross::before {
	transform: translateY(-50%) rotate(45deg);
}
.icon-cross::after {
	transform: translateY(-50%) rotate(-45deg);
}


/*----- 支払い方法アイコンラベル（card/later/cash） -----*/
.icoCard,
.icoLater,
.icoCash{
	display: inline-block;
	font-size: 1em;
	color: #a8602c;
	border: 2px solid #cb936b;
	padding: .25em .8em;
	border-radius: 3px;
	margin: 0 6px 6px 0;
}

/*----- innerUl.num（手順ステップ） -----*/
.innerUl{
	margin: 20px 0;
	padding: 0;
}
.innerUl.num{
	counter-reset: ul-num;
}
.innerUl.num li{
	position: relative;
	counter-increment: ul-num;
	list-style: none;
	padding: 0 0 0 2.4em;
	margin: 0 0 .9em;
	line-height: 1.7;
}
.innerUl.num li::before{
	content: counter(ul-num);
	position: absolute;
	left: 0;
	top: 3px;
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	text-align: center;
	font-size: .85em;
	font-weight: 600;
	color: #fff;
	background: #bf9b76;
	border-radius: 50%;
}
@media screen and (max-width: 767px) {
.innerUl.num{
	margin: 0 1.5em ;
}
}
/*----- お支払い方法レイアウト -----*/
/*--クレカ--*/
.guide_card-img {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}
.guide_card-img li {
    width: calc(100% / 11);
    height: auto;
    padding: 3px 4px;
    display: table;
}
.guide_card-img li img {
    max-width: 100%;
    height: auto;
}


/*============================================================================
	INDEX
============================================================================*/

#indexTop .index_item ,
#indexBottom .index_item {
	overflow: hidden;
}
#indexTop .index_item a ,
#indexBottom .index_item a {
	position: relative;
	z-index: 2;
	transition: color 0.4s ease-out;
}
#indexTop .index_item::before ,
#indexBottom .index_item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	background: linear-gradient(to right, #746e68, #5c5752);
	-webkit-mask-image: linear-gradient(to right, black calc(100% / 1.5), transparent 100%);
	mask-image: linear-gradient(to right, black calc(100% / 1.5), transparent 100%);
	transform: translateX(-100%);
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	z-index: 1;
}
#indexTop .index_item:hover::before ,
#indexBottom .index_item:hover::before {
	transform: translateX(0);
}
#indexTop .index_item:hover a ,
#indexBottom .index_item:hover a {
	color: #fff;
}

@media screen and (max-width: 767px){
.index_bottom{
	margin: 0 auto 50px;
	padding: 40px 20px 0;
}
.index_bottom_ttl{
	font-size: 1.05em;
	margin: 0 0 16px;
}
}

/*----- 追従インデックス（画面下部トグル） -----*/
.index_float{
	position: fixed;
	right: 30px;
	bottom: 30px;
	border: solid 1px #a69b91;
    border-radius: 5px;
	z-index: 9990;
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
.index_float.is-visible{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.index_float.is-hidden{
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
}

.index_float_panel{
	max-height: 0;
	overflow: hidden;
	background: #fefdfc;
	transition: max-height .4s ease;
}
.index_float.is-open .index_float_panel{
	max-height: 500px;
	overflow-y: auto;
	border-radius: 5px;
}
.index_float_list{
	gap: 10px 24px;
	margin: 0 auto;
}
.index_float_list a,
.index_float_list a:link,
.index_float_list a:visited{
	font-size: 1em;
	color: #5b4a37;
	text-align: left;
    margin: 0 0 1px;
	transition: opacity .3s ease;
}
.index_float_list a:hover{
	opacity: .6;
}
.index_float_toggle{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	width: 370px;
	margin: 0 auto;
	padding: .85em 1.8em calc(.85em + env(safe-area-inset-bottom, 0px));
	background: #6c625b;
	border-radius: 5px;
	color: #FFFFFF;
	font-size: 1em;
    letter-spacing: -0.05em;
	cursor: pointer;
	transition: background-color .3s ease;
}

.index_float_arrow{
	display: inline-block;
	width: 7px;
	height: 7px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(-45deg);
	transition: transform .3s ease;
}
.index_float.is-open .index_float_toggle{
	border-radius: 0px 0px 5px 5px;
}
.index_float.is-open .index_float_arrow{
	transform: rotate(135deg);
}
.index_float .index_item{
	width:100%;
	border:none;
	margin: 0;
	background: #f8f3eb;
}

/* 追従インデックス：現在地ハイライト */
.index_float_list .index_item.is-current{
	background: #efe0c8;
}
.index_float_list .index_item.is-current a{
	color: #764b2c;
}

@media screen and (max-width: 767px){
.index_float{
    width: 94%;
	right: 0;
	left: 0;
	bottom: 20px;
	margin: 0 auto;
}
.index_float_list{
	gap: 10px 18px;
}
.index_float_list a{
	font-size: .9em;
}
.index_float_toggle{
	width: 100%;
	font-size: .9em;
	padding: .75em 1.4em calc(.75em + env(safe-area-inset-bottom, 0px));
}
}

/*================================

				FAQ用

================================*/

.faq_inner {
    width: 90%;
    max-width: 860px;
    margin: 0 auto;
    border-radius: 8px;
}

.faq_inner img {
    max-width: 100%;
    width: auto;
}

.faq_inner hr{
	margin: 20px auto;
}

h2.faq_header {
    background: #f2d6a9;
    color: #5b4a37;
    font-size: 1.4em;
    font-weight: 400;
    text-align: left;
    margin: 32px auto 0;
}

.faq_icon_q {
    display: inline-block;
}

.faq_icon_q::before {
    content: 'Q';
    font-size: 1.2em;
    margin-left: -38px;
	color: #bf9b76;
}

.faq_search dt, .faq_btn_link div {
	background:transparent;
	color: #5b4a37;
	position: relative;
	margin: 3px auto;
    padding: 22px 54px 23px 80px;
	width: 100%;
	font-size: 1.25em;
	font-family: source-han-serif-japanese, serif;
	font-weight: 600;
	line-height: 1.25;
	transition: height 0.3s;
	cursor: pointer;
}

.faq_search dt::after,.faq_btn_link div::after {
    content: '';
    position: absolute;
    display: block;
    border-top: 2px solid #bf9b76;
    border-right: 2px solid #bf9b76;
    width: 16px;
    height: 16px;
    rotate: 135deg;
    top: 50%;
    right: 3%;
    translate: 0 -50%;
    transition: all 0.3s;
}

.faq_search.faq_tit_link{
	display: block;
}

.faq_search dt.is-active {
    border-bottom: none;
	margin-bottom:0;
    transition: height 0.3s;
	background: #ffe1ce;
}

.faq_search dt.is-active::after {
    rotate: -45deg;
}

.faq_search dd {
    padding: 40px;
    position: relative;
    display: none;
    color: #5f5446;
    background: #fff;
    margin: 16px auto 40px;
    border-radius: 12px;
}

.faq_search dd .bg::before {
    content: 'A';
    font-size: 1.4em;
    font-family: source-han-serif-japanese, serif;
    color: #a8602c;
    position: absolute;
    top: 0;
    left: 0;
}

.faq_search dd p {
    display: inline-block;
    margin: 0 auto 16px;
    padding-left: 30px;
    padding-top: 0;
    font-size: 1em;
}
.faq_search dd p.fo_small {
    font-size: 0.9em;
}

.faq_search dd .bg {
    position: relative;
}

.text_border {
    border-top: 1px solid #bf9b76;
    width: 100%;
    display: block;
}

/*検索*/
.search-area {
    max-width: 760px;
    width: 90%;
    margin: 0 auto;
    color: #6c625b;
}

.search-area #search-text {
	max-width: 300px;
	width: 90%;
    border: 1px solid #e6c4b1;
    padding: 10px 8px;
    color: #6c625b;
	background: #fff;
}

.faq_section .hidden{
	display: none;
}

/*btn*/
.faq_btn {
    max-width: 640px;
    font-size: 1.25em;
    line-height: 1.25;
    justify-content: center;
    padding: 20px !important;
}

.button_more:has(.faq_btn) {
    width: 35%;
}

/*===============
	FAQ SPここから
===============*/

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

	.faq_inner {
		width: 95%;
	}

	.search-area p {
		margin: 20px auto 10px !important;
		font-size: 0.9em;
	}

	h2.faq_header {
		margin: 32px auto 24px;
        padding: 10px 16px;
	}

	.faq_search dt, .faq_btn_link div {
		font-size: 1.15em;
		padding: 0 36px 0 28px;
	}
	.faq_icon_q::before{
		font-size: 1.25em;
		padding-left: 8px;
	}

	.faq_search dt::after, .faq_btn_link div::after {
		width: 12px;
		height: 12px;
	}
	.faq_search dd {
		padding: 20px;
	}

	.faq_search dd .bg::before {
        padding-top: 2px;
	}

	.faq_search dd p {
		padding-left: 28px;
	}

	/*btn*/
	.button_more:has(.faq_btn) {
		width: 85%;
	}
}
/*--------------------------------*/
.faq_wrap {
	max-width: 860px;
	margin: 0px auto;
	padding: 0 20px;
}

.faq_item {
	margin: 0 0 16px;
	background: #f8f4ef;
	border: 1px solid #e6dccb;
	border-radius: 8px;
	overflow: hidden;
}

/*------ dt (Q) ------*/
.faq_q {
	position: relative;
	margin: 0;
	padding: 3.5% 8%;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.6;
	color: #5b4a37;
	text-align: justify;
	cursor: pointer;
	user-select: none;
	transition: background-color .3s ease;
	background: #fff;
}
.faq_q.is-open {
	background: #fff;
}
.faq_q:hover ,
.faq_q.is-open:hover {
	background: #fffbf5;
}

.faq_q a.faq_link{
	position: static;
}
.faq_q a.faq_link::after {
	content: "";
	position: absolute;
	inset: 0; 
	z-index: 1;
}
/* Qマーク */
.faq_q::before {
	content: "Q";
	position: absolute;
    top: 1.5em;
    left: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: #c88b4d;
	font-size: 1.3rem;
	font-weight: 700;
	pointer-events: none;
}

/*------ 矢印（faq_arrow） ------*/
.faq_q .faq_arrow {
	position: absolute;
	content: "";
	display: block;
	top: 50%;
	right: 24px;
	width: 12px;
	height: 12px;
	transform: translateY(-50%) rotate(225deg);
	transition: transform .35s ease;
	pointer-events: none;
}
.faq_q .faq_arrow::before,
.faq_q .faq_arrow::after {
	position: absolute;
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	background: #bf9b76;
	border-radius: 2px;
}
.faq_q .faq_arrow::before {
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
}
.faq_q .faq_arrow::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
}
.faq_q.is-open .faq_arrow {
	transform: translateY(-50%) rotate(45deg);
}
/*------ dd (A) ------*/
.faq_a {
	max-height: 0;
	border-bottom: 1px solid #e6dccb;
	overflow: hidden;
	transition: max-height .4s ease;
}
/* 高さのある項目を閉じる際、アニメーションなしで瞬時に閉じるために使用する（JS側で付け外しする） */
.faq_a.no-transition {
	transition: none !important;
}
.faq_a_inner {
	position: relative;
	overflow: hidden;
    padding: 4% 8% 6%;
	font-size: 1em;
    line-height: 1.6;
	text-align: justify;
	color: #5f5446;
	background: #f8f4f4;
	border-bottom: 1px solid #e6dccb;
}
/* Aマーク */
.faq_a_inner::before {
	content: "A";
	position: absolute;
    top: auto;
    left: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #a8602c;
	font-size: 1.3rem;
	font-family: source-han-serif-japanese, serif!important;
	font-style: normal;
	font-weight: 600;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.faq_wrap {
		max-width: 100%;
		margin: 50px auto;
		padding: 0 4%;
	}
}

@media screen and (max-width: 767px) {
	.faq_wrap {
		margin: 50px auto;
		padding: 0;
	}
	.faq_item {
		margin: 0 0 12px;
		border-radius: 6px;
	}
	.faq_q {
		padding: 1em 2.4em;
	}
	.faq_q::before {
		top: .9em;
		left: 0.5em;
		width: 24px;
		height: 24px;
		font-size: 1.1rem;
	}
	.faq_q .faq_arrow {
		top: 1.8em;
		right: 16px;
		width: 10px;
		height: 10px;
	}
	.faq_a_inner {
		padding: 5% 1em 7% 2.5em;
	}
	.faq_a_inner::before {
		left: 0.3em;
	}
	.seibun_txt{
		margin: 10px 0 0;
	}
}

/*------ 番号付きリスト ------*/
.list_howto {
    counter-reset: li;
}

.list_howto li {
    display: flex;
    align-items: start;
    padding: 5px;
}

.list_howto li::before {
    display: inline-block;
    min-width: 25px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #dea175;
    color: #fff;
    font-weight: bold;
    text-align: center;
    content: counter(li);
    counter-increment: li;
}

/*============================================================================
	inner（GUIDE・FAQ共通）
============================================================================*/
.innerDl dt {
    margin: 2em 0 0.3em;
    padding: .2em 0.8em;
    font-weight: 600;
    color: #7a5f3f;
    background: #f9f0e6;
    display: inline-block;
	letter-spacing: 0.05em;
}
.innerDl dd {
	margin: .5em 0 0;
	color: #5b4a37;
}
.accordion_wrap .innerDl dd {
	margin: .5em 0 0!important;
	max-height: none;
	color: #5b4a37;
}
.accordion_wrap .innerDl dd p:first-of-type {
	margin: 0;
}
/**/
.innerDl.num{
	counter-reset: dd-num;
}
.innerDl.num dd{
	position: relative;
	counter-increment: dd-num;
    padding: 0 0 0 40px;
}

.innerDl.num dd:before {
	position: absolute;
	left: 0;
	right: calc(100% + 0.5rem);
	content: "(" counter(dd-num) ")";
}
/**/
.inner_list_wrap{
	margin: 30px auto;
}
.innerList{
    padding-left: 1.15em;
    position: relative;
    margin: 0.5em 0px 0.5em 1em;
    line-height: 1.4em;
    letter-spacing: 0.03em;
}
.innerList:first-of-type{
	margin: 0 0 0.5em 1em;
}

.inner_list_wrap.noIndent .innerList{
    margin: 1em 0;
}

.inner_list_wrap.noIndent .innerList:first-of-type{
	margin: 0 0 1em;
}

.innerList::before{
    position: absolute;
    content: "";
    display: block;
    width: .9em;
    height: .9em;
    background-image: url(https://www.hack-tick.com/faq/images/hacktick_faq_list_icon.png);
    top: 12px;
    left: 0;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}
.innerDl dd .supportTxt{
	font-size: .85em;
	padding: 1px 9px 2px;
	border: 1px solid #d0b5a0;
	margin: 0 1em 0 0;
	text-align: left;
}
.txt_s{
	font-size: .9em;
	line-height: 1.1;
}
/**/
.address_area {
	width: max-content;
    margin: 0 0 20px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 6px;
    line-height: 1.8;
}

@media screen and (max-width: 767px) {
	.innerDl dt {
		font-size: 1em;
	}
	.innerDl dd {
		font-size: 1em;
	}
	.innerDl.num dd{
		padding: 0 0 0 30px;
	}
	.innerDl dd .supportTxt{
		font-size: .95em;
		padding: 1px 9px 2px 0px;
		border: none;
		border-right: 1px solid #d0b5a0;
	}
	.txt_s{
		font-size: .8em;
		line-height: 1.4;
	}
	.address_area {
		padding: 11px 15px;
		width: auto;
	}
}