/**************************************************************/
/* カスタムプロパティ */
/**************************************************************/
:root {
	/* 文字で使われている色 (黒) */
	--mainbtn-color: #413d3c;
	--mainbtn-hover-color: #746f6d;
	
	/* サブボタンで使われている色 (青緑) */
	--subbtn-color: #a3dfd7;
	--subbtn-hover-color: #d0ece5;
	
	/* サブボタン2で使われている色 (オレンジ) */
	--subbtn2-color: #f2c5ad;
	--subbtn2-hover-color: #f5e1cf;
	
	/* 枠のみボタンで使われている色[枠色] (グレー) */
	--subbtn3-color: #7a7371;
	
	/* じぶんぐるみを作るボタンのみで使われている色 (赤系) */
	--subbtn4-color: #dd6a6d;
	--subbtn4-hover-color: #df9290;

	/* じぶんぐるみの服を注文ボタンのみで使われている色 (紫系) */
	--subbtn5-color: #898ebf;
	--subbtn5-hover-color: #abb2d2;
	
	/* キャンセルボタンで使われている色 (ピンク系(予定)) */
	--cancelbtn-color: #d85665;
	--cancelbtn-hover-color: #e8858a;
	
	/* 強調で使われている色 (紫) */
	--highlight-color: #b8a0d8;
	
	/* マーカーで使われている色 (薄紫) */
	--highlight-light-color: #e5e1f6;
	
	/* 文字で使われている色 (黒) */
	--txt-color: #413d3c;
	
	/* h1背景で使われている色 (こげ茶) */
	--h1-color: #564e4a;
	
	/* h2リボンで使われている色 (茶) */
	--ribbon-color: #7c6d61;
	--ribbon-color-alpha: rgba(124, 109, 97, .7);
	
	/* 背景で使われている色 (ベージュ) */
	--bg-color: #f1eee3;

	/* パーツ選択中の時の色(オレンジ) */
	--select-color: #f4dcb9;

	/* トーストの背景で使われている色 */
	--toastbg-color: #f5f3e7;

	/* ラベル1の色(ブルー) */
	--label1-color: #71bbd0;
}


/**************************************************************/
/* その他(特別な補正など) */
/**************************************************************/
/* ハンバーガーメニューが背景黒固定になってしまうので回避 ここから --------------------------------------- */
.uk-offcanvas-bar-light {
	position: absolute;
	top: 0;
	bottom: 0;
	/* left: -270px; */
	left: -70vw;
	box-sizing: border-box;
	/* width: 270px; */
	width: 80vw;
	padding: 20px 20px;
	background: #f8f8f8;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.uk-offcanvas-bar-animation {
	transition: left 0.3s ease-out;
}

@media (min-width: 960px) {
	.uk-offcanvas-bar-light {
		left: -350px;
		width: 350px;
		padding: 40px 40px;
	}
}

.uk-offcanvas-flip .uk-offcanvas-bar-light {
	left: auto;
	right: -270px;
}

.uk-offcanvas-flip .uk-offcanvas-bar-animation {
	transition-property: right;
}

.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light {
	left: auto;
	right: 0;
}

@media (min-width: 960px) {
	.uk-offcanvas-flip .uk-offcanvas-bar-light {
		right: -350px;
	}
}

.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light {
	left: auto;
	right: 0;
}

.uk-offcanvas-reveal .uk-offcanvas-bar-light {
	left: 0;
}

.uk-open > .uk-offcanvas-bar-light {
	left: 0;
}

/* ハンバーガーメニューが背景黒固定になってしまうので回避 ここまで --------------------------------------- */


/**************************************************************/
/* 要素調整 */
/**************************************************************/
::selection {
    background: var(--subbtn-color);
    color: var(--txt-color);
    text-shadow: none;
}

html {
	background-color: var(--mainbtn-color);
}

body {
	font-family: Meiryo, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-weight: 300;
	color: var(--txt-color);
	line-height: 1.65;
	background-color: var(--bg-color);
}

@media (max-width: 640px) {
	body {
		font-size: .9em;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Noto Sans JP";
}

body {
	text-align: justify;
	word-wrap: break-word;
	word-break: break-all;
}

header {
	background-color: #fff;
}

label {
	display: inline-block;
	font-size: 1.25em;
	margin-bottom: .5em;
	cursor: pointer;
}

label:last-child {
	margin-bottom: 0;
}

input[type="radio"],
input[type="checkbox"] {
	transform: scale(1.5);
	margin-right: .5em;
}

a,
a.uk-icon {
	color: #6dc297;
	transition: color .3s;
}

a:hover,
.uk-link-heading a:hover,
.uk-link-toggle:hover .uk-link-heading,
a.uk-link-heading:hover {
	color: #91d7af;
}

img{ image-rendering: -webkit-optimize-contrast;}

/* スクロールバー */
body::-webkit-scrollbar, textarea::-webkit-scrollbar, .uk-offcanvas-bar-light::-webkit-scrollbar, .uk-modal-body::-webkit-scrollbar, .noedittextarea::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, .uk-offcanvas-bar-light::-webkit-scrollbar-track, .uk-modal-body::-webkit-scrollbar-track, .noedittextarea::-webkit-scrollbar-track {
	background-color: var(--bg-color);
}

body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, .uk-offcanvas-bar-light::-webkit-scrollbar-thumb, .uk-modal-body::-webkit-scrollbar-thumb, .noedittextarea::-webkit-scrollbar-thumb {
	background-color: #cec1b2;
}


/**************************************************************/
/* 基本 */
/**************************************************************/
/* ========== 横線 ========== */
.uk-hr, hr {
	margin: 50px 5% 50px 5%;
	border-top: 2px solid #cdcac7;
}

/* ========== テキスト ========== */
.uk-text-muted {
	color: var(--ribbon-color)!important;
}

.uk-text-danger {
	color: var(--cancelbtn-color)!important;
}

:not(pre)>code, :not(pre)>kbd, :not(pre)>samp {
	color: var(--cancelbtn-color)!important;
}

.text-default-bold {
	font-family: "Noto Sans JP";
	font-weight: 500;
}

.text-default-color {
	color: var(--mainbtn-color);
}

.uk-text-large {
	font-family: "Noto Sans JP";
	font-weight: 500;
}

.text-extra-large {
	font-family: "Noto Sans JP";
	font-weight: 500;
	font-size: 1.8rem;
}

.text-highlight {
	/* background: linear-gradient(transparent 65%, var(--highlight-light-color) 65%); */
	display: inline;
	background-color: var(--highlight-light-color);
	font-family: "Noto Sans JP";
	font-weight: 500;
	margin: 0 .3em;
	padding: .05em .5em .2em;
}

/* ========== 画像 ========== */

/* ----- 正円でマスク ----- */

.img-circle{
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
	}

.img-circle img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
}

/* ========== h ========== */
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, .uk-button, .uk-label {
	font-weight: 500;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
	font-family: "Noto Sans JP";
	color: var(--txt-color);
}

/* ----- h1用 ----- */
.h1-wrapper {
	background-color: var(--h1-color);
	margin-top: -10px;
	margin-left: -30px;
	margin-right: -30px;
}

