@charset "UTF-8";
:root{
	--red: #e7210e;
	--beige: #f3efec;
	--beige--bg: rgba(243, 239, 236, 0.9);
	--blue--main: #3786b7;
	--blue--sub: #005eb0;
	--blue--right: #72c1e8;
	--blue--kinds: #2eaecc;
	--brown: #473933;
	--purple: #7c539c;
}
* {
	box-sizing: border-box;
}
html{
    margin: 0;
    padding: 0;
    font-size: 100%;
}
body{
    margin: 0;
    padding: 0;
    color: var(--brown);
    background-color: #fff;
    font-family: 源ノ角ゴシック JP, 'sans-serif';
}
a{
    text-decoration: none;
    color: var(--brown);
}
li{
    list-style: none;
}
ul{
    padding-left: 0;
	margin: 0;
}
img{
    width: 100%;
}
.wrapper{
    padding: 8% 10%;
}
.onlyPc{
  display: block;
}
.onlySp{
  display: none;
}
.bg-fixed{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -20;
	background-image: url(https://shimonosekimemory.jp/wp-content/uploads/2025/07/4424183_m.jpg);
	background-position: center;
	background-size: cover;
}
.home-Sec-Title-Container{
	text-align: center;
	margin-bottom: 2rem;
}
.home-Sec-Title{
	display: inline-block;
	margin: 0;
	padding-bottom: 0.2rem;
	border-bottom: solid 5px var(--blue--main);
}
.home-Sec-Text{
	text-align: center;
	margin-top: 0;
}

/* ============ header ============ */
#header{
	background-color: rgba(243, 239, 236, 0.9);
	border-radius: 10px;
	padding: 1rem 2rem;
	margin: 0 3%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#site-Title{
	margin: 0;
	width: calc(40% - 2rem);
}
.site-Title-Link{
	display: block;
	transition: 0.5s ease;
}
.site-Title-Link:hover{
	opacity: 0.7;
}
.site-Title-Link img{
	width: 58%;
	height: auto;
}
.site-Title-Name{
	text-align: center;
	margin: 0;
}
.site-Title-Name span{
	font-size: 1rem;
	display: block;
}
#header .menu{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
#header .menu a{
	display: block;
	padding: 0.5rem;
	transition: 0.5s ease;
}
#header .menu a:hover{
	transform: translateY(-5px);
	
}

/* ============ FV ============ */
.home-Hero{
	position: relative;
	height: 100vh;
	margin: 0 3%;
}
.home-Hero-Inner{
	position: absolute;
	bottom: 12rem;
	left: 0;
	padding: 1rem;
	background-color: rgba(243, 239, 236, 0.9);
	border-radius: 10px;
}
.home-Hero-Tel .title{
	padding: 1rem;
	border-radius: 10px;
	background-color: var(--red);
	color: var(--beige);
	margin: 0;
	text-align: center;
}
.home-Hero-Tel{
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}
.home-Hero-Tel .number{
	color: var(--red);
	font-weight: bold;
	font-size: 3rem;
	margin: 0;
}
.home-Hero-Tel .time{
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}
.home-Hero-Tel .time img{
	width: 1rem;
}
.home-Hero-text-Container{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.7rem;
}
.home-Hero-text{
	text-align: center;
}
.home-Hero-text-Container img{
	width: 1.7rem;
}
.home-Hero-text-Container img:last-child{
	transform: scale(-1, 1);
}
.home-Hero-text-Container .text{
	text-align: center;
}

/* ============ button ============ */
.top-More{
	margin: 0;
	text-align: center;
}
.more-Link{
	display: block;
	background-color: var(--blue--main);
	border-radius: 10rem;
	padding: 1rem 2rem;
	color: var(--beige);
	font-weight: 700;
	transition: 0.5s ease;
}
.more-Link:hover{
	opacity: 0.7;
}

/* ============ introduction ============ */
#introduction{
	background-color: var(--beige);
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}
.video-container {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  flex: 1 1 300px;
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  top: 0;
  left: 0;
}
#introduction .introduction-container{
	width: calc(50% - 2rem);
}
#introduction .introduction-container-Title{
	margin-top: 0;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--blue--main);
	line-height: 2;
}
#introduction .introduction-container-Text{
	margin: 0;
	line-height: 2;
}

