@charset "UTF-8";
/* sp(320px) */

/* お手続きの流れ */
#flow .hl {
	font-size: 23px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	color: #173185;
}
#flow .hl span {
	display: block;
	font-size:  17px;
	color: #000;
}

#flow .box {
	display: grid;
	grid-template-columns: 74px auto;
	grid-template-rows: auto auto;
	column-gap: 4%;
	row-gap: 0;
	grid-template-areas:
	"areaA areaB"
	"areaC areaC";
	max-inline-size: 1040px;
	margin-inline: auto;
	border: 6px solid #e8f4ff;
	border-radius: .8em;
	padding: 1.0em 1.5em 1.5em;
}
#flow .box .icn {
	grid-area: areaA;
	inline-size: 74px;
}
#flow .box .ttl {
	grid-area: areaB;
	display: grid;
	align-items: center;
	grid-template-columns: 3em auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 0;
}
#flow .box .txt {
	grid-area: areaC;
}

#flow .box .ttl  span:nth-of-type(1) {
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #3c92f2;
	background: #fff;
	text-align: center;
	border: 2px solid #3c92f2;
	border-radius: 50%;
	width: 2em;
	height: 2em;
	line-height: 2em;
}
#flow .box .ttl  span:nth-of-type(2) {
	font-size: 17px;
	font-weight: bold;
}
#flow .box .txt {
	margin-block-start: .4em;
}
#flow .box .txt div {
	background-color: #ffe7f2;
	padding: 1em 1em;
	margin-block-start: .4em;
}
#flow .arrow {
	padding-block: .8em;
}
#flow .arrow div {
	inline-size: 20px;
	block-size: 10px;
	background: #3c92f2;
	display: block;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	margin-inline: auto;
}

/* お客様の声 */
#voices {
	background-color: #e8f4ff;
}
#voices .hl {
	font-size: 23px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

.splide {
	padding-inline: 25px;
}
#voices .splide__list li {
	border: 4px solid #bbdcf8;
	border-radius: .8em;
	padding: 1.2em 1.5em;
	background-color: #fff;
}
#voices .splide__list li figure {
	inline-size: 140px;
}
#voices .splide__list li .ttl {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.4;
	color: #173185;
	padding-block: .8em .8em;
}
/* 矢印 */
.splide .splide__arrow {
	background-color: transparent;
	opacity: 1;
	top: 48%;
	width: 20px;
	height: 20px;
	z-index: 1;
}
.splide .splide__arrow:disabled {
	opacity: .2;
}
.splide .splide__arrow--prev {
	left: 0em;
}
.splide .splide__arrow--next {
	right: 0em;
}
.splide .splide__arrow svg {
	fill: #3c92f2;
	width: 20px;
	height: 20px;
}

/* よくあるご質問 */
#faq  {
	background-color: #3752ab;
}
#faq .hl {
	font-size: 23px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	color: #fff;
}
#faq dl  {
	background-color: #fff;
	border-radius: 1em;
	padding: 1.5em 1.5em;
}
#faq dt {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	position: relative;
	padding-inline-start: 28px;
	padding-inline-end: 1em;
	cursor: pointer;
}
#faq dt span {
	display: inline-block;
	line-height: 1;
	position: absolute;
	inset: 0 0 auto auto;

}
#faq dd  {
	display: none;
	margin-inline-start: 0;
	position: relative;
	padding-block-start: 1.2em;
	padding-inline-start: 28px;
}
#faq dt::before,
#faq dd::before {
	font-family: "Manrope", sans-serif;
	font-size: 25px;
	font-weight: bold;
	line-height: 1;
	position: absolute;
}
#faq dt::before {
	content: 'Q';
	color: #173185;
	inset: -.10em auto auto 0;
}
#faq dd::before {
	content: 'A';
	color: #3c92f2;
	inset: .7em auto auto 0;
}


/* 個人年金保険( Annuity )のリスクと費用 */
#risk {
	background-color: #efefef;
}
#risk .hl {
	font-size: 23px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	color: #173185;
}
#risk .hl span.s {
	display: block;
	font-size: 18px;
	color: #000;
}
#risk ul li {
	background-color: #fff;
	border-radius: .8em;
	padding: 1.5em 1.5em;
	margin-block-end: 1.5em;
}
#risk ul li .ttl {
	line-height: 1;
	border-inline-start: 3px solid #173185;
	position: relative;
}

#risk ul li .ttl span {
	font-size: 16px;
	font-weight: bold;
	display: inline-block;
	line-height: 1.4;
	padding-inline-start: .7em;
}
#risk ul li .dsp {
	padding-block-start: 1.0em;
}
#risk ul li .dsp p:last-of-type {
	margin-block-end: 0;
}
#risk ul li .dsp .b {
	font-size: 118.8%;
	font-weight: bold;
}

