@charset "utf-8";

@-ms-viewport {
    width: device-width;
}

/* check
*{
	border:1px solid #FF0000;
}
*/

/* ボタン系
------------------------------------------------*/
.btn_common_w100{
	width: 100%;
	margin: 1em auto;
}
.btn_common_w80{
	width: 80%;
	margin: 1em auto;
}
.btn_common_w70{
	width: 70%;
	margin: 1em auto;
}
.btn_common_w60{
	width: 60%;
	margin: 1em auto;
}
.btn_common_w50{
	width: 50%;
	margin: 1em auto;
}
.btn_common a{
	background: rgb(45,147,138);
	background: url(../img/flame_left.png) no-repeat top left / 20px,url(../img/flame_right.png) no-repeat bottom right / 20px,linear-gradient(0deg, rgba(45,147,138,1) 0%, rgba(21,72,67,1) 50%, rgba(45,147,138,1) 100%);
	border: 1px solid #9eefe9;
	display: block;
	padding: 0.5em 0;
	position: relative;
	font-family: 'MatissePro', sans-serif;
    font-weight: 600;
	text-shadow: 0 0 6px rgba(12,64,59,0.1);
	color: #fefefe;
	font-size: 17px;
	text-align: center;
}
.btn_common .icon_arrow_right:before{
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
}
.btn_common .icon_double_arrow_bottom:before{
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
}
.btn_common .icon_link:before{
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
}
.btn_common a:hover {
    color: #ffff00;
}

/* 横2列　*/
.btn_common_2column{
	display: flex;
	align-items: flex-start;
	gap:15px;
}
.btn_common_2column a{
	font-size: 15px;
}

/* テキスト挿入箇所
------------------------------------------------*/
.common_text_flame{
	border: solid 1px #9eefe9;
    background-color: rgba(12, 42, 37, 0.7);
	width: 95%;
	margin: 1% auto;
	padding: 1em;
	position: relative;
	color: #fefefe;
}
.common_text_flame h1{
	text-align: center;
	font-size: 22px;
}
.common_text_flame p{
	line-height: 1.7em;
}
/* ローディング
------------------------------------------------*/
#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #1f033c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
#loading img{
	width: 150px;
	margin-bottom: 20px;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #fefefe;
    border-top: 5px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 右下固定ボタン
------------------------------------------------*/
.fixed_btn {
    position: fixed;
    right: calc(50% - 250px);
    bottom: 20px;
    width: 45px;
    z-index: 9;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.fixed_btn a img {
    width: 100%;
}
@media screen and (max-width: 500px) {
    .fixed_btn {
        right: 0;
    }
}

/* モーダルウィンドウ
------------------------------------------------*/
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(31,17,64,0.8);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal.show {
    opacity: 1;
}
.modal-content {
    background: url(../img/bg_honeycomb_01.png) no-repeat top left / 35%,url(../img/bg_honeycomb_01.png) no-repeat center right / 30%,url(../img/bg_honeycomb_01.png) no-repeat bottom left / 40%,linear-gradient(90deg, rgba(31,17,64,1) 0%, rgba(54,26,120,1) 50%, rgba(31,17,64,1) 100%);
    padding: 30px 10px;
    border: 4px solid #ac9769;
    width: 92%;
    max-width: 450px;
    max-height: 80%;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    transition: transform 0.3s ease;
}
.modal.show .modal-content {
    transform: translate(-50%, -50%) scale(1);
}
.modal-content_inner {
    overflow-y: auto;
    max-height: 70vh;
}
.modal-content_inner .options {
    display: flex;
    flex-wrap: wrap;
	gap:10px;
}
.modal-content_inner .option {
    width: calc(50% - 5px);
    padding: 1em 0;
    margin: 5px 0;
    background-color: #fdfec5;
    color: #121212;
    border: 2px solid #06a583;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
	font-size: 14px;
	    font-weight: 500;
}
.option.selected {
    background-color: #06a583;
    color: #ffffff;
}
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ac9769;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}
.close:hover,
.close:focus {
    color: #816527;
    text-decoration: none;
    cursor: pointer;
}
body.modal-open {
    overflow: hidden;
}

