@charset "utf-8";

*{ margin: 0; padding: 0;}
a { text-decoration : none;}
ul, ol { list-style : none;}
img { border-style:none;width: 100%;height: auto;user-drag: none;-webkit-user-drag: none;-moz-user-select: none;}
html,*,*:before,*:after { box-sizing: border-box;scrollbar-gutter: stable;}
body {-webkit-text-size-adjust: 100%;text-size-adjust: 100%;overflow-x: hidden; }

body {
    color:#000;
	background-color:#e8e8e8;
	text-align: justify;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	/*font-size:14px;
	line-height: 26px;*/
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	
	opacity: 0;
	animation: OpenIn 1.0s ease;
	animation-fill-mode: forwards;
}
body.pop_act {
   overflow: hidden;
}
@keyframes OpenIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
rt {
	font-weight: 500;
	letter-spacing: 0;
	font-size:  0.4em;
	
	line-height: 100%;
	transform-origin: bottom;
	transform: translateY(30%);
}

/*-----------------------------------
Header
-----------------------------------*/
header {
	position: fixed;
	max-width: 330px;
	top: 35px;
	left: 40px;
}
@media screen and (max-width: 1250px) {
header {
	width: calc(45% - 245px);
	left: 3%;
}
}
@media screen and (max-width: 1020px) {
header {
	display: none;
}
}

