@charset "utf-8";



/* 202309 */

a.campaign-pdf {
    width:80%;
    max-width:740px;
    margin:0 auto 80px;
    display:block;
    transition: .2s;
}
a.campaign-pdf img {
    width:100%;
}
a.campaign-pdf:hover {
    opacity: .6;
}



/* main */

.main {
    width:100%;
    margin: 0 auto;
    padding:80px 0;
    background:#f5f5f5;
}
.main > div {
    width:100%;
    max-width:1280px;
    margin: 0 auto;
    position: relative;
}
.main > div > img {
    max-width:100%;
    margin: 30px auto 70px;
    display: block;
    border-radius: 10px;
}
.main > div > p {
    margin: 0 auto;
    font-size: 2rem;
    text-align: center;
    color:#575757;
}
.main > div > p small {
    font-size:1.2rem;
}
.main p.topcopy {
    width:100%;
    margin: 0 auto 50px;
    font-size: 1.8rem;
}

.main > div > div {
    width:100%;
    max-width:900px;
    margin: 0 auto 50px !important;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
.main > div > div > img {
    width:50%;
}
.main > div > div > div h2 {
    width:100%;
    margin: 20px 0 0;
    font-size: 3rem;
    font-weight:900;
    line-height: 1;
    color:#575757;
}
.main > div > div > div p.price {
    font-size: 1.5rem;
    color:#575757;
}
.main > div > div > div p.price small {
    margin-top: 20px;
    display: block;
    font-size:1rem;
    line-height: 1.8;
}
.main > div > div > div p.price span {
    display: block;
    font-size:1.2rem;
    font-weight:900;
}
.main > div > div > div p.price span b {
    font-size:1.8rem;
}
.main > div > div > div a {
    width:90%;
    margin: 20px 0 0;
    padding: 10px 0;
    display: block;
    font-size: 1rem;
    font-weight:700;
    color: #575757;
    text-align: center;
    text-decoration: none;
    line-height: 1.5;
    border-radius: 50px;
    border:solid 2px #575757;
    transition: .3s;
}
.main > div > div > div a:hover {
    color: #fff;
    background: #575757;
}
.main > div > small {
    margin: 20px auto 0;
    display: block;
    font-size: 0.95rem;
    color: #575757;
    text-align: center;
}

@media only screen and (max-width:640px){
    
    .main > div > div {
        width:100%;
        max-width:900px;
        margin: 0 auto 50px !important;
        display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    }
    .main > div > div > div {
        order:2;
    }
    .main > div > div > img {
        width:60%;
        order:1;
    }
    
    .main > div > div > div h2 {
        width:100%;
        margin-top: 50px;
        font-size: 2.5rem;
        text-align: center;
    }
    .main > div > div > div p.price {
        text-align: center;
    }
    .main > div > img {
        margin: 30px auto 70px;
        border-radius: 0;
    }
    .main > div > p {
        font-size: 1.5rem;
    }
    .main p.topcopy {
        margin: 0 auto 50px;
        font-size: 1.5rem;
    }
    .main > div > div > div a {
        width:100%;
    }
}



/* box */

.box {
    width:100%;
    margin: 0 auto;
    padding:80px 0;
}
.box:nth-child(odd) { background:#f5f5f5;}

.box > div {
    width:90%;
    max-width:1280px;
    margin: 0 auto;
}
.box > div h4 {
    width:100%;
    margin: 0 auto 20px;
    display: block;
    font-size: 2.2rem;
    font-weight:900;
    text-align: center;
}
.box > div > p {
    margin-bottom:50px;
    text-align: center;
}
.box > div > p b {
    display: block;
}

.box > div h4 ,
.box > div p ,
.box > div ul li ,
.box > div ol li ,
.box > div dl dt ,
.box > div dl dd { color:#575757;}

@media only screen and (max-width:640px){
    
    .box > div h4 {
        margin: 0 auto 10px;
        font-size: 1.8rem;
    }
    .box > div > p {
        font-size: 1.2rem;
        text-align: left;
    }
}



/* box-01 日々の生活を便利にする機能 */

.box-01 {}
.box-01 > div {}
.box-01 ul {
    width:100%;
    margin: 0 auto;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
}
.box-01 ul li {
    width:30%;
    margin: 20px 0;
}
.box-01 ul li img {
    max-width:100%;
    margin-bottom:10px;
    border-radius:10px;
}
.box-01 ul li b {
    margin: 10px 0;
    display: block;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.5;
}
.box-01 ul li small {
    display: block;
    font-size:0.9rem;
    line-height: 1.5;
}

@media only screen and (max-width:640px){
    
    .box-01 ul li {
        width:100%;
        margin-bottom: 50px;
    }
    .box-01 ul li:last-of-type {
        margin-bottom: 0;
    }
    .box-01 ul li b {
        font-size: 1.4rem;
    }
}



/* box-02 あなたの生活を便利にする特徴 */

.box-02 dl {
    margin: 0 auto 50px;
    text-align: center;
}
.box-02 dl dt {
    margin: 0 auto 20px;
    font-size: 2rem;
    line-height: 1.5;
}
.box-02 dl dd {}
.box-02 dl dd span {
    width:40px;
    height: 1em;
    margin-left:5px;
    display: inline-block;
    position: relative;
}
.box-02 dl dd span::after {
    content: "";
    width:100%;
    height: 1px;
    margin: auto;
    position:absolute; top:0.3em; bottom:0; left:0;
    background: #575757;
}

.box-02 ul {
    width:100%;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
.box-02 ul li {
    width:49%;
}
.box-02 ul li img {
    max-width:100%;
    margin-bottom:10px;
    border-radius:10px;
}
.box-02 ul li p {
    width:100%;
    font-size: 1rem;
    text-align: center;
}

.box-02 > div span {
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
.box-02 > div span img {max-width:100%;}

@media only screen and (max-width:640px){
    
    .box-02 dl dt {
        margin: 0 auto 20px;
        font-size: 1.5rem;
    }
    .box-02 ul li {
        width:100%;
        margin-bottom: 50px;
    }
    .box-02 ul li:last-of-type {
        margin-bottom: 0;
    }
}



/* box-04 カラーバリエーション */

.box-04 div {
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
.box-04 ul {
    width:100%;
    margin: 0 auto;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:stretch; align-items:stretch;
}
.box-04 ul li {
    width:25%;
    margin: 0 0 20px;
    padding:0;
    text-align: center;
    background: #fff;
}
.box-04 ul li img {
    max-width:100%;
}

@media only screen and (max-width:640px){
    
    .box-04 ul {
        margin: 0 auto;
        display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
    }
    .box-04 ul li {
        width:50%;
    }
}



/* box-05 「あったらいいな」をすべて詰め込みました */

.box-05 {}
.box-05 ul {
    width:100%;
    margin: 30px auto 0;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
}
.box-05 ul li {
    width:30%;
    margin: 0 0 50px;
    padding:0;
}
.box-05 ul li img {
    max-width:100%;
    border-radius:10px;
}
.box-05 ul li b {
    margin: 15px 0 10px;
    display: block;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    background: #575757;
}
.box-05 ul li span {
    margin-bottom: 5px;
    display: block;
    font-size: 1.2rem;
    text-align: center;
}
.box-05 ul li span small {
    display: inline-block;
    font-size: 0.8rem;
}
.box-05 > div a[target="_blank"] {
    width:360px;
    margin: 0 auto;
    padding: 10px 0;
    display: block;
    color: #575757;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    border:solid 3px #575757;
    background: #fff;
    transition: .3s;
}
.box-05 > div a[target="_blank"]:hover {
    color: #fff;
    background: #575757;
}
.box-05 > div a[target="_blank"] b {
    font-size: 1.2rem;
    font-weight: 900;
}
.box-05 > div a[target="_blank"] small {
    display: block;
    line-height: 1.2;
}

@media only screen and (max-width:640px){
    
    .box-05 ul li {
        width:100%;
        margin: 0 0 50px;
        font-size: 1.1rem;
    }
    .box-05 ul li b {
        font-size: 1.4rem;
    }
    .box-05 ul li span {
        font-size: 1.5rem;
    }
    .box-05 ul li span small {
        font-size: 1rem;
    }
    .box-05 > div a[target="_blank"] {
        width:98%;
        padding: 20px 0;
    }
}



/* box-06 スペック詳細 */

.box-06 > div {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
.box-06 > div dl {
    width:48%;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
}
.box-06 > div dl dt ,
.box-06 > div dl dd {
    padding: 8px 0;
    line-height: 1.5;
    border-bottom:solid 1px #575757;
}
.box-06 > div dl dt {
    width:30%;
}
.box-06 > div dl dd {
    width:70%;
}
.box-06 > div > small {
    margin: 20px 0 0;
    display:block;
}

@media only screen and (max-width:640px){
    
    .box-06 > div dl {
        width:100%;
    }
    .box-06 > div dl dt ,
    .box-06 > div dl dd {
        padding: 10px 0;
        font-size: 1.1rem;
        line-height: 1.5;
    }
    .box-06 > div dl dt {
        width:35%;
    }
    .box-06 > div dl dd {
        width:65%;
    }
    .box-06 > div small {
        font-size: 1rem;
    }
}



/* box-07 MOVIE */

.box-07 {}

.box-07 ul {
    width:100%;
    margin: 0 auto;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:stretch; align-items:stretch;
}
.box-07 ul li {
    width:49%;
    margin: 0;
}
.box-07 ul li p {
    width:100%;
    margin-top:10px;
    text-align: center;
}

.video {
    width:100%;
    padding-bottom: 56.25%;
    height:0px;
    position: relative;
}
.video iframe {
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left:0;
    border-radius: 10px;
}

@media only screen and (max-width:640px){
    
    .box-07 ul li {
        width:100%;
        margin: 20px 0;
    }
}



/* box-08 保険 */

.box-08 > div > img {
    max-width:100%;
    max-width:500px;
    margin: 0 auto 30px;
    display: block;
    border-radius: 10px;
}
.box-08 > div > div > img {
    max-width:100%;
    margin: 0 auto 50px;
    display: block;
    border-radius: 10px;
}
.box-08 > div > p b {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 400;
}
.box-08 > div > a {
    width:350px;
    margin: 0 auto;
    padding:15px 0;
    display:block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border:solid 2px #0075b8;
    border-radius:50px;
    background:#0075b8;
    transition: .3s;
}
.box-08 > div > a:hover {
    color: #0075b8;
    background:#fff;
}
.box-08 > div > div {
    width:100%;
    max-width:900px;
    margin: 0 auto;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
.box-08 > div > div dl {
    width:31%;
    margin:0 0 50px;
}
.box-08 > div > div dl dt {
    margin: 0 0 10px;
    font-size: 1.4rem;
    color: #0075b8;
    text-align:center;
    line-height: 1.4;
}
.box-08 > div > div dl:last-of-type dt { letter-spacing:0;}
.box-08 > div > div dl dt span {
    display: block;
}
.box-08 > div > div dl dt img {
    max-width:150px;
    margin: 0 auto 20px;
    display: block;
}
.box-08 > div > div dl dd {
    letter-spacing: 0;
    line-height: 1.5;
}
.box-08 > div > div dl dd strong {
    margin: 20px 0 10px;
    padding: 0;
    display: block;
    font-weight: 400;
    color: #0075b8;
    text-align: center;
    border:solid 1px #0075b8;
    border-radius: 50px;
    background: #fff;
}
.box-08 > div > div dl dd b {
    width:100%;
    margin-bottom:10px;
    display:block;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}
.box-08 > div > p {
    font-size: 0.9rem;
}

@media only screen and (min-width:641px){
    
    .box-08 > div > div dl dd.text-center {text-align:center;}
}

@media only screen and (max-width:640px){
    
    .box-08 > div > div {
        width:100%;
        margin: 0 auto;
    }
    .box-08 > div > div p {
        font-size: 1.1rem;
    }
    .box-08 > div > div dl {
        width:100%;
        margin:0 0 50px;
    }
    .box-08 > div > div dl dt img {
        max-width:300px;
    }
    .box-08 > div > div dl dd {
        text-align: center;
    }
    .box-08 > div > img {
        width:100%;
        margin-top:30px;
    }
    .box-08 > div > p:first-of-type {
        text-align: center;
    }
}



/* care */

.care {display:flex; flex-flow:row wrap; justify-content:center; align-content:stretch; align-items:stretch;}

.care h4 span {
    width:100%;
    margin:10px 0 0;
    display:block;
    font-size:1rem;
    font-weight:normal;
    text-align:center;
}

.care > div {
    width:40%;
    margin: 0 1%;
    padding:30px 3% 100px;
    border-radius:10px;
    border:solid 5px #0075b8;
    position:relative;
}
.care > div h5 {
    width:100%;
    color:#0075b8;
    font-size:2.2rem;
    font-weight:normal;
    text-align:center;
}
.care > div h5 img {width:80px; margin:0 10px 0 0;}
.care > div dl {width:100%; margin:20px 0 0;}
.care > div dl dt {
    font-size:1.3rem;
    text-align:center;
    position:relative;
}
.care > div dl dt:after {
    content: "";
    width:35%;
    height:1px;
    margin:auto;
    position:absolute; left:0; top:0; bottom:0;
    background:#575757;
}
.care > div dl dt:before {
    content: "";
    width:35%;
    height:1px;
    margin:auto;
    position:absolute; right:0; top:0; bottom:0;
    background:#575757;
}
.care > div dl dd {
    margin:10px 0 0;
    padding:0 0 0 50px;
    line-height:1.5;
    position:relative;
}
.care > div dl dd::after {
    content:"";
    width: 35px;
    height:35px;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    position:absolute; top:5px; left:0;
    color: #fff;
    font-size:1.3rem;
    text-align: center;
    line-height:1;
    border-radius:50px;
    background:#0075b8;
}
.care > div dl dd:nth-of-type(1)::after {content:"1";}
.care > div dl dd:nth-of-type(2)::after {content:"2";}
.care > div dl dd:nth-of-type(3)::after {content:"3";}
.care > div dl dd:nth-of-type(4)::after {content:"4";}
.care > div dl dd b {
    display:block;
    color:#0075b8;
    font-size:1.8rem;
    font-weight:normal;
    line-height:1.5;
}
.care > div p.price {text-align:center;}
.care > div p.price b {font-size:1.8rem; font-weight:normal; line-height:1;}
.care > div p.kome {margin:20px 0 0; font-size:0.9rem; line-height:1.5; letter-spacing:0;}
.care > div p.kome small {font-size:0.75rem;}

.care > div > a {
    width:300px;
    padding:5px 0;
    margin:auto;
    display: block;
    position:absolute; bottom:30px; left:0; right:0;
    color:#fff;
    font-size:1.1rem;
    text-align:center;
    text-decoration:none;
    border:solid 2px #0075b8;
    border-radius:50px;
    background:#0075b8;
    transition: .3s;
}
.care > div > a:hover {
    color: #0075b8;
    background:#fff;
}

@media only screen and (max-width:640px){
    
    .care > div {
        width:90%;
        margin: 10px 0;
        padding:40px 5% 130px;
    }
    .care > div h5 {
        width:100%;
        color:#0075b8;
        font-size:2rem;
        font-weight:normal;
        text-align:center;
    }
    .care > div h5 img {width:120px; margin:0 auto; display: block;}
    .care > div dl dt:after {width:32%;}
    .care > div dl dt:before{width:32%;}
    .care > div dl dd {padding:0 0 0 50px;}
    .care > div dl dd::after {
        width: 35px;
        height:35px;
        top:10px; left:0;
        font-size:1.1rem;
    }
    .care > div dl dd b {font-size:1.6rem;}
    .care > div p.kome {margin:20px 0 0; font-size:0.9rem; line-height:1.5; letter-spacing:0;}
    .care > div p.kome small {font-size:0.75rem;}
    
    .care > div > a {
        padding:8px 0;
        bottom:40px;
    }
}