@charset "UTF-8";

:root {
    --main-color: #FFFFFF;
    --sub-color: #414141;
    --pc-nemu-bg-color: #2B2B2B;
    --sp-nemu-bg-color: #282828;

    /* テキストフォント */
    /* 日本語ベース */
    --font-base-family: 'Zen Old Mincho', 'Noto Serif JP', serif;
    /* コピーライト専用 */
    --font-cormorant-family: 'Cormorant', serif;

    /* テキストサイズ */
    --font-base-size: 1rem; /* 16px */
    /* Weight */
    --font-base-weight-light: 300;
    --font-base-weight-regular: 400;
    --font-base-weight-medium: 500;
    --font-base-weight-semibold: 600;
    --font-base-weight-bold: 700;
    --font-base-weight-black: 900;
    /* Style */
    --font-style-italic: italic;
    --font-style-normal: normal;

    /* Line Height */
    --font-base-line-height: 1.8;

    /* テキストカラー */
    --base-text-color: #000000;
    --white-text: #FFFFFF;
}


/* ==========================================================================
*  SUBPAGE
===========================================================================*/
#subpage {
	display:flow-root;
	font-size: 17px;
  font-weight: 500; /* basicのfont-weight: var(--font-base-weight-semibold);打消し */
}
#subpage article.main-content {
  margin-top: -56px;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	margin-block: clamp(3.75rem, 3.143rem + 2.59vw, 6.25rem);
  padding-inline: 15px;
}

#subpage .drag-sort-y a {
  text-decoration: underline;
}

/* ===============================
*  下層ページ上部ヘッダー画像 エリア
==================================*/

.kv {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

/* ===============================
*  屋号
=============================== */
.kv-company-name {
    flex: 1;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    letter-spacing: 0.5em;
    /* 13~28px */
    font-size: clamp(0.813rem, 0.571rem + 0.98vw, 1.75rem);
    font-weight: var(--font-base-weight-medium);
    /* 0~36px */
    padding-top: clamp(0rem, -0.579rem + 2.36vw, 2.25rem);

    max-width: 140px;
}

/* ===============================
*  キービジュアル画像
=============================== */
/* 画像エリア：1920pxデザインに対して1780px = 約92.7% */
.kv-images {
	position: relative;
    width: calc(1780 / 1920 * 100%);
    max-width: 1780px;
    display: grid;
}

.kv-images img {
    display: block;
    width: 100%;
    height: auto; /* 画像のアスペクト比を維持 */
    /* max-height: 517px;
    min-height: 206.8px; */
    object-fit: cover;
    object-position: center top;

    z-index: -1; /* 黒背景見出しを前面にするため */
}

/*=================================
*   見出し
===================================*/

/* 黒背景見出し */
#subpage h2 {
	position: absolute;
	bottom: -50px;
	left: -50px;
    background-color: rgba(0, 0, 0, 0.94902);
    color: var(--white-text);
    /* 22~60px */
    font-size: clamp(1.375rem, 0.764rem + 2.49vw, 3.75rem);
    font-weight: var(--font-base-weight-semibold);
    letter-spacing: 0.05em;
    line-height: 1.45;

    width: fit-content;
     /* 4~8px */
    padding-top: clamp(0.25rem, 0.186rem + 0.26vw, 0.5rem);
     /* 10~23px */
    padding-right: clamp(0.625rem, 0.416rem + 0.85vw, 1.438rem);
     /* 6~11px */
    padding-bottom: clamp(0.375rem, 0.295rem + 0.33vw, 0.688rem);
     /* 10~23px */
    padding-left: clamp(0.625rem, 0.416rem + 0.85vw, 1.438rem);
	z-index: 10;
}
#subpage h2:empty {
    display: none;
}

@media screen and (min-width: 1921px) {

    /* ワイド画面時に画面幅に合わせて横（右側）に伸ばすためのクラス
    class="wide" */
    .wide {
        /* width: auto; */
        max-width: none;
        flex: 1;
    }

}

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

    article {
        margin-top: -20px;
    }
}

/* ▼ ～768px：スマホ～タブレット */
@media screen and (max-width: 768px) {

    /* article {
        margin-top: -22px;
    } */

    /* ===============================
    *  下層ページ上部ヘッダー画像 エリア
    ==================================*/

    .kv-images img {        
        object-position: left top;
    }
    #subpage h2 {
        left: 0; 
        bottom: 0;
    }
}

/* ===============================
*  本文エリア
=============================== */

.thanks-message {
    padding-left: 23px; /* sub-basic.css の .product と統一 */
    display: flex;
    flex-direction: column;
    letter-spacing: 0.05em;
}

/* お問い合わせありがとうございます */
.thanks-heading-text {
    /* 20~34px ― supplementary-sentence と同等 */
    font-size: clamp(1.25rem, 1.025rem + 0.92vw, 2.125rem);
    line-height: 1.441;
    margin: 46px 0 28px 0;
}

/* 本文2行 */
.thanks-body-text {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    /* 14~18px */
    font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);
    line-height: 2;
    color: #5F5F5F;
}



/*====================================================================================================
  KAERU
====================================================================================================*/
/*---------------------------------------------------------------------------
  KAIGYOU
---------------------------------------------------------------------------*/

#subpage p.indention {
	clear:both;
	margin: 0 2%;
	height:40px;
	text-indent: -9999px;
	background:none;
}

