@charset "UTF-8";

/* hvSlider */

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


	HEVIZカルーセル用css

	@version    1.00    2018.3.7 New
	@created    K.Sekioka of HEVIZ Co.,Ltd.
	@copyright  HEVIZ Co.,Ltd.


	<div class="hvSlider horizontal">
	<div class="view">
	<p class="next"><a></a></p>
	<p class="prev"><a></a></p>

	<div class="screen">
	<ul>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	</ul>
	</div>

	</div>

	<div class="pointer"><ul>
	<li class="first"><a></a></li>
	<li class="prev"><a></a></li>
	<li rel="0"><a><img src="" alt=""></li>
	<li rel="1" class="sel visible"><a><img src="" alt=""></li>
	<li rel="2"><a><img src="" alt=""></a></li>
	<li class="next"><a></a></li>
	<li class="last"><a></a></li>
	</ul></div>

	<div class="positioner"><ul>
	<li class="first"><a></a></li>
	<li class="prev"><a></a></li>
	<li class="counter">0 / 0</li>
	<li class="next"><a></a></li>
	<li class="last"><a></a></li>
	</ul></div>

	</div>



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



.hvSlider {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	opacity:1;
	transition:all 0.5s ease-in-out;
}




/** ----------------------------------------------------------------------------

	1. 表示領域

    <!-- 想定タグ -->
	<div class="hvSlider horizontal">
	<div class="view">
	<p class="next"><a></a></p>
	<p class="prev"><a></a></p>
	</div>
	</div>


-------------------------------------------------------------------------------- **/



.hvSlider .view {
	display:block;
	position:relative;
	margin:0;
	padding:0;
}
.hvSlider .view::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }



/* クリックで切り替えできる場合 -------- */

.hvSlider.clickable {
	cursor:pointer;
}


/* 次・前矢印 -------------------------- */

.hvSlider .view .prev,
.hvSlider .view .next {
	display : block;
	position : absolute;
	top : 50%;
    left:auto;
    right:auto;
    width:30px;
    height:30px;
	margin : -15px 0 0 0;
	padding : 0;
	z-index : 100;
    text-align:left;
    font-size:1px;
	transition : all 0.3s;
}
.hvSlider .view .prev { right : 100%; }
.hvSlider .view .next { left : 100%; }


.hvSlider .view .prev a,
.hvSlider .view .next a {
    display:block;
    position:absolute;
    left:0;
    top:0;
    right:auto;
    bottom:auto;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    box-sizing: border-box;
    overflow:hidden;
    text-indent:-9999px;
    cursor: pointer;
}

.hvSlider .view .prev a::before,
.hvSlider .view .next a::before {
	content:"";
	display:block;
	position:absolute;
	width:60%;
	height:60%;
	top:20%;
    left:20%;
	margin:0;
	padding:0 0 1px 1px;
	overflow:hidden;

	border:1px solid #222222;
	border-right:0;
	border-bottom:0;

	transition:all 0.2s ease-in-out;
	transform-origin:center center;
}
.hvSlider .view .prev a::before { transform: rotate(-45deg); left:35%; }
.hvSlider .view .next a::before { transform: rotate(135deg); left:0%;  }


.hvSlider .view .prev a::after,
.hvSlider .view .next a::after {
    display:none;
}

/* Hover ------------------------------ */

.hvSlider .view .prev a:hover::before { left:30%; }
.hvSlider .view .next a:hover::before { left:5%;  }



/** ----------------------------------------------------------------------------


	screen共通(横スライドを想定)


    <!-- 想定タグ -->
	<div class="hvSlider">
	<div class="view">

    <div class="screen">
	<ul>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	</ul>
	</div>

    </div>


-------------------------------------------------------------------------------- **/



.hvSlider .screen {
	display:block;
	position:relative;
    width:100%;
	margin:0;
	padding:0;
    overflow:hidden;
}
.hvSlider .screen::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }


