@charset "UTF-8";

@media screen and (min-width: 960px) {
  .nonPC {
    display: none !important;
  }
  .nonSP {
    display: inline-block;
  }
}
@media screen and (max-width: 959px) {
  .nonPC {
    display: inline-block;
  }
  .nonSP {
    display: none !important;
  }
}

/*共通パーツ　*/
article .subtitle{
	font-family: "Zen Maru Gothic", sans-serif;
	color: #1a3b84;
	font-size: 2.4rem;
	font-weight: bold;
	-webkit-text-stroke: 0.75px currentColor;
}
article .subtitle span{
	color: #c1272d;
	font-size: 2.8rem;
}
@media screen and (max-width: 960px) {
	article .subtitle{
		font-size: 2.0rem;
	}
	article .subtitle span{
		font-size: 2.4rem;
	}
}

/*article背景設定*/
.intro{
	background: url(/plan/option/marugoto-anshin-pack/img/marugoto_bg-pc.jpg) no-repeat center / cover;
	padding: 0;
}
.reverse{
	background-color: #f0f5f9;
}
@media screen and (max-width: 960px) {
	.intro{
		background: url(/plan/option/marugoto-anshin-pack/img/marugoto_bg-sp.jpg) no-repeat center / cover;
	}	
}

/*section背景設定*/
article .marugoto-wrap{
	position: relative;
	max-width: 880px;
	width: 100%;
	z-index: 1;
	padding: 0;
}
article .--intro_wrap{
	padding: 96px 0 80px;
}
@media screen and (max-width: 960px) {
	article .marugoto-wrap{
		width: calc(100% - 36px);
		margin: 0 auto;
	}
	article .--intro_wrap{
		padding: 64px 0;
	}
}

/*intro*/
article .--intro_wrap .intro_text span{
	color: #1a3b84;
}
article .--intro_wrap .intro_box{
	position: relative;
	margin-top: 80px;
	background-color: #fff;
	border: 4px solid #c5a152;
	border-radius: 32px;
}
article .--intro_wrap .intro_box .intro_title{
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
	color: #fff;
	background-color: #c5a152;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: bold;
	-webkit-text-stroke: 0.25px currentColor;
	font-size: 2.0rem;
	padding: 8px 0;
	border-radius: 64px;
}
article .--intro_wrap .intro_box .intro_contents{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 56px 0;
}
article .--intro_wrap .intro_box .intro_contents img{
	width: fit-content;
}
article .--intro_wrap .intro_box .intro_contents .intro_anchor{
	position: relative;
	color: #333;
	border: 1px solid;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
	max-width: 560px;
	width: 100%;
	padding: 8px 0;
	margin: 16px 0 64px;
}
article .--intro_wrap .intro_box .intro_contents .intro_anchor::before{
	content: "＞";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}
article .--intro_wrap .intro_box .intro_contents .intro_anchor::after{
	content: "";
	background: url(/plan/option/marugoto-anshin-pack/img/intro-plus.png) no-repeat center / cover;
	position: absolute;
	bottom: -48px;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 32px;
}
article .--intro_wrap .intro_box .intro_contents .intro_group{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-width: 960px) {
	article .--intro_wrap .intro_text{
		margin-bottom: 56px;
		text-align: left;		
	}
	article .--intro_wrap .intro_box{
		margin-top: 40px;
		border-radius: 24px;
	}
	article .--intro_wrap .intro_box .intro_title{
		top: -25px;
		width: 80%;
		font-size: 1.6rem;
	}
	article .--intro_wrap .intro_box .intro_contents{
		padding: 48px 32px 12px;
	}
	article .--intro_wrap .intro_box .intro_contents .intro_anchor{		
		font-size: 1.0rem;
		margin: 16px 0 32px;
	}
	article .--intro_wrap .intro_box .intro_contents .intro_anchor::before{
		content: "＞";
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
	}
	article .--intro_wrap .intro_box .intro_contents .intro_anchor::after{
		bottom: -25px;
		width: 16px;
		height: 16px;
	}
	article .--intro_wrap .intro_box .intro_contents .intro_group{
		flex-direction: column;
	}
}