/* ============ plan ============ */
#plan{
	background-color: var(--beige--bg);
	backdrop-filter: blur(3px);
}
.plan-Menu{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 3rem;
}
.plan-Menu li{
	width: calc(33.3% - 2rem);
	background-color: var(--beige);
	border-radius: 10px;
	text-align: center;
}
.plan-Menu a{
	display: block;
	transition: 0.5s ease;
}
.plan-Menu a:hover{
	transform: translateY(5px);
}
.plan-Menu .plan-Title{
	margin: 0;
	padding: 1rem 2rem;
	color: var(--beige);
	border-radius: 10px 10px 0 0;
	font-weight: 700;
}
.plan-Menu li:first-child .plan-Title{
	background-color: var(--blue--sub);
	line-height: 3;
}
.plan-Menu li:nth-child(2) .plan-Title{
	background-color: var(--purple);
}
.plan-Menu li:last-child .plan-Title{
	background-color: var(--red);
	line-height: 3;
}
.plan-Menu .plan-Price{
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--blue--main);
	margin: 0 0.7rem 0.5rem 0.7rem;
	padding: 1rem 0;
	border-bottom: solid 1px var(--brown);
}
.plan-Menu .plan-Price span{
	font-size: 1rem;	
}
.plan-Menu img{
	width: 8%;
}

/* ============ plan-common ============ */
#plan25,
#plan35,
#plan15{
	background-color: var(--beige);
	border-radius: 10px;
	padding: 1.5rem;
}
#plan img{
	object-fit: cover;
}

.plan-Head{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2rem;
}
.plan-Head img{
	width: calc(35% - 2rem);
}
.plan-Head .plan-Head-Container{
	width: calc(65% - 2rem);
}
.plan-Head .plan-Head-Container-Title{
	display: flex;
	gap: 2rem;
}
.plan-Head .plan-Head-Container-Title .title{
	margin: 0;
	padding: 0.8rem 3rem;
	border-radius: 10px;
	color: var(--beige);
	font-weight: 700;
	font-size: 1.5rem;
	text-align: center;
}
.plan-Head .plan-Head-Container-Title .price{
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--blue--main);
	margin: 0;
}
.plan-Head .plan-Head-Container-Title .price span{
	font-size: 1rem;
	margin-left: 0.5rem;
}
.plan-Feature-Title{
	background-color: var(--blue--main);
	border-radius: 10px 10px 0 0;
	padding: 0.3rem 0;
	margin-top: 0;
	color: var(--beige);
	text-align: center;
}
.plan-Feature-Funeralhall{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2rem;
}
.plan-Feature-Equipment{
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.plan-Feature-Funeralhall li{
	width: calc(33.3% - 2rem);
}
.plan-Feature-Equipment li img{
	background-color: #fff;
	border-radius: 10px;
}
.plan-Feature-Funeralhall li p,
.plan-Feature-Equipment li p{
	margin-bottom: 0;
	color: var(--blue--main);
	font-weight: 700;
}
.plan-Feature-Funeralhall li p span,
.plan-Feature-Equipment li p span{
	color: var(--brown);
	font-weight: normal;
	display: block;
	font-size: 0.75rem;
}

/* ============ plan25 ============ */
#plan25{
	margin-bottom: 3rem;
}
#plan25 .plan-Head .plan-Head-Container-Title .title{
	background-color: var(--blue--sub);
}
#plan25 .plan-Feature-Equipment li{
	width: calc(16% - 1rem);
}
.option p{
	margin: 0;
}
.option-Title{
	color: var(--beige);
	background-color: var(--blue--main);
	padding: 0.3rem 1rem;
	border-radius: 6px;
	display: inline-block;
}
.option-Menu{
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}
.option-Menu li{
	width: calc(50% - 2rem);
	display: flex;
	justify-content: space-between;
	padding-bottom: 0.3rem;
	border-bottom: solid 1px var(--brown);
}
.option-Text{
	border-bottom: solid 5px var(--blue--main);
	display: inline-block;
}
.option-Menu li:last-child{
	display: block;
}
.option-Menu .supplement{
	display: flex;
	justify-content: space-between;
}
.option-Menu .red{
	font-size: 0.75rem;
	color: var(--red);
}
.option .tax{
	text-align: right;
	font-size: small;
	margin-bottom: 1rem;
}

