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

section h2.ttl span::before {
    background-color: #E7F1F2;
}
section h2.sec_ttl span::before {
    background-color: #E7F1F2;
}

.btn::after {
    background-color: #E7F1F2;
}

.point_layout {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.point_layout > .txt_wrap {
    width: calc(500 / 1100 *100%);
    padding-left: 3rem;
    
    display: flex;
    flex-flow: column;
}
.point_layout > .img_wrap {
    width: calc(570 / 1100 *100%);
}

.point_layout > .txt_wrap > .ttl {
    font-size: 3.2rem;
}
.point_layout > .txt_wrap > .txt {
    margin-top: 3rem;
}
.point_layout > .txt_wrap > .btn_wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}
.point_layout > .txt_wrap > .point_wrap {
    margin-top: 5rem;
}
.point_layout > .txt_wrap > .att_list {
    margin-top: 2rem;
}

.point_wrap {
	width: 100%;
	align-items: flex-end;
	justify-content: flex-start;
}
.point_wrap .point_list {
	justify-content: flex-start;
}
.point_wrap .point_list > li {
	width: 9.2rem;
	height: 9.2rem;
	margin-right: 1rem;
}
.point_wrap .point_list > li .point {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/*border: 1px solid #cccccc;*/
    background-color: #E7F1F2;
	border-radius: 50%;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.point_wrap .point_list > li .point .sub_ttl {
	font-size: 1.2rem;
	letter-spacing: 0;
	line-height: calc(19/12);
}
.point_wrap .point_list > li .point .sub_ttl span {
	font-size: 1.5rem;
}
.point_wrap .point_list > li .point .ttl {
	width: 100%;
	font-size: 1.0rem;
	letter-spacing: 0;
	text-align: center;
	line-height: calc(19/12);
}
.point_wrap .point_list > li .point .ttl span {
	font-size: 1.2rem;
}
.point_wrap .point_list > li .point .ttl span.w100 {
	width: 100%;
    display: block;
    text-align: center;
}
.point_wrap .point_list > li .point .ttl span.small {
	font-size: 1.2rem;
}

.point_wrap .point_list > li .point .data {
	font-size: 1.7rem;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
    margin-top: 0.5rem;
}
.point_wrap .point_list > li .point .data span {
	font-size: 1.2rem;
}
.point_wrap .point_list > li .point .data span.small {
	font-size: 1.0rem;
}


@media only screen and (max-width: 768px) {
    
    
.point_layout {
    flex-flow: column;
    align-items: center;
}
.point_layout > .txt_wrap {
    width: 100%;
    padding-left: 0;
    
    display: flex;
    flex-flow: column;
    
    display: contents;
}
.point_layout > .img_wrap {
    width: 100%;
    margin-top: 2rem;
    
    order: 2;
}
.point_layout > .txt_wrap > .ttl {
    font-size: 2.1rem;
    
    order: 1;
}
.point_layout > .txt_wrap > .txt {
    margin-top: 1rem;
    
    order: 3;
}
.point_layout > .txt_wrap > .btn_wrap {
    margin-top: 2rem;
    margin-left: auto;
    order: 6;
}
.point_layout > .txt_wrap > .point_wrap {
    margin-top: 2rem;
    
    order: 4;
}
.point_layout > .txt_wrap > .att_list {
    margin-top: 1rem;
    
    order: 5;
}
    
.point_wrap .point_list {
    width: 100%;
    justify-content: space-between;
}
.point_wrap .point_list > li {
	width: 8rem;
	height: 8rem;
	margin-bottom: 0;
	margin-right: 0;
}
.point_wrap .point_list > li .point .ttl {
	font-size: 1.0rem;
}
.point_wrap .point_list > li .point .ttl span {
	font-size: 1.1rem;
}
.point_wrap .point_list > li .point .ttl span.small {
	font-size: 1.0rem;
}

.point_wrap .point_list > li .point .data {
	font-size: 1.65rem;
	margin-top: 0.5rem;
}
.point_wrap .point_list > li .point .data span {
	font-size: 1.2rem;
}
.point_wrap .point_list > li .point .data span.small {
	font-size: 1.0rem;
}
}


/* #point_navi
----------------------------------------- */
#point_navi {
	position: relative;
	z-index: 1;
}

