@charset "utf-8";
/* CSS Document */
/*all*/
*, *:before, *:after {
    box-sizing: border-box;
    }
body {
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', "Century Gothic", sans-serif!important;
    color: #000;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
p {
    line-height: 1.6;
    word-wrap: break-word;
}
img{
    display: inline-block;
    max-width: 100%;
    text-align: center;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
}

/*common*/
/*pc・sp responsive*/
@media screen and (max-width:768px){
    .sp_ds{
        display: block;
    }
    .pc_ds{
        display: none;
    }
}
@media screen and (min-width:768px){
    .sp_ds{
        display: none;
    }
    .pc_ds{
		display: block;
    }
}

/*title*/
h2 {
    margin: 0;
}
.ttl {
    padding: 2% 0;
    text-align: center;
    background-color: #0036b2;
}
.ttl img {
    width: 60%;
    margin: 0 auto;
    text-align: center;
}
/*content*/
.content_ss, .content_s, .content_m, .content_l {
    display: block;
    padding: 2%;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    box-sizing:border-box;
}
.content_ss {
    max-width: 700px;
}
@media screen and (max-width:800px){
    .content_ss {
        width: 90%;
        padding: 4%;
    }
}
.content_s {
    max-width: 900px;
}
@media screen and (max-width:1000px){
    .content_s {
        width: 90%;
        padding: 2% 4%;
    }
}
.content_m {
    max-width: 1000px;
}
@media screen and (max-width:1200px){
    .content_m {
        width: 90%;
        padding: 2% 4%;
    }
}
.content_l {
    max-width: 1200px;
}
@media screen and (max-width:1300px){
    .content_l {
        width: 90%;
        padding: 2% 4%;
    }
}
@media screen and (max-width: 768px){
.content_ss, .content_s, .content_m, .content_l {
        padding: 8% 0;
    }
}

/*decoration*/
.teL {
    text-align: left;
}
.teR {
    text-align: right;
}
.marker {
    background: rgba(0, 0, 0, 0)linear-gradient(transparent 70%, #fff600 0%)repeat scroll 0 0;
}
.fcW {
    color: #fff;
}

/*header*/
header {
    display: flex;
    width: 100%;
    margin: auto;
    z-index: 999;
    padding: 0.5% 0;
    background: #fff;
    font-size: 0.9em;
    align-items: center;
    justify-content: space-between;
}
header .logo {
    width: 70%;
    padding: 0 0 0 1%;
}
header .h_cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    
}
header .h_cta img {
    width: 90%;
    padding: 0 3% 0 0;
}
@media screen and (max-width:1200px){
    header .h_cta {
        width: 30%;
    }
    header .h_cta img {
        width: 95%;
    }
}
@media screen and (max-width:768px){
    header {
        padding: 2% 0;
    }
    header .h_cta {
        width: 55%;
    }
    header .logo {
        width: 40%;
    }
}

/*mv*/
.mv_pc {
    display: block;
    width: 100%;
    text-align: center;
    background-image: url(../img/mv_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;

}
.mv_pc img {
    margin: 0 auto;
    padding: 1% 1% 0 1%;
    max-width: 1100px;
    width: 100%;
}
.mv_bottom {
    background-color: #0036b2;
}
@media screen and (max-width:1200px){
    .mv_pc img {
        width: 80%;
    }
}
@media screen and (max-width:768px){
    .mv_bottom .content_m {
        padding: 6% 0 6% 3%;
    }
}

/*form*/
.form {
    background-color: #e9f5ff;
    padding: 0 0 4% 0;
}
.form .content_s {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 5px 5px 8px 1px rgba(0, 140, 255, 0.2);
    text-align: center;
}

/*cta*/
/*.cta_top {
    background-color: #e9f5ff;
}
.cta_top .content_s {
    padding: 3% 2% 0;
}
.cta_top .content_s img {
    padding: 0;
}*/
.cta img {
    padding: 0 0 2% 0;
}
.cta p {
    font-size:min(4vw,23px);
    font-weight: bold;
    line-height: 1.8;
    margin: 0 0 1% 0;
}
.cta_demo {
    position: relative;
    display: inline-block;
    padding: 0 3%;
}
.cta_demo:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 3px;
    transform: rotate(-25deg);
}
        
.cta_demo:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 3px;
    transform: rotate(25deg);
}
@media screen and (max-width:768px){
    .cta_demo {
        padding: 0 7%;
    }
}