/*---------------------------------------------------------------------------
  MIDASHI
---------------------------------------------------------------------------*/
/* 大見出し */
#subpage h3 {
	clear:both;
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: clamp(1.75rem, 1.447rem + 1.29vw, 3rem); /* 375:28px, 1920:48px */
	color: var(--base-text-color);
}
#subpage h3::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: #c7c7c7;
}
/* 中見出し */
#subpage h4.mid {
	clear:both;
	padding: 0.25em 0.5em;
	font-size: clamp(1.5rem, 1.318rem + 0.78vw, 2.25rem); /* 375:24px, 1920:36px */ 
	color: var(--base-text-color);
	line-height: 1.4;
	background: transparent;
	border-left: solid 2px #a3a3a3;
	margin-block: 1.25em;
}
/* 小見出し通常 */
#subpage h4:not([class]) {
	clear:both;
  display: flex;
  gap: 1em;
  align-items: center;
  font-size: clamp(1.25rem, 1.144rem + 0.45vw, 1.688rem); /* 375:20px, 1920:27px */
  color: var(--base-text-color);
  margin-bottom: 24px;
}
/* 小見出し大きくした時(em付与) */
#subpage h4:not([class]) em {
	font-size: clamp(1.75rem, 1.447rem + 1.29vw, 3rem); /* 375:28px, 1920:48px */
  font-style: normal;
}

/* 小見出しサブ名あり */
#subpage h4:not([class]) small.sup {
    padding: 0.4em 0.6em;
    background: #e5e5e5;
    font-size: clamp(0.875rem, 0.723rem + 0.65vw, 1.5rem); /* 375:14px, 1920:24px */
    line-height: 1;
}
#subpage h4:not([class]) small.sup:empty { display: none;}

/* #subpage > :where(h3, h4):first-child { margin-top:0;} */

/*---------------------------------------------------------------------------
  COMMENT
---------------------------------------------------------------------------*/

#subpage .comment1 {
	clear:both;
	margin:0 0 20px;
	text-align:justify;
}

/* グレー背景の本文 */
#subpage .comment2 {
	clear:both;
	margin:2.5rem 5%;
	padding:1.875em;
	background:#fff;
	border: 5px solid #ddd;
}
/* 赤背景の本文 */
#subpage .comment3 {
	clear:both;
	margin:2.5rem 5%;
	padding:1.875em;
	background:#e5e5e5;
	border: 5px solid #888;
}
#subpage .comment4 {
	clear:both;
	margin:2.5rem 5%;
	padding:1.25rem;
	border: 5px solid #888;
	background:#E5F6F1;
	border-radius:20px / 30px;
}

/*---------------------------------------------------------------------------
  HYOU
---------------------------------------------------------------------------*/

#subpage table.hyou {
	clear:both;
	margin:1.5rem auto 0;
	max-width:1100px;
	width:100%;
	border-collapse:collapse;
	border-top:solid 1px #a2a2a2;
	border-left:solid 1px #a2a2a2;
}
#subpage table.hyou th,
#subpage table.hyou td {
	padding:0.75rem 1.25rem;
	font-size:1.25rem;
	border-right:solid 1px #a2a2a2;
	border-bottom:solid 1px #a2a2a2;
}
#subpage table.hyou th {
	background:#e5e5e5;
	color: var(--base-text-color);
}
#subpage table.hyou .sm_mid {
	display:none;
}

/* 2RETU */
#subpage table.hyou2 th { width:30%;}
#subpage table.hyou2 td { width:70%;}
#subpage table.hyou2+table.hyou2 { border-top:none; margin-top:0;}
#subpage table.hyou2 td table {
	border-collapse:collapse;
	display:block;
	max-height:300px;
	overflow:auto;
}
#subpage table.hyou2 td table th,
#subpage table.hyou2 td table td { width:auto;}

/* 3RETU */
#subpage table.hyou3 { margin:0 2%;}
#subpage table.hyou3 th,
#subpage table.hyou3 td { width:33%; }
#subpage table.hyou3+table.hyou3 { border-top:none; }

/* 4RETU */
#subpage table.hyou4 { margin:0 2%;}
#subpage table.hyou4 th,
#subpage table.hyou4 td { width:25%; }
#subpage table.hyou4+table.hyou4 { border-top:none; }

/* 5RETU */
#subpage table.hyou5 { margin:0 2%;}
#subpage table.hyou5 th,
#subpage table.hyou5 td { width:20%;}
#subpage table.hyou5+table.hyou5 { border-top:none; }

/* FREE */
#subpage .pc_table { display:block;}
#subpage .sm_table { display:none;}
#subpage .pc_table table,
#subpage .sm_table table {
	clear:both;
	margin:10px 2%;
	width:96%;
	border-collapse:collapse;
	border-top:1px solid #a2a2a2;
	border-left:1px solid #a2a2a2;
}
#subpage .pc_table table td,
#subpage .sm_table table td {
	padding:5px 10px;
	background:#FFF;
	border-right:1px solid #a2a2a2;
	border-bottom:1px solid #a2a2a2;
}
#subpage .pc_table thead td,
#subpage .sm_table thead td { background:#EEE;}

/* FIX */
/*#subpage .fix_table {margin:10px 2%; width:96%;}*/
#subpage .fix_table {
    margin:10px 2%;
    width:96%;
    line-height:150%;
    height: auto;
    overflow-y: hidden !important;
}
/*#subpage .fix_table table {
	clear:both;
	width:100%;
	border-collapse:collapse;
	border-top:1px solid #DDD;
	border-left:1px solid #DDD;
	background:#FFF;
}*/
#subpage .fix_table table {
    clear: both;
    width: max-content;
    height: fit-content !important;
    border-collapse: collapse;
    border-top: 1px solid #a2a2a2;
    border-left: 1px solid #a2a2a2;
    background: #FFF;
}