/*-----------------------------------
Contents
-----------------------------------*/
.contents{
	background-color: #FFF;
	width: 480px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
@media screen and (max-width: 640px) {
.contents{
	min-width: auto;
	width: 100%;
}
}

.contents div {
	position: relative;
	line-height: 0;
}
h1 {
	width: 84%;
	margin: 0 auto;
	padding: 10% 0;
}


.txt1,.txt2,.txt7,.txt8,.txt9,.txt10,.txt11,.txt12,.txt13,.txt14,.txt15,.txt16,.img_saito,.btn_saito,.txt17,.txt18,.txt19,.txt20,.txt21,.txt22,.txt23,.txt24,.txt25,.txt26,.txt27,.txt28,.txt29,.txt30,.txt31,.txt32,.txt33,.balloon1,.balloon2,.balloon3,.balloon4 {
	position: absolute!important;
	
}
.txt1 {
	line-height: 1.4;
	font-size: 4.7vw;
	letter-spacing: 0.035em;
	top: 0.0%;
	left: 11%;
}
@media screen and (min-width: 641px) {
.txt1 {
	font-size: 23px;
}
}
.txt2 {
	top: 42.5%;
	left: 8.5%;
	width: 83%;
}
.txt2 p {
	line-height: 1.68;
	font-size: 3.4vw;
	letter-spacing: 0.02em;
}
@media screen and (min-width: 641px) {
.txt2 p {
	font-size: 17px;
}
}
figure {
	float: left;
	margin: 0 15px 15px 0;
	width: 48%;
	padding-top: 30%;
}

.txt3 {
	width: 100%;
	text-align: center;
	line-height: 2.0;
	font-size: 4.0vw;
	letter-spacing: 0.10em;
	padding: 13% 0 22% 0;
	padding-left: 1em;
}
@media screen and (min-width: 641px) {
.txt3 {
	font-size: 19px;
}
}
.txt4 {
	width: 100%;
	text-align: center;
	line-height: 1.65;
	font-size: 4.5vw;
	letter-spacing: 0.09em;
	padding-top: 3%;
	padding-left: 1em;
}
@media screen and (min-width: 641px) {
.txt4 {
	font-size: 21px;
}
}
.txt5 {
	width: 100%;
	text-align: center;
	line-height: 1.4;
	font-size: 7.2vw;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding-bottom: 15%;
	
	text-decoration: underline;
	text-decoration-thickness: 0.7em;
	text-decoration-color: #f9ec38;
	text-underline-offset: -0.25em;
	text-decoration-skip-ink: none;
}
@media screen and (min-width: 641px) {
.txt5 {
	font-size: 38px;
}
}
.txt6 {
	width: 100%;
	text-align: center;
	line-height: 2.3;
	font-size: 4.0vw;
	letter-spacing: 0.12em;
	margin-top: 7%;
	margin-bottom: 10%;
	font-feature-settings: "palt";
}
@media screen and (min-width: 641px) {
.txt6 {
	font-size: 20px;
}
}
.txt6 span {
	padding-bottom: 0.5%;
	background: url(../images/txt6_ul.webp) repeat-x 100% 100%;
	background-size: 100% 1px;
	white-space: nowrap;
}
.txt6 .ymark {
	text-decoration: underline;
	text-decoration-thickness: 1.2em;
	text-decoration-color: #f9ec38;
	text-underline-offset: -1em;
}
.txt7 {
	top: 11.5%;
	width: 100%;
	text-align: center;
	line-height: 1.23;
	font-size: 6.3vw;
	letter-spacing: 0.07em;
	padding-bottom: 15%;
	
	text-decoration: underline;
	text-decoration-thickness: 0.4em;
	text-decoration-color: #FFF;
	text-underline-offset: -0.3em;
	text-decoration-skip-ink: none;
}
@media screen and (min-width: 641px) {
.txt7 {
	font-size: 30px;
}
}
.txt8 {
	top: 74.5%;
	width: 100%;
	text-align: center;
	line-height: 1.8;
	font-size: 4.2vw;
	letter-spacing: 0.06em;
}
@media screen and (min-width: 641px) {
.txt8 {
	font-size: 20px;
}
}
.txt9 {
	top: 15.5%;
	width: 100%;
	text-align: center;
	line-height: 2.2;
	font-size: 4.2vw;
	letter-spacing: 0.13em;
	font-feature-settings: "palt";
	
	text-decoration: underline;
	text-decoration-thickness: 1em;
	text-decoration-color: #f9ec38;
	text-underline-offset: -0.9em;
	text-decoration-skip-ink: none;
}
@media screen and (min-width: 641px) {
.txt9 {
	font-size: 20px;
}
}
.txt10{
	top: 45%;
	text-align: center;
	width: 100%;
	font-size: 5.0vw;
	letter-spacing: 0.13em;
}
.txt10 span  {
	font-size: 8.1vw;
	text-decoration: underline;
	text-decoration-thickness: 0.15em;
	text-decoration-color: #f9ec38;
	text-underline-offset: 0.0em;
	text-decoration-skip-ink: none;
}
@media screen and (min-width: 641px) {
.txt10 {
	font-size: 21px;
}
.txt10 span  {
	font-size: 40px;
}
}

.txt11 {
	top: 52.5%;
	width: 100%;
	text-align: center;
	line-height: 1.8;
	font-size: 4.1vw;
	letter-spacing: 0.08em;
}
@media screen and (min-width: 641px) {
.txt11 {
	font-size: 20px;
}
}

.txt12 {
	top: 5.7%;
	width: 100%;
	text-align: center;
	font-size: 7.1vw;
	letter-spacing: 0.05em;
}
@media screen and (min-width: 641px) {
.txt12 {
	font-size: 34px;
}
}
.txt13 {
	top: 9.5%;
	width: 100%;
	text-align: center;
	line-height: 1.72;
	font-size: 4.1vw;
	letter-spacing: 0.13em;
	font-feature-settings: "palt";
}
@media screen and (min-width: 641px) {
.txt13 {
	font-size: 20px;
}
}
.txt13 span {
	padding-bottom: 0.5%;
	background: url(../images/txt6_ul.webp) repeat-x 100% 100%;
	background-size: 100% 1px;
	white-space: nowrap;
}

.txt14 {
	top: -0.3%;
	left: 18%;
	line-height: 1.35;
	font-size: 7.3vw;
	letter-spacing: 0.05em;
	font-feature-settings: "palt";
	
	text-decoration: underline;
	text-decoration-thickness: 0.6em;
	text-decoration-color: #f9ec38;
	text-underline-offset: -0.3em;
	text-decoration-skip-ink: none;
}
@media screen and (min-width: 641px) {
.txt14 {
	font-size: 36px;
}
}
.txt15 {
	top: 11.7%;
	left: 18%;
	font-size: 4.7vw;
	letter-spacing: 0.1em;
	font-feature-settings: "palt";
}
@media screen and (min-width: 641px) {
.txt15 {
	font-size: 21px;
}
}
.txt16 {
	top: 15.1%;
	left: 18%;
	font-size: 6.2vw;
	letter-spacing: 0.07em;

	padding-bottom: 5.8%;
	background: url(../images/txt16_ul.webp) repeat-x 100% 100%;
	background-size: 100% 4px;
	white-space: nowrap;
}
@media screen and (min-width: 641px) {
.txt16 {
	font-size: 28px;
}
}
.img_saito {
	top: 22.5%;
	width: 100%;
	text-align: center;
}
.img_saito img {
	width: 52.5%;
}
.btn_saito {
	top: 50.2%;
	width: 100%;
	text-align: center;
	transform: scale(1.0);
	transition:0.2s;
}
.btn_saito img {
	width: 58.0%;
}
.btn_saito:hover {
	transform: scale(1.03);
	transition:0.2s;
}

.txt17 {
	top: 56.2%;
	width: 100%;
	text-align: center;
	line-height: 1.7;
	font-size: 5.1vw;
	letter-spacing: 0.00em;
	padding-left: 0.5em;
}
@media screen and (min-width: 641px) {
.txt17 {
	font-size: 24px;
}
}


.txt18,.txt23,.txt28 {
	font-size: 4.7vw;
	letter-spacing: -0.02em;
}
.txt19,.txt24,.txt29 {
	font-size: 3.1vw;
	letter-spacing: 0.00em;
}
.txt20,.txt25,.txt30 {
	font-size: 3.5vw;
	line-height: 1.66;
	letter-spacing: 0.02em;
}
.txt21,.txt26,.txt31 {
	font-size: 4.6vw;
	line-height: 1.35;
	letter-spacing: 0.05em;
	text-decoration: underline;
	text-decoration-thickness: 1em;
	text-decoration-color: #f9ec38;
	text-underline-offset: -0.85em;
	text-decoration-skip-ink: none;
}
.txt22,.txt27,.txt32 {
	font-size: calc( var(--vw) * 3.2 );
	line-height: 1.75;
	letter-spacing: 0.04em;
}

.txt18 {
	top: 20.7%;
	left: 16%;
}
.txt19 {
	top: 24.9%;
	left: 16%;
	line-height: 1.66;
}
.txt20 {
	top: 45.5%;
	left: 17%;
}
.txt21 {
	top: 49.5%;
	left: 17%;
}
.txt22 {
	width: 70%;
	top: 58.2%;
	left: 17%;
}
.txt23 {
	top: 16.4%;
	left: 27%;
}
.txt24 {
	top: 20.4%;
	left: 27%;
	line-height: 1.8;
}
.txt25 {
	top: 40.8%;
	left: 14%;
	
}
.txt26 {
	top: 44.9%;
	left: 14%;
}
.txt27 {
	width: 70%;
	top: 53.7%;
	left: 14%;
}

.txt28 {
	top: 16.2%;
	left: 13.5%;
}
.txt29 {
	top: 19.8%;
	left: 15%;
	line-height: 1.9;
}
.txt30 {
	top: 38.2%;
	left: 17%;
}
.txt31 {
	top: 42.0%;
	left: 17%;
}
.txt32 {
	width: 70%;
	top: 50.4%;
	left: 17%;
}
@media screen and (min-width: 641px) {
.txt18,.txt23,.txt28 {
	font-size: 22px;
}
.txt19,.txt24,.txt29 {
	font-size: 15px;
}
.txt20,.txt25,.txt30 {
	font-size: 16px;
}
.txt21,.txt26,.txt31 {
	font-size: 22px;
}
.txt22,.txt27,.txt32 {
	font-size: 15px;
}
}

.txt33 {
	width: 100%;
	text-align: center;
	line-height: 1.8;
	font-size: 4.1vw;
	letter-spacing: 0.06em;
	margin-top: 7%;
}
.txt33 span {
	font-size: 5.7vw;
}
@media screen and (min-width: 641px) {
.txt33{
	font-size: 20px;
}
.txt33 span {
	font-size: 28px;
}
}

.balloon1 {
	top: 10.1%;
	left: 10.2%;
}
.balloon2 {
	top: 30.0%;
	left: 39.1%;
}
.balloon3 {
	top: 51.5%;
	left: 10.2%;
}
.balloon4 {
	top: 72.1%;
	left: 24.2%;
}
.balloon1,.balloon2,.balloon3,.balloon4 {
	font-size: 3.25vw;
	line-height: 1.55;
	letter-spacing: 0.115em;
	font-feature-settings: "palt";
}
.balloon1 span,.balloon2 span,.balloon3 span,.balloon4 span {
	font-size: 2.7vw;
	font-feature-settings: "palt";
}
@media screen and (min-width: 641px) {
.balloon1,.balloon2,.balloon3,.balloon4 {
	font-size: 16px;
}
.balloon1 span,.balloon2 span,.balloon3 span,.balloon4 span {
	font-size: 12.5px;
}
}


/*-----------------------------------
voice
-----------------------------------*/
.voices {
	position: relative;
	background-image:url("../images/conts16.webp");
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	aspect-ratio: 125 / 238;
	overflow: hidden;
	scrollbar-gutter: auto;
}
.voice1,.voice2 {
	width: 100%;
	position: absolute!important;
	top: 2.5%;
	text-align: center;
}
.voice1 {
	left: 0;
}
.voice1.act {
	animation: ActSlideL 0.7s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideL {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(-100%,0px);}
}
.voice1.act2 {
	animation: ActSlideL2 0.7s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideL2 {
    0% {transform: translate(-100%,0px);}
    100% {transform: translate(0,0px);}
}
.voice1.act3 {
	animation: ActSlideL3 0.7s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideL3 {
    0% {transform: translate(0,0px);}
    100% {transform: translate(100%,0px);}
}
.voice1.act4 {
	animation: ActSlideL4 0.7s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideL4 {
    0% {transform: translate(100%,0px);}
    100% {transform: translate(0,0px);}
}

.voice2 {
	right: -100%;
}
.voice2.act {
	animation: ActSlideR 0.7s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideR {
    0% {transform: translate(0,0px);}
    100% {transform: translate(-100%,0px);}
}
.voice2.act2 {
	animation: ActSlideR2 0.7s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideR2 {
    0% {transform: translate(-100%,0px);}
    100% {transform: translate(0,0px);}
}
.voice2.act3 {
	animation: ActSlideR3 0.7s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideR3 {
    0% {transform: translate(-200%,0px);}
    100% {transform: translate(-100%,0px);}
}
.voice2.act4 {
	animation: ActSlideR4 0.7s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideR4 {
    0% {transform: translate(-100%,0px);}
    100% {transform: translate(-200%,0px);}
}

.voice1 img,.voice2 img {
	width: 85%;
}

.name {
	width: 100%;
	position: absolute;
	top: 36%;
	font-size: 3.5vw;
	letter-spacing: 0.06em;
	font-feature-settings: "palt";
	z-index: 2;
}
@media screen and (min-width: 641px) {
.name {
	font-size: 19px;
}
}
.voice2 .name {
	top: 34.4%;
}
.comme {
	width: 73%;
	position: absolute;
	top: 52.2%;
	left: 13%;
	font-size: 3.3vw;
	line-height: 1.96;
	letter-spacing: 0.144em;
	text-align: justify;
	font-feature-settings: "palt";
	z-index: 2;
}
@media screen and (min-width: 641px) {
.comme {
	font-size: 16px;
}
}
.voice2 .comme {
	top: 49.7%;
}
.arr_l {
	width: 18%;
	position: absolute!important;
	top: 22.0%;
	left: 10%;
	transform: scale(1.0);
	transition:0.2s;
}
.arr_r {
	width: 18%;
	position: absolute!important;
	top: 22.0%;
	right: 10%;
	transform: scale(1.0);
	transition:0.2s;
}
.voice2 .arr_l,.voice2 .arr_r {
	top: 21.0%;
}
.arr_l:hover,.arr_r:hover  {
	transform: scale(1.05);
	transition:0.2s;
}
.kengaku a img:hover {
	transform: scale(1.02);
	transition:0.2s;
}


.kengaku {
	margin-bottom: 20%;
}
.kengaku a img {
	transform: scale(1.0);
	transition:0.2s;
}
.kengaku a img:hover {
	transform: scale(1.02);
	transition:0.2s;
}
/*-----------------------------------
Q&A
-----------------------------------*/
.faq .title {
	position: relative;
}
.faq .title p {
	position: absolute;
	top: 55.0%;
	width: 100%;
	text-align: center;
	font-size: 5.0vw;
	letter-spacing: 0.07em;
}
@media screen and (min-width: 641px) {
.faq .title p {
	font-size: 24px;
}
}
.qs {
	font-size: 3.4vw;
	line-height: 1.65!important;
	letter-spacing: 0.08em;
	font-feature-settings: "palt";
	
	background-image:url("../images/ico_q.webp");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 9.0%;
	
	position: relative;
	width: 90%;
	margin: 0 auto;
	padding: 5% 0 5% 11%
}
.qs:hover {
	cursor: pointer;
}
.as {
	font-size: 3.15vw;
	line-height: 1.85;
	letter-spacing: 0.09em;
	font-feature-settings: "palt";
	
	width: 90%;
	margin: 0 auto;
	padding-left: 11%;
	padding-bottom: 5%;
	display: none;
}
.opcls {
	position: absolute;
	top: 0;
	right: -1%;
	width: 6.5%;
	height: 100%;
	display: flex;
	align-items: center;
}
.opcls img {
	transform: rotate(0deg);
	transition:0.3s;
}
.opcls img.act_on {
	transform: rotate(180deg);
	transition:0.3s;
}
.exa {
	border-bottom: solid 1px #7f7f7f;
	width: 92%;
	margin: 0 auto;
}
.exa:last-child {
	margin: 0 auto 25% auto;
}
@media screen and (min-width: 641px) {
.qs {
	font-size: 17px;
}
.as {
	font-size: 16px;
}
}

/*-----------------------------------
back
-----------------------------------*/
.pc_back1 {
	width: 365px;
	position: fixed;

	left: 50%;
	bottom: 15%;
	margin-left: -558px;
}
.pc_back2 {
	width: 180px;
	position: fixed;

	right: 50%;
	bottom: 9%;
	margin-right: -373px;
}

/*-----------------------------------
Footer
-----------------------------------*/
footer {
	text-align: center;
	padding: 4% 0;
	background-color:#fff100;
}
@media screen and (max-width: 1180px) {
footer {
	padding: 4% 0 35% 0;
}
}

small {
	font-size: 2.2vw;
	letter-spacing: 0.12em;
}
@media screen and (min-width: 641px) {
small {
	font-size: 11px;
}
}

footer p {
	width: 66%;
	margin: 0 auto;
	padding: 9% 0 14% 0;
}
.contact {
	line-height: 0;
	position: fixed;
	bottom: 0;
	right: 0.5%;
	width: 405px;
	z-index: 99;
}
@media screen and (max-width: 640px) {
.contact {
	width: 54%;
}
}
.contact {
	transform: scale(1.0);
	transition:0.2s;
}
.contact:hover {
	transform: scale(1.02);
	transition:0.2s;
}

/*-----------------------------------
popup
-----------------------------------*/
.popup {
	background: rgba(0,0,0,0.85);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	z-index: 98;
	overflow-y: scroll;
	/*container-type: inline-size;*/
	scrollbar-width: none;
}
@media screen and (min-width: 641px) {
.popup {
	width: 480px;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
}

.pop_wrap {
	position: relative;
	line-height: 0;
}
.popup p {
	position: absolute;
}
.p_close {
	position: absolute;
	top: 6.4%;
	right: 15.0%;
	width: 10.0%;
	transform: scale(1.0);
	transition:0.2s;
}
.p_close:hover {
	cursor: pointer;
	transform: scale(1.05);
	transition:0.2s;
}

.p_title {
	top: 8.55%;
	left: 16.3%;
	font-size: 4.2vw;
	line-height: 1.8;
	letter-spacing: 0.11em;
	font-feature-settings: "palt";
}
.p_img_saito {
	top: 13.5%;
	width: 100%;
	text-align: center;
}
.p_img_saito img {
	width: 41.5%;
}
.p_name {
	top: 25.3%;
	left: 16.3%;
	font-size: 3.2vw;
	letter-spacing: 0.1em;
	font-feature-settings: "palt";
}
.p_name span {
	font-size: 4.8vw;
	padding-left: 0.7em;
}
.p_prof {
	top: 26.5%;
	left: 16.3%;
	font-size: 3.2vw;
	line-height: 1.4;
	letter-spacing: 0.10em;
	font-feature-settings: "palt";
}
.p_txt1,.p_txt2,.p_txt3 {
	left: 16.3%;
	width: 68%;
	line-height: 2.26;
	/*font-size: calc( var(--vw) * 3.5 );*/
	font-size: 3.4vw;
	letter-spacing: 0.12em;
	font-feature-settings: "palt";
}
.p_txt1,.pos1 {
	top: 31.7%;
}
.p_txt2,.pos2 {
	top: 52.1%;
}
.p_txt3,.pos3 {
	top: 65.0%;
}
.p_name2 {
	top: 79.0%;
	left: 16.3%;
	font-size: 3.2vw;
	font-feature-settings: "palt";
	letter-spacing: 0.08em;
}
.p_name2 span {
	font-size: 5.3vw;
	padding-left: 0.4em;
	letter-spacing: 0.06em;
}

.line-group {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.line {
	width: 68%;
	margin: 0 auto;
	background: url(../images/txt6_ul.webp) repeat-x 100% 100%;
	background-size: 100% 4%;
	white-space: nowrap;
}
.line::before {
  content: "　";
  font-size: 3.4vw;
  line-height: 2.26;
  color: transparent;
}


@media screen and (min-width: 641px) {
.p_title {
	font-size: 20.5px;
}
.p_name {
	font-size: 15px;
}
.p_name span {
	font-size: 21px;
}
.p_prof {
	font-size: 15px;
}
.p_txt1,.p_txt2,.p_txt3 {
	font-size: 17px;
	line-height: 2.26;
}
.p_name2 {
	font-size: 15px;
}
.p_name2 span {
	font-size: 26px;
}
.line::before {
  font-size: 17px;
}
}