/*problem*/
.problem {
    background-color: #feffde;
}
.problem .content_m {
    padding-bottom: 0;
}
.problem .ttl {
    padding: 2% 0;
}
.problem .ttl img {
    width: 60%;
}
@media screen and (max-width:768px){
    .problem .ttl {
        padding: 4% 0;
    }
    .problem .ttl img {
        width: 90%;
    }
    .problem .content_m {
        padding: 4% 0 0;
    }
}

/*reason*/
.reason_top {
    background: linear-gradient(180deg, #098cf1, #0036b2);
}
.reason .ttl {
    background-color:transparent !important;
}
.list {
    margin: 0 auto;
    display: flex;
    align-items: end;
    justify-content: center;
}
.list img {
    min-width: 0;
}

.reason_bottom {
    background: linear-gradient(180deg, #098cf1, #046fde);
}
.reason_bottom .content_l {
    padding: 0 1% 0;
    z-index: 10;
}
.reason_bottom .content_l .list img {
    padding: 0 15px 0;
    filter: drop-shadow(5px 10px 5px rgba(0, 62, 124, 0.5));
}
.txt {
    display: block;
    margin: 4% auto 0;
    text-align: center;
    width: 65%;
}
@media screen and (max-width:768px){
    .reason_top .ttl {
    padding: 5% 0;
    }
    .reason_top .ttl img, .reason_bottom .ttl img {
        width: 95%;
    }
    .list {
    flex-direction: column;
    align-items: center;
    }
    .reason_bottom {
        padding: 8% 0 0 0;
    }
    .reason_bottom .content_l .list img {
        padding: 3% 0;
    }
    .txt {
        width: 90%;
    }
}


/*message*/
.message {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    background-image: url(../img/bg_message.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
.arrow {
    position: absolute;
    top: 0;
    z-index: 0;
}
.arrow img {
    width: 100% !important;
}
.message .content_m {
    padding: 11% 1% 0 1%;
}
.message .content_m .list img {
    filter: drop-shadow(5px 10px 5px rgba(0, 126, 255, 0.5));
}


/*feature*/
.feature_top {
    background-color: #72c8ff;
}
.feature .ttl img {
    width: 40%;
}
.feature_top .content_m .list {
    flex-wrap: wrap;
}
.feature_top .content_m .list img {
    width: calc(33% - 1%);
    padding: 1%;
    filter: drop-shadow(5px 10px 5px rgba(0, 126, 255, 0.5));
}
.feature_bottom {
    background-color: #007eff;
    position: relative;
}
.feature_bottom .content_m {
    padding: 5% 1% 2% 1%;
}
.feature_bottom .arrow {
    position: absolute;
    top: -5%;
    left: 50%;
    z-index: 0;
}
@media screen and (max-width:768px){
    .feature .ttl {
        padding: 4% 0;
    }
    .feature .ttl img {
        width: 90%;
    }
    .feature_top .content_m {
        margin: 0 auto;
        padding: 5% 0 12%;
    }
    /*.feature_top .content_m .list {
        width: 105%;
    }*/
    .feature_top .content_m .list img {
        width: 100%;
        padding: 2% 0; 
    }
    .feature_bottom .arrow {
        top: -8%;
        left: 50%;
    }
    .feature_bottom .arrow img {
        width: 45% !important;
    }
    .feature_bottom .content_m {
        padding: 8% 0;
    }

}


/*example*/
.example {
    position: relative;
    background-color: transparent;
    background-image: radial-gradient(#9ed5ff 2px, transparent 2px);
    background-size: 15px 15px;
}
.example .content_l {
    padding: 4% 2%;
}
.example .arrow {
    position: absolute;
    top: 0;
    left: 48%;
    z-index: 0;
}
.example .arrow img {
    width: 50% !important;
}
.example_top {
    margin: 0 auto 1%;
}
.example_top img {
    width: 70%;
    margin: 0 auto;
}
.example .content_l .list {
    flex-wrap: wrap;
}
.example .content_l .list img {
    width: calc(50% - 3%);
    padding: 1.5%;
    filter: drop-shadow(5px 10px 3px rgba(0, 140, 241, 0.2));
}
@media screen and (max-width:768px){
    .example {
        background-color: transparent;
        background-image: radial-gradient(#9ed5ff 1px, transparent 1px);
        background-size: 8px 8px;
    }
    .example .content_l {
        padding: 11% 2% 4%;
    }
    .example .arrow {
        left: 44%;
    }
    .example .arrow img {
        width: 30% !important;
    }
    .example_top {
        margin: 0 auto 3%;
    }
    .example_top img {
        width: 100%;
    }
    .example .content_l .list img {
        width: 100%;
        padding: 3% 1%;
        filter: drop-shadow(5px 5px 3px rgba(0, 140, 241, 0.2));
    }

}


/*flow*/
.flow {
    background: linear-gradient(180deg, #bbe5ff, #fff);
}
.flow .ttl {
    background-color: transparent;
    padding: 2% 0 0;
}
.flow .ttl img {
    width: 35%;
}
.flow .content_s img {
    padding: 10px 0;
}
.flow .content_ss {
    padding: 0 2% 3% 2%;
}

@media screen and (max-width:768px){
    .flow .ttl {
        padding: 8% 0 0;
    }
    .flow .ttl img {
        width: 90%;
    }
    .flow .content_s {
        padding: 0 0 5% 0;
    }
    .flow .content_ss {
        padding: 0 0 8% 0;
    }
}


/*voice*/
.voice {
    background-color: #56aaff;
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #3498ff calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #3498ff calc(100% - 1px));
    background-size: 15px 15px;
    background-repeat: repeat;
    background-position: center center;
}
.voice .ttl {
    background-color: transparent;
    padding: 3% 0 0;
}
.voice .ttl img {
    width: 35%;
}
.voice .content_m img {
    padding: 15px 0;
}
@media screen and (max-width:1200px){
    .voice .ttl img {
        width: 85%;
    }
}
@media screen and (max-width:768px){
    .voice .ttl {
        padding: 8% 0 0;
    }
    .voice .content_m {
        padding: 4% 0 8%;
    }
    .voice .content_m img {
        padding: 7px 0;
    }
}

/*プライバシーポリシー*/
.fs_ss {
    font-size: min(12px,14px);
}
.policy_box  {
    background-color: #ececec;
    /*border: 1px solid #b3b3b3;*/
    border-radius: 5px;
    margin: 0 auto 4%;
}
.scroll{
    height: 200px;
    overflow: auto;
    padding: 0 10px 0 0;
    text-align:justify;
    overflow-y: scroll;
}
@media screen and (max-width:768px){
    .policy_box  {
        padding: 3% 3% 3% 5%;
        margin: 0 auto 6%;
    }
}

.foam_lin{
    margin: 2% auto 4%;
    font-size: 14px;
}
.foam_lin a{
    color: #aaa;
}

footer {
    background-color: #002eb2;
}
footer p{
    color: #fff;
    font-size:min(4vw,16px);
}

/*shop.htmlの記述*/
.shop_contents{
    max-width: 700px;
    margin: 3% auto;
    padding: 5% 3%;
}
.shop_contents h1{
    margin: 0 auto 5%;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: #0036b2;
}
.shop_contents table{
    width: 100%;
    margin: 0 auto;
}
.shop_contents table tr{
    line-height: 1.4;
}
.shop_contents table th , .shop_contents table td{
    padding: 2%;
    vertical-align: middle;
}
.shop_contents table th{
    width: 20%;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    background-color: #046fde;
    color: #fff;
    font-weight: bold;
}
.shop_contents table td{
    width: 80%;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    background-color: #e9f5ff;
}
.shop_contents table td span{
    font-size: 12px;
    color: #7d7d7d;
}
@media screen and (max-width:768px){
.shop_contents{
    margin: 5% auto 10%;
}
.shop_contents table th , .shop_contents table td{
    padding: 5% 3%;
}
.shop_contents table th{
    width: 30%;
}
.shop_contents table td{
    width: 70%;
}
}