/*
#subpage .fix_table table th,
#subpage .fix_table table td {
    padding:2px;
	border-right:1px solid #DDD;
	border-bottom:1px solid #DDD;
}
padding 5px 10px
*/
#subpage .fix_table table th,
#subpage .fix_table table td {
    padding: 0.5rem;
    border-right: 1px solid #a2a2a2;
    border-bottom: 1px solid #a2a2a2;
    width: auto !important;
    white-space: nowrap;
}


#subpage .fix_table table th {
	background:#EEE;
	font-weight:bold;
	text-align:center;
}

#subpage .fix_table #noscroll-thead thead{
    position:sticky;
    top: 0;
}
#subpage .fix_table #noscroll-thead thead:before{
    content:"";
    position:absolute;
    top:-1px;
    width:100%;
    height:100%;
}

/*---------------------------------------------------------------------------
  LIST
---------------------------------------------------------------------------*/

/* ul */
#subpage ul.list-ul {
	clear:both;
	margin:0 2%;
	padding:5px 0;
}
#subpage ul.list-ul li {
	position:relative;
	padding: 0 0 0 20px;
}

#subpage ul.list-ul li:before {
	content:"";
	position:absolute;
	display:block;
	width:7px;
	aspect-ratio:1;
	background-color: #707070;
	border-radius:50%;
	inset:0.5lh auto auto 0;
	translate:0 -50%;
}

/* ol　数字リスト */
#subpage *:not(.list-ol):has( + .list-ol) {
	counter-reset:num;
}
#subpage .list-ol {
	counter-increment:num;
	clear:both;
	margin:0 2%;
	padding:5px 0;
}
#subpage .list-ol div {
	padding-left:1.375rem;
	text-indent:-1.125rem;
}
#subpage .list-ol div:before {
	content:counter(num)".";
	padding-right:0.375em;
	font-weight: 700;
	color: #707070;
}

/*---------------------------------------------------------------------------
  LINK
---------------------------------------------------------------------------*/

#subpage .link:not(.link4) {
	position: relative;
	margin: 0 2% 2% 2%;
	padding: 0 0 10px 1.6em;
	font-weight: 600;
	font-size: 1.125rem;
}
/* #subpage .link.right { width: fit-content; margin-inline: auto 2%;} */
#subpage .link:not(.link4)::before {
	width: 22px;
	height: 4px;
	font-weight: 600;
	content:"";
	position: absolute;
	display: block;
	aspect-ratio: 1;
	background: url(../image/icon-link.svg) no-repeat center / contain;
	inset: 0.5lh auto auto 0;
	translate: 0 -50%;
}
#subpage .link:not(.link4) a { text-decoration: underline;}
/* hover時 */
#subpage .link:not(.link4):hover {
    color: #AA0017;
}
#subpage .link:not(.link4):hover::before {
    background: url(../image/icon-link-hover.svg) no-repeat center / contain;
}


#subpage .file {
	clear: both;
	margin: 0 2%;
	padding: 0 0 10px;
}
#subpage .file img { padding-right: 10px;}


/* LINK PLURAL�@*************************/
/* LINK BOX2 */ #subpage .link2 { clear:none; float:left; width:46%;}
/* LINK BOX3 */ #subpage .link3 { clear:none; float:left; width:29.3%;}
/* LINK BOX4 */ #subpage .link4 { clear:none; float:left; width:21%;}

/* FILE PLURAL�@*************************/
/* FILE BOX2 */ #subpage .file2 { clear:none; float:left; width:46%;}
/* FILE BOX3 */ #subpage .file3 { clear:none; float:left; width:29.3%;}
/* FILE BOX4 */ #subpage .file4 { clear:none; float:left; width:21%;}

/* FILELINK */ #subpage .pdf { margin-top: 1rem; margin-bottom: 0.5rem;}
/* FILELINK */ #subpage .pdf a { margin-left: 0.5rem;}


/*---------------------------------------------------------------------------
  EMBEDDED
---------------------------------------------------------------------------*/

#subpage .embedded {
  position:relative;
	clear:both;
	margin: 0 2%;
	padding:0 0 20px;
}
#subpage .embedded iframe { width: 100%;}


/*---------------------------------------------------------------------------
  PHOTO
---------------------------------------------------------------------------*/

/* #subpage .photo img { border-radius: 20px;} */

#subpage .photo-l {	float:left;}
#subpage .photo-r {	float:right;}
#subpage .photo-c { clear:both; text-align:center;}
#subpage .photo-l img { margin:0 20px 0 0;}
#subpage .photo-r img { margin:0 0 0 20px;}
#subpage .photo-c img { margin:0 0 10px;}
#subpage .photo-l p,
#subpage .photo-r p,
#subpage .photo-c p { margin: 0 0 5px;}
#subpage .caption { font-size:80%; text-align:center;}

/* PHOTO BOX　*************************/
#subpage ul.photo_box { float:left; margin:2%;}
#subpage ul.photo_box li {}
#subpage ul.photo_box li.photo { margin:0 0 5px;}
#subpage ul.photo_box li.cap {}
#subpage ul.photo_box li.youtube { position: relative;}
#subpage ul.photo_box li.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
#subpage ul.photo_box img { width:100%; max-width:100%;}
/* PHOTO BOX1 */ #subpage ul.g1 {width:800px; float:none; margin-inline:auto;}
/* PHOTO BOX2 */ #subpage ul.g2 {width:calc(100% / 2 - 4%);}
/* PHOTO BOX3 */ #subpage ul.g3 {width:calc(100% / 3 - 4%);}
/* PHOTO BOX4 */ #subpage ul.g4 {width:calc(100% / 4 - 4%);}
/* PHOTO BOX5 */ #subpage ul.g5 {width:calc(100% / 5 - 4%);}
#subpage ul.g1 img { width:100%; height:auto; text-align:center;}
#subpage ul.g2 img { width:100%; height:auto;}
#subpage ul.g3 img { width:100%; height:auto;}
#subpage ul.g4 img { width:100%; height:auto;}
#subpage ul.g5 img { width:100%; height:auto;}