/* ============ plan35 ============ */
#plan35{
	margin-bottom: 3rem;
}
#plan35 .plan-Head .plan-Head-Container-Title .title{
	background-color: var(--purple);
	padding: 0.8rem 1rem;
}
#plan35 .plan-Text .title{
	background-color: var(--blue--main);
	color: var(--beige);
	padding: 0.3rem 1rem;
	margin-top: 0;
	display: inline-block;
}
#plan35 .plan-Text .text{
	margin-top: 0;
	margin-bottom: 2rem;
}
#plan35 .plan-Feature-Container{
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
#plan35 .plan-Feature-Container li{
	width: calc(45% - 1rem);
}
#plan35 .plan-Feature-Container li:nth-child(2){
	width: calc(10% - 1rem);
	margin-top: 4rem;
}
.plan-Feature-Container li p{
	margin-bottom: 0;
	color: var(--blue--main);
	font-weight: 700;
}
.plan-Feature-Container li p span{
	color: var(--brown);
	font-weight: normal;
	display: block;
	font-size: 0.75rem;
}


/* ============ plan15 ============ */
#plan15 .plan-Head .plan-Head-Container-Title .title{
	background-color: var(--red);
}
#plan15 .plan-Feature-Equipment li{
	width: calc(25% - 1rem);
}
#plan15 .attention .black{
	margin-top: 0;
}
#plan15 .attention .black{
	margin: 0;
	color: var(--red);
}

/* ============ feature ============ */
#feature .home-Sec-Title-Container{
	background-color: var(--beige--bg);
	padding: 1rem;
	border-radius: 6px;
	margin-bottom: 2rem;
	text-align: left;
}
#feature .home-Sec-Title-Container .home-Sec-Title{
	margin-bottom: 0;
}
#feature .feature-Container{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}
#feature .feature-Item{
	width: calc(33.3% - 2rem);
	background-color: var(--beige);
	border-radius: 10px;
}
#feature .feature-Item .number{
	margin: 0;
	display: inline-block;
	background-color: var(--blue--main);
	border-radius: 10px 0 10px 0;
	color: var(--beige);
	padding: 0.6rem 1.2rem;
	font-size: 1.5rem;
}
#feature .feature-Wrapper{
	text-align: center;
	padding: 0 1rem 1rem;
}
#feature .feature-Wrapper .title{
	color: var(--blue--main);
	font-weight: 700;
	font-size: 1.2rem;
	margin-top: 0;
}
#feature .feature-Item .feature-Wrapper .title span{
	display: block;
	position: relative;
}
#feature .feature-Item:first-child .feature-Wrapper .title span::before{
	content: "";
	background: var(--blue--main);
	position: absolute;
	top: 29%;
	left: 84px;
	width: 1px;
	height: 16px;
	transform: rotate(-20deg);
}
#feature .feature-Item:first-child .feature-Wrapper .title span::after{
	content: "";
	background: var(--blue--main);
	position: absolute;
	top: 29%;
	right: 84px;
	width: 1px;
	height: 16px;
	transform: rotate(20deg);
}
#feature .feature-Wrapper img{
	width: 70%;
}
#feature .feature-Item:first-child .feature-Wrapper img{
	width: 60%;
}

/* ============ flow ============ */
#flow{
	background-color: var(--beige);
}
#flow .home-Sec-Title-Container{
	text-align: left;
}
#flow p{
	margin: 0;
}
.flow-Container{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
}
#flow .plan2535-Attention{
	width: calc(50% - 2rem);
	border-radius: 10px;
}
.flow-Plan2535 .flow-Title{
	text-align: center;
	color: var(--beige);
	background-color: var(--blue--main);
	padding: 0.75rem 0;
	font-weight: 700;
	font-size: 1.2rem;
}
.flow-Plan2535{
	border: solid 2px var(--blue--main);
	border-radius: 10px;
}
.flow-List{
	padding: 1rem;
}
.flow-List li{
	padding-bottom: 0.3rem;
	border-bottom: solid 1px var(--brown);
	margin-bottom: 1rem;
}
#flow .flow-List p.flow-List-Title{
	color: var(--blue--main);
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: 0.6rem;
}
#flow p.flow-List-Title span{
	background-color: var(--blue--main);
	color: var(--beige);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.3rem 0.6rem;
	border-radius: 50%;
	margin-right: 1rem;
}
#flow .plan2535-Attention p.attention{
	margin-top: 0.6rem;
}
.flow-Plan15 .flow-Title{
	text-align: center;
	color: var(--beige);
	background-color: var(--red);
	padding: 0.75rem 0;
	font-weight: 700;
	font-size: 1.2rem;
}
.flow-Plan15{
	width: calc(50% - 2rem);
	border: solid 2px var(--red);
	border-radius: 10px;
}
#flow .flow-Plan15 .flow-List p.flow-List-Title{
	color: var(--red);
}
#flow .flow-Plan15 .flow-List p.flow-List-Title span{
	background-color: var(--red);
}