/* 入力フォーム */
form{
	width:95%;
	margin:1em auto 0 auto;
	padding-bottom:1em;
}
form dl{
	width: 100%;
	margin: 0 auto;
}
form dl dt{
	margin: 0 0.2em;
	font-size: 13px;
}
form dl dd{
	margin: 0;
}
form input {
    width: 100%;
    border: 2px solid #ffa800;
    background: #FEFFE1;
    border-radius: 8px;
    padding: 0.7em 0.5em;
    -webkit-box-shadow: inset 0px 0px 5px 2px #E6E6E6;
    -moz-box-shadow: inset 0px 0px 5px 2px #E6E6E6;
    box-shadow: inset 0px 0px 5px 2px #E6E6E6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}
.input_arrow {
    cursor: pointer;
}
form input.filled,
form input:focus,
form input:not(:placeholder-shown) {
    background: #ffffff !important;
}
::placeholder{
	font-size: 15px;
	color: gray;
}
/* 各項目のタイトル */
.form_section_title{
	display: flex;
	align-items: center;
	margin: 1.5em 0 1em 0;
}
.form_section_title p{
	color: #fefefe;
	font-size: 16px;
	font-weight: 600;
}
span.form_section_title_small{
	font-size: 13px;
}
p.form_required{
	background: #ffa800;
	border-radius: 2px;
	text-align: center;
	color: #ffffff;
	font-size: 11px;
	font-weight: normal;
	padding: 0.2em 0.7em;
	margin: 0 0.3em 0 0.5em;
}
p.error{
	color: #ff0000;
	font-size: 13px;
	font-weight: 500;
}
p.form_caption{
	color: #434343;
	font-size: 12px;
	width: 95%;
	margin: 0.5em auto 0 auto;
}
/* パスワードの表示非表示 */
.pass_display{
	text-align: right;
}
#togglePasswordLabel {
    cursor: pointer;
	color: #ddd;
	font-size: 13px;
	margin-top: 0.5em;
}

/* 確認ボタン */
.submit-button {
    display: block;
    width: 90%;
    margin: 1.5em auto 0 auto;
    padding: 0.8em 0;
    background-color: #ffa800;
    border: 1px solid #ffa800;
    color: white;
    border-radius: 90px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 0 #d17d00; /* 立体感のある影 */
    transition: all 0.2s ease; /* スムーズなアニメーション */
}
.submit-button:hover {
    box-shadow: 0 0 0 #b56900; /* 影を消して押し込む */
    transform: translateY(5px); /* ボタンが押し込まれる効果 */
}
.submit-button .icon_arrow_right {
    position: absolute;
    right: 20px; /* 右端からの位置 */
    top: 50%;
    transform: translateY(-50%); /* 上下中央に配置 */
    font-size: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f105';
}

/* パス忘れ */
.pass_forget{
	text-align: center;
	color: #ddd;
	font-size: 13px;
	text-decoration: underline;
}

/* fonts
------------------------------------------------*/
/* Regular (通常) */
@font-face {
    font-family: 'DS-Digital';
    src: url('../fonts/digi/ds-digi-webfont.woff2') format('woff2'), /* Modern browsers */
         url('../fonts/digi/ds-digi-webfont.woff') format('woff'),   /* Older browsers */
         url('../fonts/digi/DS-DIGI.TTF') format('truetype'); /* Fallback */
    font-weight: normal;
    font-style: normal;
}

/* Bold (太字) */
@font-face {
    font-family: 'DS-Digital';
    src: url('../fonts/digi/ds-digii-webfont.woff2') format('woff2'), /* Modern browsers */
         url('../fonts/digi/ds-digii-webfont.woff') format('woff'),   /* Older browsers */
         url('../fonts/digi/DS-DIGIB.TTF') format('truetype'); /* Fallback */
    font-weight: bold;
    font-style: normal;
}