/* ご相談・お見積りはこちら！ */
#contact {
}
#contact .hl {
	font-size: 23px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	color: #173185;
}
#contact .hl span {
	display: block;
	font-size: 17px;
	color: #000;
}

/* 会社概要 */
#company .hl {
	font-size: 23px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
#company dl {
	display: grid;
	grid-template-columns: 5em auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 0;
	max-inline-size: 540px;
	margin-inline: auto;
/*	border: 1px solid #000;*/
}
#company dt,
#company dd {
	padding-block: 0 .3em;
}
#company dt {

}
#company dd {
	margin-inline-start: 0;
}









@media handheld, print, screen and (min-width: 375px) {
/* iphone6 */


/* end of media query(iphone6) */	
}



@media handheld, print, screen and (min-width: 414px) {
/*  iPhone6 Plus */

/* end of media query(iPhone6 Plus) */	
}



@media handheld, print, screen and (min-width: 480px) {
/* tablet */

/* お手続きの流れ */
#flow .hl {
	font-size: 26px;
}
#flow .hl span {
	font-size:  20px;
}
#flow .box {
	grid-template-columns: 74px auto;
	column-gap: 4%;
	row-gap: 0;
	grid-template-areas:
	"areaA areaB"
	"areaA areaC";
	border: 6px solid #e8f4ff;
	border-radius: .8em;
	padding: 1.2em 1.5em 1.5em;
}
#flow .box .icn {
	inline-size: 74px;
}

#flow .box .ttl {
	grid-template-columns: 3em auto;
}
#flow .box .ttl  span:nth-of-type(1) {
	font-size: 16px;
	border: 2px solid #3c92f2;
}
#flow .box .ttl  span:nth-of-type(2) {
	font-size: 18px;
}
#flow .arrow div {
	inline-size: 25px;
	block-size: 10px;
}

/* お客様の声 */
#voices .hl {
	font-size: 32px;
}
.splide {
	padding-inline: 35px;
}
#voices .splide__list li {
	border: 6px solid #bbdcf8;
	padding: 1.2em 1em;
}
#voices .splide__list li figure {
	inline-size: 145px;
}
#voices .splide__list li .ttl {
	font-size: 17px;
}
/* 矢印 */
.splide .splide__arrow {
	width: 30px;
	height: 30px;
}
.splide .splide__arrow svg {
	width: 25px;
	height: 25px;
}

/* よくあるご質問 */
#faq .hl {
	font-size: 26px;
}
#faq dl  {
	padding: 1.5em 1.5em;
}
#faq dt {
	font-size: 17px;
	padding-inline-start: 38px;
}
#faq dd  {
	padding-inline-start: 38px;
}
#faq dt::before,
#faq dd::before {
	font-size: 30px;
}
#faq dt::before {
	inset: -.12em auto auto 0;
}
#faq dd::before {
	inset: .6em auto auto 0;
}

/* 個人年金保険( Annuity )のリスクと費用 */
#risk .hl {
	font-size: 26px;
}
#risk .hl span.s {
	font-size: 18px;
}
#risk ul li {
	padding: 1.5em 2.0em;
}
#risk ul li .ttl {
	border-inline-start: 4px solid #173185;
}
#risk ul li .ttl span {
	font-size: 15px;
}

/* ご相談・お見積りはこちら！ */
#contact .hl {
	font-size: 26px;
}
#contact .hl span {
	font-size: 18px;
}

/* 会社概要 */
#company .hl {
	font-size: 26px;
}
#company dl {
	grid-template-columns: 6em auto;
	max-inline-size: 90%;
}
#company dd {
	padding-block: 0 .6em;
}











	@media (-webkit-min-device-pixel-ratio: 2){
		

	/* end of media query(retina) */	
	}

/* end of media query(tablet) */	
}



@media handheld, print, screen and (min-width: 620px) {
/* iPad */

/* お手続きの流れ */
#flow .hl {
	font-size: 32px;
}
#flow .hl span {
	font-size:  24px;
}
#flow .box {
	grid-template-columns: 98px auto;
	column-gap: 4%;
	row-gap: 0;
	grid-template-areas:
	"areaA areaB"
	"areaA areaC";
	border: 6px solid #e8f4ff;
	border-radius: .8em;
	padding: 1.2em 1.5em 1.5em;
}
#flow .box .icn {
	inline-size: 98px;
}

