@charset "UTF-8";
html {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

main {
    font-size: 18px !important;
    margin: 0 auto;
    width: 100%;
    max-width: 1080px;
    line-height: 1.5em;
    background-color: white;
    padding: 0 20px;
    letter-spacing: 0.1rem;
    box-sizing: border-box;
}

@media screen and (max-width:850px) {
    main {
        padding: 0;
    }
}

.sp-br {
    display: none;
}

@media screen and (max-width:767px) {
    .sp-br {
        display: block;
    }
    .pc-br {
        display: none;
    }
}

a {
    text-decoration: none;
    font-weight: bold;
    color: #BB0000;
}


/* 友だち登録ボタン */

.line-frienndly-button-box {
    margin: 100px 0;
}

.line-frienndly-button {
    display: block;
    text-decoration: none;
    color: white;
    background-color: #BB0000;
    text-align: center;
    width: 90%;
    max-width: 360px;
    padding: 20px 0;
    font-size: 18px;
    font-weight: bold;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.line-frienndly-button::after {
    content: '';
    width: 7.5px;
    height: 7.5px;
    border-top: 2.5px solid white;
    border-right: 2.5px solid white;
    transform: rotate(45deg);
    transform: rotate(45deg) translate(-20px, 20px);
}

.line-frienndly-button::before {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid none;
    border-right: 3px solid none;
    transition: 0.2s;
}

.line-frienndly-button:hover {
    background-color: #ee0000;
}

.line-frienndly-button-box-sp {
    display: none;
}


/* アクセス推奨 */

.access-attention {
    font-size: 12px;
    text-align: center;
}


/* 利用規約へ */

.to-rule {
    margin-top: 50px;
    text-align: center;
}


/* セクション */

section {
    margin-top: 100px;
}

#feature {
    margin-top: 100px;
}


/* メインビジュアル */

.line-friendly-firstview {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.line-friendly-firstview img {
    width: 100%;
}

h1 {
    width: 100%;
    margin-top: 0;
}


/* 見出し */

.line-friendly-heading {
    margin-bottom: 50px;
}

.line-friendly-heading-top {
    display: flex;
    position: relative;
}

h2 {
    white-space: nowrap;
}

.section-heading {
    font-size: 34px;
    margin: 1em 0;
}

.line-friendly-heading-sideline1 {
    margin: 0 0 46px auto;
    width: 83%;
    border-bottom: 1px solid #000000;
    position: relative;
}

.line-friendly-heading-sideline2 {
    margin: 0 0 46px auto;
    width: 89%;
    border-bottom: 1px solid #000000;
    position: relative;
}

.line-friendly-heading-sideline3 {
    margin: 0 0 46px auto;
    width: 81%;
    border-bottom: 1px solid #000000;
    position: relative;
}

.line-friendly-heading-sideline4 {
    margin: 0 0 46px auto;
    width: 74%;
    border-bottom: 1px solid #000000;
    position: relative;
}

.line-friendly-heading-sideline1::before,
.line-friendly-heading-sideline2::before,
.line-friendly-heading-sideline3::before,
.line-friendly-heading-sideline4::before {
    content: "･";
    font-size: 35px;
    position: absolute;
    bottom: -14px;
    left: -7.5px;
}

.line-friendly-heading-bottom {
    color: #E5E5E5;
    margin: -15px 0 0 0;
}


/* feature */

.line-friendly-section-desc {
    width: 80%;
    margin: 50px auto 75px auto;
}

.line-friendly-feature-card-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: auto;
    flex-wrap: wrap;
}

.line-friendly-feature-card {
    display: block;
    width: 31%;
}

@media screen and (max-width:850px) {
    .line-friendly-feature-card-container {
        justify-content: center;
        gap: 30px;
    }
    .line-friendly-feature-card {
        display: block;
        width: 90%;
        max-width: 340px;
    }
}

.line-friendly-feature-card h3 {
    margin: 0;
}

.line-friendly-feature-card img {
    width: 100%;
}

.line-friendly-feature-card p {
    margin: 5px 0 0 0;
}


/* function */

.line-friendly-function-card-container h3 {
    margin-bottom: 0;
    margin-top: 1.4em;
    font-size: 22px;
}

.line-friendly-function-top-img {
    width: 85%;
    margin: 0 auto;
}

.line-friendly-function-top-img img {
    width: 100%;
}

.line-friendly-function-card-container {
    margin: 75px 0;
}

.line-friendly-function-card1,
.line-friendly-function-card2,
.line-friendly-function-card3,
.line-friendly-function-card4,
.line-friendly-function-card5,
.line-friendly-function-card6 {
    padding: 10px 38% 40px 12%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}

.line-friendly-function-card1 {
    background-image: url('images/1.webp');
}

.line-friendly-function-card2 {
    background-image: url('images/2.webp');
}

.line-friendly-function-card3 {
    background-image: url('images/3.webp');
}

.line-friendly-function-card4 {
    background-image: url('images/4.webp');
}

.line-friendly-function-card5 {
    background-image: url('images/5.webp');
}

.line-friendly-function-card6 {
    background-image: url('images/6.webp');
}

.line-friendly-function-card-content {
    width: 80%;
}

.line-friendly-function-card-content p {
    margin: 15px 0;
    line-height: 1.5em;
    font-size: 18px;
}

.line-friendly-function-card6 h3 {
    position: relative;
    bottom: -20px;
}

.line-friendly-function-card6 p {
    margin: 35px 0 20px 0;
}

@media screen and (max-width:960px) {
    .line-friendly-function-card6 h3 {
        position: relative;
        bottom: 0;
    }
    .line-friendly-function-card6 p {
        margin: 15px 0;
    }
}

.sp-bg {
    display: none;
}

.pc-firstview {
    display: block;
    width: 100%;
}

.sp-firstview {
    display: none;
    width: 100%;
}

.sp-txt {
    display: none;
}

.pc-txt {
    display: block;
}

@media screen and (max-width:960px) {
    .line-friendly-function-card-container p {
        font-size: 15px;
    }
    .line-friendly-function-card-container h3 {
        margin-bottom: 1em;
    }
}

@media screen and (min-width:541px) and ( max-width:800px) {
    .line-friendly-function-card1,
    .line-friendly-function-card2,
    .line-friendly-function-card3,
    .line-friendly-function-card4,
    .line-friendly-function-card5,
    .line-friendly-function-card6 {
        padding: 0;
        width: 70%;
        padding-left: 3%;
        margin: 350px auto -600px auto;
        background: none;
    }
    .line-friendly-function-card-content {
        width: 100%;
    }
    .line-friendly-function-card-content h3 {
        font-size: 30px;
    }
    .line-friendly-function-card-content p {
        font-size: 20px;
    }
    .sp-bg {
        display: block;
        width: 90%;
        margin: 0 auto 0 0;
        z-index: 0;
    }
    .sp-bg img {
        width: 100%;
        z-index: 0;
    }
}

@media screen and (max-width:540px) {
    .line-friendly-function-card1,
    .line-friendly-function-card2,
    .line-friendly-function-card3,
    .line-friendly-function-card4,
    .line-friendly-function-card5,
    .line-friendly-function-card6 {
        padding: 0;
        width: 70%;
        padding-left: 2%;
        margin: 170px auto -460px auto;
        background: none;
    }
    .line-friendly-function-card2 {
        margin: 170px auto -420px auto;
    }
    .line-friendly-function-card1,
    .line-friendly-function-card6 {
        margin: 170px auto -400px auto;
    }
    .line-friendly-function-card-content {
        width: 100%;
    }
    .line-friendly-function-card-content h3 {
        margin-bottom: 0;
    }
    .line-friendly-function-card-content p {
        margin-top: 1em;
    }
    .sp-bg {
        display: block;
        width: 90%;
        margin: 0 auto 0 0;
    }
    .sp-bg img {
        width: 100%;
    }
}


/* .line-friendly-function-card-content h3,.line-friendly-function-card-content p { width: %; }
*/


/* ステップ */

.line-friendly-step-card1 {
    padding: 0px 0 65px 13.5%;
    background-repeat: no-repeat;
    background-position: left;
    width: 100%;
    box-sizing: border-box;
    background-size: 100%;
    margin-top: -20px;
}

.line-friendly-step-card2,
.line-friendly-step-card3 {
    padding: 30px 0 65px 13.5%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    box-sizing: border-box;
    background-size: 100%;
}

.line-friendly-step-card2 {
    margin-top: -10px;
}

.line-friendly-step-card3 {
    position: relative;
    top: -2px;
}

.line-friendly-step-card1 {
    position: relative;
    background-image: url('images/step1.png');
    z-index: 3;
}

.line-friendly-step-card2 {
    position: relative;
    background-image: url('images/step2-1.png');
    z-index: 2;
    /* margin-top: -70px; */
}

.line-friendly-step-card3 {
    position: relative;
    background-image: url('images/step2.png');
    z-index: 1;
    margin-top: -70px;
    padding-top: 40px;
}

.line-friendly-step-card-content2,
.line-friendly-step-card-content3 {
    display: block;
    width: 100%;
}

.line-friendly-step-card-content1 {
    display: flex;
    width: 100%;
}

.line-friendly-step-card1 .line-friendly-step-card-img {
    padding: 30px 0;
}

.line-friendly-step-card2 .line-friendly-step-card-img,
.line-friendly-step-card3 .line-friendly-step-card-img {
    padding: 20px 0;
}

.line-friendly-step-card-text {
    padding-top: 10px;
}

.line-friendly-step-card1 .line-friendly-step-card-text {
    padding-top: 10px;
    width: 70%;
}

.line-friendly-step-card-text h3 {
    line-height: 2em;
    border-bottom: #BB0000 5px solid;
    margin-top: 0;
    width: 95%;
    font-size: 22px;
}

.line-friendly-step-card-text p {
    margin-top: 10px;
}

.line-friendly-step-card1 .line-friendly-step-card-text h3 {
    padding-top: 20px;
    width: 100%;
}

.line-friendly-step-card-img {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-friendly-step-card-img img {
    display: block;
    width: 55%;
}

@media screen and (max-width:767px) {
    .line-friendly-step-card-img {
        width: 10%;
    }
    .line-friendly-step-card-img img {
        display: block;
        width: 100%;
    }
    .pc-firstview {
        display: none;
    }
    .sp-firstview {
        display: block;
    }
}


/* スクロールアップ */

.fade-in {
    opacity: 0;
    transition-duration: 500ms;
    transition-property: opacity, transform;
}

.fade-in-up {
    transform: translate(0, 50px);
}

.fade-in-down {
    transform: translate(0, -50px);
}

.fade-in-left {
    transform: translate(-50px, 0);
}

.fade-in-right {
    transform: translate(50px, 0);
}


/* .fade-in-roll { transform: rotate(180deg); transform: translate(0,50px); }
*/

.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}


/* .timing01 { transition-delay: .5s; }
*/

.timing02 {
    transition-delay: .1s;
}

.timing03 {
    transition-delay: .2s;
}


/* サンバーズアニメーション */

.line-friendly-step-card1 .sunbirds {
    position: absolute;
    display: block;
    left: 13%;
    top: 30px;
    opacity: 0;
    transition-duration: 500ms;
    transition-property: opacity, transform;
}

.sunbirds {
    position: absolute;
    display: block;
    left: 13%;
    top: 40px;
    opacity: 0;
    transition-duration: 500ms;
    transition-property: opacity, transform;
}

.line-friendly-step-card3 .sunbirds {
    top: 48px;
}

.sunbirds.purupuru {
    animation: moving1 1s ease-in-out 1 forwards;
}

@keyframes moving1 {
    0% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
        transform: scale(0.98, 0.9) translate(0, 5px);
    }
    30% {
        transform: scale(1.02, 1.0) translate(0, 8px);
    }
    50% {
        transform: scale(0.98, 1.05) translate(0, -8px);
    }
    70% {
        transform: scale(1.0, 0.9) translate(0, 5px);
    }
    100% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }
    100% {
        opacity: 1;
    }
}