#point_navi > .img_wrap {
	width: 100%;
}
#point_navi > .img_wrap img {
	width: 100%;
}

#point_navi::after {
	content: "";
	display: block;
	width: 100%;
	height: calc(100% - 5rem);
	background: rgb(255,183,131);
	/*background: linear-gradient(180deg, rgba(255,183,131,1) 0%, rgba(255,203,166,1) 10%, rgba(255,255,255,1) 90%);*/
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -2;
	opacity: .4;
}
#point_navi .inner {
    max-width: 110rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: 6rem;
}

#point_navi .page_ttl {
    font-size: 3.2rem;
    text-align: center;
}
#point_navi .inner > h2 {
    margin-top: 3rem;
    text-align: center;
    position: relative;
}
#point_navi .inner > h2 span {
    font-size: 3.6rem;
    color: #EA7D76;
    text-align: center;
}
#point_navi .inner > h2::after {
    content: "";
    display: block;
    width: calc(100% + 2rem);
    height: 2rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #FFFFFF;
    z-index: -1;
}

#point_navi .lead {
    font-size: 1.8rem;
    text-align: center;
    margin-top: 3rem;
}
#point_navi .point_navi_layout {
    width: 100%;
    position: relative;
    margin-top: 2rem;
    
    display: grid;
    grid-template-columns: repeat(3,auto);
    justify-content: center;
}
#point_navi .point_navi_layout > a.point02 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    padding-top: 7rem;
    padding-left: 3rem;
    padding-right: 1rem;
}
#point_navi .point_navi_layout > a.point04 {
    grid-column: 1 / 2;
    padding-top: 5rem;
}
#point_navi .point_navi_layout > a.point05 {
    grid-column: 3 / 4;
    padding-top: 4rem;
}
#point_navi .illust {
    display: flex;
    justify-content: center;
    margin-top: -10rem;
}

@media screen and (max-width: 768px) {
#point_navi {
}
#point_navi .inner {
    width: 100%;
}
#point_navi > .img_wrap img {
    width: 130%;
    max-width: none;
}
#point_navi::after {
    height: calc(100% - 0rem);
}
    
#point_navi .inner {
    max-width: 110rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: 6rem;
}

#point_navi .page_ttl {
    font-size: 2.1rem;
}
#point_navi .inner > h2 {
    margin-top: 2rem;
}
#point_navi .inner > h2 span {
    font-size: 2.4rem;
}
#point_navi .inner > h2::after {
    content: "";
    display: block;
    width: calc(100% + 2rem);
    height: 2rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #FFFFFF;
    z-index: -1;
}

#point_navi .lead {
    font-size: 1.4rem;
    margin-top: 3rem;
}
#point_navi .point_navi_layout {
    width: 100%;
    position: relative;
    margin-top: 2rem;
    
    display: grid;
    grid-template-columns: repeat(2,auto);
    justify-content: center;
    gap: 1rem;
}
#point_navi .point_navi_layout > a.point01 {
    padding-left: 2rem;
    padding-right: 1rem;
}
#point_navi .point_navi_layout > a.point02 {
    grid-column: auto;
    grid-row: auto;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    transform: translateY(3rem);
    margin-left: -1rem;
    margin-right: -1rem
}
#point_navi .point_navi_layout > a.point03 {
    margin-left: -1rem;
    padding-right: 1rem;
}
#point_navi .point_navi_layout > a.point04 {
    grid-column: auto;
    margin-right: -1rem;
    padding-top: 0;
    transform: translateY(4rem);
}
#point_navi .point_navi_layout > a.point05 {
    grid-column: 1 / 3;
    margin: auto;
    padding-top: 0;
}
#point_navi .illust {
    width: 30rem;
    margin: auto;
    margin-top: 2rem;
}

}


/* #point01
----------------------------------------- */
#point01 {
	position: relative;
	z-index: 1;
}
#point01 .inner {
    max-width: 110rem;
    padding-top: 16rem;
}

#point01 .secret_wrap {
    margin-top: 5rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 4rem;
}