#flow .box .ttl {
	grid-template-columns: 3.5em auto;
}
#flow .box .ttl  span:nth-of-type(1) {
	font-size: 18px;
	border: 2px solid #3c92f2;
}
#flow .box .ttl  span:nth-of-type(2) {
	font-size: 20px;
}
#flow .arrow div {
	inline-size: 25px;
	block-size: 10px;
}

/* お客様の声 */
#voices .hl {
	font-size: 32px;
}
.splide {
	padding-inline: 35px;
}
#voices .splide__list li {
	border: 6px solid #bbdcf8;
	padding: 1.2em 2em;
}
#voices .splide__list li figure {
	inline-size: 145px;
}
#voices .splide__list li .ttl {
	font-size: 18px;
}
/* 矢印 */
.splide .splide__arrow {
	width: 30px;
	height: 30px;
}
.splide .splide__arrow svg {
	width: 25px;
	height: 25px;
}

/* よくあるご質問 */
#faq .hl {
	font-size: 32px;
}

#faq dl  {
	padding: 2.0em 2em;
}
#faq dt {
	font-size: 19px;
	padding-inline-start: 38px;
}
#faq dd  {
	padding-inline-start: 38px;
}
#faq dt::before,
#faq dd::before {
	font-size: 34px;
}
#faq dt::before {
	inset: -.12em auto auto 0;
}
#faq dd::before {
	inset: .4em auto auto 0;
}

/* 個人年金保険( Annuity )のリスクと費用 */
#risk .hl {
	font-size: 32px;
}
#risk .hl span.s {
	font-size: 24px;
}
#risk ul li {
	padding: 2em 2.5em;
}

#risk ul li .ttl span {
	font-size: 20px;
}

/* ご相談・お見積りはこちら！ */
#contact .hl {
	font-size: 32px;
}
#contact .hl span {
	font-size: 24px;
}

/* 会社概要 */
#company .hl {
	font-size: 32px;
}
#company dl {
	grid-template-columns: 8em auto;
	max-inline-size: 540px;
}
#company dd {
	padding-block: 0 .6em;
}








/* end of media query(iPad) */	
}



@media handheld, print, screen and (min-width: 900px) {
/* pc */

/* お手続きの流れ */
#flow .hl {
	font-size: 40px;
}
#flow .hl span {
	font-size:  30px;
}

#flow .box {
	grid-template-columns: 123px auto;
	column-gap: 4%;
	row-gap: 0;
	grid-template-areas:
	"areaA areaB"
	"areaA areaC";
	border: 6px solid #e8f4ff;
	border-radius: .8em;
	padding: 1.2em 3.5em 1.5em;
}
#flow .box .icn {
	inline-size: 123px;
}

#flow .box .ttl {
	grid-template-columns: 4em auto;
}
#flow .box .ttl  span:nth-of-type(1) {
	font-size: 22px;
	border: 2px solid #3c92f2;
}
#flow .box .ttl  span:nth-of-type(2) {
	font-size: 24px;
}
#flow .arrow div {
	inline-size: 30px;
	block-size: 15px;
}

/* お客様の声 */
#voices .hl {
	font-size: 40px;
}
.splide {
	padding-inline: 40px;
}
#voices .splide__list li {
	border: 6px solid #bbdcf8;
	padding: 1.2em 2em;
}
#voices .splide__list li figure {
	inline-size: 181px;
}
#voices .splide__list li .ttl {
	font-size: 20px;
}
/* 矢印 */
.splide .splide__arrow {
	width: 40px;
	height: 40px;
}
.splide .splide__arrow svg {
	width: 30px;
	height: 30px;
}

/* よくあるご質問 */
#faq .hl {
	font-size: 40px;
}

#faq dl  {
	padding: 2.5em 3em;
}
#faq dt {
	font-size: 22px;
	padding-inline-start: 44px;
}
#faq dd  {
	padding-inline-start: 44px;
}
#faq dt::before,
#faq dd::before {
	font-size: 40px;
}
#faq dt::before {
	inset: -.14em auto auto 0;
}
#faq dd::before {
	inset: .4em auto auto 0;
}

/* 個人年金保険( Annuity )のリスクと費用 */
#risk .hl {
	font-size: 40px;
}
#risk .hl span.s {
	font-size: 30px;
}
#risk ul li {
	padding: 2em 3em;
}

#risk ul li .ttl span {
	font-size: 22px;
}

/* ご相談・お見積りはこちら！ */
#contact .hl {
	font-size: 40px;
}
#contact .hl span {
	font-size: 30px;
}

/* 会社概要 */
#company .hl {
	font-size: 40px;
}












/* end of media query(pc) */
}