html{height: 100%;font-size: 62.5%;}
body{
    margin: 0;
    padding: 0;
  	height: 100%;
	font-size:1.4rem;/* 14px*/
    line-height: 1.6;
	color: #000;
}
body>*{
    margin: 0;
    padding: 0;
}
/* 640 *//* ------- */
@media screen and (max-width: 640px){
    body{font-size: 2.0vw;}
}

header,footer{padding:1em 0;background-color:#60cfb5;}
footer{text-align: center;}
.service-page h1,.service-page h2,.service-page h3{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.service-page h2{font-size: 1.8em;}
.service-page h3{font-size: 1.4em;}
.service-page p,.service-page li{
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.service-page nav{margin: 0 auto;max-width: 840px;width: 90%;}
.service-page nav a{color:#000;overflow:hidden;outline:none;text-decoration:none;}
.service-page nav a:hover{color:#fff;}
.service-page section{margin: 0 auto 5em;max-width: 760px;width: 90%;}
.service-page a{color: #5bd0b5;overflow: hidden;outline: none;text-decoration: none;}
.service-page a:hover{color: #cf5e78;}
.service-page a img:hover{opacity: 0.8;}

.item_center{text-align: center;}
.notes{font-size: 0.8em;color: #999;}
.marker_ye{background: linear-gradient(transparent 70%, #f3c945 70%);}

.menu_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 1em;
    max-width: 840px;
    width: 90%;
}
.to_home{width: 50%;max-width: 340px;}
.to_server{width: 20%;max-width: 98px;}
.to_server img{width: 100%;}
.nav_row{display: flex;margin: 0;padding-left: 1em;}
.nav_row li{margin-right:3em;list-style: none;}
.mainvs_item{margin:0 auto 1em;max-width: 760px;width: 90%;}
.mainvs_item img{width: 100%;}
.mainvs_item video{max-width: 420px;width: 60%;}
#feature{
    margin-top: 4em;
    padding: 2em 0;
    max-width: none;
    width: auto;
    background-color: #cff1e9;
}
#feature h2{margin:1em auto;max-width: 760px;width: 90%;}
#feature ul{margin: 0 auto 1em;max-width: 760px;width: 90%;}
.feature_list{
    position: relative;
    box-sizing: border-box;
    margin-bottom: 2em;
    padding: 0em 3em 2em;
}
.feature_list::after{
  content:"";
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(200px, 35vw, 420px);
  height: clamp(200px, 35vw, 420px);
  background: url("./media/feature01.png") no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.feature_list > *{
  position: relative;
  z-index: 1;
  margin: 0.2em 0;
}
.feature_list_notes{margin-top: 3em;width: 40%;font-size: 0.8em;color: #999;list-style: none;}
.feature_detail{display: flex;justify-content: space-between;}
.feature_detail li{
    list-style: none;
    box-sizing: border-box;
    padding: 1em 1.5em;
    width: 32%;
    background-color: #fff;
    border-radius: 1vw;
}
.feature_detail h3{margin-top: 0;}
.feature_num{
    display: block;
    margin: 0;
    font-size: 2.6em;
    color: #cff1e9;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    font-style: normal;
}
@media screen and (max-width: 640px){
    .feature_list_notes{margin-top: 1.5em;width: 60%;}
    .feature_detail{display: block;}
    .feature_detail li{width: 90%;margin-bottom: 1em;}
    .feature_list{
        padding-bottom: clamp(6em, 40vw, 14em);
    }
    .feature_list::after{
        bottom: -1.5em;
        width: 75vw;
        height: 75vw;
        background-size: contain;
        opacity: 0.4;
    }
}
.howto_steps{
    --accent: #63d1c0;     /* 丸と線の色 */
    --circle: 64px;       /* 丸の直径 */
    --line: 4px;          /* 縦線の太さ */
    --gap: 18px;          /* 丸と本文の間隔 */
    --block-gap: 28px;    /* 各ステップの縦間隔 */

    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    width: 90%;
}
.howto_step{
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: var(--circle) 1fr;
    column-gap: var(--gap);
    padding-bottom: var(--block-gap);
}
.howto_step::before{
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(var(--circle) / 2 - var(--line) / 2);
    top: 0;
    bottom: 0;
    width: var(--line);
    background: var(--accent);
    border-radius: 999px;
}
.howto_step:last-child::before{display: none;}
.howto_step::after{
    position: relative;
    z-index: 1;
    counter-increment: step;
    content: counter(step);
    grid-column: 1;
    grid-row: 1;
    width: var(--circle);
    height: var(--circle);
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}
.howto_steps{counter-reset: step;}
@media screen and (max-width: 640px){
    .howto_steps{
        --circle: 42px;
        --line: 3px;
        --gap: 10px;
    }
    .howto_step::after{font-size: 16px;}
}
.howto_step_content{
    grid-column: 2;
    padding-top: 2px;
}
.howto_step_text{padding-left: 1em;}
.howto_step_list{padding-left: 1em;list-style: none;}
.howto_btn{margin: 0 auto;text-align: center;}
.howto_btn a{
    display: inline-block;
    padding: 1em 0;
    max-width: 320px;
    width: 60%;
    position: relative;
    z-index: 2;
    color: #fff;
	background-color: #cf5e78;
    border-radius: 0.5vw;
}
.howto_btn a::before,.howto_btn a::after{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.howto_btn a,.howto_btn a::before,.howto_btn a::after{
	box-sizing: border-box;
	transition: all .3s;
}
.howto_btn a::after {top: -100%;width: 100%;height: 100%;}
.howto_btn a:hover::after{top: 0;color: #fff;background-color: #5bd0b5;}
.price_show{
    margin: 0 auto;
    max-width: 720px;
    width: 90%;
}
.price_show h3{
    margin: 0;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.price_show p{margin: 0;}
.price_lg{display: inline-block;margin: 0 0.3em;font-size: 1.6em;}
.price_example{
    margin: 2em auto 1em;
    max-width: 720px;
    width: 90%;
    box-sizing: border-box;
    background-color: #60cfb5;
    border: 3px solid #60cfb5;
    border-radius: 1vw;
    overflow: hidden;
}
.price_example h3{margin: 0.5em 1em;color: #fff;}
.price_example ul{
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    background-color: #fff;
}
.price_example li{
    margin: 0;
    padding: 0;
    width: 46%;
    list-style: none;
    display: flex;
    flex-direction: column;
}
.price_example h4{
    margin: 0.5em auto 1.5em;
    padding: 0.5em;
    width: calc(100% - 1em);
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    background-color: #cff1e9;
}
.price_example dl{margin-bottom: 1em;}
.example_subtotal{margin-top: auto;margin-bottom: 1em;font-size: 1.4em;text-align: right;}
.example_title_sub{display: inline-block;margin-left: 1em;font-size: 0.8em;}
@media screen and (max-width: 640px){
    .price_example ul{display: block;}
    .price_example li{
        margin: 0 auto;
        width: 90%;
    }
}
.box_messege{
    margin: 2em auto;
    padding: 1em;
    max-width: 540px;
    width: 80%;
    text-align: center;
    border: 2px solid #999;
    border-radius: 6px;
}
.box_messege_alert{
    margin: 2em auto;
    padding: 1em;
    max-width: 540px;
    width: 80%;
    color: red;
    font-weight: bold;
    text-align: center;
    border: 2px solid red;
    border-radius: 6px;

}
.to_support{margin: 3em auto;width: 40%;max-width: 200px;}
.to_support img{width: 100%;}

.service-flow h1{margin: 2em auto;text-align: center;}
.flow_items{margin: 0 auto 5em;padding: 0;}
.flow_item{
    position: relative;
    margin: 0 auto 2em;
    padding: 1em;
    max-width: 720px;
    width: 90%;
    box-sizing: border-box;
    border-radius: 1vw;
    background-color: #fff;
    border: 2px solid #60cfb5;
    box-shadow: 5px 5px #cff1e9;
    list-style: none;
}
.flow_item:not(:last-child)::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -32px;
    transform: translateX(-50%);
    width: 48px;
    height: 28px;
    background: url("./media/arrow01.svg") no-repeat center / contain;
}
.flow_item_title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.flow_item_title h2{margin: 0;margin-left: 0.5em;}
.flow_item_step{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #63d1c0;
    color: #fff;
    line-height: 1;
}
.flow_item_step span{
    display: inline-block;
    margin-bottom: -0.2em;
    padding-top: 0.2em;
    font-size: 1.8em;
}
.flow_item_chip{
    margin-left: auto;
    padding: 0.5em 1em;
    background-color: #e199aa;
    color: #fff;
}
.flow_item_text{
    margin: 1em auto;
    max-width: 640px;
    width: 90%;
}
.flow_item_area{
    margin: 1em auto;
    padding: 1em;
    max-width: 640px;
    width: 90%;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
}
.flow_item_img{margin: 2em auto 1em;width: 40%;max-width: 200px;}
.flow_item_img img{width: 100%;}
@media screen and (max-width: 640px){
    .flow_item{margin-bottom: 3em;}
    .flow_item:not(:last-child)::after{
        width: 40px;
        height: 24px;
        bottom: -28px;
    }
    .flow_item_step{
        width: 42px;
        height: 42px;
    }
}
.flow_price{
    margin: 0 auto 5em;
    padding: 2em 0;
    background-color: #cff1e9;
}
.flow_price h2{margin:0 auto 1em;max-width: 760px;width: 90%;}
.flow_price ul{margin: 0 auto;max-width: 720px;width: 90%;list-style-type: square;}
.flow_price li{margin: 2em auto;}
.flow_price li:last-child{margin-bottom: 0;}
.flow_price h3{margin: 0;}