/*danger*/
.danger{
	position: relative;
}
.danger .bg-shape{
	position: absolute;
    inset: 0;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    z-index: 0;
    margin-bottom: 0;
}
.danger img{
	width: fit-content;
}
.danger .danger_box{
	display: flex;
    justify-content: space-evenly;
	margin: 40px auto 80px;
}
@media screen and (max-width: 960px) {
	.danger .bg-shape{
		clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
		margin-bottom: -24px;
	}
	.danger img{
		width: 100%;
	}
	.danger .danger_box{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin: 40px auto;
	}
	.danger .danger_box > img:nth-child(1){
		grid-column: 1 / -1;
		width: 100%;
		max-width: calc((100% - 24px) / 2);
		justify-self: center;
	}
	.danger .danger_box img{
		width: 100%;
		display: block;
	}
}

/*merit*/
.merit-box .merit-title{
	background: linear-gradient(90deg,#1a3b84 0%, #3e60c8 100%);
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 12px 0;
	border-radius: 16px 16px 0 0;	
}
.merit-box .merit-contents{
	background-color: #fff;
	padding: 24px;
	text-align: left;
	font-size: 1.2rem;
	margin-bottom: 24px;
}
.merit-box .merit-contents .bold{
	font-weight: bold;
	font-size: 1.25rem;
}
.merit-box .merit-contents .blue{
	line-height: 1.8;
	font-weight: bold;
	color: #1a3b84;
}
.merit-box .merit-contents .red{
	line-height: 1.8;
	font-weight: bold;
	color: #c1272d;
}
.merit-alert{
	font-size: 1.2rem;
	font-weight: bold;	
	background-color: #fff;
	padding: 32px 0;
	border: 1px solid #c1272d;
	margin-bottom: 56px;
}
.merit-alert p{
	margin: 0;
}
.merit-alert .red{
	color: #c1272d;
	margin-bottom: 24px;
}
.merit-alert .red span{
	font-size: 1.0rem;
	font-weight: normal;
}
.merit-nord{
	background-color: #fff;
	border-radius: 32px;
	filter: drop-shadow(0px 0px 8px #d0dbe280);
	padding: 40px 24px;
}
.merit-nord p{
	margin: 0;
	text-align: left;
}
.merit-nord .nord-title{
	font-size: 1.6rem;
	font-weight: bold;
	color: #1a3b84;
	text-align: center;
}
.merit-nord .nord-img{
	margin: 24px auto;
}
.merit-nord .nord-box{
	margin-top: 32px;
	display: flex;
    justify-content: center;
    gap: 16px;
}
@media screen and (max-width: 960px) {
	.merit-box .merit-title{
		font-size: 1.25rem;
	}
	.merit-box .merit-contents{
		font-size: 1.0rem;
	}
	.merit-box .merit-contents .bold{
		font-size: 1.1rem;
	}
	.merit-box .merit-contents .blue{
		line-height: 1.6;
	}
	.merit-box .merit-contents .red{
		line-height: 1.6;
	}
	.merit-alert{
		font-size: 1.0rem;
		padding: 32px;
		margin-bottom: 24px;
	}
	.merit-alert p{
		margin: 0;
		text-align: left;
	}
	.merit-alert .red{
		color: #c1272d;
		margin-bottom: 24px;
		text-align: center;
	}
	.merit-alert .red span{
		font-size: 1.0rem;
		font-weight: normal;
	}
	.merit-nord{
		border-radius: 24px;
		padding: 32px;		
	}
	.merit-nord .nord-title{
		font-size: 1.25rem;
	}
	.merit-nord .nord-img{
		width: 80%;
		margin: 16px auto;
	}
	.merit-nord .nord-box{
		width: calc(100% - 32px);
		margin: 16px auto 0;
		gap: 16px;
	}
}
/*setting*/
.setting_wrap{
	display: flex;
	justify-content: space-between;
    align-items: center;
	margin-bottom: 40px;
}
.setting_wrap .setting_box{
	position: relative;
	background-color: #f0f5f9;
	border-radius: 16px;
	width: calc((100% - 96px) / 3);
	height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
.setting_wrap .setting_box::after{
	position: absolute;
	content: "";
	background: url(/plan/option/marugoto-anshin-pack/img/setting_arrow-b.png) no-repeat center/cover;
	width: 15px;
	height: 28px;
	right: -32px;
	top: 50%;
	transform: translateY(-50%);
}
.setting_wrap .setting_box:last-child::after{
	content: none;
}
.setting_wrap .setting_box .setting_frame{
	display: flex;
    align-items: center;
    justify-content: center;
}
.setting_wrap .setting_box .setting_frame img{
	width: fit-content;
}
.setting_wrap .setting_box .setting_frame p{
	color: #1a3b84;
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0;
}
.setting_btn{
	position: relative;
	display: block;
	padding: 16px 0;
	margin: 0 auto;
	font-weight: bold;
	font-size: 1.4rem;
	text-decoration: none;
	background-color: #1a1a1a;
	color: #fff;
	max-width: 240px;
	width: 100%;
}
.setting_btn::after{
	position: absolute;
	content: "";
	background: url(/plan/option/marugoto-anshin-pack/img/setting_arrow-w.png) no-repeat center/cover;
	width: 12px;
	height: 20px;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}
@media screen and (max-width: 960px) {
	.setting_wrap{
		flex-direction: column;
		gap: 32px;
		margin-bottom: 32px;
	}
	.setting_wrap .setting_box{
		width: 100%;
		height: 160px;
		padding: 24px;
		flex-direction: row;
		justify-content: space-around;
		gap: 24px;
	}
	.setting_wrap .setting_box::after{
		position: absolute;
		content: "";
		background: url(/plan/option/marugoto-anshin-pack/img/setting_arrow-b.png) no-repeat center/cover;
		width: 10px;
		height: 20px;
		top: initial;
		right: initial;
		left: 50%;		
		bottom: -26px;
		transform: translateX(-50%) rotate(90deg);
	}
	.setting_wrap .setting_box:last-child::after{
		content: none;
	}
	.setting_wrap .setting_box .setting_frame{
		width: 50%;
		justify-content: flex-start;
	}
	.setting_wrap .setting_box .setting_frame img{
		width: fit-content;
	}
	.setting_wrap .setting_box .setting_frame p{
		font-size: 1.0rem;
		text-align: left;
	}	
}

/*product*/
.product_wrap{
	background-color: #fff;
	padding: 48px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
}
.product_wrap .product_box{
	text-align: left;
	width: 50%;
}
.product_wrap img{
	width: fit-content;
}
.product_wrap .product_box .product_title{
	font-weight: bold;
	font-size: 1.4rem;
	margin: 0;
}
.product_wrap .product_box .product_title span{	
	font-size: 2.4rem;
}
.product_wrap .product_box p{	
	margin: 16px 0;
}
.product_wrap .product_box .product_btn{
	position: relative;
	display: block;
	padding: 16px 0;
	margin: 0 auto 0 0;
	font-weight: bold;
	font-size: 1.2rem;
	text-align: center;
	text-decoration: none;
	background-color: #ffff00;
	color: #1a1a1a;
	max-width: 240px;
	width: 100%;
}
.product_wrap .product_box .product_btn::after{
	position: absolute;
	content: "";
	background: url(/plan/option/marugoto-anshin-pack/img/product_arrow-n.png) no-repeat center/cover;
	width: 12px;
	height: 20px;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}
@media screen and (max-width: 960px) {
	.product_wrap{		
		padding: 24px;
		gap: 0;
	}
	.product_wrap .product_box{
		width: 100%;
		display: flex;
		flex-direction: column;
        align-items: center;
	}
	.product_wrap img{
		width: 50%;
		margin: 24px 0;
	}
	.product_wrap .product_box .product_title{
		font-size: 1.25rem;		
	}
	.product_wrap .product_box p{
		margin: 0 0 24px 0;
	}
	.product_wrap .product_box .product_title span{	
		font-size: 2.0rem;
	}
	.product_wrap .product_box .product_btn{
		margin: 0 auto;
	}
}