/* CSS Document */
html {
  scroll-behavior: smooth;
}

body {
    background: #f0ebe7;
}

img {display:block; width:100%;}

p {font-feature-settings:"palt" 1; text-align: justify;}

main {
  width:100%;
  max-width:430px;
  height:auto;
  margin:0 auto;
  background: #f0ebe7;
}

.hero {
  width:100%;
  height:calc(100vw*1.3333);
  max-height:574px;
  margin:70px auto 0;
  background:#4f678d;
}

.hero h1 {
  width:100%;
  object-fit: contain;
  margin:0 auto;
}

.intro {
    background:#4f678d;
    width:100%;
    margin:0;
}

.intro h2,.intro p {
  margin:0 auto;
  color:#f0ebe7;
}

.intro h2 {
    text-align:center;
    margin:0 auto 25px;
    line-height:2rem;
    padding-top:50px;
}

.intro p {
    margin-bottom:50px;
    width:90%;
}

.intro picture {
    width:100%;
    object-fit: contain;
}

.point,.feature {
    margin-bottom:100px;
}

.point h2,.about_feature h2 {
    color:#4f678d;
    text-align:center;
    line-height:2rem;
    margin:0 auto 25px;
}

.point ul {
    width:90%;
    margin:0 auto 50px;
    display:flex;
    flex-flow:column nowrap;
    gap:20px;
}

.point object {
    width:100%;
    height:calc(100vw*0.5625);
    max-height:230px;
}

.point object img {
    width:90%;
    object-fit: contain;
}

.feature h2,.recline>h2 {
    width:100%;
    margin-bottom:25px;
}

.feature h2:before,.recline h2:before,.color h2:before {
	content: " ";
	margin-top: -80px;
	height: 80px;
	display: block;
	visibility: hidden;
}

.intro_feature {
    display:flex;
    flex-flow: column nowrap;
    width:90%;
    margin:0 auto 50px;
}

.intro_feature img {
    background: #FFF;
    width:100%;
    object-fit: contain;
    padding:20px 20px 0;
    border-radius: 30px;
    margin:0 auto 10px;
}

.intro_feature p {
    width:100%;
}

.about_feature {
    display:flex;
    flex-flow:column nowrap;
    width:90%;
    margin:0 auto 25px;
}

.about_feature p {
    margin-bottom:25px;
    font-size:0.9rem;
    line-height:1.2rem;
}

.note {
    width:90%;
    margin:0 auto 50px;
    padding:5%;
    border-radius: 20px;
    background:#FFF;
    display:flex;
    flex-flow:row wrap;
    gap:3%;
    align-items: start;
}

.note img {
    width:35%;
    object-fit: contain;
}

.note p {
    width:62%;
    font-size:0.9rem;
    line-height:1.2rem;
}

.note span {
    width:100%;
    font-size:0.8rem;
    line-height:1rem;
    text-align:justify;
    margin-top:10px;
}

.note table {
    width:100%;
    border:2px solid #5f5f5f;
    border-collapse:collapse;
    font-size:0.8rem;
    line-height:1rem;
    margin-top:10px;
}

.note table th,.note table td {
    border:1px solid #5f5f5f;
    padding:2%;
    text-align:center;
}

.note table th:nth-child(1),.note table td:nth-child(1),.note table td:nth-child(4) {
    background:#e5e5e6;
}

.note table th:nth-child(2) {
    background:#5f5f5f;
    color:#FFF;
    padding:10px 0;
}

.note table th:nth-child(3) {
    background:#4f678d;
    color:#FFF;
    padding:10px 0;
}

.note table td:nth-child(3),.note table td:nth-child(6) {
    color:#4f678d;
}

.note table td p {
    font-size:1.5rem;
    text-align:center;
    margin:20px auto;
}

.func {
    width:90%;
    margin:50px auto 100px;
}

.func h3 {
    color:#4f678d;
    text-align: center;
    margin-bottom:10px;
}