@media (max-width: 960px) {
	.h1-wrapper {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (max-width: 640px) {
	.h1-wrapper {
		margin-left: -10px;
		margin-right: -10px;
	}
}

.h1-wrapper .uk-h1, .h1-wrapper .uk-h2 {
	margin-bottom: 0;
	padding: .6em 2em;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: .05em;
}

/* ----- h2用リボン ----- */
.hribbon-wrapper {  
	display: inline-block;
	margin: 15px 0;
	padding: 10px 0;
	position: relative;
	left: -30px;
}

@media (max-width: 960px) {
	.hribbon-wrapper {  
		left: -20px;
	}
}

@media (max-width: 640px) {
	.hribbon-wrapper {  
		display: block;
		margin: 0;
		left: -10px;
	}
}

.hribbon {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	padding: 5px 0;
	margin: 0 0 0 -20px;
	width: calc(100% + 20px);
	color: white;
	background-color: var(--ribbon-color);
}

@media (max-width: 640px) {
	.hribbon {
		width: calc(100% + 40px);
	}
}

.hribbon h2 {
	margin: 0;
	padding: 20px 300px 20px 25px;
	border-top: dashed 2px #918266;
	border-bottom: dashed 2px #918266;
	font-size: 1.7em;
	line-height: 1em;
	color: white;
	font-family: "Noto Sans JP";
	letter-spacing: .05em;
	font-weight: 700;
}

@media (max-width: 960px) {
	.hribbon h2{
		padding-right: 90px;
	}
}

@media (max-width: 640px) {
	.hribbon h2{
		padding-right: 25px;
		font-size: 1.4em;
		padding-top: 15px;
		padding-bottom: 15px;
	}
}

@media (min-width: 640px) {
	.hribbon:after {
		position: absolute;
		content: '';
		z-index: 1;
		top: 0;
		right: 0;
		width: 0;
		height: 0;
		border-width: 0 15px 84px 0;
		border-color: transparent #fff transparent transparent;
		border-style: solid;
	}
}

.hribbon:before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px #433732;
}

/* ----- h3用 ----- */
.h3-wrapper {
	font-size: 1em;
	font-weight: 700;
	position: relative;
	padding: .8em 1em;
	text-align: left;
	border-left: 13px solid var(--ribbon-color);
	background-color: var(--bg-color);
	border-radius: 3px;
}

.h3-wrapper .uk-h3 {
	color: var(--txt-color);
	margin: 0;
}

/* ----- h4用 ----- */
.h4-wrapper {
	position: relative;
	padding: .3em 0;
	border-bottom: 5px solid var(--bg-color);
}

.h4-wrapper:before {
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 8%;
	height: 5px;
	content: '';
	background-color: var(--ribbon-color);
}

.h4-wrapper .uk-h4 {
	font-size: 1.5em;
	color: var(--txt-color);
	margin: 0;
}

/* ----- h5用 ----- */
.uk-h5 {
	font-size: 1.4em;
	color: var(--txt-color);
	margin: 0;
}

/* ----- h6用 ----- */
.uk-h6 {
	font-size: 1.1em;
	color: var(--txt-color);
	margin-bottom: 0;
}

/* ========== section ========== */
/* sectionの左右padding */
.defaultsection {
	background-color: #fff;
	box-shadow: 0 10px 35px rgb(60, 36, 2, .24);
	padding-top: 10px;
	padding-left: 40px;
	padding-right: 40px;
}

@media screen and (max-width: 960px){
	.section-lr-padding {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* ========== ロゴ ========== */
.header-logo {
	width: 200px;
}

@media screen and (max-width: 640px){
	.header-logo {
		width: 150px;
	}
}

/* ========== ヘッダー ========== */
@media screen and (max-width: 640px){
	.uk-logo {
		padding: 0 3px;
	}
}

.header-lr-padding {
	padding-left: 1em;
	padding-right: 1em;
}

@media screen and (max-width: 1200px){
	.header-lr-padding {
		padding-left: 1vw;
		padding-right: 1vw;
	}
}

/* バッヂ */
header .uk-card-badge {
	border-radius: 1em; top:5px; right:0;
	padding: 1em .5em;
	width: 2em;
	overflow: hidden;
	text-align: center;
	line-height: 0;
	background-color: var(--highlight-color);
	color: #fff;
	text-overflow: clip;
	white-space: nowrap;
}

/* ----- マウスオーバーで表示されるメニュー ----- */
/* 位置調整 */
header .uk-dropdown {
	--uk-position-offset: -15px;
}

/* ========== フッター ========== */
/* ----- SNS ----- */
/* SNSボタンの色指定 */
#footer_sns div {
	text-align: center;
}

#footer_sns a {
	text-align: center;
	margin: .5em;
	padding-top: 6px;
	display: inline-block;
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 5px solid #a7a29f;
	background-color: #a7a29f;
	color: #fff;
}

#footer_sns a:hover {
	border: 5px solid #cfccc9;
	background-color: #cfccc9;
}

/* ----- フッター本体 ----- */
footer,
footer .uk-card {
	background-color: var(--mainbtn-color);
}

footer .uk-card a {
	color: #a7a29f;
	font-size: .8em;
}

footer .uk-card a:hover {
	color: #cfccc9;
}

footer .uk-card-default {
	box-shadow: none;
}

@media (max-width: 640px) {
	footer .uk-card-default {
		margin-bottom: 0;
	}
	
	footer .uk-card-body {
		padding: 15px 10px;
	}
}

@media (max-width: 640px) {
	footer #footerlink {
		flex-direction: column;
		font-size: 1.2em;
		line-height: 1.8em;
		text-align: center;
	}
}

#copylight {
	text-align: center;
	color: #fff;
	margin-bottom: 4em;
}

/* ========== ページ最下部に表示するもの ========== */
#bottomview {
	position: fixed;
	width: 100%;
	right: 0;
	bottom: 0;
	z-index: 100;
	pointer-events: none;
}

#bottomview #bottomview_heading a {
	box-shadow: 0 5px 10px rgb(60, 36, 2, .2);
}

#bottomview #bottomview_cookie {
	background-color: rgba(255, 255, 255, .75);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}

@media (max-width: 640px) {
	#bottomview #bottomview_cookie p {
		font-size: .9em;
	}
}

#bottomview #bottomview_heading a, #bottomview #bottomview_cookie div button, #bottomview #bottomview_cookie p a {
	pointer-events: auto;
	text-decoration: none;
}

/* ========== ハンバーガー ========== */
/* ハンバーガーボタン */
.uk-navbar .uk-navbar-left a {
	color: var(--mainbtn-color);
}

