@charset "utf-8";
/* CSS Document */


.top {
    background-image: url(/support/soudan/buy/images/soudan_buy_top.png);
    background-position: right;
    background-repeat: no-repeat;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    height: 250px;
    display: table;
}

.top h1 {
    color: #333;
    font-size: 3em;
    margin: 0;
    display: table-cell;
    vertical-align: middle;
}

.top h1 span {
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 0.5em;
    display: inline-block;
    text-shadow: 0 0 20px #fff;
}

.ctitle {
    text-align: center;
}

h2 {
    margin-bottom: 1em;
}

h2.ctitle span {
    border-bottom: 7px solid #8dc8f4;
}

.center {
    text-align: center;
}

.txtbold {
    font-weight: bold;
}

.txt15 {
    font-size: 1.5em;
}

section {
    margin-bottom: 4em;
}

.lead {
    margin-bottom: 3em;
}

.notice_gray {
    border: 1px solid #CCCCCC;
    margin: 0 0 1em;
    padding: 1em 1em 0;
    overflow: hidden;
}

.dot_blue {
	background: #8dc8f44d;
    border: dashed 2px white;
    box-shadow: 0px 0px 0px 10px #8dc8f44d;
    margin: 2em 0.7em;
    padding: 1em;
}

.recommen {
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.recommendation {
    display: inline-grid;
}

ul.recommendation li span {
    box-shadow: 0px -10px 10px 0px rgb(255 211 211 / 70%) inset, 0px 10px 5px -5px #ffd3d3;
    font-weight: bold;
}


.double_pink {
    display: inline-block;
    position: relative;
    border: solid 2px #ffc4c4;
    padding: 1em 1.5em 1em 0;
	width: 97%;
    margin-bottom: 2em
}

.double_pink::before {
	content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
    border: solid 2px #ffc4c4;
    z-index: -1;
}

ul.recommendation li {
    margin: 0.5em 0;
}

dl.blueline dd .pct {
    margin-right: 1em;
}

.pct img {
    width: 150px;
}

.flex {
    display: flex;
	justify-content: center;
}

a.s5-link:before {
    margin: 0 0.2em;
}

.mb2em {
    margin-bottom: 2em;
}

.mb3em {
    margin-bottom: 3em;
}

br.mq {
	display: none;
}

.arrow {
    margin: 1em 0;
}

/* 買い物相談ブルーライン */
.toi {
	margin-bottom: 4em;
}

.toi .block {
    display: flex;
	justify-content: center;
}


dl.blueline {
	border: solid 4px #8dc8f4;
    border-radius: 10px;
    padding: 1em;
    width: 39%;
    margin: 0 1em;
}

dl.blueline dt {
    text-align: center;
	margin-bottom: 1em;
	font-size: 1.2em;
	font-weight: bold;
    border-bottom: solid 2px #8dc8f4;
}

dl.blueline dd {
    margin-left: 0;
}


@media (max-width: 640px) {
	br.mq {
		display: block;
	}
	
	h2.ctitle span {
		line-height: 2;
	}
	
	.s5-container {
		max-width: 100%;
		padding: 0;
	}
	
	.top {
		height: 150px;
	    background-position: top -10px right -50px;
	}

	.top h1 {
		font-size: 1.45em;
	}
	
	.top h1 span {
		margin-left: 0;
	}

	.lead {
		margin-top: 2em;
		padding: 0 0.5em;
	}
	
	h2 {
		font-size: 1.3em;
	}
	
	section {
		padding: 0 0.5em;
	}	
	
	.toi .block {
		display: block;
	}
	
	dl.blueline {
		width: auto;
		margin: 1em 0;
	}
	
	dl.blueline dd .pct img {
		width: 100px;
	}
	
	.double_pink {
		width: 90%;
		margin: 1em 0.5em 2em;
	}
	
	ul.recommendation li span {
		line-height: 2;
	}

	.mb2em {
		margin-bottom: 1em;
	}

	.mb3em {
		margin-bottom: 2em;
	}
}


/* step要素本体 */
.content {
	color: white;
}

.content .step {
	display: flex;
	/* flex-wrap: wrap; */
	list-style: none;
	justify-content: center;
}

.content ul.step  {
    padding-left: 0;
}

.content ul.step li {
    position: relative;
    padding: 1em;
    margin: 0 40px 20px 0;
    background: #ffffff;
    border: solid 4px #a7d28d;
    color: black;
    width: 15%;
    height: 320px;
}

.content ul.step li p {
    margin-top: 0;
}

.content ul.step li p.mt20 {
    margin-top: 20px;
}

.content ul.step li p span {
    font-weight: bold;
}



/* 先端部分 */

.content ul.step li::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -48px;
    border-width: 180px 13px;
    border-color: transparent transparent transparent #a7d28d;
    border-style: solid;
    z-index: 1;
    border-left: 31px solid #a7d28d;
}