/* @keyframes moving1 {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(36deg); }
  20% { transform: rotate(72deg); }
  30% { transform: rotate(108deg); }
  40% { transform: rotate(144deg); }
  50% { transform: rotate(180deg); }
  60% { transform: rotate(216deg); }
  70% { transform: rotate(252deg); }
  80% { transform: rotate(288deg); }
  90% { transform: rotate(324deg); }
  100% { transform: rotate(360deg); }
  100% { opacity: 1; }
}
*/


/* ステップ 新 */

.flow-title-section-1,
.flow-title-section-2 {
    background-color: #901111;
    padding: 1px 0 1px 140px;
    color: white;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}

.flow-title-section-1 p,
.flow-title-section-2 p {
    margin: 1em 0;
}

.flow-title-section-1 {}

.flow-title-section-2 {
    margin-top: 50px;
}

@media screen and (max-width:850px) {
    .flow-title-section-1,
    .flow-title-section-2 {
        padding: 1% 2%;
        font-size: 20px;
        text-align: center;
        background-color: unset;
        color: #901111;
        margin-bottom: 30px;
    }
}

.line-friendly-step-card-capture1,
.line-friendly-step-card-capture2,
.line-friendly-step-card-capture3 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.line-friendly-step-card-capture2,
.line-friendly-step-card-capture3 {
    background-image: none;
}