.uk-offcanvas-overlay::before {
	background-color: rgba(65, 61, 60, .5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* 閉じるボタン */
.uk-offcanvas .uk-offcanvas-close {
	position: relative;
	top: 0;
	right: 0;
	padding: 0;
	font-size: .9em;
}

/* ========== ボタン、リンク(アンカー) ========== */
/* ----- 画像のリンク(アンカー) ----- */
/* <div class="anchor_img><div><a><img></a></div></div> */
.anchor_img div {
	overflow: hidden;
	height: auto;
}

.anchor_img div img {
	transform: scale(1);
	transition: .4s ease-in-out;
}

.anchor_img div:hover img {
	transform: scale(1.05);
}

/* ----- 基本ボタン ----- */
.uk-button {
	display: inline-block;
	font-size: 1.2em;
	line-height: 30px;
	padding: 18px 20px;
	text-transform: none;
}

.uk-card-footer .uk-button {	/* uk-card-footerのみ */
	padding: 6px 20px;
}

@media (max-width: 640px) {
	.uk-button {
		width: 90%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

.uk-button-primary {
	padding-top: 18px;
	padding-bottom: 18px;
}

@media (max-width: 640px) {
	.uk-button-primary {
		padding-top: 16px;
		padding-bottom: 16px;
	}
}

.uk-button-large {
	padding-top: 28px;
	padding-bottom: 28px;
}

@media (max-width: 640px) {
	.uk-button-large {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

.uk-button-small {
	display: inline-block;
    padding: 4px 20px;
    font-size: 1rem;
}

/* メインボタン色 */
.uk-button-primary {
	background-color: var(--mainbtn-color);
	transition: background-color .3s;
	color: #fff;
	font-family: "Noto Sans JP";
	font-weight: 700;
	border: none;
}

.uk-button-primary:hover,
.uk-button-primary:active {
	background-color: var(--mainbtn-hover-color);
	border: none;
}

.uk-button-primary:disabled {
	background-color: #b6b0af;
	color: #e5e0df;
}

.uk-button-primary-disabled {	/* 強制disabled表示用class */
	background-color: #b6b0af;
	color: #e5e0df;
}

/* 強調ボタン色1 */
.button-primary-color {
	background-color: var(--subbtn-color);
	transition: background-color .3s;
	color: var(--txt-color);
	font-family: "Noto Sans JP";
	font-weight: 700;
}

.button-primary-color:hover,
.button-primary-color:active {
	background-color: var(--subbtn-hover-color);
	color: var(--txt-color);
}

.button-primary-color:disabled {
	background-color: #c6d3cf;
	color: #a5a4a4;
}

.button-primary-color-disabled {	/* 強制disabled表示用class */
	background-color: #c6d3cf;
	color: #a5a4a4;
}

/* 強調ボタン色2 */
.button-primary-color2 {
	background-color: var(--subbtn2-color);
	transition: background-color .3s;
	color: var(--txt-color);
	font-family: "Noto Sans JP";
	font-weight: 700;
}

.button-primary-color2:hover,
.button-primary-color2:active {
	background-color: var(--subbtn2-hover-color);
	color: var(--txt-color);
}

.button-primary-color2:disabled {
	background-color: #dcd5d0;
	color: #a5a4a4;
}

.button-primary-color2-disabled {	/* 強制disabled表示用class */
	background-color: #dcd5d0;
	color: #a5a4a4;
}

/* 強調ボタン色3 */
.button-primary-color3 {
	background-color: var(--subbtn4-color);
	transition: background-color .3s;
	color: #fff;
	font-family: "Noto Sans JP";
	font-weight: 700;
}

.button-primary-color3:hover,
.button-primary-color3:active {
	background-color: var(--subbtn4-hover-color);
	color: #fff;
}

.button-primary-color3:disabled {
	background-color: #d7bbba;
	color: #a5a4a4;
}

.button-primary-color3-disabled {	/* 強制disabled表示用class */
	background-color: #d7bbba;
	color: #a5a4a4;
}

/* 強調ボタン色4 */
.button-primary-color4 {
	background-color: var(--subbtn5-color);
	transition: background-color .3s;
	color: #fff;
	font-family: "Noto Sans JP";
	font-weight: 700;
}

.button-primary-color4:hover,
.button-primary-color4:active {
	background-color: var(--subbtn5-hover-color);
	color: #fff;
}

.button-primary-color4:disabled {
	background-color: #c4bad7;
	color: #a5a4a4;
}

.button-primary-color4-disabled {	/* 強制disabled表示用class */
	background-color: #c4bad7;
	color: #a5a4a4;
}

/* 枠のみボタン */
.button-primary-frame {
	background-color: #fff;
	transition: background-color .3s, outline-color .3s;
	outline: 2px solid var(--subbtn3-color);
	outline-offset: -2px;
	color: var(--txt-color);
	font-family: "Noto Sans JP";
	font-weight: 700;
}

.button-primary-frame:hover,
.button-primary-frame:active {
	background-color: var(--subbtn3-color);
	outline: none;
	color: #fff;
}

.button-primary-frame:disabled {
	background-color: #fff;
	outline: 2px solid #d9d9d9;
	outline-offset: -2px;
	color: #d9d9d9;
}

.button-primary-frame-disabled {	/* 強制disabled表示用class */
	background-color: #fff;
	outline: 2px solid #d9d9d9;
	outline-offset: -2px;
	color: #d9d9d9;
}

/* キャンセルボタン色 */
.uk-button-danger, .uk-modal-footer .uk-button-default {
	background-color: var(--cancelbtn-color);
	transition: background-color .2s;
	color: #fff;
	font-family: "Noto Sans JP";
	font-weight: 700;
	border: none;
}

.uk-button-danger:hover,
.uk-modal-footer .uk-button-default:hover,
.uk-button-danger:active,
.uk-modal-footer .uk-button-default:active {
	background-color: var(--cancelbtn-hover-color);
	color: #fff;
}

.uk-button-danger:disabled, .uk-modal-footer .uk-button-default:disabled {
	background-color: #c5b0b8;
	color: #e5e0df;
}

.button-danger-disabled, .uk-modal-footer .uk-button-default-disabled {	/* 強制disabled表示用class */
	background-color: #c5b0b8;
	color: #e5e0df;
}

/* ----- ヘッダーボタン、リンク ----- */
/* ヘッダーのリンク */
.uk-navbar-nav .headerlink {
	font-family: "Noto Sans JP";
	font-weight: 700;
	color: #413d3c;
}

.uk-navbar-nav .headerlink:hover {
	color: #8d8480;
}

/* ヘッダーのボタン */
.uk-navbar-nav .uk-navbar-item .uk-button-primary {
	background-color: #fff;
	color: #413d3c;
}

.uk-navbar-nav .uk-navbar-item a.uk-button {
	border: 2px solid var(--subbtn3-color);
	padding: 0 14px;
	font-size: 1em;
}

@media screen and (max-width: 640px){
	.uk-navbar-nav .uk-navbar-item a.uk-button {
		border: 2px solid var(--subbtn3-color);
		padding: 0 6px;
		font-size: .9em;
	}
}

.uk-navbar-nav .uk-navbar-item a.uk-button:hover {
	color: #fff;
	outline: none;
	background-color: var(--subbtn3-color);
}

.uk-navbar-nav .uk-navbar-item a.uk-button:hover .headerlink {
	color: #fff;
}

.uk-navbar-nav .uk-navbar-item .uk-card-badge {	/* バッジ */
	color: #fff;
}

/* ヘッダーのリンク マウスオーバー */
.uk-navbar-nav .uk-dropdown-nav a {
	font-family: "Noto Sans JP";
	font-weight: 300;
	color: #413d3c;
}

.uk-navbar-nav .uk-dropdown-nav a:hover {
	color: #8d8480;
}

/* ----- ハンバーガーボタン、リンク ----- */
/* ハンバーガーメニューテキストカラー */
.uk-nav-default > li > a , .uk-navbar-nav .uk-nav li a {
	font-family: "Noto Sans JP";
	font-weight: 300;
	color: #413d3c;
}

.uk-nav-default > li > a:hover , .uk-navbar-nav .uk-nav li a:hover {
	color: #8d8480;
}

/* ハンバーガー・ヘッダー　アイコン */
.uk-nav .uk-icon svg{
	width:25px; height:25px
}

.uk-nav .uk-icon svg *:not(g){
	transform: scale(0.6);
}


/* ----- アイコン付き ----- */
.btn_icontext {
	width: 75%;
	display: inline-block;
	position: relative;
}

@media (max-width: 960px) {
	.btn_icontext {
		width: 80%;
	}
}

@media (max-width: 640px) {
	.btn_icontext {
		width: 65%;
	}
}

/* 通常アイコン */
.btn_normal_icon_l {	/* 左アイコン用 */
	display: inline-block;
	position: absolute;
	width: 20%;
	left: -20%;
    top: 50%;
    transform: translate(10%, -22px);
	text-align: left;
}

.btn_normal_icon_r {	/* 右アイコン用 */
	display: inline-block;
	position: absolute;
	width: 20%;
	right: -20%;
    top: 50%;
    transform: translate(-10%, -22px);
	text-align: right;
}

@media (max-width: 960px) {
	.btn_normal_icon_l {	/* 左アイコン用 */
		left: -15%;
	}

	.btn_normal_icon_r {	/* 右アイコン用 */
		right: -15%;
	}
}

@media (max-width: 640px) {
	.btn_normal_icon_l {	/* 左アイコン用 */
		width: 30%;
		left: -35%;
	}

	.btn_normal_icon_r {	/* 右アイコン用 */
		width: 30%;
		right: -35%;
	}
}

/* 正方形(に近い)アイコン */
.btn_square_icon {
	margin: .65em auto;
}

.btn_square_icon svg {
	transform: scale(1.8);
	margin: .65em auto;
}

/* ========== form ========== */
/* フォームの項目名のテキスト調整 */
.uk-form-label {
	font-family: "Noto Sans JP";
	font-weight: 500;
	font-size: 1em;
}

/* ヘッダーメニューのドロップダウンの位置を上に調整 */
header [class*=uk-dropdown-bottom] {
	margin-top: -20px;
}

/* 編集できない(装飾できる)textarea */
.noedittextarea {
	max-width: 100%;
	width: 100%;
	padding: 15px;
	background: #fff;
	color: #666;
	border: 2px solid #e5e5e5;
	border-radius: .5em;
	transition: .2s ease-in-out;
	transition-property: color,background-color,border;
	vertical-align: middle;
	display: inline-block;
	overflow: auto;
}

/* formで入力した内容の確認画面のテキストが入ったブロック装飾 */
.inputconfirm {
	display: flex;
	align-items: center;
	max-width: 100%;
	min-height: 55px;
	border: none;
	outline: 1px solid #bbb;
	outline-offset: -1px;
	padding: .5em 12px;
	background: #fff;
	color: #666;
	font-size: 1.25rem;
}

/* 幅960px以上の場合の各フォーム見出しの横幅調整 */
@media (min-width: 960px) {
	.uk-form-horizontal .uk-form-label {
		width: 250px;
	}
}

@media (min-width: 960px) {
	.uk-form-horizontal .uk-form-controls {
		margin-left: 285px;
	}
}

/* ----- フォーカス系 ----- */
/* ラジオボタン、チェックボックスのチェック時の色 */
.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {
	background-color: var(--subbtn-color);
	border: none;
	outline: 1px solid #bbb;
	outline-offset: -1px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="range"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
textarea,
select,
input[type="text"].uk-input,
input[type="password"].uk-input,
input[type="email"].uk-input,
input[type="number"].uk-input,
input[type="search"].uk-input,
input[type="url"].uk-input,
input[type="email"].uk-input,
input[type="datetime"].uk-input,
input[type="date"].uk-input,
input[type="month"].uk-input,
input[type="week"].uk-input,
input[type="time"].uk-input,
input[type="datetime-local"].uk-input,
input[type="range"].uk-input,
input[type="checkbox"].uk-input,
input[type="radio"].uk-input,
input[type="file"].uk-input,
textarea.uk-input,
select.uk-select {
	border: none;
	outline: 1px solid #bbb;
	outline-offset: -1px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="datetime"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="range"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="file"]:focus,
textarea.uk-input:focus,
select.uk-select:focus,
input[type="text"]:active,
input[type="password"]:active,
input[type="email"]:active,
input[type="number"]:active,
input[type="search"]:active,
input[type="url"]:active,
input[type="email"]:active,
input[type="datetime"]:active,
input[type="date"]:active,
input[type="month"]:active,
input[type="week"]:active,
input[type="time"]:active,
input[type="datetime-local"]:active,
input[type="range"]:active,
input[type="checkbox"]:active,
input[type="radio"]:active,
input[type="file"]:active,
textarea.uk-input:active,
select.uk-select:active,
input[type="text"].uk-input:focus,
input[type="password"].uk-input:focus,
input[type="email"].uk-input:focus,
input[type="number"].uk-input:focus,
input[type="search"].uk-input:focus,
input[type="url"].uk-input:focus,
input[type="email"].uk-input:focus,
input[type="datetime"].uk-input:focus,
input[type="date"].uk-input:focus,
input[type="month"].uk-input:focus,
input[type="week"].uk-input:focus,
input[type="time"].uk-input:focus,
input[type="datetime-local"].uk-input:focus,
input[type="range"].uk-input:focus,
input[type="checkbox"].uk-input:focus,
input[type="radio"].uk-input:focus,
input[type="file"].uk-input:focus,
textarea.uk-input:focus,
select.uk-select:focus,
input[type="text"].uk-input:active,
input[type="password"].uk-input:active,
input[type="email"].uk-input:active,
input[type="number"].uk-input:active,
input[type="search"].uk-input:active,
input[type="url"].uk-input:active,
input[type="email"].uk-input:active,
input[type="datetime"].uk-input:active,
input[type="date"].uk-input:active,
input[type="month"].uk-input:active,
input[type="week"].uk-input:active,
input[type="time"].uk-input:active,
input[type="datetime-local"].uk-input:active,
input[type="range"].uk-input:active,
input[type="checkbox"].uk-input:active,
input[type="radio"].uk-input:active,
input[type="file"].uk-input:active,
textarea.uk-input:active,
select.uk-select:active {
	background-color: #fcf9ec;
	border: none;
	outline: 1px solid #bbb;
	outline-offset: -1px;
}

.uk-radio:checked:focus,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
	background-color: var(--subbtn-color);
	color: var(--txt-color);
	border: none;
	outline: 1px solid #bbb;
	outline-offset: -1px;
}

/* ----- エラーメッセージ ----- */
.uk-alert-danger {
	background: #fbf4f5;
	color: var(--cancelbtn-color);
	font-family: "Noto Sans JP";
	font-weight: 500;
}

/* ----- プレースフォルダー ----- */
.uk-input::placeholder {
	color: #bbb;
}

/* ----- パスワード表示、非表示切替 ----- */
.passcheckboxlabel {
	cursor: pointer;
}

.passcheckboxlabel input {
	display: none;
}

.passcheckboxlabel input + .passcheckboxtext:before {
	content: "";
	display: inline-block;
	position: relative;
	top: .4em;
	background-image: none, url("../img/icon_eye.svg");
	background-size: 68% auto, 100%;
	background-position: top 55% left 50%, 0 0;
	background-repeat: no-repeat, no-repeat;
	width: 24px;
	height: 24px;
	pointer-events: auto;
}

.passcheckboxlabel input:checked + .passcheckboxtext:before {
	background-image: url("../img/icon_eye-off.svg");
	width: 36px;
	height: 36px;
}

/* ========== テーブル ========== */
.uk-table th {
	font-size: 1em;
	font-weight: 500;
	font-family: "Noto Sans JP";
	color: var(--mainbtn-color);
	vertical-align: middle;
}

.uk-table td {
	vertical-align: middle;
}

/* ========== パンくずリスト ========== */
.uk-breadcrumb {
	margin: -20px -30px 0 -30px;
	padding: .6em 1em;
	background-color: var(--toastbg-color);
	font-family: "Noto Sans JP";
	font-weight: 500;
}

@media screen and (max-width: 960px) {
	.uk-breadcrumb {
		margin: -20px -20px 0 -20px;
	}
}

@media screen and (max-width: 640px) {
	.uk-breadcrumb {
		margin: -20px -10px 0 -10px;
	}
}

.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
	margin: 0 10px 0 calc(10px - 4px);
	content: "\025b6";
	font-size: .1em;
	color: #968773;
}

.uk-breadcrumb li a {
	display: inline-block;
	padding: .2em 1em;
	border-radius: 1em;
	background-color: #fff;
}

.uk-breadcrumb li a {
	color: var(--ribbon-color);
}

.uk-breadcrumb li a:hover {
	color: #968773;
}

/* ========== ラベル ========== */
.uk-label {
	background-color: var(--highlight-color);
	border-radius: 2em;
	padding: 3px 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: "Noto Sans JP";
	font-weight: 500;
}

.label-color1 {
	background-color:var(--label1-color);
}

.label-color2 {
	background-color: #e5c25e;
}

.label-color3 {
	background-color: #9ccd71;
}

.label-color4 {
	background-color: #8e8bda;
}

.label-color5 {
	background-color: var(--cancelbtn-color);
}


/* NEWラベル */
.new_label_left,.new_label_right{ position:relative;}

.new_label_left::after {
	content:"NEW";
	position:absolute;
	top:-1em;
	border-radius: 2em;
	background:var(--label1-color);
	padding: 3px 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: "Noto Sans JP";
	font-weight: 500;
	color:#fff;
	z-index:6;
	}

.new_label_right::after {
	content:"NEW";
	position:absolute;
	top:-1em;
	right:0;
	border-radius: 2em;
	background:var(--label1-color);
	padding: 3px 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: "Noto Sans JP";
	font-weight: 500;
	color:#fff;
	z-index:6;
	}

/* ========== バッヂ ========== */
.uk-card-badge {
	height: auto;
}


/* ========== リスト ========== */
.uk-list-decimal>* {
	padding-left: 50px;
}

.uk-list-decimal>::before {
	left: -50px;
	width: 50px;
}

/* カッコつき数字リスト */
ol.list_parentheses {
	padding:0 0 0 2em;
	margin:0;
}

ol.list_parentheses li {
	list-style-type:none;
	list-style-position:inside;
	counter-increment: cnt;
}

ol.list_parentheses li:before {
	display: marker;
	content: "(" counter(cnt) ") ";
	margin-left: -1.9em;
	width: 1em;
}

/* ========== スライダー ========== */
.uk-dotnav > * > * {
	border: 1px solid var(--ribbon-color);
}

.uk-dotnav > .uk-active > * {
	background-color: var(--ribbon-color);
}

/* ========== ライトボックス ========== */
a.uk-lightbox-button {
	color: #fff;
}

/* ========== アコーディオン ========== */
.uk-accordion-title::before {
	background-color: var(--bg-color);
	border-radius: 50%;
}

/* ========== uk-card ========== */
.uk-card-default {
	margin-bottom: 3em;
	border: none;
	box-shadow: 0 10px 35px rgb(60, 36, 2, .24);
}

.uk-card-body, .uk-card-primary, .uk-card-secondary, .uk-card-header, .uk-card-footer {
	padding-left: 30px;
	padding-right: 30px;
}

.uk-card-default .uk-card-header {
	background-color: var(--bg-color);
}

.uk-card-default .uk-card-footer,.uk-nav-default .uk-nav-divider {
	border-top: 1px solid #413d3c;
}

.uk-card-footer {
	text-align: right;
}

@media screen and (max-width: 960px) {
	.uk-card-body, .uk-card-primary, .uk-card-secondary, .uk-card-header, .uk-card-footer {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media screen and (max-width: 640px) {
	.uk-card-body, .uk-card-primary, .uk-card-secondary, .uk-card-header, .uk-card-footer {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ----- カード装飾1 ----- */
.carddesign1 .uk-card-header h3 {
	width: 100%;
	font-weight: 700;
}

.carddesign1 .uk-card-header .uk-width-auto {
	position: relative;
}

.carddesign1 .uk-border-rounded {
	width: 200px;
	height: auto;
	overflow: hidden;
}

.carddesign1 .uk-card-header .uk-width-expand .uk-margin-top {
	display: inline-block;
	text-align: center;
	background-color: var(--highlight-color);
	border-radius: 30px;
	line-height: 1.5em;
	padding: .5em 2em;
	color: #fff;
	font-family: "Noto Sans JP";
	font-weight: 700;
	letter-spacing: .05em;
}

.carddesign1 .uk-card-header {
	border: none;
}

.carddesign1 .uk-card-title {
	text-align: left;
}

.carddesign1 .uk-card-body {
	font-size: 1em;
	padding: 40px;
	flex-grow: 1;	/* 子要素の余白の割り当て */
}

@media (max-width: 640px) {
	.carddesign1 .uk-card-body {
		padding: 20px;
	}
}

.carddesign1 #modal-review001 .uk-modal-header img {
	width: 80%;
}

@media (max-width: 640px) {
	.carddesign1 .uk-border-rounded {
		max-width: 150px;
		min-width: auto;
		height: auto;
		transform: rotate(-10deg) translate(0, -10px);
	}
}

.carddesign1 .uk-card-footer {
	background-color: var(--mainbtn-color);
}

.carddesign1 .uk-card-footer a {
	color: white;
	font-weight: 700;
}

.carddesign1 .uk-card-footer .uk-button-text {
	color: white;
	font-family: "Noto Sans JP";
	font-weight: 500;
	position: static;
}

.carddesign1 .uk-card-footer:hover {
	background-color: #595452;
	outline: none;
}

/* ========== ボックスシャドウ ========== */
.uk-box-shadow-small {
	box-shadow: 0 2px 8px rgba(60, 36, 2, .12);
}

.uk-box-shadow-medium {
	box-shadow: 0 2px 8px rgba(60, 36, 2, .12);
}

.uk-box-shadow-large {
	box-shadow: 0 14px 25px rgba(60, 36, 2, .16);
}

.uk-box-shadow-xlarge {
	box-shadow: 0 28px 50px rgba(60, 36, 2, .16);
}

.uk-box-shadow-bottom::after {
	background: rgba(60, 36, 2, .5);
}

/* hover系 */
.uk-box-shadow-hover-small:hover {
	box-shadow: 0 2px 8px rgba(60, 36, 2, .12);
}

.uk-box-shadow-hover-medium:hover {
	box-shadow: 0 5px 15px rgba(60, 36, 2, .12);
}

.uk-box-shadow-hover-large:hover {
	box-shadow: 0 14px 25px rgba(60, 36, 2, .16);
}

.uk-box-shadow-hover-xlarge:hover {
	box-shadow: 0 28px 50px rgba(60, 36, 2, .16);
}

/* ========== ライトボックス、モーダルウィンドウ ========== */
/* ----- ライトボックス ----- */
/* ライトボックスの背景を半透明にする */
.uk-lightbox {
	background-color: rgba(65, 61, 60, .5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.uk-lightbox-items>*>* {	/* ライトボックスの画像等のサイズを100vw(vh)から90vw(vh)にする */
	max-width: 90vw;
	max-height: 90vh;
}

.uk-lightbox-toolbar, .uk-lightbox-button {	/* ライトボックスの閉じるボタン左右ボタンの背景を消す */
	background: none;
}

/* ----- モーダルウィンドウ ----- */
.uk-modal {
	background-color: rgba(65, 61, 60, .4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.uk-modal-body {	/* モーダルウィンドウの下に隙間が空くのを調整 */
	box-sizing: content-box;
	padding: 15px;
}

.uk-modal-footer .uk-button {
	margin-top: 1em;	/* ウィンドウ幅640px以下の時、縦並びボタンの上下がくっつくのを調整 */
	margin-left: 1em;	/* ウィンドウ幅640px以上の時、横並びボタンの左右が近いのを調整 */
}

.uk-modal-dialog {	/* スマートフォンでダイアログ(モーダル)を表示すると横がはみ出るので調整 */
	width: auto;
	max-width: 800px !important;
}

/* ========== 通知 ========== */
.uk-notification {
	width: 80%;
	left: auto;
	margin: auto;
	box-shadow: 0 10px 35px rgb(60, 36, 2, .46);
}
.uk-notification-bottom-center, .uk-notification-top-center {
    left: 50%;
    margin-left: -40%;
}

.uk-notification-message {
    padding: 30px;
	background-color: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.uk-notification-message span {
	display: none;
}

.uk-notification-close {
	display: block;
	top: 10px;
	right: 10px;
}

.uk-notification-message a, .uk-notification-message a.uk-icon {
	color: var(--txt-color);
}

.uk-notification-message-primary, .uk-notification-message-success {
	font-family: "Noto Sans JP";
	font-weight: 500;
	color: var(--txt-color);
}

.uk-notification-message-warning, .uk-notification-message-danger {
	font-family: "Noto Sans JP";
	font-weight: 500;
	color: var(--cancelbtn-color);
}

/* ========== スイッチャー ========== */
.uk-tab::before {
	border-bottom: 4px solid #e5e5e5;
}

.uk-tab > .uk-active > a {
	border-bottom: 4px solid var(--subbtn-color);
}

.uk-tab > * > a {
	font-family: "Noto Sans JP";
	font-size: 1.1em;
}

.uk-tab > .uk-active > a {
	color: var(--txt-color);
	font-weight: 500;
}

/* ========== ページ切替 ========== */
.uk-pagination li {
	outline: 2px solid var(--subbtn3-color);
	outline-offset: -2px;
	margin:0 .4em;
	padding-top: .1em;
	width: 40px;
	height: 40px;
	text-align: center;
	vertical-align: middle;
}

.uk-pagination li:hover {
	background-color: var(--subbtn3-color);
	color: #fff;
}

.uk-pagination li.uk-disabled {
	outline: 2px solid #d5cecc;
}

.uk-pagination li.uk-disabled span {
	color: #d5cecc;
}

.uk-pagination li.pagination-disabled-3point {	/* 3点リーダーのところに適用 */
	outline: none;
}

.uk-pagination li.pagination-disabled-3point span {	/* 3点リーダーのところに適用 */
	color: var(--subbtn3-color);
}

.uk-pagination>*>* {
	color: var(--subbtn3-color);
	font-family: "Noto Sans JP";
	font-weight: 700;
}

.uk-pagination li.uk-active {
	background-color: var(--subbtn3-color);
}

.uk-pagination>li.uk-active>* {
	color: #fff;
}

.uk-pagination li:hover a {
	color: #fff;
}

/* ========== オーバーレイ ========== */
.uk-overlay-default {
    background-color: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	color: var(--txt-color);
}

.uk-overlay-primary {
    background-color: var(--ribbon-color-alpha);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	color: #fff;
}

/* ========== プログレスバー ========== */
.uk-progress::-webkit-progress-value {
  background-color: var(--highlight-color);
}

.uk-progress::-moz-progress-bar {
  background-color: var(--highlight-color);
}

.uk-progress::-ms-fill {
  background-color: var(--highlight-color);
}


/* ==========  reCAPTCHA v3　表示位置 ========== */
.grecaptcha-badge{
    margin-bottom: 70px;
	}

/**************************************************************/
/* 各ページ */
/**************************************************************/
/* ========== トップページ ========== */
/* ----- じぶんぐるみとは ----- */
#index_whatis h2 {
	font-weight: 700;
	font-size: 2.2rem;
	position: relative;
}

#index_whatis h2:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: var(--txt-color);
}

#index_whatis h2 #index_whatis_h2span {
	position: relative;
	padding: 0 .5em;
	background: var(--bg-color);
}

#index_whatis .uk-card-body {
	font-weight: 500;
	font-family: 'Noto Sans JP';
	padding: 15px 0 0 0;
}

/* ----- Myじぶんぐるみ、ログイン後表示ボタン ----- */
/* マイじぶんぐるみ */
#index_myjbgrm #profbox {
	background-color: #fff;
	box-shadow: 0 10px 35px rgb(60, 36, 2, .16);
}

#index_myjbgrm #profbox div {
	padding-top: 0;
}

/* テキスト表示時のもの
#index_myjbgrm h3 {
	position: relative;
	word-break: break-all;
	letter-spacing: .05em;
	font-weight: 700;
	display: flex;
	align-items: center;
}

#index_myjbgrm h3:before,
#index_myjbgrm h3:after {
	content: "";
	height: 12px;
	flex-grow: 1;
	background-color: var(--bg-color);
}

#index_myjbgrm h3:before {
	margin-right: 2rem;
}

#index_myjbgrm h3:after {
	margin-left: 2rem;
}
*/

#index_myjbgrm h3 {
	text-align: center;
}

#index_myjbgrm h3 img {
	width: 50%;
}

@media (max-width: 640px) {
	#index_myjbgrm h3 img {
		width: 70%;
	}
}

#index_myjbgrm #ploflist ul {
	padding-left: 0
}

#index_myjbgrm #ploflist li {
	text-align: left;
	font-size: 1em;
	font-weight: 700;
	padding: .5em;
	margin: 5px 0;
}

#index_myjbgrm #ploflist li span:nth-child(1) {
	display: block;
	text-align: center;
	font-size: .8em;
	font-weight: 300;
	color: var(--ribbon-color);
	border-bottom: 1px solid var(--bg-color);
	margin-bottom: .5em;
}

#index_myjbgrm #ploflist li span:nth-child(2) {
	padding: 1.5em;
	font-size: 1.1em;
	letter-spacing: .1em;
}