/* ============ access ============ */
#access{
	background-color: var(--beige--bg);
	backdrop-filter: blur(3px);
}
#access .home-Sec-Title-Container{
	text-align: left;
}
#access .access-Container{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}
#access .access-Item{
	width: calc(50% - 2rem);
}
#access .access-Item .title{
	font-weight: 700;
	font-size: 1.3rem;
}
#access .access-Item .address{
	margin-top: 0;
}
#access .access-Item .access-Text{
	margin: 0;
}

/* ============ question ============ */
#question{
	background-color: var(--beige);
}
#question .home-Sec-Title-Container{
	text-align: left;
}
#question .question{
	display: block;
	line-height: 2.8;
	cursor: pointer;
	font-size: 1.2rem;
	transition: 0.3s ease-in;
	text-align: left;
	padding-left: 1rem;
	position: relative;
	margin: 0;
	border-radius: 6px;
	background-color: var(--beige);
	border: solid 2px var(--blue--main);
	margin-bottom: 1.5rem;
	font-weight: 700;
}
#question .question:hover{
	opacity: 0.7;
}
#question .question::before{
    content: '';
    display: block;
    background: var(--blue--main);
    position: absolute;
    top: 50%;
    width: 20px;
    height: 5px;
    right: 25px;
}
#question .question::after{
    content: '';
    display: block;
	background: var(--blue--main);
    position: absolute;
    top: 50%;
    width: 20px;
    height: 5px;
    right: 25px;
    transform: rotate(90deg);
    transition: 0.3s ease-in;
}
#question .question.active::after{
    transform: rotate(0deg);
}
#question .answer{
	display: none;
	padding: 0 1rem;
	margin: 0 0 1.5rem;
	position: relative;
	text-align: left;
}
#question .answer.active{
    display: block;
}
#question .more{
	text-align: center;
}
#question .more-Link{
	display: inline-block;
	padding: 1rem 4rem;
	background-color: var(--beige);
	border: solid 2px var(--blue--main);
	color: var(--blue--main);
}
#question .more-Link:hover{
	background-color: var(--blue--main);
	color: var(--beige);
	opacity: 1;
}

/* ============ knowledge ============ */
#knowledge{
	background-color: var(--beige);
}
#knowledge .home-Sec-Title-Container{
	display: flex;
	justify-content: flex-start;
	gap: 2rem;
	text-align: left;
}
#knowledge .col-lg-10{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}
#knowledge .module-Article-Item{
	width: calc(25% - 2rem);
}
#knowledge .module-Article-Item-Img{
	background-color: #fff;
	padding: 0.5rem;
	border-radius: 8px;
}
#knowledge .module-Article-Item img{
	object-fit: contain;
}
#knowledge .more{
	text-align: center;
}
#knowledge .more-Link{
	display: inline-block;
	padding: 1rem 4rem;
	background-color: var(--beige);
	border: solid 2px var(--blue--main);
	color: var(--blue--main);
}
#knowledge .more-Link:hover{
	background-color: var(--blue--main);
	color: var(--beige);
	opacity: 1;
}

/* ============ movie ============ */
#movie{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	background-color: #fff;
}
#movie iframe{
	width: calc(50% - 2rem);
}