#subpage ul.g1.photo_box .photo { text-align: center;}
#subpage ul.g1.photo_box .photo img { width: auto;}

/*---------------------------------------------------------------------------
  BOX
---------------------------------------------------------------------------*/

#subpage .box1 h4:not([class]),
#subpage .box2 h4:not([class]) {
	clear:none;
	border:none;
	margin:5px 0 30px 0;
	padding:0;
	color: var(--base-text-color);
	background: none;
}

#subpage .box1 h4:not([class]):empty,
#subpage .box2 h4:not([class]):empty {
	display: none; 
}

/* BOX1 */
#subpage .box1 {
	clear:both;
	/* margin:20px 2%; */
	margin:20px 0;
	width:96%;
}
#subpage .box1 .photo-c img {max-width:800px; height:auto; width:100%;}
#subpage .box1 .photo-l img {max-width:400px; height:auto;}
#subpage .box1 .photo-r img {max-width:400px; height:auto;}
#subpage .box1:after { /*float_clear*/ display:block; clear:both;	content:"";}
#subpage .box1 h4 {}
#subpage .box1 .come {/*overflow:hidden; �܂�Ԃ���*/}

/*追加 画像が無い時(小見出し+本文+画像左・右) */
#subpage .box1 .photo-l:has(img[src*="noimage.gif"]):not(:has(input)),
#subpage .box1 .photo-r:has(img[src*="noimage.gif"]):not(:has(input)) {
    display: none !important;
}


/* BOX2 */
#subpage .box2 {
	float:left;
	margin:20px 2%;
	width:46%;
}
#subpage .box2 h4 {}
#subpage .box2 .come {/*overflow:hidden; �܂�Ԃ���*/}
#subpage .box2 .photo-l img {max-width:210px; height:auto;}
#subpage .box2 .photo-r img {max-width:210px; height:auto;}

/*---------------------------------------------------------------------------
  BUTTON
---------------------------------------------------------------------------*/
#subpage .btn {
    display: flex;
    justify-content: center;
    margin-block: 0.5rem;
}

#subpage .btn a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 240px;
    width: fit-content;
    background-color: var(--base-text-color);
    color: var(--main-color);
    border: 1px solid transparent;
    border-radius: 0;
    padding: 16px 24px;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#subpage .btn a:after {
    content: "";
    display: block;
    flex-shrink: 0;
    background: none;
    width: 8px;
    height: 8px;
    border-top: 1px solid #a2a2a2;
    border-right: 1px solid #a2a2a2;
    transform: rotate(45deg);
    margin-left: 20px;
    transition: border-color 0.3s ease;
}
@media (any-hover: hover) {
    #subpage .btn a:hover {
        background-color: var(--main-color);
        color: var(--base-text-color);
        border-color: var(--base-text-color);
        opacity: 1;     }
    #subpage .btn a:hover:after {
        border-color: var(--base-text-color);
    }
}


/* BUTTON BOX1 */ #subpage .b1 { clear: both; float:none;}
/* BUTTON BOX2 */ #subpage .b2 { float:left; width:calc(100% / 2 - 4%); margin-inline: 2%;}
/* BUTTON BOX3 */ #subpage .b3 { float:left; width:calc(100% / 3 - 4%); margin-inline: 2%;}

/*---------------------------------------------------------------------------
  COLUMNBOX
---------------------------------------------------------------------------*/
#subpage .column {}
#subpage .column:after { /*float_clear*/ display:block; clear:both; content:"";}
#subpage .column .col2 { float: left; margin: 2%; width: 46%;}
#subpage .column .col3 { float: left; margin: 2%; width: 29.3%;}
#subpage .column .col2:nth-child(2+1),
#subpage .column .col3:nth-child(3+1) { clear:both;}

/*---------------------------------------------------------------------------
  FLOW
---------------------------------------------------------------------------*/

#subpage ul.flow_box {}
#subpage ul.flow_box:after { /*float_clear*/ display:block; clear:both; content:"";}
#subpage ul.flow_box li {
	position:relative;
	float:left;
	margin:2.5% 2%;
	padding:15px;
	color: var(--main-color);
	text-align:center;
	background: var(--base-text-color);
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
	border: 1px solid var(--base-text-color);
}
#subpage ul.flow_box li a { color: var(--main-color); text-decoration: none;}
#subpage ul.flow_box li a:hover {
	opacity: 0.9;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}
#subpage ul.flow_box li+li:before {
	position:absolute;
	top:0;
	left:-28px;
	display:block;
	clear:both;
	content:"";
	width:15px;
	height:100%;
	background:url(../image/flow_bg_pc.png) no-repeat center center;
}
#subpage .flow1 { position:relative; margin-inline: auto; width: 80%;}
#subpage .flow1 li { float: none; width:96%;}
#subpage .flow1+.flow1:before {
	position:absolute;
	top:-15px;
	left:0;
	display:block;
	clear:both;
	content:"";
	width:100%;
	height:30px;
	background:url(../image/flow_bg_sm.png) no-repeat center center;
}
#subpage .flow2 li { width:46%;}
#subpage .flow3 li { width:29.3%;}
#subpage .flow4 li { width:21%;}