#point01 .secret_wrap > .ttl {
    text-align: center;
    position: relative;
}
#point01 .secret_wrap > .ttl span {
    font-size: 2.4rem;
}
#point01 .secret_wrap > .ttl::after {
    content: "";
    display: block;
    width: calc(100% + 2rem);
    height: 2rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #E7F1F2;
    z-index: -1;
}

#point01 .secret_wrap .secret_layout {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4rem;
}
#point01 .secret_wrap .secret_layout .con {
}
#point01 .secret_wrap .secret_layout .con .txt_wrap {
    margin-top: 2.5rem;
}
#point01 .secret_wrap .secret_layout .con .ttl {
    font-size: 2.1rem;
    text-align: left;
    font-weight: 700;
}
#point01 .secret_wrap .secret_layout .con .txt {
    margin-top: 2rem;
}

@media screen and (max-width: 768px) {
#point01 .inner {
    padding-top: 6rem;
}

#point01 .secret_wrap {
    margin-top: 5rem;
    gap: 3rem;
}

#point01 .secret_wrap > .ttl span {
    font-size: 2.0rem;
}
#point01 .secret_wrap > .ttl::after {
    width: calc(100% + 1rem);
    height: 2rem;
}

#point01 .secret_wrap .secret_layout {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 2rem;
}
#point01 .secret_wrap .secret_layout .con {
    display: flex;
    justify-content: space-between;
}
#point01 .secret_wrap .secret_layout .con .txt_wrap {
    margin-top: 0;
    width: calc(228/375*100%);
}
#point01 .secret_wrap .secret_layout .con .img_wrap {
    margin-top: 0;
    width: calc(122/375*100%);
}
#point01 .secret_wrap .secret_layout .con .img_wrap img {
    width: 100%;
    aspect-ratio: 122 / 136;
    object-fit: cover;
}
#point01 .secret_wrap .secret_layout .con .ttl {
    font-size: 1.5rem;
}
#point01 .secret_wrap .secret_layout .con .txt {
    margin-top: 0.5rem;
    font-size: 1.3rem;
}

}


/* #point02
----------------------------------------- */
#point02 {
	position: relative;
	z-index: 1;
}
#point02 .inner {
    max-width: 110rem;
    padding-top: 12rem;
}

@media screen and (max-width: 768px) {
#point02 {
}
#point02 .inner {
    padding-top: 12rem;
}

}


/* #point04
----------------------------------------- */
#point04 {
	position: relative;
	z-index: 1;
}
#point04 .inner {
    max-width: 110rem;
    padding-top: 10rem;
}

@media screen and (max-width: 768px) {
#point04 {
}
#point04 .inner {
    padding-top: 6rem;
}

}


/* #point05
----------------------------------------- */
#point05 {
	position: relative;
	z-index: 1;
}
#point05 .inner {
    max-width: 110rem;
    padding-top: 8rem;
    padding-bottom: 16rem;
}

@media screen and (max-width: 768px) {
#point05 {
}
#point05 .inner {
    padding-top: 6rem;
    padding-bottom: 8rem;
}

}

/* #voice
----------------------------------------- */
#voice {
}
#voice .inner {
	padding-top: 20rem;
	/*padding-bottom: 12rem;*/
	max-width: none;
}

#voice .sec_ttl_wrap {
    width: 100%;
    max-width: 120rem;
	margin: auto;
    margin-bottom: 5rem;
}
#voice .sec_ttl_wrap .ttl {
    font-size: 3.6rem;
    text-align: center;
}
#voice .sec_ttl_wrap .ttl .fukidashi {
    display: flex;
    align-items: baseline;
    justify-content: center;
    position: relative;
    font-size: 3.1rem;
    margin-top: 1rem;
}
#voice .sec_ttl_wrap .ttl .fukidashi .kenten span {
    position: relative;
}
#voice .sec_ttl_wrap .ttl .fukidashi .kenten span::before {
  content: "・";
  position: absolute;
  top: -0.9em;
  left: 50%;
  transform: translateX(-50%);
}
#voice .sec_ttl_wrap .ttl .fukidashi::before {
    content: '';
    display: block;
    width: 1px;
    height: 2rem;
    background-color: #000000;
    transform: rotate(-30deg);
    margin-right: 2rem;
}
#voice .sec_ttl_wrap .ttl .fukidashi::after {
    content: '';
    display: block;
    width: 1px;
    height: 2rem;
    background-color: #000000;
    transform: rotate(30deg);
    margin-left: 2rem;
}