/* ============ contact-parts ============ */
#contact{
	background-color: var(--blue--main);
	text-align: center;
}
#contact .contact-Titlte{
	color: var(--beige);
	font-size: 1.3rem;
	font-weight: 700;
	margin-top: 0;
}
#contact .contact-Tel{
	background-color: var(--beige);
	border-radius: 10px;
	padding: 1rem 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	margin-bottom: 2rem;
}
#contact .contact-Tel .tel-Title{
	background-color: var(--red);
	border-radius: 10rem;
	margin: 0;
	color: var(--beige);
	padding: 1rem 3rem;
}
#contact .contact-Tel-Number{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
}
#contact .tel-Number{
	color: var(--red);
	font-weight: 700;
	font-size: 2.5rem;
	border-bottom: solid 1px var(--red);
	line-height: 1;
	transition: 0.5s ease;
}
#contact .tel-Number:hover{
	transform: translateY(-5px);
}
#contact .tel-Text{
	margin: 0;
}
#contact .tel-Text img{
	width: 1rem;
}
#contact .contact-Container{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}
#contact .contact-Form{
	background-color: var(--beige);
	padding: 2rem;
	border-radius: 10px;
	width: calc(50% - 2rem);
}
#contact .contact-Form .form-Title{
	color: var(--blue--main);
	font-weight: 600;
	margin-top: 0;
}
#contact .contact-Guide{
	background-color: var(--beige);
	padding: 2rem;
	border-radius: 10px;
	width: calc(50% - 2rem);
}
#contact .contact-Guide .guide-Title{
	color: var(--brown);
	font-weight: 600;
	margin-top: 0;
}
#contact .contact-Guide .more-Link{
	background-color: var(--blue--right);
}

/* ============ footer ============ */
#footer{
	padding: 6% 10% 13% 10%;
	background-color: var(--beige);
}
#footer .footer-Container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}
#footer .footer-Widgets{
	width: calc(35% - 2rem);
}
#footer-Title{
	margin: 0;
}
#footer-Title .site-Title-Link{
	transition: 0.5s ease;
}
#footer-Title .site-Title-Link:hover{
	opacity: 0.7;
}
#footer-Title .site-Title-Link img{
	width: 82%;
	height: auto;
}
#footer-Title .site-Title-Name{
	text-align: center;
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
}
#footer-Title .site-Title-Name span{
	font-size: 1rem;
	display: block;
}
#footer .footer-Navi{
	width: calc(65% - 2rem);
}
#footer #footer-Navi .menu{
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
#footer #footer-Navi .menu a{
	display: block;
	padding: 0.5rem;
	transition: 0.5s ease;
}
#footer #footer-Navi .menu a:hover{
	color: var(--blue--main);
}
#footer .footer-Info{
	display: flex;
	justify-content: space-between;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	border-top: solid 1px var(--brown);
}
#footer .copyright{
	font-size: 0.75rem;
}
#footer .footer-Info-Link{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
}
#footer .footer-Info-Link a{
	display: block;
	padding: 0.5rem;
	transition: 0.5s ease;
	font-size: 0.8rem;
}
#footer .footer-Info-Link a:hover{
	opacity: 0.7;
}


/* ============ test ============ */
.test-home-Sec-Title{
	display: inline-block;
	margin: 0;
	padding-bottom: 0.2rem;
	border-bottom: solid 5px var(--blue--sub);
}
.test-more-Link{
	display: block;
	background-color: var(--blue--sub);
	border-radius: 10rem;
	padding: 1rem 2rem;
	color: var(--beige);
	font-weight: 700;
	transition: 0.5s ease;
}
.test-more-Link:hover{
	opacity: 0.7;
}
#introduction .test-introduction-container-Title{
	margin-top: 0;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--blue--sub);
	line-height: 2;
}

/* ============ plan ============ */
.plan-Menu .test-plan-Price{
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--blue--sub);
	margin: 0 0.7rem 0.5rem 0.7rem;
	padding: 1rem 0;
	border-bottom: solid 1px var(--brown);
}
.plan-Menu .test-plan-Price span{
	font-size: 1rem;
}

/* ============ plan-common ============ */
.plan-Head .plan-Head-Container-Title .test-price{
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--blue--sub);
	margin: 0;
}
.plan-Head .plan-Head-Container-Title .test-price span{
	font-size: 1rem;
}
.test-plan-Feature-Title{
	background-color: var(--blue--sub);
	border-radius: 10px 10px 0 0;
	padding: 0.3rem 0;
	margin-top: 0;
	color: var(--beige);
	text-align: center;
}
.plan-Feature-Funeralhall li p,
.plan-Feature-Equipment li p{
	margin-bottom: 0;
	color: var(--blue--sub);
	font-weight: 700;
}