#index_myjbgrm #plofimg {
	padding-left: 10px;
	padding-right: 10px;
}

@media (max-width: 1200px) {
	#index_myjbgrm #plofimg {
		padding-left: 0;
		padding-right: 0;
	}
}

#index_myjbgrm #ploflist {
	padding-left: 20px;
	padding-right: 20px;
}

@media (max-width: 1200px) {
	#index_myjbgrm #ploflist {
		padding-left: 10px;
		padding-right: 10px;
	}
}

#index_myjbgrm #plofimg {
	text-align: center;
}

#index_myjbgrm #plofimg img {
	width: 100%;
}

@media (max-width: 640px) {
	#index_myjbgrm #plofimg img {
		width: 60%;
	}
}

@media (max-width: 640px) {
	#index_myjbgrm #ploflist li {
		font-size: 1em;
	}
}

/* ----- 配送状況 ----- */
#index_delivery .index_delivery_box {
	text-align: center;
}

#index_delivery .index_delivery_box img {
	width: 45%;
}

@media (max-width: 1200px) {
	#index_delivery .index_delivery_box img {
		width: 55%;
	}
}

@media (max-width: 960px) {
	#index_delivery .index_delivery_box img {
		width: 70%;
	}
}

@media (max-width: 640px) {
	#index_delivery .index_delivery_box img {
		width: 100%;
	}
}