.func ul {
    display:flex;
    flex-flow:row wrap;
    gap:5%;
    width:100%;
}

.func ul li {
    display:flex;
    flex-flow: column nowrap;
    gap:10px;
    width:47.5%;
}

.func ul li p {
    text-align:center;
    font-size:0.75rem;
    line-height:1.2rem;
}

.func ul li p span {
    font-weight:bold;
    font-size:1rem;
    line-height:1.4rem;
}

.func ul li:nth-child(3) {
    margin:0 26.25%;
}

.recline .note {
    flex-flow:column nowrap;
}

.recline .note img,.recline .note p {
    width:100%;
}

.recline .note img {
    margin-bottom:10px;
}

.color p {
    width:90%;
    margin:25px auto;
}

.color ul {
    width:90%;
    margin:0 auto;
    display:flex;
    flex-flow: row wrap;
    justify-content: space-around;
    gap:5%;
}

.color ul li {
    width:47.5%;
    display:flex;
    flex-flow:column nowrap;
}

.color ul li p {
    font-size:0.75rem;
    line-height:0.8rem;
    text-align:left;
    margin-top:-15px;
    margin-left:0;
}

.spec {
    margin-bottom:25px;
}

.spec h2 {
    text-align:left;
    line-height:2rem;
    width:90%;
    margin:0 auto;
    border-bottom: 1px solid #777;
}

.spec ul {
    display:flex;
    flex-flow:column wrap;
    width:90%;
    margin:0 auto;
}

.spec ul li {
    border-bottom: 1px solid #777;
    line-height:2rem;
    margin:5px 0;
}