#subpage .flow1a { position:relative;}
#subpage .flow1a+.flow1a {margin-top:3%;}

#subpage .flow1a li+li:before { display:none !important;}
#subpage .flow1a li:nth-child(1) { width:32%; background:var(--base-text-color);}
#subpage .flow1a li:nth-child(2) { width:60%; padding:0; text-align: left; color: #343434; background: none; border: none;}
#subpage .flow1a+.flow1a:before {
	position:absolute;
	top:-25px;
	left:0;
	display:block;
	clear:both;
	content:"";
	width:36%;
	height:30px;
	background:url(../image/flow_bg_sm.png) no-repeat center center;
}

/*---------------------------------------------------------------------------
  FAQ (リファクタリング版)
---------------------------------------------------------------------------*/

#subpage .faq {
  clear: both;
  margin: 1rem auto;
  border-bottom: thin solid #ccc;
  padding-block: 1em; /* Q&A全体のブロックの下余白 */
}

/* summary の標準マーカー削除 */
#subpage .faq_question {
  list-style: none;
}
.faq_question::-webkit-details-marker {
  display: none;
}

/* ------------------------------
  質問(Q) と 回答(A) の共通テキスト設定
------------------------------ */
#subpage .faq_question,
#subpage .faq_answer {
  position: relative;
  padding-left: 66px; /* アイコンの幅(50px) + 隙間(16px) */
  color: var(--base-text-color);
  font-size: 1.125rem; /* 本文のサイズ（適宜調整してください） */
  line-height: 1.5;    /* 1行の高さ */
}

#subpage .faq_question {
  font-weight: bold;
  cursor: pointer;
  padding-right: 3rem; /* 右側開閉アイコン用の余白 */
  margin-bottom: 1em;
}

/* ------------------------------
  Q / A アイコン共通設定 (ここが一番シンプルに！)
------------------------------ */
#subpage .faq_question::after,
#subpage .faq_answer::after {
  display: block;
  position: absolute;
  top: -2px;       /* ★ここ！1行目のテキストと綺麗に揃う位置に固定 */
  left: 0;
  width: 50px;
  height: 50px;
  line-height: 46px; /* 内側の文字の上下中央（ボーダーを考慮） */
  text-align: center;
  font-weight: 600;
  font-size: 34px;
}

/* Q 個別カラー */
#subpage .faq_question::after {
  content: "Q";
  background-color: var(--base-text-color);
  color: var(--main-color);
}

/* A 個別カラー */
#subpage .faq_answer::after {
  content: "A";
  background-color: var(--main-color);
  color: var(--base-text-color);
  border: 1px solid var(--base-text-color);
}

/* ------------------------------
  回答(A)のアニメーションとQとの間隔
------------------------------ */
#subpage .faq_answer {
  /* ★Qとの間隔は、Aのpadding-topで安全に確保する */
  padding-top: 1.5rem; 
  padding-bottom: 2rem;

  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);

  transition:
    max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.35s ease 0.15s,
    transform 0.35s ease 0.15s;
}

/* 開いたときのAのアイコン位置調整 */
#subpage .faq[open] .faq_answer::after {
  top: 1.5rem; /* ★Aに設定したpadding-topと同じ数値を指定するだけ！ */
}

/* open時 */
#subpage .faq[open] .faq_answer {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
}

/* 閉じるとき */
#subpage .faq:not([open]) .faq_answer {
  transition:
    max-height 0.35s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* ------------------------------
  開閉アイコン（プラス・マイナス）
------------------------------ */
#subpage .faq_icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  background-color: #aaa;
  border-radius: 50%;
}

#subpage .faq_icon::before,
#subpage .faq_icon::after {
  content: "";
  width: 16px;
  border: 2px solid var(--main-color);
  background-color: var(--main-color);
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

#subpage .faq_icon::before {
  rotate: -90deg;
  transition: rotate 0.3s ease;
}

#subpage .faq[open] .faq_icon::before {
  rotate: 0deg;
}