#index_delivery .index_delivery_box div div {
	text-align: left;
}

#index_delivery .index_delivery_box div div span {
	font-family: "Noto Sans JP";
	font-weight: 700;
	display: inline-block;
}

/* ----- 新しくじぶんぐるみになった人 ----- */
#index_newmenber .people {
	text-align: right;
}

#index_newmenber .people p {
	display: inline-block;
	text-align: center;
	background-color: var(--highlight-color);
	border-radius: 30px;
	line-height: 1.5em;
	padding: .3em .4em .3em 1.5em;
	color: #fff;
	font-size: 1.1em;
	font-family: "Noto Sans JP";
	font-weight: 700;
	letter-spacing: .05em;
}

#index_newmenber .people p span {
	display: inline-block;
	background-color: #fff;
	border-radius: 30px;
	margin-left: .5em;
	padding: 0.2em 1em;
	color: #413d3c;
}

#index_newmenber ul a {
	text-align: center;
	display: block;
}

#index_newmenber .uk-border-circle {
	/* Safariがoutlineを指定したものに対してのborder-radiusが効かないのでborderに変更
	outline: 8px solid var(--subbtn-color);
	outline-offset: -7px;
	*/
	border: 8px solid var(--subbtn-color);
}

#index_newmenber .uk-border-circle:hover {
	/* outline: 8px solid var(--subbtn-hover-color); */
	border: 8px solid var(--subbtn-hover-color);
}