#voice h1.ttl {
	width: 100%;
    max-width: 120rem;
	margin: auto;
	margin-bottom: 5rem;
}
#voice h1.ttl span::before {
    background-color: #e7f1f2;
}

#voice .voice_list {
}
#voice .voice_list > li {
	width: 100%;
	position: relative;
	z-index: 1;
}
#voice .voice_list > li .inner_box {
	width: 100%;
	max-width: 90rem;
	margin: auto;
	padding-top: 12rem;
	padding-bottom: 15rem;
}

#voice .voice_list > li.eye {
	background-color: #e7f1f2;
}
#voice .voice_list > li.eye::before {
	content: "目";
	display: block;
	font-size: 30rem;
	letter-spacing: 0.05em;
	line-height: 1;
	font-weight: 400;
	font-family: 'Shippori Mincho', "游明朝",Yu Mincho,'Noto Serif',"ヒラギノ明朝 ProN W3","HiraMinProN-W3","ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#voice .voice_list > li.skin {
	background-color: #ffeee2;
}
#voice .voice_list > li.skin::before {
	content: "肌";
	display: block;
	font-size: 30rem;
	letter-spacing: 0.05em;
	line-height: 1;
	font-weight: 400;
	font-family: 'Shippori Mincho', "游明朝",Yu Mincho,'Noto Serif',"ヒラギノ明朝 ProN W3","HiraMinProN-W3","ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#voice .voice_list h2 {
	font-size: 3.5rem;
	letter-spacing: 0.13em;
	line-height: calc(46/35);
	font-weight: 500;
	text-align: center;
}

#voice .voice_list h2 span {
	display: block;
	font-size: 2.3rem;
	line-height: 1;
	margin-bottom: 2rem;
}

#voice .voice_list .intro {
	margin-top: 2rem;
	flex-wrap: nowrap;
	align-items: center;
    justify-content: space-between;
    flex-flow: row-reverse;
}
#voice .voice_list .intro > .txt_wrap {
	font-size: 1.5rem;
	letter-spacing: 0;
	line-height: calc(27/15);
	font-weight: 400;
    
    max-width: 48rem;
}
#voice .voice_list .teacher_wrap {
	width: 19rem;
	position: relative;
}

#voice .voice_list .name_wrap {
	font-size: 2.2rem;
	letter-spacing: 0.1em;
	line-height: 1;
	white-space: nowrap;
	position: absolute;
	bottom: -3rem;
	left: 50%;
	transform: translate(-50%,0);
}
#voice .voice_list .name_wrap span {
	font-size: 1.8rem;
}
#voice .voice_list .name_wrap span.teacher {
	font-size: 1.6rem;
}


#voice .voice_list .faq_wrap {
	margin-top: 8rem;
}
#voice .voice_list .faq_list > li:not(:last-child) {
	margin-bottom: 3rem;
}
#voice .voice_list .faq_list .question {
	margin-bottom: 3rem;
}
#voice .voice_list .faq_list .question span {
	font-size: 1.6rem;
	letter-spacing: 0;
	line-height: calc(28/16);
}
#voice .voice_list .faq_list .question span::before {
	content: "—— ";
}
#voice .voice_list .faq_list .answer {
	padding: 4rem 5rem;
	background-color: #FFFFFF;
	border-radius: 1.3rem;
}
#voice .voice_list .faq_list .answer .ttl {
	font-size: 2.1rem;
	font-weight: 700;
    margin-bottom: 2rem;
}
#voice .voice_list .faq_list .answer span {
	font-size: 1.6rem;
	letter-spacing: 0;
	line-height: calc(30/16);
}
#voice .voice_list .faq_list .answer .img_wrap {
	margin: auto;
	margin-top: 5rem;
	text-align: center;
}
#voice .voice_list .faq_list .answer .img_wrap img {
}


#voice .voice_list .closing {
	margin-top: 7rem;
}
#voice .voice_list .closing span {
	font-size: 1.6rem;
	letter-spacing: 0;
	line-height: calc(28/16);
}
#voice .voice_list .closing span::before {
	content: "—— ";
}