/* ============ plan25 ============ */
.test-option-Title{
	color: var(--beige);
	background-color: var(--blue--sub);
	padding: 0.3rem 1rem;
	border-radius: 6px;
	display: inline-block;
}
.test-option-Text{
	border-bottom: solid 5px var(--blue--sub);
	display: inline-block;
}

/* ============ plan35 ============ */
#plan35 .plan-Text .title{
	background-color: var(--blue--sub);
	color: var(--beige);
	padding: 0.3rem 1rem;
	margin-top: 0;
	display: inline-block;
}
#plan35 .test-plan-Feature-Container{
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
#plan35 .test-plan-Feature-Container li{
	width: calc(45% - 1rem);
}
#plan35 .test-plan-Feature-Container li:nth-child(2){
	width: calc(10% - 1rem);
	margin-top: 4rem;
}
.test-plan-Feature-Container li p{
	margin-bottom: 0;
	color: var(--blue--sub);
	font-weight: 700;
}
.test-plan-Feature-Container li p span{
	color: var(--brown);
	font-weight: normal;
	display: block;
	font-size: 0.75rem;
}

/* ============ plan15 ============ */

/* ============ feature ============ */
#feature .feature-Item .test-number{
	margin: 0;
	display: inline-block;
	background-color: var(--blue--sub);
	border-radius: 10px 0 10px 0;
	color: var(--beige);
	padding: 0.6rem 1.2rem;
	font-size: 1.5rem;
}
#feature .feature-Wrapper .test-title{
	color: var(--blue--sub);
	font-weight: 700;
	font-size: 1.2rem;
	margin-top: 0;
}
#feature .feature-Item .feature-Wrapper .test-title span{
	display: block;
	position: relative;
}
#feature .feature-Item:first-child .feature-Wrapper .test-title span::before{
	content: "";
	background: var(--blue--sub);
	position: absolute;
	top: 29%;
	left: 84px;
	width: 1px;
	height: 16px;
	transform: rotate(-20deg);
}
#feature .feature-Item:first-child .feature-Wrapper .test-title span::after{
	content: "";
	background: var(--blue--sub);
	position: absolute;
	top: 29%;
	right: 84px;
	width: 1px;
	height: 16px;
	transform: rotate(20deg);
}

/* ============ flow ============ */
.flow-Plan2535 .test-flow-Title{
	text-align: center;
	color: var(--beige);
	background-color: var(--blue--sub);
	padding: 0.75rem 0;
	font-weight: 700;
	font-size: 1.2rem;
}
#flow .flow-List p.test-flow-List-Title{
	color: var(--blue--sub);
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: 0.6rem;
}
#flow p.test-flow-List-Title span{
	background-color: var(--blue--sub);
	color: var(--beige);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.3rem 0.6rem;
	border-radius: 50%;
	margin-right: 1rem;
}

/* ============ access ============ */

/* ============ question ============ */
#question .test-question{
	display: block;
	line-height: 2.8;
	cursor: pointer;
	font-size: 1.2rem;
	transition: 0.5s ease-in;
	text-align: left;
	padding-left: 1rem;
	position: relative;
	margin: 0;
	border-radius: 6px;
	background-color: var(--beige);
	border: solid 2px var(--blue--sub);
	margin-bottom: 1.5rem;
	font-weight: 700;
}
#question .test-more{
	text-align: center;
}
#question .test-more .more-Link{
	display: inline-block;
	padding: 1rem 4rem;
	background-color: var(--beige);
	border: solid 2px var(--blue--sub);
	color: var(--blue--sub);
}
#question .test-more .more-Link:hover{
	background-color: var(--blue--sub);
	color: var(--beige);
	opacity: 1;
}

/* ============ knowledge ============ */
#knowledge .test-more{
	text-align: center;
}
#knowledge .test-more .more-Link{
	display: inline-block;
	padding: 1rem 4rem;
	background-color: var(--beige);
	border: solid 2px var(--blue--sub);
	color: var(--blue--sub);
}
#knowledge .test-more .more-Link:hover{
	background-color: var(--blue--sub);
	color: var(--beige);
	opacity: 1;
}