#index_newmenber ul a span {
	font-family: "Noto Sans JP";
	font-size: 1.1em;
	font-weight: 700;
	color: #413d3c;
	display: inline-block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----- じぶんぐるみTV ----- */
#index_tv .youtube {
	width: 60%;
	aspect-ratio: 16/9;
	margin: auto;
}

@media (max-width: 960px) {
	#index_tv .youtube {
		width: 100%;
	}
}

#index_tv .youtube iframe {
	width: 100%;
	height: 100%;
}

/* ----- トピック ----- */
#index_topic .topic_img img {
	width: 100%;
	height: auto;
}

#index_topic .topic_img div a {
	overflow: hidden;
	width: 100%;
	height: auto;
	box-shadow: 0 10px 35px rgb(60, 36, 2, .16);
}

#index_topic .topic_img div img {
	transform: scale(1);
	transition: .4s ease-in-out;
}

#index_topic .topic_img div:hover img {
	transform: scale(1.05);
}

/* ----- お客様の声 ----- */



/* ========== じぶんぐるみデザイン ========== */

/**/
#designbase_face  div p{ text-align:center;}


/*------------新規作成------------*/
.design_newdate .btn_reedit{ line-height:1.5em;}
.desing_keepdate .uk-button{ height:100%}

@media screen and (max-width: 640px){
	.desing_keepdate .uk-button-primary-disabled:after{
		content:"none";
		 height:1em;
		 }}