/* Italic (斜体) */
@font-face {
    font-family: 'DS-Digital';
    src: url('../fonts/digi/DS-DIGII.TTF') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* Light */
@font-face {
    font-family: 'MatissePro';
    src: url('../fonts/matisse/fot-matissepro-l-webfont.woff2') format('woff2'),
         url('../fonts/matisse/fot-matissepro-l-webfont.woff') format('woff'),
         url('../fonts/matisse/FOT-MatissePro-L.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

/* Regular */
@font-face {
    font-family: 'MatissePro';
    src: url('../fonts/matisse/fot-matissepro-m-webfont.woff2') format('woff2'),
         url('../fonts/matisse/fot-matissepro-m-webfont.woff') format('woff'),
         url('../fonts/matisse/FOT-MatissePro-M.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* DemiBold */
@font-face {
    font-family: 'MatissePro';
    src: url('../fonts/matisse/fot-matissepro-db-webfont.woff2') format('woff2'),
         url('../fonts/matisse/fot-matissepro-db-webfont.woff') format('woff'),
         url('../fonts/matisse/FOT-MatissePro-DB.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'MatissePro';
    src: url('../fonts/matisse/FOT-MatissePro-B.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* Light (300) */
.custom-font-light {
    font-family: 'MatissePro', sans-serif;
    font-weight: 300;
}

/* Regular (400) */
.custom-font-regular {
    font-family: 'MatissePro', sans-serif;
    font-weight: 400;
}

/* DemiBold (500) */
.custom-font-demi-bold {
    font-family: 'MatissePro', sans-serif;
    font-weight: 500;
}

/* Bold (700) */
.custom-font-bold {
    font-family: 'MatissePro', sans-serif;
    font-weight: 700;
}

.mimncho_200{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.t_w_shadowStrong{
text-shadow: 0px 1px 0px #fff, #fff 2px 0px 0px, #fff -2px 0px 0px, #fff 0px -2px 0px, #fff 0px 2px 0px, #fff 2px 2px 0px, #fff -2px 2px 0px, #fff 2px -2px 0px, #fff -2px -2px 0px, #fff 1px 2px 0px, #fff -1px 2px 0px, #fff 1px -2px 0px, #fff -1px -2px 0px, #fff 2px 1px 0px, #fff -2px 1px 0px, #fff 2px -1px 0px, #fff -2px -1px 0px, #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px, #fff 3px 0px 0px, #fff 3px 1px 0px, #fff 3px 2px 0px, #fff 3px 3px 0px, #fff 0px 3px 0px, #fff 2px 3px 0px, #fff 4px 4px 0px, #fff 4px 3px 0px, #fff 4px 2px 0px, #fff 4px 1px 0px, #fff 3px 0px 1px, #fff 3px 1px 1px, #fff 3px 2px 1px, #fff 3px 3px 1px, #fff 0px 3px 1px, #fff 2px 3px 1px, #fff 4px 4px 1px;
}

.t_b_shadowStrong{
text-shadow: 0px 1px 0px #000, #000 2px 0px 0px, #000 -2px 0px 0px, #000 0px -2px 0px, #000 0px 2px 0px, #000 2px 2px 0px, #000 -2px 2px 0px, #000 2px -2px 0px, #000 -2px -2px 0px, #000 1px 2px 0px, #000 -1px 2px 0px, #000 1px -2px 0px, #000 -1px -2px 0px, #000 2px 1px 0px, #000 -2px 1px 0px, #000 2px -1px 0px, #000 -2px -1px 0px, #000 1px 1px 0px, #000 -1px 1px 0px, #000 1px -1px 0px, #000 -1px -1px 0px, #000 3px 0px 0px, #000 3px 1px 0px, #000 3px 2px 0px, #000 3px 3px 0px, #000 0px 3px 0px, #000 2px 3px 0px, #000 4px 4px 0px, #000 4px 3px 0px, #000 4px 2px 0px, #000 4px 1px 0px, #000 3px 0px 1px, #000 3px 1px 1px, #000 3px 2px 1px, #000 3px 3px 1px, #000 0px 3px 1px, #000 2px 3px 1px, #000 4px 4px 1px;
}

.t_b_shadow{
text-shadow:  0px 1px 0px #000, #000 2px 0px 0px, #000 -2px 0px 0px, #000 0px -2px 0px, #000 0px 2px 0px, #000 2px 2px 0px, #000 -2px 2px 0px, #000 2px -2px 0px;
}

.t_shadow{
	text-shadow: 0 0 6px rgb(0, 0, 0, 1);
}
.t_g_shadow{
	text-shadow: 0 0 6px rgba(12,64,59,0.1);
}
.red{
	color: red;
}

/* webアイコン
------------------------------------------------*/
/* ハートマーク　*/
.icon_heart:before{
    box-sizing: border-box;
    content: '\f004';
    font-family:"Font Awesome 5 Free";
	font-weight: 900;
	font-size: 12px;
	margin-right: 3px;
}
/* クエスチョンマーク　*/
.icon_question:before{
    box-sizing: border-box;
    content: '\f059';
    font-family:"Font Awesome 5 Free";
	font-weight: 900;
	font-size: 12px;
	margin-right: 3px;
}
/* お知らせ　*/
.icon_notice:before{
    box-sizing: border-box;
    content: '\f0f3';
    font-family:"Font Awesome 5 Free";
	font-weight: 400;
}
/* メッセージ　*/
.icon_message:before{
    box-sizing: border-box;
    content: '\f075';
    font-family:"Font Awesome 5 Free";
	font-weight: 400;
}
/* チェックマーク　円形　*/
.icon_check_round:before{
    box-sizing: border-box;
    content: '\f058';
    font-family:"Font Awesome 5 Free";
	font-weight: 400;
	margin-right: 3px;
}
/* ベル　*/
.icon_info:before{
    box-sizing: border-box;
    content: '\f0f3';
    font-family:"Font Awesome 5 Free";
	font-weight: 400;
	margin-right: 3px;
}
/* 矢印（上）　*/
.icon_arrow_top:before{
    box-sizing: border-box;
    content: '\f062';
    font-family:"Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 3px;
}
/* 矢印（右）　*/
.icon_arrow_right:before{
    box-sizing: border-box;
    content: '\f105';
    font-family:"Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 3px;
}
/* 二重矢印（下）　*/
.icon_double_arrow_bottom:before{
    box-sizing: border-box;
    content: '\f103';
    font-family:"Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 3px;
}
/* プラスマーク */
.icon_plus:before{
    box-sizing: border-box;
    content: '\f067';
    font-family:"Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 3px;
}
/* 買い物カゴ */
.icon_cart:before{
    box-sizing: border-box;
    content: '\f07a';
    font-family:"Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 3px;
}
/* 別ページジャンプ */
.icon_link:before{
    box-sizing: border-box;
    content: '\f35d';
    font-family:"Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 3px;
}

/* セクション区切り線
------------------------------------------------*/
.section_line img{
	width: 100%;
	margin: 1em auto;
}


/* 画像幅
------------------------------------------------*/
.img_w100{
	width: 100%;
	margin: 1em auto;
}