@charset "utf-8";

html {
    font-family: "Noto Sans JP", sans-serif;
    color: #1c2629;
    font-size: 16px;
    scroll-behavior: smooth;
}

/* 共通 */
.textmarker {
    background: linear-gradient(transparent 40%, rgba(227, 237, 64, 0.8) 60%);
    line-height: 1;
}

/* ヘッダー */
.header__wrap {
    width: 100vw;
    position: fixed;
    z-index: 1000;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.header__logo {
    width: 70px;
    height: 70px;
    display: block;
}

.header__logo img {
    width: 100%;
}

.header__icon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header__icon img {
    margin: 0 10px;
    width: 50px;
    height: 50px;
    transition: transform 0.2s ease-in-out;
}

.header__icon img:hover {
    transform: scale(0.9);
}

/* メインビジュアル */
.mainVisual {
    background-image: url(../images/mainpic.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
}

.mainVisual__text {
    position: absolute;
    top: 231px;
    left: 196px;
    display: inline-block;
    /* text-shadow: 1px 2px 2px #f3f3f3; */
}

.mainVisual__text p {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.scrolldown4 {
    position: absolute;
    bottom: 1%;
    right: 50%;
    animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove {
    0% {
        bottom: 1%;
    }

    50% {
        bottom: 3%;
    }

    100% {
        bottom: 1%;
    }
}

.scroll__text {
    position: absolute;
    left: -20px;
    bottom: 10px;
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.scrolldown4:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}

.scrolldown4:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 50px;
    background: #eee;
}





/* セクション1 お悩み */
.sec01__wrap {
    margin-top: 40px;
    width: 100vw;
}

.sec01__inner {
    width: 60%;
    margin: 0 auto;
}

.sec01__titleArea {
    text-align: center;
    line-height: 1.8;
}

.sec01__subTitle {
    font-size: 14px;
    position: relative;
}

.sec01__subTitle:before,
.sec01__subTitle:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #1c2629;
    width: 2px;
    height: 2em;
    margin: 0 1em;
    margin-top: -.2em;
    vertical-align: middle;
}

.sec01__subTitle:before {
    transform: rotate(-35deg);
}

.sec01__subTitle:after {
    transform: rotate(35deg);
}

.sec__title {
    font-size: 24px;
    text-align: center;
}


/* 悩み吹きだし */
.sec01__balloonArea {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 30px;
    /* background-color: #1ec4e6; */
}


.sec01__wrap .balloon {
    text-align: center;
    line-height: 1.5;
    position: relative;
    padding: 8px 17px;
    border-radius: 5px;
    background: rgba(227, 237, 64, 0.8);
    border: solid 2px #1c2649;
    color: #333;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}


.sec01__text {
    display: block;
    width: 74%;
    text-align: center;
    margin: 0 auto;
    background-color: rgba(227, 237, 64, 0.8);
    padding: 44px 50px;
    border-radius: 5px;
    border: 5px solid #0d213a;
    font-size: 24px;
    font-weight: bold;
    /* margin-top: 92px; */
}



.sec01__subtext {
    text-align: center;
    margin-top: 40px;
}

.sec01__text span {

    color: #01b5d0;
    font-size: 30px;
}

.sec01__subtext:before,
.sec01__subtext:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #1c2629;
    width: 2px;
    height: 2em;
    margin: 0 1em;
    margin-top: -.2em;
    vertical-align: middle;
}

.sec01__subtext:before {
    transform: rotate(-35deg);
}

.sec01__subtext:after {
    transform: rotate(35deg);
}


.sec01__wrap .balloon img {
    width: 40%;
}


/* セクション２　ご購入の流れ */
.sec02__wrap {
    background-color: #def3f7;
    width: 100vw;
    margin-top: 40px;
    padding: 30px 0;
}

.sec02__inner {
    width: 70%;
    margin: 0 auto;
}

.sec02__inner img {
    height: 160px;
}

.sec02__titleArea {
    text-align: center;
}

.sec02__contents {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 30px;
}

.sec02__content {
    width: 286px;
    border: 1px solid #333;
    margin: 0 19px;
    padding: 10px;
    ;
}

.sec02__contentNumber {
    text-align: center;
    /* font-family: "Kaushan Script", cursive; */
    font-weight: bold;
    margin-top: 20px;
}


.sec02__contentTitle {
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 16px;
}


.sec02__contentList {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.8;
}


.sec02__wrap .number01,
.sec02__wrap .number02,
.sec02__wrap .number03,
.sec02__wrap .number04,
.sec02__wrap .number05 {
    font-size: 16px;
    text-align: center;
    /* border-bottom: 1px solid #333; */
    padding-bottom: 8px;
}

.sec02__wrap .number01 {
    color: #ABBAD6;
}

.sec02__wrap .number02 {
    color: #819FD6;

}

.sec02__wrap .number03 {
    color: #5683D6;

}

.sec02__wrap .number04 {
    color: #4075D6;

}

.sec02__wrap .number05 {
    color: #1559D6;

}

.sec02__wrap .number01 span,
.sec02__wrap .number02 span,
.sec02__wrap .number03 span,
.sec02__wrap .number04 span,
.sec02__wrap .number05 span {
    font-size: 36px;
}



.sec02__contentList p {
    background-color: #dfdede;
    margin-bottom: 5px;
    border-radius: 3px;
}


/* <!-- セクション３　流れ詳しく --> */

.sec03 {
    margin-top: 40px;
}

.sec03__wrap {
    width: 70%;
    margin: 0 auto;
}


/* カテゴリ１ */
.category01 {
    margin-top: 50px;
}

.category01 .area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.category01 .textBox {
    width: 70%;
}

.category01 .title {
    position: relative;
    z-index: 0;
    padding: 20px;
    font-size: 24px;
}

.category01  .title::before {
    content: "type";
    font-size: 90px;
    color: rgba(109, 238, 99, 0.3);
    position: absolute;
    top: -35px;
    left: -10px;
    padding-left: 20px;
    z-index: -1;
    font-family: "Kaushan Script", cursive;
}

.category01 .subTitle {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}


.category01 .listTitle {
    display: block;
    align-items: center;
    border-right: none;
    padding: 8px 0px;
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-image: linear-gradient(90deg, rgba(222, 243, 247, 1) 10%, rgba(255, 255, 255, 1) 90%);
}


.category01 .subTitle {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}

.category01 .listArea {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.category01  li {
    display: block;
    list-style-type: none;
    position: relative;
    padding-left: 0.6em;
    margin-top: 10px;
}

/* 箇条書きの色 */
.category01 .list li::before {
    border-radius: 50%;
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.4em;
    content: "";
    background: #1ec4e6;
}


.category01 .pic  {
    display: block;
    width: 42%;
    /* height: 100%; */
}



/* カテゴリ２ */
.category02 {
    margin-top: 50px;
}

.category02 .area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.category02 .textBox {
    width: 70%;
}

.category02 .title {
    position: relative;
    z-index: 0;
    padding: 20px;
    font-size: 24px;
}

.category02  .title::before {
    content: "marina";
    font-size: 90px;
    color: rgba(75, 209, 221, 0.3);
    position: absolute;
    top: -33px;
    left: -10px;
    padding-left: 20px;
    z-index: -1;
    font-family: "Kaushan Script", cursive;
}

.category02 .subTitle {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}


.category02 .listTitle {
    display: block;
    align-items: center;
    border-right: none;
    padding: 8px 0px;
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-image: linear-gradient(90deg, rgba(222, 243, 247, 1) 10%, rgba(255, 255, 255, 1) 90%);
}

.category02 .subTitle {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}

.category02 .listArea {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.category02 li {
    display: block;
    list-style-type: none;
    position: relative;
    padding-left: 0.6em;
    margin-top: 10px;
}

/* 箇条書きの色 */
.category02 .list li::before {
    border-radius: 50%;
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.4em;
    content: "";
    background: #1ec4e6;
}


.category02 .pic  {
    display: block;
    width: 42%;
    /* height: 100%; */
}




/* カテゴリ3 */
.category03 {
    margin-top: 50px;
}

.category03 .area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.category03 .textBox {
    width: 70%;
}

.category03 .title {
    position: relative;
    z-index: 0;
    padding: 20px;
    font-size: 24px;
}

.category03  .title::before {
    content: "money";
    font-size: 90px;
    color: rgba(72, 83, 232, 0.3);
    position: absolute;
    top: -29px;
    left: -10px;
    padding-left: 20px;
    z-index: -1;
    font-family: "Kaushan Script", cursive;
}

.category03 .subTitle {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}


.category03 .listTitle {
    display: block;
    align-items: center;
    border-right: none;
    padding: 8px 0px;
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-image: linear-gradient(90deg, rgba(222, 243, 247, 1) 10%, rgba(255, 255, 255, 1) 90%);
}


.category03 .subTitle {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}

.category03 .listArea {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.category03 li {
    display: block;
    list-style-type: none;
    position: relative;
    padding-left: 0.6em;
    margin-top: 10px;
}

/* 箇条書きの色 */
.category03 .list li::before {
    border-radius: 50%;
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.4em;
    content: "";
    background: #1ec4e6;
}

.category03 .pic  {
    display: block;
    width: 42%;
    /* height: 100%; */
}



/* ＝＝＝＝維持しやすい料金＝＝＝＝ */
.subWrap {
    margin-top: 50px;
    position: relative;
    padding: 20px;
    border-top: solid 2px #1c2649;
    border-bottom: solid 2px #1c2649;
}

.subWrap::before,
.subWrap::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #1c2649;
}

.subWrap::before {
    left: 10px;
}

.subWrap::after {
    right: 10px;
}

.subWrap-title {
    text-align: center;
    letter-spacing: 2px;
}

.subContents {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    /* 縦並びに変更 */
    align-items: center;
    /* 中央揃え */
}

.subContent {
    width: 30%;
    margin: 0 20px;
}

.subContent__title {
    text-align: center;
    font-size: 14px;
}

.subContent__textArea {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.subContent__text {
    writing-mode: vertical-rl;
    margin-right: 5px;
    font-size: 14px;
}

.subContent__part {
    font-size: 32px;
}

.subContent__part span {
    font-size: 40px;
    font-weight: bold;
}




/* カテゴリ4 */
.category04 {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.category04 .textBox {
    width: 58%;
}

.category04 .title {
    position: relative;
    z-index: 0;
    padding: 20px;
    font-size: 24px;
}

.category04  .title::before {
    content: "equipment";
    font-size: 90px;
    color: rgba(232, 72, 230, 0.3);
    position: absolute;
    top: -29px;
    left: -10px;
    padding-left: 20px;
    z-index: -1;
    font-family: "Kaushan Script", cursive;
}

.category04 .subTitle {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}

.category04 .textBox p {
        display: block;
        margin-top: 5px;
        line-height: 1.5;
}

.category04 .listTitle {
    display: block;
    align-items: center;
    border-right: none;
    padding: 8px 0px;
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-image: linear-gradient(90deg, rgba(222, 243, 247, 1) 10%, rgba(255, 255, 255, 1) 90%);
}

.category04 .pic  {
    display: block;
    width: 42%;
    /* height: 100%; */
}





/* カテゴリ5 */
.category05 {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.category05 .textBox {
    width: 70%;
}

.category05 .title {
    position: relative;
    z-index: 0;
    padding: 20px;
    font-size: 24px;
}

.category05  .title::before {
    content: "ceremony";
    font-size: 90px;
    color: rgba(232, 72, 102, 0.3);
    position: absolute;
    top: -33px;
    left: -10px;
    padding-left: 20px;
    z-index: -1;
    font-family: "Kaushan Script", cursive;
}

.category05 .subTitle {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}

.category05 .text p {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}


.category05 .listTitle {
    display: block;
    align-items: center;
    border-right: none;
    padding: 8px 0px;
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-image: linear-gradient(90deg, rgba(222, 243, 247, 1) 10%, rgba(255, 255, 255, 1) 90%);
}


.category05 .pic  {
    display: block;
    width: 42%;
    /* height: 100%; */
}


/* ＝＝＝ボタン共通＝＝＝＝ */

.sec03__btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #1c2649;
    font-family: "Montserrat", sans-serif;
    /* box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2); */
    overflow: hidden;
    border: none;
    width: 300px;
    margin: 20px auto 0;
}

.sec03__btn::after {
    content: " ";
    width: 0%;
    height: 100%;
    background: #FFD401;
    position: absolute;
    transition: all 0.4s ease-in-out;
    right: 0;
}

.sec03__btn:hover::after {
    right: auto;
    left: 0;
    width: 100%;
}

.sec03__btn a {
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: 18px 25px;
    color: #f3f3f3;
    font-weight: 700;
    letter-spacing: 0.3em;
    z-index: 20;
    transition: all 0.3s ease-in-out;
}

.sec03__btn:hover a {
    color: #183153;
    animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

/* ボタン */




.sec03__text {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    margin-top: 40px;
}






/* セクショん４　サービス　 */
.sec04__wrap {
    background-color: #def3f7;
    padding: 30px 0;
    width: 100vw;
    margin-top: 40px;
}

.sec04__inner {
    width: 70%;
    display: flex;
    flex-direction: row;
    /* 縦並びに変更 */
    justify-content: space-between;
    margin: 0 auto;
}

.sec04__contents {
    width: 27%;
    margin-bottom: 30px;
    /* 各コンテンツ間に余白 */
}


.sec04__contentImg {
    text-align: center;
    height: auto;
}

.sec04__contentImg img {
    height: 50px;
    object-fit: cover;
    /* 画像をコンテナ内に収める */
}

.sec04__contentTitle {
    text-align: center;
    margin-top: 20px;
}

.sec04__contentText {
    margin-top: 20px;
    line-height: 1.5;
    letter-spacing: 1.5px;
    text-align: center;
    /* 中央揃え */
}




/* セクショん５　お気軽に */
.sec05__wrap {
    margin-top: 140px;
    width: 100%;
}



.sec05__wrap {
    margin-top: 50px;
    position: relative;
    padding: 50px;
    border-top: solid 2px #1c2649;
    border-bottom: solid 2px #1c2649;
    width: 70%;
    margin: 80px auto;
    background-color: #FFD401;
}

.sec05__wrap::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 10px;
    ;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #1c2649;
}

.sec05__wrap::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 10px;
    ;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #1c2649;
}


.sec05__text {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}


.sec05__btn {
    display: flex;
    flex-direction: row;
    /* ボタンを縦に並べる */
    align-items: center;
    /* ボタンを中央揃え */
    margin: 30px auto 0;
    /* 余白を調整 */
    /* width: 70%; */
}


/* お問い合わせボタン */

/* 公式ライン */
a.btn_line {
    display: block;
    width: 45%;
    margin: 0 auto;
    padding: 1.5rem 3.0rem;
    background-color: #17aa5e;
    border-radius: 8px;
    box-sizing: border-box;
    text-decoration: none;
    transition: 0.3s;
}

a.btn_line span.bl__text {
    display: block;
    position: relative;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding-left: 30px;
}

a.btn_line span.bl__text:before {
    content: '';
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

a.btn_line span.bl__text:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid #1755aa;
    border-right: 3px solid #1755aa;
    box-sizing: border-box;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 5px;
    bottom: 0;
    margin: auto;
    transition: 0.3s;
}

a.btn_line:hover {
    background-color: #01b5d0;
}

a.btn_line:hover span.bl__text:after {
    border-top: 3px solid #01b5d0;
    border-right: 3px solid #01b5d0;
}



/* お問い合わせ */
a.btn_mail {
    display: block;
    width: 45%;
    margin: 0 auto;
    padding: 1.5rem 3.0rem;
    background-color: #1755aa;
    border-radius: 8px;
    box-sizing: border-box;
    text-decoration: none;
    transition: 0.3s;
    /* margin-top: 10px; */
}

a.btn_mail span.bl__text {
    display: block;
    position: relative;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding-left: 30px;
}

a.btn_mail span.bl__text:before {
    content: '';
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

a.btn_mail span.bl__text:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid #1755aa;
    border-right: 3px solid #1755aa;
    box-sizing: border-box;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 5px;
    bottom: 0;
    margin: auto;
    transition: 0.3s;
}

a.btn_mail:hover {
    background-color: #01b5d0;
}

a.btn_mail:hover span.bl__text:after {
    border-top: 3px solid #01b5d0;
    border-right: 3px solid #01b5d0;
}


/* セクション６　オーナー様の声 */
.sec06__wrap {
    margin-top: 140px;
}

.sec06__balloonArea {
    width: 60%;
    margin: 0 auto;
}

.sec06__title {
    text-align: center;
    font-size: 20px;
}

.sec06__balloonText-area {
    margin: 20px 0;
}

.sec06__balloonName {
    text-align: right;
    margin-top: 10px;
}

.sec06__balloonText {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    background-color: #eac988;
    color: #333;
    font-weight: bold;
    /* font-size: 26px; */
    text-align: center;
    font-size: 14px;
    text-align-last: left;
}

.sec06__balloonText:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: traslateX(-50%) rotate(-20deg);
    border-left: 5px dotted #eac988;
    height: 20px;
    content: "";
}





/* フッター */
.footer {
    background-color: #73a3e3;
    margin-top: 60px;
    /* padding: 40px 0; */
    color: #f3f3f3;
}

.footer__wrap {
    width: 90%;
    margin: 0 auto;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
}

.footer__title {
    font-size: 20px;
}

.footer__contentText {
    text-align-last: left;
    margin-top: 20px;
    line-height: 2;
}


.footer__tel {
    text-decoration: none;
    color: #f3f3f3;
    font-size: 20px;
}

.footer__sns {

    margin-top: 20px;
    display: flex;
}

.footer__sns img {
    width: 35px;
    margin-right: 10px;
}


.footer .btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #1c2649;
    font-family: "Montserrat", sans-serif;
    /* box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2); */
    overflow: hidden;
    border: none;
    width: 30%;
    /* margin: 20px auto 0; */
    color: #f3f3f3;
    text-decoration: none;
    padding: 10px 0;
    margin-top: 20px;
}

.footer__btnWrap {
    margin-top: 50px;
}

.copyright {
    margin-top: 100px;
    text-align: center;
}