/*---------編集中表示---------------*/
.design_editdate{ background:var(--highlight-color)}

/*----入力項目のエラー----*/
.designcomp_error  ul li span{
	 display:inline-block;
	 background:var(--cancelbtn-color);
	 color:#fff;
	 border-radius:5%;
	 padding:2px 5px} 

/*---------保存されているデザインを編集---------------*/
.jibungurumilist li .uk-panel{
	width:100%
}

.jibungurumilist li .uk-panel .jibungurumilist_imgdiv {
	width: 100%;
	height: 0;
	padding-top: 100%;
	position: relative;
	border-radius: 50%;
	overflow: hidden;
}

.jibungurumilist li .uk-panel .jibungurumilist_imgdiv img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
	top: 0;
}

.jibungurumilist li span{
	display:block;
	text-align:center;
	border-radius:5em;
	color: var(--txt-color);
	font-family: "Noto Sans JP";
	font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}
.jibungurumilist li img{
	border:5px solid var(--subbtn-color)
	}

.jibungurumilist a:hover{
	text-decoration:none
	}


/* じぶんぐるみリスト チェックボックス仕様 */
.jibungurumilist input[type=checkbox]{
	display: none;
	}

.jibungurumilist li input[type="checkbox"]:checked + label img{
	outline: 10px solid var(--subbtn-color);
	outline-offset:-10px;
	}

.jibungurumilist li label span{
	font-size:16px;
	}


/*マイじぶんぐるみ表記*/
li .desgin_myjibungurumilabel img{border:5px solid var(--highlight-color);}
li .desgin_myjibungurumilabel:after{
	content:"マイじぶんぐるみ"; 
	font-family: "Noto Sans JP";
	font-weight: 500;
	display:block;
	width:100%;
	margin:auto;
	color:#fff;
	text-align:center;
	border-radius:1em;
	padding:5px 10px;
	background:var(--highlight-color);
	}

/*---------編集中のじぶんぐるみ表示---------------*/
.design_savedate{
	background:var(--highlight-color);
	padding:.3em 2em .3em 1em ;
	border-radius:5em;
	position:relative;
}

.design_savedateicon {
	width:20%;
	vertical-align: top;
	z-index:2;
	position:relative;
}

.design_savedateicon div{
	width:100px;
	height:100px;
	overflow:hidden;
	background:#fff;
	margin:5px 0
}

.design_savedatetext{
	width:100%;
	position:absolute;
	top:1em;
	z-index:1
}

.design_savedatetext span{
	background:none;
	margin-left:90px;
	color:#fff;
	font-family: "Noto Sans JP";
	font-weight: 500;
	font-size: 1.2em;
}

.design_savedatetext div{
	background:#fff;
	padding:5px 20px 5px 90px;
	border-radius:5em;
	width:95%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media screen and (max-width: 499px){
	.design_savedateicon {width:15%;}
	.design_savedatetext div{ font-size:1.3em}
	}


/* ----- 顔プレビュー ----- */
.facepreview {
	max-width: 100%;
}

.facepreview::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.facetabicon svg{ 
	transform: scale(1.0);
	margin:0;
}

/* 表示部分 */
#facepreview{
	overflow:hidden;
	width:auto;
	height:375px;
	position:relative;
	margin:auto;
}

#facepreview img{ position:absolute; width:100%; height:auto; margin:0 auto;}

/* パーツ選択 */
#facecommand{
	text-align:center;
	max-height: 100%;
	background: rgba(255,255,255,.8);
}
#facecomman ul{
	margin-bottom:0 !important;
}
.parts_img .uk-button-default{
	 padding:0; margin:5px auto 0 5px;
 }

.facecommand_parts { text-align:center}

/*選択中パーツ*/
.select-backcolor{
	background: #fefdec !important;
	outline: 3px solid var(--select-color) !important;
	outline-offset: -3px;
}

/*選択中カラーパーツ*/
.parts_size .select-colorbtn{
	outline:2px solid var(--select-color);
	position:relative
	}

.parts_size .select-colorbtn:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    outline: 3px solid #ffffe9;
    outline-offset: -3px;
    z-index: 5;
    height: 100%;
    margin-left: -20px;
    padding: 0;}

/*PC*/
@media screen and (min-width: 1200px){
	#facepreview{ height:500px;}
	#facecommand{ height:600px;}
}

@media screen and (max-width: 1200px){
	#facecommand{ height:600px;}
}

@media screen and (max-width: 1000px){
	#facecommand{ height: 520px;}
	#facecommand .category_parts a{ padding:0;}
}

@media screen and (min-width: 720px){ 
	#modal-create-result img{
		width:auto; height:500px;
	}
}

@media screen and (max-width: 719px){
	#facecommand{ height: 450px;}
}

/*モバイル用*/
@media screen and (max-width: 639px){
	.facebox{ overflow:visible; height: 80vw;}

	#designbase .facebox{overflow:hidden;}

	#facecommand { height:auto;}

	#designbase #facecommand{ height:58vw;}

	#facepreview{ width: 79.65vw; height: 99.6vw;}

	#facepreview .uk-slider-container-offset li button:nth-of-type(2),
	#facepreview .uk-slider-container-offset li button:nth-of-type(1){
		 margin-bottom: 10px!important;
	 }
	}

/*---- 前/後反転ボタン ----*/

.imginversion_mobile_btn {
	position:relative;
	}

.imginversion_mobile_btn .uk-button{
	position:absolute;
	bottom:0;
	}

/* ----- 調整用ボタン ----- */
#facecommand .facecommand_parts .parts_size .ch-button-color {
	width: 100%;
}

.button-m,.button-p {
	font-size: .7em;
	padding: 1em 5em;
	display:inline-block;
}

#facecommand .parts_size .facecommand_text {
	width: 6em;
	display: inline-block;
	text-align: center;
}

.ch-btn-hair-color01 {
	background-color: #231815;
}

.ch-btn-hair-color01:hover {
	background-color: #573c35;
}

.ch-btn-hair-color02 {
	background-color: #86492d;
}

.ch-btn-hair-color02:hover {
	background-color: #b25e3d;
}

.ch-btn-hair-color03 {
	background-color: #aaa9a9;
}

.ch-btn-hair-color03:hover {
	background-color: #ccc;
}

.ch-btn-hair-color04 {
	background-color: #cfad8b;
}

.ch-btn-hair-color04:hover {
	background-color: #e0c1a6;
}

.ch-btn-eye-color01{
	background:#CD777E;
}

.ch-btn-eye-color02{
	background:#499DBE;
}

.ch-btn-eye-color01:hover,.ch-btn-eye-color01:active{
	background:#EB959C;
}

.ch-btn-eye-color02:hover,.ch-btn-eye-color02:active{
	background:#67BBD2;
}