@media only screen and (max-width: 820px) {
	/* MIDASHI */
	#subpage h3 { margin:0 2% 80px;}
	#subpage h4.mid {
    margin:0 2% 20px;
  }
	#subpage h4 { margin:0 2% 20px;}
	#subpage .inline_cirlce { margin-inline:2%; font-size:18px;}

	/* COMMON */
	#subpage .comment1 { margin:0 2.5% 20px;}
	#subpage :is(.comment2, .comment3, .comment4) { margin:0 2.5% 20px; padding:5%;}

	/* HYOU */
	#subpage table.hyou { margin:0 auto; width:85%; table-layout:auto;}
	#subpage table.hyou th,
	#subpage table.hyou td{
		table-layout:auto !important;
		display:block !important;
		padding:2% 5%!important;
		width:100% !important;
		height:auto !important;
		font-size:1rem;
	}
	#subpage table.hyou td {
	border-bottom: 1px solid #CCC!important;
	}
	#subpage table.pc_tit { display:none;}
	#subpage table.hyou .sm_mid {
  display:block;
  padding: 0.5em;
  font-weight:600;
  color:var(--sub-color);
  background-color: #e5e5e5;
  margin-bottom: 1em;
  }

	/* 2RETU */
	#subpage table.hyou2 td table {}
	#subpage table.hyou2 td table th,
	#subpage table.hyou2 td table td {
		display:table-cell !important;
		padding:5% !important;
		width:auto !important;
		height:auto !important;
	}

	/* 3RETU */
	#subpage table.hyou3 { border-top:1px solid #DDD;}
	#subpage table.hyou3+table.hyou3 { border-top:1px solid #DDD;}

	/* 4RETU */
	#subpage table.hyou4 {border-top:1px solid #DDD;}
	#subpage table.hyou4+table.hyou4 { border-top:1px solid #DDD;}

	/* 5RETU */
	#subpage table.hyou5 { border-top:1px solid #DDD;}
	#subpage table.hyou5+table.hyou5 { border-top:1px solid #DDD;}

	/* FREE */
	#subpage .pc_table { display:none;}
	#subpage .sm_table { display:block;}
	#subpage .sm_table table td { padding:5% !important;}

	/* FREE2 */
	#subpage table.free { margin:20px 2% 0; border-top:1px solid #DDD !important; border-bottom:1px solid #DDD !important;}
	#subpage table.free td {
		table-layout:auto !important;
		display:block !important;
		padding:5% !important;
		width:90% !important;
		height:auto !important;
		border-bottom:none;
	}
	#subpage table.free td:last-child {border-bottom:none;}
	#subpage table.free td div.sm {display:block !important; text-align:center; border-bottom:none !important /*1px solid #1F266C*/;}
	#subpage table.free tr:nth-child(1) td:nth-child(1),
	#subpage table.free tr:nth-child(1) td:nth-child(3) {border-bottom:1px dotted #DDD !important;}

    /* FIX */
    #subpage .fix_table { width: 100%; overflow-x: scroll;}
    #subpage .fix_table .scroll-hint-text-new {
        letter-spacing:-1px;
        font-weight:500;
        color: #FFF;
        margin-top:-3px;
    }

	/* LIST */
	#subpage ul.list-ul { margin:0 2%;}

	/* LINK */
	#subpage .link2,
	#subpage .link3,
	#subpage .link4 {width:auto; float:none; clear:both;}
	#subpage .file2,
	#subpage .file3,
	#subpage .file4 {width:auto; float:none; clear:both;}
	#subpage .pdf { margin-inline:2%;}

	/* EMBEDDED */
	#subpage .embedded { margin: 0 auto; width: 90%; }
	#subpage .embedded iframe { width: 100%; height: 300px;}

	/* PHOTO BOX */
	#subpage ul.photo_box { clear:none !important; float:none !important; margin:5% 2%; width:96% !important;}
	#subpage ul.g1 li,
	#subpage ul.g2 li,
	#subpage ul.g3 li,
	#subpage ul.g4 li,
	#subpage ul.g5 li{ margin:15px 0; width:100%;}
	#subpage ul.g1 li.photo img,
	#subpage ul.g2 li.photo img,
	#subpage ul.g3 li.photo img,
	#subpage ul.g4 li.photo img,
	#subpage ul.g5 li.photo img { max-width:100% !important; height:auto !important;}


	/* YOUTUBE */
	#subpage .youtube {position: relative; width: 100%;}
	#subpage .youtube iframe { width: 100% !important;  height: 100% !important;}

	/* BOX */
	#subpage .temple-box { margin:0 2%; width:96%;}
	#subpage .temple-box:after { display:none;}
	#subpage .box1,
	#subpage .box2 { float:none;margin: 0 2% 50px; width:96%;}
	#subpage .box1:after,
	#subpage .box2:after { display:none;}
	#subpage .box1 .catch { margin:0 0 20px !important;}
	#subpage .box1 h4,
	#subpage .box2 h4 { margin:10px 0; }
	#subpage .photo-c { float:none; padding:0; width:100%;}
	#subpage .photo-c img { max-width:100%!important; height:auto !important; margin:0;}
	#subpage .photo-l,
	#subpage .photo-r { float:none; padding:0; width:100%; text-align:center;}
	#subpage .photo-l img,
	#subpage .photo-r img { max-width:100%!important; height:auto !important; margin:0;}

	/* LINE */
	#subpage .line {
		margin:0 2% 20px;
		height:50px;
		background-size:100% auto;
	}

	/* BUTTON */
	#subpage .btn { float:none; margin:1% 5%;}
	#subpage .b1,
	#subpage .b2,
	#subpage .b3 { width:fit-content; margin-inline:auto; min-width: 55%;}

	/* COLUMNBOX */
	#subpage .column {}
	#subpage .column:after { display:none;}
	#subpage .column .col2 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col3 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col4 { float:none; margin: 2%; width: 96%;}
	#subpage .column .col5 { float:none; margin: 2%; width: 96%;}

	/* FLOW */
	#subpage ul.flow_box { width: 100%;}
	#subpage ul.flow_box:after { display:none;}
	#subpage ul.flow_box li { float:none; width:96% !important;}
	#subpage ul.flow_box li a:hover {}
	#subpage .flow1+.flow1 { margin-top:30px;}
	#subpage .flow1+.flow1:before { top:-30px;}
	#subpage ul.flow_box li+li { margin-top:30px;}
	#subpage ul.flow_box li+li:before {
		position:absolute;
		top:-30px;
		left:0;
		display:block;
		clear:both;
		content:"";
		width:100%;
		height:30px;
		background:url(../image/flow_bg_sm.png) no-repeat center center;
	}
	#subpage .flow1a+.flow1a {margin-top:30px;}
	#subpage .flow1a+.flow1a:before { top:-30px; width:100%;}
	#subpage .flow1a li+li { margin-top:5px !important; padding: 0 !important;}
}


/* =========================================================
* megamenu.html の商品一覧レイアウト（CMS編集画面専用）
========================================================= */

/* 編集画面用の外枠：通常のブロックとして表示し、背景を黒にする */
#megamenu-edit-area {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 155px;
    padding-bottom: 155px;
    background: var(--pc-nemu-bg-color); /* 白文字が見えるように暗い背景色 */
}