.line-friendly-step-card1 .line-friendly-step-card-container2 {
    margin-top: -80px;
}

.line-friendly-step-capture-block {
    margin-top: 20px;
}

.line-friendly-step-card-capture1 .line-friendly-step-capture-block,
.line-friendly-step-card-capture2 .line-friendly-step-capture-block {
    width: 33.3%;
}

.line-friendly-step-card-capture3 .line-friendly-step-capture-block {
    width: 25%;
}

.line-friendly-step-card-capture1 .line-friendly-step-capture-block,
.line-friendly-step-card-capture2 .line-friendly-step-capture-block {
    width: 45%;
}

.line-friendly-step-card-capture3 .line-friendly-step-capture-block {
    width: 45%;
}

.line-friendly-step-capture-block-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.line-friendly-step-capture-block-img img {
    display: block;
    padding-bottom: 10px;
    width: 40%;
}

.line-friendly-step-card-capture3 .line-friendly-step-capture-block-img img {
    display: block;
    padding-bottom: 40px;
    width: 60%;
}

.line-friendly-step-card-capture3 .line-friendly-step-capture-block:first-child .line-friendly-step-capture-block-img img {
    width: 65%;
}

.line-friendly-step-attention {
    margin-bottom: 0;
    color: #BB0000;
    font-weight: bold;
    font-size: 22px;
}