.btn ul {display:flex; flex-flow:column nowrap; width:80%; justify-content: space-between; gap:10px; margin:0 auto 100px;}
.btn ul li {width:100%;}
.btn ul li a { display:block; width:100%; background-color:#426E90; border-radius:50px; padding:25px; text-align:center; color:white;}


@media (min-width:431px) and (max-width:640px) { /* TAB */
	
}

@media screen and (min-width:641px) and (max-width:1024px) { /* PC */
	main {
  max-width:580px;
}

.hero {
  height:calc(100vw*0.336);
  min-height:345px;
  margin:60px auto 0;
}

.intro h2 {
    font-size:1.4rem;
    padding-top:50px;
}

.intro p {
    font-size:1rem;
    line-height:1.5rem;
    margin-bottom:50px;
    width:80%;
}

.point,.feature {
    margin-bottom:100px;
}

.point h2,.about_feature h2 {
    font-size:1.4rem;
    line-height:1.8rem;
    margin:0 auto 25px;
}

.point ul {
    width:80%;
    margin:0 auto 50px;
    flex-flow:column wrap;
    gap:25px;
}

.point ul li {
    width:100%;
}

.point object {
    max-height:320px;
}

.feature h2,.recline>h2 {
    width:100%;
    margin-bottom:25px;
}

.feature h2:before,.recline h2:before,.color h2:before {
	content: " ";
	margin-top: -80px;
	height: 80px;
	display: block;
	visibility: hidden;
}

.intro_feature {
    display:flex;
    flex-flow: column nowrap;
    width:80%;
    margin:0 auto 50px;
}

.intro_feature img {
    width:100%;
}

.intro_feature p {
    width:100%;
    font-size:1rem;
    line-height:1.4rem;
    margin:0 auto;
}

.about_feature {
    display:flex;
    flex-flow:column wrap;
    width:80%;
    margin:0 auto 50px;
}

.about_feature div:first-child {
    width:100%;
}

.about_feature div:last-child {
    width:100%;
}

.about_feature p {
    font-size:0.9rem;
    line-height:1.4rem;
    width:100%;
    margin:0 auto 25px;
}

.about_feature img {
    width:100%;
    margin:0 auto;
}

.note {
    width:90%;
    margin:0 auto;
    padding:5%;
    align-items:center;
}

.note img {
    width:35%;
    object-fit: contain;
}

.note p {
    width:62%;
    font-size:0.9rem;
    line-height:1.4rem;
}

.note span {
    width:100%;
    font-size:0.8rem;
    line-height:1rem;
    text-align:justify;
    margin-top:10px;
}

.recline .note {
    flex-flow:row wrap;
    margin-bottom:100px;
}

.recline .note img {
    width:55%;
}

.recline .note p {
    width:40%;
    margin:0 0 0 auto;
}

.recline .note img {
    margin-bottom:10px;
}

.note table {
    width:100%;
    border:2px solid #5f5f5f;
    border-collapse:collapse;
    font-size:1rem;
    line-height:1.5rem;
    margin-top:20px;
}

.note table th,.note table td {
    border:1px solid #5f5f5f;
    padding:2%;
    text-align:center;
}

.note table th:nth-child(1),.note table td:nth-child(1),.note table td:nth-child(4) {
    background:#e5e5e6;
}

.note table th:nth-child(2) {
    background:#5f5f5f;
    color:#FFF;
    padding:10px 0;
}

.note table th:nth-child(3) {
    background:#4f678d;
    color:#FFF;
    padding:10px 0;
}

.note table td:nth-child(3),.note table td:nth-child(6) {
    color:#4f678d;
}

.note table td p {
    font-size:2rem;
    text-align:center;
    margin:20px auto!Important;
}

.func {
    width:80%;
    margin:50px auto 100px;
}

.func h3 {
    margin-bottom:10px;
    font-size:1.2rem;
    line-height:1.4rem;
}

.func ul {
    display:flex;
    flex-flow:row wrap;
    gap:5%;
    width:100%;
    justify-content: space-around;
}

.func ul li {
    gap:10px;
}

.func ul li p {
    font-size:0.9rem;
    line-height:1.2rem;
}

.func ul li p span {
    font-size:1rem;
    line-height:1.8rem;
}

.color p {
    width:80%;
    margin:25px auto;
    font-size:1rem;
    line-height:1.5rem;
}

.color ul {
    width:100%;
    margin:0 auto;
    display:flex;
    flex-flow: row wrap;
    justify-content: start;
    gap:5%;
}

.color ul li {
    width:45%;
    display:flex;
    flex-flow:column nowrap;
}

.color ul li p {
    font-size:1rem;
    line-height:1.2rem;
    text-align:left;
    margin-top:-25px;
    margin-left:0;
}

.spec {
    margin-bottom:25px;
}

.spec h2 {
    line-height:2rem;
    width:100%;
}

.spec ul {
    width:100%;
}

.spec ul li {
    line-height:2rem;
    margin:5px 0;
}

.btn ul {gap:10px; margin:0 auto 100px;}
.btn ul li {width:100%;}
}

@media screen and (min-width:1025px) { /* HIPC */
main {
  max-width:1200px;
}

.hero {
  height:calc(100vw*0.586);
  max-height:712px;
  margin:100px auto 0;
}

.intro h2 {
    font-size:2rem;
    padding-top:100px;
}

.intro p {
    font-size:1.2rem;
    line-height:2rem;
    margin-bottom:50px;
    width:55%;
}

.point,.feature {
    margin-bottom:200px;
}

.point h2,.about_feature h2 {
    font-size:2rem;
    line-height:2.4rem;
    margin:0 auto 50px;
}

.point ul {
    width:100%;
    margin:0 auto 100px;
    flex-flow:row wrap;
    justify-content: space-around;
    gap:25px;
}

.point ul li {
    width:47.5%;
    margin-bottom:10px;
}

.point object {
    max-height:680px;
}

.feature h2,.recline>h2 {
    width:100%;
    margin-bottom:25px;
}

.feature h2:before,.recline h2:before,.color h2:before {
	content: " ";
	margin-top: -150px;
	height: 150px;
	display: block;
	visibility: hidden;
}

.intro_feature {
    display:flex;
    flex-flow: row nowrap;
    align-items: center;
    width:90%;
    margin:0 auto 100px;
}

.intro_feature img {
    width:57.5%;
}

.intro_feature p {
    width:90%;
    font-size:1.2rem;
    line-height:2rem;
    margin:0 auto 0 5%;
}

.about_feature {
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    width:90%;
    margin:0 auto 100px;
}

.about_feature div:first-child {
    width:40%;
}

.about_feature div:last-child {
    width:60%;
}

.about_feature h2 {
    text-align:left;
}

.about_feature p {
    font-size:1rem;
    line-height:1.8rem;
    width:90%;
    margin:0 auto 50px 0;
}

.about_feature img {
    width:100%;
    margin:0 auto;
}

.note {
    width:60%;
    margin:0 auto 50px;
    padding:2.5%;
    align-items:center;
}

.note img {
    width:35%;
    object-fit: contain;
}

.note p {
    width:62%;
    font-size:1rem;
    line-height:1.8rem;
}

.note span {
    width:100%;
    font-size:0.8rem;
    line-height:1rem;
    text-align:justify;
    margin-top:10px;
}

.recline .note {
    flex-flow:row wrap;
    margin-bottom:100px;
}

.recline .note img {
    width:55%;
}

.recline .note p {
    width:40%;
    margin:0 0 0 auto;
}

.recline .note img {
    margin-bottom:10px;
}

.note table {
    width:100%;
    border:2px solid #5f5f5f;
    border-collapse:collapse;
    font-size:1rem;
    line-height:1.5rem;
    margin-top:20px;
}

.note table th,.note table td {
    border:1px solid #5f5f5f;
    padding:2%;
    text-align:center;
}

.note table th:nth-child(1),.note table td:nth-child(1),.note table td:nth-child(4) {
    background:#e5e5e6;
}

.note table th:nth-child(2) {
    background:#5f5f5f;
    color:#FFF;
    padding:10px 0;
}

.note table th:nth-child(3) {
    background:#4f678d;
    color:#FFF;
    padding:10px 0;
}

.note table td:nth-child(3),.note table td:nth-child(6) {
    color:#4f678d;
}

.note table td p {
    font-size:2rem;
    text-align:center;
    margin:20px auto!Important;
}

.func {
    width:90%;
    margin:100px auto 200px;
}

.func h3 {
    margin-bottom:20px;
    font-size:1.5rem;
    line-height:2.2rem;
}

.func ul {
    display:flex;
    flex-flow:row wrap;
    gap:5%;
    width:100%;
    justify-content: space-around;
}

.func ul li {
    gap:20px;
    width:30%;
}

.func ul li p {
    font-size:1rem;
    line-height:1.8rem;
}

.func ul li p span {
    font-size:1.5rem;
    line-height:2.2rem;
}

.func ul li:nth-child(3) {
    margin:0 0;
}

.color p {
    width:60%;
    margin:50px auto;
    font-size:1.2rem;
    line-height:2rem;
}

.color ul {
    width:90%;
    margin:0 auto;
    display:flex;
    flex-flow: row wrap;
    justify-content: start;
    gap:5%;
}

.color ul li {
    width:21.25%;
    display:flex;
    flex-flow:column nowrap;
}

.color ul li p {
    font-size:1rem;
    line-height:1.2rem;
    text-align:left;
    margin-top:-15px;
    margin-left:0;
}

.spec {
    margin-bottom:25px;
}

.spec h2 {
    line-height:2rem;
    width:60%;
}

.spec ul {
    width:60%;
}

.spec ul li {
    line-height:2rem;
    margin:5px 0;
}

.btn ul {display:flex; flex-flow:row nowrap; width:60%; gap:10px; margin:0 auto 100px;}
.btn ul li {width:50%;}
}