/* ---------------------------------------------------
   下記　basic.css と同じレイアウト
   (html.overlay という条件を外して編集ページ内へ純粋にレイアウトだけ適用)
--------------------------------------------------- */
#megamenu-edit-area .overlay-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 62px;
    width: 100%;
    max-width: 1200px;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
    padding-bottom: 47px;
    color: var(--white-text);
}

#megamenu-edit-area .overlay-content .content {
    text-align: left;
    padding-left: 45px;
    padding-top: 11px;
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
}

/* 縦線 */
#megamenu-edit-area .overlay-content::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 33.333%;
    width: 1px; background: #707070;
}
#megamenu-edit-area .overlay-content::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 66.666%;
    width: 1px; background: #707070;
}

#megamenu-edit-area .overlay-content .content h4 {
    font-weight: var(--font-base-weight-medium);
    font-size: 1.25rem;
	color: var(--main-color);
    line-height: 1.45;
    margin-left: -45px;
    display: flex;
    align-items: center;
    gap: 15px;
}
#megamenu-edit-area .overlay-content .content h4::before {
    content: ''; display: block; width: 30px; height: 1px; background-color: #707070; flex-shrink: 0;
}
#megamenu-edit-area .overlay-content .content ul {
    line-height: 2.533; margin-top: 13px;
}

/* === メディアクエリ === */
@media screen and (max-width: 1300px) {
    #megamenu-edit-area .overlay-content {
        grid-template-columns: repeat(2, minmax(0, 1fr)); width: 80%;
    }
    #megamenu-edit-area .overlay-content::before { left: 50%; }
    #megamenu-edit-area .overlay-content::after { display: none; }
}

@media screen and (max-width: 768px) {
    #megamenu-edit-area {
        padding-top: 50px; padding-bottom: 50px;
    }
    #megamenu-edit-area .overlay-content {
        display: flex; flex-direction: column; gap: 13px;
        border: none;
    }
    #megamenu-edit-area .overlay-content::before,
    #megamenu-edit-area .overlay-content::after { display: none; }
    #megamenu-edit-area .overlay-content .content { padding-left: 50px; padding-top: 22px; }
    #megamenu-edit-area .overlay-content .content h4 { margin-left: -50px; gap: 20px; }
}

/*====================================================================================================
 ORDER FORM（オーダーメイド）
====================================================================================================*/
#formWrap {
    width: 100%;
    max-width: 960px;
    margin: 5rem auto;
    color: var(--base-text-color, #333);
    line-height: 1.6;
    font-size: 90%;
    padding: 3rem;
    background: #e6eef1;
    border-radius: 10px;
    box-sizing: border-box;
}
#formWrap input[type="text"],
#formWrap input[type="email"],
#formWrap input[type="tel"],
#formWrap select,
#formWrap textarea {
    padding: 10px 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}
#formWrap input[type="text"],
#formWrap input[type="email"],
#formWrap input[type="tel"] {
    width: 100%;
    max-width: 500px;
}
#formWrap select {
    width: 100%;
    max-width: 300px;
}
#formWrap textarea {
    width: 100%;
    max-width: 100%;
    resize: vertical;
}
#formWrap label {
    display: inline-block;
    cursor: pointer;
}
#formWrap .radio-group {
    display: table;
    width: 100%;
    table-layout: fixed;
}
#formWrap .radio-group .radio-item {
    display: table-cell;
    width: 33.333%;
    padding: 6px 10px 6px 0;
    vertical-align: middle;
}
#formWrap .radio-group .radio-item:nth-child(3n+1) {
    clear: both;
}
#formWrap .radio-group {
    display: block;
}
#formWrap .radio-group .radio-item {
    display: inline-block;
    box-sizing: border-box;
}
#formWrap .radio-other {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #c4d2d8;
}
#formWrap table.formTable {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}
#formWrap table.formTable tr {
    border-bottom: 1px solid #d0dadf;
}
#formWrap table.formTable tr:last-child {
    border-bottom: none;
}
#formWrap table.formTable th, 
#formWrap table.formTable td {
    padding: 1.2em 1em;
    vertical-align: top;
    text-align: left;
}
#formWrap table.formTable th {
    width: 26%;
    font-weight: bold;
}
#formWrap .require {
    color: #AA0017;	
    font-size: 0.85em;
    margin-left: 4px;
    font-weight: normal;
}
#formWrap .btn {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}
#formWrap .btn button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 240px;
    width: fit-content;
    background-color: var(--base-text-color, #333);
    color: var(--main-color, #fff);
    border: 1px solid transparent;
    border-radius: 0;
    padding: 16px 24px;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#formWrap .btn button:after {
    content: "";
    display: block;
    flex-shrink: 0;
    background: none;
    width: 8px;
    height: 8px;
    border-top: 1px solid #a2a2a2;
    border-right: 1px solid #a2a2a2;
    transform: rotate(45deg);
    margin-left: 40px;
    transition: border-color 0.3s ease;
}
@media (any-hover: hover) {
    #formWrap .btn button:hover {
        background-color: var(--main-color, #fff);
        color: var(--base-text-color, #333);
        border-color: var(--base-text-color, #333);
        opacity: 1;
    }
    #formWrap .btn button:hover:after {
        border-color: var(--base-text-color, #333);
    }
}

@media screen and (max-width: 768px) {
    #formWrap {
        width: 95%;
        margin: 2rem auto;
        padding: 1.5rem;
    }
    #formWrap table.formTable th, 
    #formWrap table.formTable td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #formWrap table.formTable th {
        padding-bottom: 0;
        font-size: 1.05rem;
    }
    #formWrap table.formTable td {
        padding-top: 0.5rem;
        border-bottom: none;
    }
    #formWrap table.formTable tr {
        border-bottom: 1px solid #d0dadf;
        display: block;
        padding-bottom: 0.5rem;
    }
    
    /* スマホの時はラジオボタンを縦1列（100%幅）に戻す */
    #formWrap .radio-group .radio-item {
        width: 100% !important;
        padding: 4px 0;
    }
    
    #formWrap input[type="text"],
    #formWrap input[type="email"],
    #formWrap input[type="tel"],
    #formWrap select {
        max-width: 100% !important;
    }
    #formWrap .btn button {
        width: 100%;
        max-width: 350px;
    }
}