.content ul.step li:before {
    content: "";
    position: absolute;
    top: 0;
    right: -44px;
    border-width: 177px 13px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    z-index: 2;
    border-left: 31px solid #fff;
}

/* 現在のステップ */
.content ul.step li.is-current {
  border: solid 4px green;
}
.content ul.step li.is-current::after {
  border-color: transparent transparent transparent green ;
}

.content ul.step li .pct {
    position: absolute;
    bottom: 10px;
}

 .content ul.step li .flex {
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1025px) {
	.content ul.step li {
		width: 150px;
	}
}


@media (max-width: 996px) {
	.content ul.step li {
		width: 13%;
	}
	
	.content ul.step li .pct img {
		width: 100px;
	}
}

@media (max-width: 910px) {
	.content .step {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* flex-wrap: wrap; */
	}
	
	.content ul.step li p {
		margin-top: 1em;
	}
	
	.content ul.step li .pct {
		margin: 0 56px;
    	top: 120px
	}
	
	.content ul.step li .pct img {
		width: 150px;
	}
	
	.content ul.step li {
		margin: 0 0 30px 0px;
		width: 260px;
		height: 280px;
		padding: 0 1em;
	}
	
	.content ul.step li:before {
		border-left: 29px solid #fff;
		top: 279px;
		right: 0;
		bottom: 0px;
		left: 0px;
		border-width: 29px 144px;
		border-color: #fff transparent transparent transparent;
	}
	
	.content ul.step li::after {
		top: 283px;
		right: 0;
		bottom: 0px;
		left: -4px;
		border-width: 29px 149px;
		border-color: #a7d28d transparent transparent transparent;
	}
	
	.content ul.step li.is-current::after {
		border-color: green transparent transparent transparent;
	}
	
	.recommen {
		padding-right: 1em;
	}
}


/* お問い合わせ */
.web_mq {
    display: none;
}

.s5-p2 {
    font-size: .875rem;
	margin-bottom: 1em;
	margin-top: 0.5em;
    display: flex;
    justify-content: center;
}

.toiawase {
    display: flex;
    justify-content: center;
	flex-direction: row;
	align-items: center;
}
.toiawase :nth-child(1) { order: 3; }
.toiawase :nth-child(2) { order: 1; }
.toiawase :nth-child(3) { order: 2; }

.toiawase .tel {
    margin: 0 1em;
}



@media (max-width: 640px) {
	.web_mq {
		display: inline;
		text-align: center;
		font-weight: bold;
		margin-top: 3px;
	}
	
	.c5-support_illu {
		display: none;
	}
	
	.tel_sp_mq #tel-02 {
		font-size: 24px;
		line-height: 1.5;
		font-weight: bold;
		color: #43677E;
		cursor: default;
		text-decoration: underline;
	}
	
	.tel p {
		margin-top: 0;
	}
	.s5-heading4 {
		font-size: 1rem;
	}
	
	.toiawase {
		display: block;
	}

	.toiawase .support_r {
		float: right;
	}
	
	.s5-p2 {
		margin-left: 0;
	}
}