@media (max-width: 959px) {
	.ch-btn-imginversion .uk-icon {
		display: none;
	}

	.button-m,.button-p {
		padding: 5px 2em;
	}
}
@media (max-width: 639px) {
	.button-m,.button-p {
		padding: .5em;
		width:30%;
	}

	#facecommand .parts_size .facecommand_text {
		width: 5em;
	}	

	.ch-btn-imginversion {
		width:20%;
		padding:0;
	}
	.ch-btn-imginversion .uk-icon{
		display:block;
	}
}

@media (max-width: 500px) {
	#facecommand .parts_size .facecommand_text {
		width: 4em;
		font-size:.7em;
	}
}

/* ========== デザイン 基本 ========== */
/* ----- デザインカスタム ----- */
/*サムネイル*/
#designbase #facecommand{ height:auto;}
#designbase .parts_img img{ width:70%}


/* ========== デザイン 完成・編集 ========== */
/* ----- プレビュー ----- */

/*じぶんぐるみ写真*/
.toggle-animation-face,
.toggle-animation-mypage_myjibungurumi{
	margin: 5% 0 20% 0;
}

@media (max-width: 640px) {
	.toggle-animation-face,
	.toggle-animation-mypage_myjibungurumi{
		margin: 0 0 30px 0;
	}
}

/*デザイン全身*/
.toggle-animation-body,
.toggle-animation-mypage_myjibungurumidesignbody{ width:64.3%}


/* ========== じぶんぐるみの服のご注文 ========== */
#clothes .item_pict img, #clothes .item_text_name {	/* Googleアナリティクス(拡張eコマース)対応のためaタグをdivタグに変えたので、カーソルを明示指定 */
	cursor: pointer;
}

/* ----- 商品一覧 ----- */
/* リスト */
.item_list{ position:relative; }
.item_list .uk-card-media-body { margin-bottom:66px;}
.item_list .uk-card-media-bottom .uk-button{ position:absolute; bottom:0; width:86%;}
.item_list a{ color:var(--txt-color)} 
.item_text_price span{font-weight:400}
.price_discount{ text-decoration: line-through;}

/* ラベル */
.clothes_itemlabel{
	position:absolute; top:0;
}

.clothes_label{
	border-radius: 2em;
	padding: 3px 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: "Noto Sans JP";
	font-weight: 500;
	color:#fff;
	z-index:6;
	}

.item_list .uk-button{
    white-space: nowrap;
    overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 400px) {
	.clothes_itemlabel{ position:relative; top:0; left:0; text-align:center;}
	.item_list .uk-button{ font-size:.8em;}
	}

/* ----- 商品詳細 ----- */
.ch-btn-clothescolor {
	padding: 0;
}

.select-clothescolor img {
	outline: 8px solid var(--select-color);
}
.clothes_cate {
	 font-family: "Noto Sans JP" ;
	 font-weight: 500; 
}

#clothes_detail .uk-position-center-left,
.uk-position-center-left,
.uk-position-center-right {
	background: #cec1b2;
	border-radius: 3em;
}

#clothes_detail .uk-position-center-left svg,
.uk-position-center-left svg,
.uk-position-center-right svg {
	color: #fff;
	margin: .3em;
}

#clothes_detail .uk-accordion-title::before{
	outline: 2px solid var(--subbtn3-color);
	outline-offset: -2px;
	fill: var(--txt-color);
}

/* ========== じぶんぐるみのご注文 ========== */
.order_cart table {
	outline: 1px solid #bbb;
	outline-offset: -1px;
	font-size: 1.1em;
}

.order_cart table tr {
	border-bottom: 1px solid #bbb;
}

/*--------- 保存されているデザイン ---------------*/
#order_savedate .button-primary-frame {
	font-size: 1em;
	padding: 12px 10px;
}

/* ========== ご注文履歴 ========== */
/*--------- ラジオボタン選択時枠 ---------------*/
.orderhistory_chkboxparentclr_on {
	outline: 6px solid var(--subbtn-color);
	outline-offset: -6px;
}

.orderhistory_chkboxparentclr_off {
	outline: none;
}

/* ========== じぶんぐるみTV ========== */
/*--------- 動画一覧 ---------------*/
.mvtitle{
	font-weight:500;
 display: -webkit-box;
 padding:5px auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  }
.mvdate{
	font-weight:300;
	color:var(--subbtn3-color);
}
.video_play {
	display: inline-block;
	position: relative;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	color: rgba(255,255,255,.9);
	background:rgba(0,0,0,.7);
	font-size: 70px;
}

/* 再生ボタン */
.video_play::before {
	position: absolute;
	top: 50%;
	left: 39%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border: .3em solid transparent;
	border-left: .5em solid currentColor;
	box-sizing: border-box;
	content: "";
}
.jtv_movielist a:hover .video_play,
.jtv_movielist a:active .video_play{
	background:var(--cancelbtn-color);
}

@media (max-width: 960px) {
	.video_play{
			width: 10vw;
			height: 10vw;
			}
}
@media (max-width: 640px) {
	.video_play{
			width: 15vw;
			height: 15vw;
			}
}

/* ========== よくある質問 ========== */
#faq .uk-list a {
	color: var(--mainbtn-color);
}

#faq .accordion-head {
	margin-bottom: 6em;
}

#faq .h3-wrapper {
	/* margin-top: 4em; */
}

#faq .accordion-box {
	box-shadow: 0 10px 35px rgb(60, 36, 2, .16);
	margin-bottom: 2em;
}

#faq .accordion-box:last-child {
	margin-bottom: 0;
}

#faq .uk-accordion-title {
	padding: 20px;
	font-family: "Noto Sans JP";
	font-weight: 500;
}

#faq .uk-accordion-content {
	margin-top: 0;
	padding: 5px 20px 20px 20px;
}

#faq .uk-accordion-title span,
#faq .uk-accordion-content p span:first-child {
	display: inline-block;
	border-radius: 1em;
	margin-right: .5em;
	width: 3em;
	height: 1.5em;
	text-align: center;
	font-family: "Noto Sans JP";
	font-weight: 500;
	color: #fff;
}

#faq .uk-accordion-content p span:first-child {
	background-color: var(--cancelbtn-hover-color);
}


/* ========== お知らせ ========== */

.notice_list{
	border-top:1px solid #cdcac7;
	padding-bottom:1em;
	padding-top:1em
}

.notice_list li{
	border-bottom:1px solid #cdcac7;
	padding-bottom:1em
}

.notice_list a, .notice_year a{
	color:var(--text-color);
}

.notice_update,topic_update{
	font-weight:500;
	font-family: "Noto Sans JP"
}

@media (max-width: 960px) {
	.notice_list li .notice_subject,
	.notice_list li .notice_update{ 
		margin-top:10px;
	}
	.notice_label .uk-label{
		width:48%;
	}
}
@media (max-width: 640px) {
	.notice_detail_label .uk-label{
		width:48%;
	}
}

.h1_title_overflow{
	min-width:auto;
	max-width:11em;
	height:auto;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ========== じぶんぐるみの作り方 ========== */
.pagelink{
    padding-top: 80px;
    margin-top:-80px;
	pointer-events: none;
}

.facecommand_text{
	width:5em; display:inline-block
}

.description_pict{
	border:3px solid var(--highlight-light-color);
	padding:1em
}


@media (max-width: 959px) {

	.uk-list-decimal>*{
		padding-left:30px
		}

	#howtomake .pagelink:first-child ,#aboutdelivery .pagelink:first-child{
		margin-bottom:30px !important
		}
	}


/* ========== 注文から発送までの流れ ========== */

@media (min-width: 960px) {

	.uk-list>:nth-child(n+2){
		margin-top:0 !important;
		}

	}

@media (max-width: 959px) {

	.uk-list-decimal>*{
		padding-left:30px
		}
	}