#voice .voice_list .btn_wrap {
	display: table;
    margin: auto;
	margin-top: 6rem;
}

#voice .voice_list .btn::after {
    background-color: #FFFFFF;
}


@media screen and (max-width: 768px) {
#voice {
}
#voice .inner {
	padding-top: 6rem;
	/*padding-bottom: 6rem;*/
	width: 100%;
}
    
#voice .sec_ttl_wrap {
    width: 32.5rem;
    margin-bottom: 3rem;
}
#voice .sec_ttl_wrap .ttl {
    font-size: 2rem;
}
#voice .sec_ttl_wrap .ttl .fukidashi {
    font-size: 1.6rem;
    margin-top: 1rem;
}
#voice .sec_ttl_wrap .ttl .fukidashi .kenten span {
    position: relative;
}
#voice .sec_ttl_wrap .ttl .fukidashi .kenten span::before {
  content: "・";
  position: absolute;
  top: -0.9em;
  left: 50%;
  transform: translateX(-50%);
}
#voice .sec_ttl_wrap .ttl .fukidashi::before {
    content: '';
    display: block;
    width: 1px;
    height: 2rem;
    background-color: #000000;
    transform: rotate(-30deg);
    margin-right: 1rem;
}
#voice .sec_ttl_wrap .ttl .fukidashi::after {
    content: '';
    display: block;
    width: 1px;
    height: 2rem;
    background-color: #000000;
    transform: rotate(30deg);
    margin-left: 1rem;
}
    
#voice .voice_list > li {
    width: 100%;
    padding: 0 2.5rem;
}
#voice .voice_list > li .inner_box {
    padding-top: 6rem;
    padding-bottom: 8rem;
}
	
#voice .voice_list > li.eye::before {
	font-size: 13rem;
}

#voice .voice_list > li.skin::before {
	font-size: 13rem;
}

#voice .voice_list h2 {
	font-size: 2rem;
	line-height: calc(38/24);
}
#voice .voice_list h2 span {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

#voice .voice_list .intro {
	margin-top: 2rem;
    display: block;
    position: relative;
}
#voice .voice_list .intro .txt_wrap {
	font-size: 1.2rem;
    max-width: none;
}
#voice .voice_list .space {
	width: 0.1rem;
    height: 100%;
}
#voice .voice_list .teacher_wrap {
	width: 13.5rem;
	/*position: relative;*/
	float: right;
	clear: both;
    
    position: absolute;
    right: 0;
    bottom: 0;
}

#voice .voice_list .name_wrap {
	font-size: 1.5rem;
	bottom: -2.5rem;
	left: 50%;
	transform: translate(-50%,0);
}
#voice .voice_list .name_wrap span {
	font-size: 1.25rem;
}
#voice .voice_list .name_wrap span.teacher {
	font-size: 1.1rem;
}


#voice .voice_list .faq_wrap {
	margin-top: 8rem;
    clear: both;
}
#voice .voice_list .faq_list > li:not(:last-child) {
	margin-bottom: 3rem;
}
#voice .voice_list .faq_list .question {
	margin-bottom: 3rem;
}
#voice .voice_list .faq_list .question span {
	font-size: 1.6rem;
	letter-spacing: 0;
	line-height: calc(28/16);
}
#voice .voice_list .faq_list .question span::before {
	content: "—— ";
}
#voice .voice_list .faq_list .answer {
	/*width: 100vw;
    margin-left: -2.5rem;*/
    width: 100%;
	padding: 4rem 2.5rem;
	border-radius: 1rem;
}
#voice .voice_list .faq_list .answer span {
	font-size: 1.25rem;
}
#voice .voice_list .faq_list .answer .img_wrap {
	margin: auto;
	margin-top: 4rem;
	text-align: center;
}
#voice .voice_list .faq_list .answer .img_wrap img {
}

#voice .voice_list .faq_list .answer .ttl {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
    
    
#voice .voice_list .closing {
	margin-top: 6rem;
}
#voice .voice_list .closing span {
	font-size: 1.6rem;
	letter-spacing: 0;
	line-height: calc(28/16);
}
#voice .voice_list .closing span::before {
	content: "—— ";
}
	
#voice .voice_list .btn_wrap {
	margin-top: 4rem;
}
}