.line-friendly-step-attention::before {
    content: url(images/attention-mark.png);
    vertical-align: middle;
    padding-right: 5px;
}

.heading-step1::before {
    content: url(images/one-mark.png);
    vertical-align: middle;
    padding-right: 5px;
}

.heading-step2::before {
    content: url(images/two-mark.png);
    vertical-align: middle;
    padding-right: 5px;
}

.heading-step3::before {
    content: url(images/three-mark.png);
    vertical-align: middle;
    padding-right: 5px;
}

.heading-step4::before {
    content: url(images/four-mark.png);
    vertical-align: middle;
    padding-right: 5px;
}

.heading-step {
    margin-top: 0;
    margin-bottom: 20px;
    text-indent: -1.4em;
    padding-left: 30px;
}

.line-friendly-step-capture-block {}

.line-friendly-step-card-capture1 .heading-step {
    margin-top: 15px;
    margin-bottom: 20px;
}

.sp-step {
    display: none;
}


/* お知らせ */

.news-content {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 30px;
}

.news-content:last-child {
    margin-bottom: 75px;
}

.news-content-title {
    margin-bottom: 15px;
    font-weight: bold;
}

@media screen and (max-width:850px) {
    .sp-txt {
        display: block;
    }
    .pc-txt {
        display: none;
    }
    .pc-br {
        display: none;
    }
    .line-friendly-step-card2 {
        margin-top: 0;
    }
    .line-friendly-step-card3 {
        margin-top: 75px;
    }
    .line-friendly-heading-top {
        display: block;
    }
    .line-friendly-heading-sideline1,
    .line-friendly-heading-sideline2,
    .line-friendly-heading-sideline3 {
        display: none;
    }
    .section-heading {
        text-align: center;
        font-size: 36px;
    }
    .line-friendly-heading-bottom {
        text-align: center;
        font-size: 24px;
    }
    .pc-border {
        display: none;
    }
    #start {}
    .sp-step {
        display: block;
    }
    .line-friendly-step-card-text2 {
        display: none;
    }
    .line-frienndly-button-box-sp {
        display: block;
    }
    .line-friendly-step-card1,
    .line-friendly-step-card2,
    .line-friendly-step-card3 {
        padding: 0;
        background-image: none;
    }
    .line-friendly-step-card-capture2 {
        background-image: url(images/step2-flow-bg.png);
    }
    .line-friendly-step-card-capture3 {
        background-image: url(images/step3-flow-bg.png);
    }
    .line-friendly-step-card-capture2,
    .line-friendly-step-card-capture3 {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .line-friendly-step-card-content1 {
        display: block;
    }
    .line-friendly-step-card1 .line-friendly-step-card-text,
    .line-friendly-step-card-text {
        width: 90%;
        margin: 0 auto;
    }
    .line-friendly-step-card-text h3 {
        width: 100%;
        font-size: 17px;
    }
    .line-friendly-step-card-capture1,
    .line-friendly-step-card-capture2,
    .line-friendly-step-card-capture3 {
        flex-wrap: wrap;
    }
    .line-friendly-step-card-capture1 .line-friendly-step-capture-block,
    .line-friendly-step-card-capture2 .line-friendly-step-capture-block,
    .line-friendly-step-card-capture3 .line-friendly-step-capture-block {
        width: 95%;
        margin: 0 auto;
    }
    .line-friendly-step-card-img {
        display: none;
    }
    .line-friendly-step-card-capture1 {
        display: none;
    }
    .line-friendly-step-card1 .sunbirds {
        position: absolute;
        display: block;
        left: 3%;
        top: 19px;
        opacity: 0;
        transition-duration: 500ms;
        transition-property: opacity, transform;
    }
    .sunbirds {
        position: absolute;
        display: block;
        left: 3%;
        top: 89px;
        opacity: 0;
        transition-duration: 500ms;
        transition-property: opacity, transform;
    }
    .line-friendly-step-card3 .sunbirds {
        top: 89px;
    }
    .sp-step {
        height: 70px;
        margin-bottom: 20px;
    }
    .sp-step img {
        height: 100%;
        width: auto;
    }
    .line-friendly-step-card-capture2 .line-friendly-step-capture-block-img img {
        width: 50%;
        padding-bottom: 60px;
    }
    .line-friendly-step-card-capture3 .line-friendly-step-capture-block-img img {
        width: 40%;
        padding-bottom: 40px;
    }
    .heading-step {
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .line-friendly-step-card-container {
        /* background: linear-gradient(180deg,#FAFAFA,#EFEFEF); */
        background-image: linear-gradient(180deg, rgba(250, 250, 250, 1), rgba(239, 239, 239, 1) 98%, rgba(255, 255, 255, 1));
    }
    .news-content {
        width: 90%;
    }
}