@charset "utf-8";
.pc-view{
    display: block;
}
.sp-view{
    display: none;
}
.fcolor-main{
    color:#808080;}
.fcolor-pink{
    color:#fc92a3;}

header{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 70px;
    z-index: 10;
    background-color: rgba(255,255,255,0.9);}
    .logo-view{
        position: absolute;
        top: 0;
        left: 0;
        height:50px;
        padding-top: 10px;}
        .logo-view img{
            height: 100%;}
    .header-menu{
        height: 64px;
        line-height: 64px;
        list-style: none;
        display:flex;
        justify-content: flex-end;}
        .header-menu span{
            cursor: pointer;
            padding-left: 2vw;
            padding-right: 2vw;
            text-decoration: none;}
        .header-menu li{
            position: relative;
            height: 100%;
            overflow: hidden;}
            .sub-header-menu{
                position: absolute;
                width: max-content;
                top: calc(100% - 0.5rem);}
                .sub-header-menu p{
                    margin: 0;
                    background-color: #E46C62;}
                    .sub-header-menu p a{
                        color: #fff;}
                .sub-header-menu hr{
                    background-color: #fff;
                    border: unset;
                    height: 1px;
                    margin: 0;}
                .sub-header-menu p,
                .sub-header-menu hr{
                    opacity: 0;
                    transform: rotateY(90deg);}
                .header-menu li:hover{
                    overflow: unset;}
                .header-menu li:hover .sub-header-menu :nth-child(1){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.1s;}
                .header-menu li:hover .sub-header-menu :nth-child(2){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.2s;}
                .header-menu li:hover .sub-header-menu :nth-child(3){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.3s;}
                .header-menu li:hover .sub-header-menu :nth-child(4){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.4s;}
                .header-menu li:hover .sub-header-menu :nth-child(5){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.5s;}
                .header-menu li:hover .sub-header-menu :nth-child(6){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.6s;}
                .header-menu li:hover .sub-header-menu :nth-child(7){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.7s;}
body{}
.paragraph-num{
    font-size: 6rem;}
ul.pinkchk{
    list-style-position: inside;
    list-style-image: url("../img/chkpink.png");}
ul.bluechk{
    list-style-position: inside;
    list-style-image: url("../img/chkblue.png");}
ul.orangechk{
    list-style-position: inside;
    list-style-image: url("../img/chkorange.png");}
ul.pinksircle{
    margin-top: 4rem;
    margin-bottom: 4rem;
    list-style-position: inside;
    list-style-image: url("../img/ul_circle_pink.png");}
    /*ul.pinksircle li::marker{
        color:#f46c62;
        font-size: 1.6rem;}*/
    
    ul.pinkchk,
    ul.bluechk,
    ul.orangechk,
    ul.pinksircle{
        padding-left: 1.6rem;}
ul li{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

article{
    width: 100%;}
section{}
    section p{
        font-size: 1.6rem;}
.content{
    width: calc(100% - 10vw);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:0;
    left:0;}
    

.article_1{
    margin-left: auto;
    margin-right: auto;
    padding-top: 70px;
    padding-bottom: 10rem;
    /*margin-top: calc(64px + 21vw);*/
    /*height: 35vw;*/
    background: linear-gradient(180deg, #fff 0%, #fff 50%, #fceff1 50%, #fceff1 100%);
    /*background-color: #fceff1;*/
    position: relative;
    top: 0;
    left: 0;
    text-align: right;
    /*background: url("../img/top.png") center / cover;*/}
    .article_1 .img_1{
        /*position: absolute;
        top: -20vw;
        right: 0;*/
        /*background: url("../img/top.png") center / cover;*/}
        .article_1 .img_1 img{
            border-radius: 10px;
            margin-left: auto;
            width: 70%;}
    .article_1 .text_1{
        position: absolute;
        bottom: -2rem;
        left: 0;
        width: 40%;
        padding: 4rem;
        border-radius: 10px;
        background-color: #fff;}
        .article_1 .text_1 h1{
            font-size: 2vw;}
        .article_1 .text_1 p{
            font-size: 1vw;}
.article_2{
    margin-left: auto;
    margin-right: auto;
    padding-top: 10rem;
    padding-bottom: 10rem;
    background-color: #fceff1;
    position: relative;
    top: 0;
    left: 0;
    /*background: url("../img/top.png") center / cover;*/}
    .article_2 .img_2{
        /*position: absolute;
        top: 0;
        left: 0;
        width: 70%;*/
        /*background: url("../img/top.png") center / cover;*/}
        .article_2 .img_2 img{
            border-radius: 10px;
            width: 70%;}
    .article_2 .text_2{
        position: absolute;
        bottom: -2rem;
        right: 0;
        width: 40%;
        padding: 3vw;
        border-radius: 10px;
        background-color: #fff;}
        .article_2 .text_2 h1{
            font-size: 1.4vw;}

.article_3{
    margin-left: auto;
    margin-right: auto;
    padding-top: 10rem;
    padding-bottom: 10rem;
    position: relative;
    top: 0;
    left: 0;}
    .article_3 h1{
        font-size: 4rem;}
    .article_3 .sub-title{
        margin:0;
        font-size: 1.8rem;}
    .article_3 .text_3{
        font-size: 1.6rem;}
    .article_3 .left-content{
        width: 50%;}
    .article_3 .right-content{
        width: 50%;}
        .article_3 .right-content img{
            border-radius: 10px;}
.article_4{
    margin-left: auto;
    margin-right: auto;
    padding-top: 10rem;
    
    position: relative;
    top: 0;
    left: 0;
    background-color: #f9f9f9;}
    .article_4 h1{
        font-size: 4rem;}
    .article_4 .sub-title{
        margin:0;
        font-size: 1.8rem;}
    .article_4 .text_4{
        font-size: 1.6rem;}
    .article_4 .left-content{
        position: relative;}
        .article_4 .left-content img{
            width: 100%;
            max-width: 600px;
            position: absolute;
            bottom: 0;
            right:0;}
    .article_4 .left-content,
    .article_4 .right-content{
        width: 50%;}
        .article_4 .p-name{
            font-size: 3rem;
            /*font-family: "Times New Roman";*/}
            .article_4 .text-large{
                font-size: 6rem;}
.article_5{
    margin-left: auto;
    margin-right: auto;
    padding-top: 10rem;
    padding-bottom: 10rem;
    position: relative;
    top: 0;
    left: 0;}
    .article_5 .cp-content{
        width: calc(100% - 40vw);
        border-bottom:dotted 3px #9ee2e8;
        font-size: 1.6rem;
        margin: 30px auto;
        padding: 10px 0;}
    .article_5 h1{
        font-size: 4rem;}
    .article_5 .sub-title{
        margin:0;
        font-size: 1.8rem;}
    .article_5 .left-content{
        width: 20%;
        padding-left: 20px;}
    .article_5 .right-content{
        width: 80%;
        padding-left: 20px;}

.article_6{
    margin-left: auto;
    margin-right: auto;
    padding-top: 8rem;
    padding-bottom: 12rem;}
    .article_6 h1{
        font-size: 4rem;}
    .article_6 .sub-title{
        margin:0;
        font-size: 1.8rem;}

.sns-content{
    padding-top: 8rem;
    /*width: calc(100% - 40vw);*/
    width: 30%;
    margin: 10px auto 30px;}

.article_7{
    background-color: #fceff1;}
    .doc-menu{
        line-height: 4rem;
        list-style: none;
        display:flex;
        justify-content: /*center*/flex-end;
        }
        .doc-menu a{
            margin-left: 2rem;
            margin-right: 2rem;
            color: #808080;
            text-decoration: none;}
            .doc-menu a:hover{
                text-decoration: underline;}



@media (max-aspect-ratio: 10/9) {
.pc-view{
    display: none;
}
.sp-view{
    display: block;
}
header{
    position: fixed;
    top:0;
    left:0;
    z-index: 2;}
    /*header .content{
        width: calc(100% - 2rem);}*/
    header .logo-view{
        padding-top: 0;
        margin-top: 1.5rem;
        height: 38px;}
    .hamburger-btn{
        position: absolute;
        width: 40px;
        height: 40px;
        top: 1.5rem;
        right: 1.5rem;
        background-color: #f6bec1;
        border-radius: 50%;
        cursor: pointer;}
        .hamburger-btn .hamburger-btn-line{
            position: absolute;
            top: 20px;
            left: 9px;}
        .hamburger-btn-line::before{
            transform: rotate(0deg);
            top: -7px;}
        .hamburger-btn-line::after{
            transform: rotate(0deg);
            top: 5px;}
        .hamburger-btn-line,.hamburger-btn-line::before,.hamburger-btn-line::after{
            display: block;
            content: " ";
            position: relative;
            height: 2px;
            width: 22px;
            background-color: #fff;
            transition: all 0.5s ease;}
            .hamburger-btn-line.close-button::before{
                transform: rotate(45deg);
                top: -1px;}
            .hamburger-btn-line.close-button::after{
                transform: rotate(-45deg);
                top: -3px;}
            .hamburger-btn-line.close-button{
                background-color: #f6bec1;}
    header .header-top-menu{
        position: absolute;
        top: 70px;/*120px*/
        right: -75vw;
        width: 75vw;
        text-align: center;
        line-height: 6vh;
        font-size: 2vh;
        background-color: rgba(252,146,163,0.6);
        transition: all 0.5s ease;}
        header .header-top-menu p{
            cursor: pointer;
            color: #fff;}
            header .header-top-menu hr{
            height: 1px;
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            border: unset;}
            header .header-top-menu.menu-open{
                right: 0vw;
                transition: all 0.5s ease;}

.article_1 .img_1{
    position: relative;
    margin-left: auto;
    height:calc(100vh - 36vh);
    width: 80%;
    border-radius: 10px;
    background: url("../img/top1.png") 35% 10% / cover;}
.article_1 .text_1 {
    bottom: -7rem;
    left: 0;
    width: 65%;
    padding: 4rem;
    border-radius: 10px;}
    .article_1 .text_1 h1{
        font-size: 2rem;}
    .article_1 .text_1 p{
        font-size: 1.2rem;}
.article_2 .img_2{
    position: relative;
    margin-right: auto;
    height:calc(100vh - 36vh);
    width: 80%;
    border-radius: 10px;
    background: url("../img/top2.png") 100% 100% / cover;}
.article_2 .text_2 {
    bottom: -7rem;
    right: 0;
    width: 65%;
    padding: 4rem;
    border-radius: 10px;}
    .article_2 .text_2 h1{
        font-size: 1.4rem;}
.content,
.article_5 .cp-content{
    width: calc(100% - 3rem);}
.sns-content{
    width: 100%;}

.article_3 .left-content,
.article_3 .right-content,
.article_4 .left-content,
.article_4 .right-content{
    float: unset;
    list-style: none;
    width:100%;}

.article_3 img{
    border-radius: 10px;}
.article_3 .flex-view{
    display: block;}
.article_4 .text-large{
    font-size: 4rem;}

.article_5 .left-content {
    width: 30%;}
.article_5 .right-content {
    width: 70%;}

.doc-menu{
    display: block;}
    .doc-menu a{
        text-decoration: underline;}

}


.scroll_fadein{
    opacity: 1;
    top: 0;
    left: 0;
    animation:  scroll_fadein 1s ease 0s 1 alternate;}


@keyframes scroll_fadein {
0% {
    top:200px;
    opacity: 0;
}
100% {
    top:0px;
    opacity: 1;}
}