.hvSlider .screen > ul {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content:flex-start;
    position:relative;
    width:10000%;
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.hvSlider .screen > ul > li {
    display:block;
    position:relative;
    width:1%;           /* 1枚見える想定 */
    height:auto;
    margin:0;
    padding:0;
    list-style-type: none;
    box-sizing: border-box;
    background-color:#ffffff;
}

/*
.hvSlider .screen > ul > li img {
	width:auto;
	max-width:100%;
    vertical-align:bottom;
}
*/


/** ---------------------------------------------------------------------------


	カルーセル用パーツ ポインター部分(ボタンによる位置表示) 

	<div class="pointer"><ul>
	<li class="first"><a></a></li>
	<li class="prev"><a></a></li>
	<li rel="0"><a><img></a></li>
	<li rel="1" class="sel"><a><img></a></li>
	<li rel="2"><a><img></a></li>
	<li class="next"><a></a></li>
	<li class="last"><a></a></li>
	</ul></div>


------------------------------------------------------------------------------- **/



.hvSlider .pointer {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	line-height:1;
	z-index:100;
}

.hvSlider .pointer ul {
	display:flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
	margin:0;
	padding:0;
}

.hvSlider .pointer li {
    display:block;
    position:relative;
    width:20px;
	margin:0;
	padding:0;
	list-style-type:none;
    box-sizing: border-box;
}

.hvSlider .pointer a {
	display:block;
	position:relative;
    width:100%;
    margin:0;
    padding:0 0 100%;
    box-sizing: border-box;
	background-color:transparent;
	cursor:pointer;
}


/* ポイント(点) ---------------------------- */

.hvSlider .pointer li.point a {
}

.hvSlider .pointer li.point a::before {
	content:"";
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    width:8px;
    height:8px;
    margin:-4px 0 0 -4px;
    padding:0;
    box-sizing:border-box;
        
    border:1px solid #ffffff;
    background-color:#cccccc;
    border-radius:4px;
	transition:all 0.3s;
}

/* Hover */
.hvSlider .pointer li.point a:hover::before {
	background-color:#cc0000;
}

/* 見えている部分 */
.hvSlider .pointer li.point.visible a::before {
	background-color:#888888;
}

/* 選択部分 */
.hvSlider .pointer li.point.sel a {
	cursor:default;
}
.hvSlider .pointer li.point.sel a::before {
/* .hvSlider .pointer li.point.sel a:hover::before { */
	background-color:#444444;
}


/* 画像 ----------------------------------------------------- */

.hvSlider .pointer li.image {
    width:60px;
}

.hvSlider .pointer li.image a {
    border:1px solid #ffffff;
    background-color:#ffffff;
    overflow:hidden;
    opacity:0.3;
	transition:all 0.3s;
}

.hvSlider .pointer li.image img {
    display:block;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
    border:0;
    vertical-align:bottom;
    opacity:1;
}

/* Hover */
.hvSlider .pointer li.image a:hover {
/*	border-color:#cc0000; */
    opacity:1;
}
.hvSlider .pointer li.image a:hover img {
    opacity:1;
}

/* 見えている部分 */
.hvSlider .pointer li.image.visible a {
/*	border-color:#888888; */
    opacity:1;
}

/* 選択部分 */
.hvSlider .pointer li.image.sel a {
	cursor:default;
/*    border-color:#444444; */
    opacity:1;
}




/* 次・前・最初・最後 ------------------ */

.hvSlider .pointer li.prev a,
.hvSlider .pointer li.next a,
.hvSlider .pointer li.first a,
.hvSlider .pointer li.last a {
    width:100%;
    height:100%;
    padding:0;
}

.hvSlider .pointer li.prev a::before,
.hvSlider .pointer li.next a::before,
.hvSlider .pointer li.first a::before,
.hvSlider .pointer li.first a::after,
.hvSlider .pointer li.last a::before,
.hvSlider .pointer li.last a::after {
	content:"";
	display:block;
	position:absolute;
	width:8px;
	height:8px;
    left:50%;
    top:50%;
	margin:-4px 0 0 -8px;
	padding:0 0 1px 1px;
	overflow:hidden;

	border-top:1px solid #231815;
    border-right:1px solid #231815;
    
	transition:all 0.2s ease-in-out;
	transform-origin:center center;
    transform: rotate(45deg);
}

.hvSlider .pointer li.first a::before { margin-left:    0; transform: rotate(-135deg); }
.hvSlider .pointer li.first a::after  { margin-left: -4px; transform: rotate(-135deg); }
.hvSlider .pointer li.prev a::before  { margin-left: -2px; transform: rotate(-135deg); }
.hvSlider .pointer li.next a::before  { margin-left: -8px; }
.hvSlider .pointer li.last a::before  { margin-left: -6px; }
.hvSlider .pointer li.last a::after   { margin-left:-10px; }

/* Hover */
.hvSlider .pointer li.first a:hover::before { margin-left: -2px; }
.hvSlider .pointer li.first a:hover::after  { margin-left: -6px; }
.hvSlider .pointer li.prev a:hover::before  { margin-left: -4px; }
.hvSlider .pointer li.next a:hover::before  { margin-left: -6px; }
.hvSlider .pointer li.last a:hover::before  { margin-left: -4px; }
.hvSlider .pointer li.last a:hover::after   { margin-left: -8px; }



/** ------------------------------------------------------------------


	カルーセル用パーツ ポインター部分(テキストよる位置表示)  class faderPointer

	<div class="positioner"><ul>
	<li class="first"><a>FIRST</a></li>
	<li class="prev"><a>PREV</a></li>
	<li class="counter">1234 / 5678</li>
	<li class="next"><a>NEXT</a></li>
	<li class="last"><a>LAST</a></li>
	</ul></div>


---------------------------------------------------------------------- **/



.hvSlider .positioner {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	line-height:1;
	z-index:100;
}

.hvSlider .positioner ul {
	display:flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
	margin:0;
	padding:0;
}

.hvSlider .positioner li {
    display:block;
    position:relative;
    width:20px;
	margin:0;
	padding:0;
	list-style-type:none;
}

.hvSlider .positioner a {
	display:block;
	position:relative;
    width:100%;
    margin:0;
    padding:0 0 100%;
    box-sizing: border-box;
	background-color:transparent;
	cursor:pointer;
}


/* text counter ------------------------ */

.hvSlider .positioner li.counter {
	text-align	: center;
	width		: 4em;
	line-height	: 25px;
}



/* 次・前・最初・最後 ------------------ */

.hvSlider .positioner li.prev a,
.hvSlider .positioner li.next a,
.hvSlider .positioner li.first a,
.hvSlider .positioner li.last a {
    width:100%;
    height:100%;
    padding:0;
}

.hvSlider .positioner li.prev a::before,
.hvSlider .positioner li.next a::before,
.hvSlider .positioner li.first a::before,
.hvSlider .positioner li.first a::after,
.hvSlider .positioner li.last a::before,
.hvSlider .positioner li.last a::after {
	content:"";
	display:block;
	position:absolute;
	width:8px;
	height:8px;
    left:50%;
    top:50%;
	margin:-4px 0 0 -8px;
	padding:0 0 1px 1px;
	overflow:hidden;

	border-top:1px solid #231815;
    border-right:1px solid #231815;
    
	transition:all 0.2s ease-in-out;
	transform-origin:center center;
    transform: rotate(45deg);
}

.hvSlider .positioner li.first a::before { margin-left:    0; transform: rotate(-135deg); }
.hvSlider .positioner li.first a::after  { margin-left: -4px; transform: rotate(-135deg); }
.hvSlider .positioner li.prev a::before  { margin-left: -2px; transform: rotate(-135deg); }
.hvSlider .positioner li.next a::before  { margin-left: -8px; }
.hvSlider .positioner li.last a::before  { margin-left: -6px; }
.hvSlider .positioner li.last a::after   { margin-left:-10px; }

/* Hover */
.hvSlider .positioner li.first a:hover::before { margin-left: -2px; }
.hvSlider .positioner li.first a:hover::after  { margin-left: -6px; }
.hvSlider .positioner li.prev a:hover::before  { margin-left: -4px; }
.hvSlider .positioner li.next a:hover::before  { margin-left: -6px; }
.hvSlider .positioner li.last a:hover::before  { margin-left: -4px; }
.hvSlider .positioner li.last a:hover::after   { margin-left: -8px; }




/** 状態による設定 ============================================================= **/


	/* 準備が整ったら、.readyをつける */

	.hvSlider {
		opacity:0;
		transition:all 0.3s linear;
	}

	.hvSlider.ready {
		opacity:1;
	}


	/* 次・前 -------------------------- */

/*
	.hvSlider .view .prev,
	.hvSlider .view .next {
		display:none;
	}

	.hvSlider.prev .view .prev,
	.hvSlider.next .view .next {
		display:block;
	}
*/

	.hvSlider .view .prev,
	.hvSlider .view .next,
	.hvSlider .pointer .first,
	.hvSlider .pointer .prev,
	.hvSlider .pointer .next,
	.hvSlider .pointer .last,
	.hvSlider .positioner .first,
	.hvSlider .positioner .prev,
	.hvSlider .positioner .next,
	.hvSlider .positioner .last {
		opacity:1;
		cursor:pointer;
/*
        opacity:0;
		cursor:default;
		transition:all 0.3s linear;
*/
	}

    .hvSlider .view .prev.disabled,
	.hvSlider .view .next.disabled,
	.hvSlider .pointer .first.disabled,
    .hvSlider .pointer .prev.disabled,
	.hvSlider .pointer .next.disable,
	.hvSlider .pointer .last.disable,
	.hvSlider .positioner .first.disabled,
	.hvSlider .positioner .prev.disabled,
	.hvSlider .positioner .next.disabled,
	.hvSlider .positioner .last.disabled {
        opacity:0;
		cursor:default;
		transition:all 0.3s linear;
	}




/*
	.hvSlider.first .pointer .first,
	.hvSlider.prev .pointer .prev,
	.hvSlider.next .pointer .next,
	.hvSlider.last .pointer .last,
	.hvSlider.first .positioner .first,
	.hvSlider.prev .positioner .prev,
	.hvSlider.next .positioner .next,
	.hvSlider.last .positioner .last {
		opacity:1;
		cursor:pointer;
	}
*/



	/* 動かない場合はdislabled --------- */

	.hvSlider.disabled .view .prev,
	.hvSlider.disabled .view .next {
		display:none;
	}
	.hvSlider.disabled .pointer,
	.hvSlider.disabled .positioner {
		display:none;
	}
	.hvSlider.disabled .screen > ul > li.af,
	.hvSlider.disabled .screen > ul > li.bf {
		display:none;
	}



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

	クロスフェードの場合

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



.hvSlider.fade .screen {
	width:100%;
    height:auto;
	padding:0 0 100%;  /* 真四角になる想定 */
/*
	overflow-x:hidden;
	overflow-y:auto;
*/
	overflow:hidden;
}

.hvSlider.fade .screen > ul {
    display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

.hvSlider.fade .screen > ul > li {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	padding:0;
	overflow:hidden;
	background-color:#ffffff;
}

/*
.hvSlider.fade .screen > ul > li img {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:auto;
	max-width:none;
}
*/

/* //hvSlider */

/* font */
/* transition easing */
/* transition duration */
/* break point */
.main-content { letter-spacing: 0; }

.main-content img { display: block; max-width: 100%; height: auto; }

.main-content .wrapper { margin-left: auto; margin-right: auto; }

.main-content .wrap-button { display: flex; justify-content: center; margin-top: 4em; text-align: center; }

.main-content .wrap-button .button { display: block; position: relative; padding: 2.5em 2em 2.2em; }

.main-content .wrap-button .button:hover:before, .main-content .wrap-button .button:hover:after { border-color: #5d308d; }

.main-content .wrap-button .button:hover:before { left: 0; top: 0; }

.main-content .wrap-button .button:hover:after { right: 0; bottom: 0; }

.main-content .wrap-button .button:before, .main-content .wrap-button .button:after { content: ''; display: block; position: absolute; width: calc(100% - 12px); height: calc(100% - 12px); border: 1px solid #d4c0da; transition: all .6s ease-in-out; }

.main-content .wrap-button .button:before { left: 5px; top: 5px; }

.main-content .wrap-button .button:after { right: 5px; bottom: 5px; }

.main-content .wrap-button .button .title { color: #5D308D; font-size: 1.25em; }

.main-content .wrap-button .button .text { margin-top: 1em; font-size: 0.875em; line-height: 1.4; }

.main-content .sec-visual { display: flex; }

.main-content .sec-visual .fig { width: 50%; }

.main-content .sec-visual .body { display: flex; align-items: center; justify-content: center; width: 50%; background-color: #E0D7EA; text-align: center; }

.main-content .sec-visual .body .title { letter-spacing: 0.1em; }

.main-content .sec-visual .body .title .en, .main-content .sec-visual .body .title .ja { display: block; }

.main-content .sec-visual .body .title .en { font-size: 3.125em; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; }

.main-content .sec-visual .body .title .ja { margin-top: 0.5em; font-size: 0.875em; font-weight: 500; }

.main-content .sec-visual .body .title-sub { margin-top: 2em; font-size: 0.875em; }

.main-content .sec-guide .lead { width: 40vw; margin: 4em auto; line-height: 2; }

.main-content .sec-guide .container { display: flex; justify-content: space-between; }

.main-content .sec-guide .container .col { width: 47.5%; }

.main-content .sec-guide .container .col .body { padding: 0 20px; }

.main-content .sec-guide .container .col .title { margin: 1.2em 0 .9em; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-size: 1.625em; font-weight: 400; letter-spacing: .05em; }

.main-content .sec-guide .container .col .text { font-size: 0.875em; line-height: 1.8; }

.main-content .sec-guide .container .col .wrap-link { margin-top: 2em; text-align: center; }

.main-content .sec-guide .container .col .wrap-link .link { position: relative; display: inline-block; padding: 0 10px 5px 0; border-bottom: 1px solid #d4c0da; line-height: 1.4; }

.main-content .sec-guide .container .col .wrap-link .link:hover { color: #702d4d; }

.main-content .sec-guide .container .col .wrap-link .link:hover:before { opacity: 1; width: calc(100% + 10px); }

.main-content .sec-guide .container .col .wrap-link .link:hover:after { right: -10px; border-color: #5d308d; border-left-color: transparent; border-bottom-color: transparent; border-right-color: transparent; }

.main-content .sec-guide .container .col .wrap-link .link:before { content: ""; display: block; position: absolute; left: 0; bottom: -1px; width: 1px; height: 1px; margin: 0; padding: 0; background-color: #662f76; opacity: 0; transition: all 0.3s ease-in-out; }

.main-content .sec-guide .container .col .wrap-link .link:after { content: ""; display: block; position: absolute; bottom: -5.5px; right: 0; width: 8px; height: 8px; margin: 0; padding: 0; border: 1px solid #d4c0da; border-left-color: transparent; border-bottom-color: transparent; border-right-color: transparent; transform: rotate(45deg); transition: all 0.3s ease-in-out; }

.main-content .sec-guide .container .col .box-shop { margin-top: 1.2em; padding: 30px 20px 25px; background-color: #F8F3F9; }

.main-content .sec-guide .container .col .box-shop .title-shop { margin-bottom: .75em; text-align: center; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-size: 1.375em; }

.main-content .sec-guide .container .col .box-shop .text { margin-bottom: 1.25em; font-size: .875em; }

.main-content .sec-guide .container .col .hvSlider .pointer { margin-top: 1em; }

.main-content .sec-guide .container .col .hvSlider .pointer li a:hover:before { background-color: #5D308D; }

.main-content .sec-guide .container .col .hvSlider .view { width: 240px; margin-left: auto; margin-right: auto; }

.main-content .sec-guide .container .col .hvSlider .view .prev, .main-content .sec-guide .container .col .hvSlider .view .next { top: 80px; width: 20px; height: 20px; }

.main-content .sec-guide .container .col .hvSlider .view .prev { left: -65px; }

.main-content .sec-guide .container .col .hvSlider .view .next { right: -65px; left: inherit; }

.main-content .sec-guide .container .col .hvSlider .view .label { margin-top: 1em; font-size: 0.875em; text-align: center; }

.main-content .sec-guide .container .col .hvSlider .view ul li { background: none !important; }

.main-content .sec-ring { margin-top: 8em; }

.main-content .sec-ring .head { margin-left: auto; margin-right: auto; margin-bottom: 3.5em; text-align: center; }

.main-content .sec-ring .head .title-sec { display: block; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-size: 1.875em; line-height: 1.4; }

.main-content .sec-ring .head .title-sub { display: inline-block; width: 600px; margin-top: 1em; padding: 1em 25px 0; border-top: 1px solid #5D308D; font-size: .875em; line-height: 1.8; text-align: left; }

.main-content .sec-ring .block { display: flex; justify-content: space-between; }

.main-content .sec-ring .block + .block { margin-top: 6em; }

.main-content .sec-ring .block .body, .main-content .sec-ring .block .fig { width: 47.5%; }

.main-content .sec-ring .block .title-block { margin-bottom: 0.7em; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-size: 1.625em; line-height: 1.3; text-indent: -.5em; }

.main-content .sec-ring .block .items { border-bottom: 1px dotted #AAAAAA; }

.main-content .sec-ring .block .items .item { padding: .8em 0; border-top: 1px dotted #AAAAAA; }

.main-content .sec-ring .block .items .item .link { position: relative; display: flex; justify-content: space-between; align-items: center; }

.main-content .sec-ring .block .items .item .link:hover { color: #5D308D; }

.main-content .sec-ring .block .items .item .link:hover .inner .moreLink { background-color: #5D308D; }

.main-content .sec-ring .block .items .item .link.with-thm .thm { width: 83px; }

.main-content .sec-ring .block .items .item .link.with-thm .inner { width: calc(100% - 103px); }

.main-content .sec-ring .block .items .item .link .inner { position: relative; }

.main-content .sec-ring .block .items .item .link .inner .title { position: relative; margin-right: 20px; line-height: 1.3; }

.main-content .sec-ring .block .items .item .link .inner .text { margin-top: 0.75em; font-size: 0.875em; line-height: 1.6; }

.main-content .sec-ring .block .items .item .link .inner .moreLink { display: block; position: absolute; right: 0; top: 1px; width: 15px; height: 15px; margin: 0; padding: 0; background-color: #d0d0d0; border-radius: 3px; transition: all 0.3s; }

.main-content .sec-ring .block .items .item .link .inner .moreLink:after { content: ""; display: block; position: absolute; left: 2px; top: 4px; width: 6px; height: 6px; margin: 0; padding: 0; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); }

.guide-flow { position: relative; max-width: 1000px; padding: 40px; border-radius: 8px; text-align: left; letter-spacing: 0; }

.guide-flow img { max-width: 100%; height: auto; }

.guide-flow button { letter-spacing: 0; }

.guide-flow .remodal-close { display: flex; justify-content: center; align-items: center; right: -14px; top: -14px; width: 30px; height: 30px; border-radius: 50%; background-color: #5D308D; }

.guide-flow .remodal-close:before { position: relative; left: auto; top: auto; width: 30px; line-height: 30px; color: white; }

.guide-flow .wrap-modal-close { margin-top: 2.5em; text-align: center; }

.guide-flow .wrap-modal-close .modal-close { display: inline-block; height: 60px; padding: 0 8em; background-color: white; border: 1px solid black; text-align: center; cursor: pointer; transition: all .3s; }

.guide-flow .wrap-modal-close .modal-close:hover { background-color: #F8F3F9; border-color: #5D308D; }

.guide-flow .title-flow { margin-bottom: 0.6em; padding-bottom: 0.5em; letter-spacing: .05em; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-size: 1.625em; line-height: 1.3; border-bottom: 1px solid #AAAAAA; }

.guide-flow .title-flow-sub { margin-top: 1.25em; margin-bottom: 0.35em; font-weight: 500; line-height: 1.4; }

.guide-flow .lead { font-size: .875em; line-height: 1.6; }

.guide-flow .list { counter-reset: list; border-bottom: 1px dotted #AAAAAA; }

.guide-flow .list .item { counter-increment: list; padding: .6em 0; border-top: 1px dotted #AAAAAA; }

.guide-flow .list .item .title-item { display: flex; align-items: center; margin-bottom: 0.5em; font-weight: 500; letter-spacing: 0.05em; }

.guide-flow .list .item .title-item:before { content: counter(list); display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; margin-right: 0.5em; border-radius: 50%; color: white; background-color: #D7C2DD; font-size: 20px; text-align: center; }

.guide-flow .list .item .text { font-size: 0.875em; line-height: 1.6; }

.guide-flow .list .item .ann { margin-top: 0.6em; font-size: 0.85em; }

.guide-flow .list .item .ann .li { margin-left: 1em; text-indent: -1em; }

.guide-flow .list .item .ann .li:before { content: '※'; }

@media screen and (min-width: 769px) { br.sp, .sp-only { display: none; }
  .main-content .wrapper { max-width: 1060px; padding-left: 30px; padding-right: 30px; }
  .main-content .sec-guide .wrapper { max-width: 1000px; }
  .main-content .sec-ring .block.design, .main-content .sec-ring .block.brand { flex-direction: row-reverse; }
  .guide-flow .fig { position: absolute; right: 40px; top: 40px; width: calc(50% - 50px); }
  .guide-flow .body { width: calc(50% - 25px); } }

@media screen and (max-width: 768px) { br.pc, .pc-only { display: none; }
  .main-content .wrapper { width: 88%; margin-left: auto; margin-right: auto; }
  .main-content .wrap-button { width: 88%; margin-left: auto; margin-right: auto; }
  .main-content .wrap-button .button { width: 100%; }
  .main-content .wrap-button .button:before, .main-content .wrap-button .button:after { border-color: #5d308d; }
  .main-content .wrap-button .button:before { left: 0; top: 0; }
  .main-content .wrap-button .button:after { right: 0; bottom: 0; }
  .main-content .wrap-button .button .title { font-size: 1.6em; }
  .main-content .wrap-button .button .text { font-size: 1.1em; }
  .main-content .sec-visual { flex-wrap: wrap; }
  .main-content .sec-visual .fig, .main-content .sec-visual .body { width: 100%; }
  .main-content .sec-visual .body { padding: 12.5vw 0; }
  .main-content .sec-visual .body .title .ja { font-size: 1.1em; }
  .main-content .sec-visual .body .title-sub { font-size: 1.1em; }
  .main-content .sec-guide .lead { width: 88%; margin: 2.5em auto; font-size: 1.2em; }
  .main-content .sec-guide .container { flex-wrap: wrap; padding: 0; }
  .main-content .sec-guide .container .col { width: 100%; }
  .main-content .sec-guide .container .col + .col { margin-top: 4em; }
  .main-content .sec-guide .container .col .body { padding: 0 12px; }
  .main-content .sec-guide .container .col .title { font-size: 1.8em; }
  .main-content .sec-guide .container .col .text { font-size: 1.1em; }
  .main-content .sec-guide .container .col .wrap-link .link { font-size: 1.2em; }
  .main-content .sec-guide .container .col .box-shop { width: calc(100% + 20px); margin-left: -10px; }
  .main-content .sec-guide .container .col .box-shop .title-shop { font-size: 1.7em; }
  .main-content .sec-guide .container .col .box-shop .text { font-size: 1.1em; }
  .main-content .sec-guide .container .col .hvSlider .view .label { font-size: 1.1em; }
  .main-content .sec-guide .container .col .hvSlider .view .prev { left: -35px; }
  .main-content .sec-guide .container .col .hvSlider .view .next { right: -35px; }
  .main-content .sec-ring { margin-top: 6em; }
  .main-content .sec-ring .head { margin-bottom: 2.5em; }
  .main-content .sec-ring .head .title-sec { font-size: 2.0em; }
  .main-content .sec-ring .head .title-sub { width: 100%; padding: 1em 0 0; font-size: 1.2em; }
  .main-content .sec-ring .block { flex-wrap: wrap; }
  .main-content .sec-ring .block .body, .main-content .sec-ring .block .fig { width: 100%; }
  .main-content .sec-ring .block .body { margin-top: 2.25em; }
  .main-content .sec-ring .block .body .items .item { padding: 1em 0; }
  .main-content .sec-ring .block .body .items .item .link.with-thm .inner { width: calc(100% - 97px); }
  .main-content .sec-ring .block .body .items .item .link .inner .title { margin-right: 20px; font-size: 1.4em; }
  .main-content .sec-ring .block .body .items .item .link .inner .text { font-size: 1.1em; }
  .main-content .sec-ring .block .body .items .item .link .inner .moreLink { top: 3px; }
  .remodal-wrapper { padding: 6vw; }
  .guide-flow { padding: 30px 5vw; border-radius: 5px; }
  .guide-flow .title-flow { margin-bottom: 1em; padding-bottom: 0.75em; }
  .guide-flow .lead { margin-top: 1em; margin-bottom: 0.5em; font-size: 1.1em; }
  .guide-flow .title-flow-sub { margin-bottom: 0.5em; font-size: 1.3em; }
  .guide-flow .list .item { padding: .8em 0; }
  .guide-flow .list .item .title-item { font-size: 1.3em; }
  .guide-flow .list .item .text { font-size: 1.15em; } }