/*====================================================================================================
 PURCHASE FORM（商品購入）
====================================================================================================*/
/* 見出し「【入力例】」 */
#formWrap .example-title {
    font-weight: bold;
    font-size: 0.85em;
    color: #333;
    margin: 0 0 6px 0;
}

/* 商品グループのレイアウト */
#formWrap .product-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
#formWrap .product-item:first-child {
    margin-top: 0;
}
#formWrap .product-item .num {
    font-weight: bold;
    color: #555;
    min-width: 1.2em;
    text-align: center;
}

/* 1. 入力欄共通スタイル（先に定義する） */
#formWrap .product-item input[type="text"],
#formWrap .product-item input[type="number"],
#formWrap .product-item textarea {
    padding: 10px 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    height: 40px;
}

/* PC時の横幅比率指定 */
#formWrap .product-item .p-name,
#formWrap .product-item .example-name { width: 60%; }
#formWrap .product-item .p-qty,
#formWrap .product-item .example-qty { width: 12%; text-align: center; }
#formWrap .product-item .p-price,
#formWrap .product-item .example-price { width: 23%; text-align: center; }

/* 2. 入力例（グレーの破線枠）専用スタイル（共通スタイルの後に書くことで自然に上書きする） */
#formWrap .product-example-item {
    margin-bottom: 12px;
}
#formWrap .product-example-item .num {
    visibility: hidden;
}
#formWrap .product-example-item textarea,
#formWrap .product-example-item input {
    background-color: #f0f0f0;
    color: #222;
    -webkit-text-fill-color: #222;
    opacity: 1;
    cursor: not-allowed;
    border: 1px dashed #ccc;
}

/* 入力例テキストエリア（高さを50px固定・スクロールバー＆伸び縮みアイコン削除） */
#formWrap .product-example-item textarea {
    padding: 8px 10px;
    vertical-align: top;
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}

/* ナンバー入力時の矢印（▲▼）を非表示化 */
#formWrap input[type="number"]::-webkit-outer-spin-button,
#formWrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#formWrap input[type="number"] {
    -moz-appearance: textfield;
}

/* お届け先フィールドの見た目・サイズ調整（!important なしで指定） */
#formWrap #different_shipping_fields input[type="text"],
#formWrap #different_shipping_fields input[type="tel"] {
    margin-bottom: 4px;
}
#formWrap #different_shipping_fields input[name="お届け先郵便番号"] {
    width: 100%;
    max-width: 160px;
}
#formWrap #different_shipping_fields input[name="お届け先ご住所"] {
    width: 100%;
    max-width: 500px;
}

/* ==================================================
   商品購入フォーム：レスポンシブ（768px以下）
================================================== */
@media screen and (max-width: 1000px) {
  #formWrap .product-item {
    flex-wrap: wrap;
    gap: 6px 4px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dotted #ccc;
  }

  #formWrap .product-example-item {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: none;
  }

  #formWrap .product-item .num {
    display: inline-block;
    min-width: 1.5em;
    line-height: 38px;
  }

  /* スマホ 1行目（商品名・入力例テキスト） */
  #formWrap .product-item .p-name {
    width: calc(100% - 2em);
    height: 38px;
  }
  #formWrap .product-item .example-name {
    width: calc(100% - 2em);
    height: 50px;
    line-height: 1.3;
  }

  /* スマホ 2行目（数量・金額） */
  #formWrap .product-item .p-qty,
  #formWrap .product-item .p-price,
  #formWrap .product-item .example-qty,
  #formWrap .product-item .example-price {
    width: calc(48% - 1em);
    height: 38px;
  }

  #formWrap .product-item .p-qty,
  #formWrap .product-item .example-qty {
    margin-left: 2em;
  }

  /* 別お届け先のスマホ調整 */
  #formWrap #different_shipping_fields span {
    display: block;
    width: 100%;
    margin-bottom: 2px;
  }
  #formWrap #different_shipping_fields input {
    width: 100%;
    max-width: 100%;
  }
}

/*====================================================================================================
  Scroll hint
====================================================================================================*/
@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}

.scroll-hint.is-right-scrollable {
  background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
.scroll-hint.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
.scroll-hint-icon {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 60px);
  box-sizing: border-box;
  width: 240px;
  height:120px;
  border-radius: 5px;
  transition: opacity .3s;
  opacity: 0;
  background: rgba(0, 0, 0, .7);
  text-align: center;
  padding: 20px 10px 10px 10px;
    color:#fff;
}
.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
}
.scroll-hint-text {
  font-size: 10px;
  color: #FFF;
  margin-top: 5px;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .8;
}
.scroll-hint-icon:before {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon:after {
  content: "";
  width: 34px;
  height: 14px;
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -20px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
  opacity: 0;
  transition-delay: 2.4s;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear 1.2s linear;
  animation-iteration-count: 2;
}
.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}
.scroll-hint-icon-white:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}
.scroll-hint-icon-white .scroll-hint-text {
  color: #000;
}