@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: robot;
    src: url(../fs/RobotoMono-ExtraLight.ttf);
}

@font-face {
    font-family: noto;
    src: url(../fs/Noto_Sans_JP/static/NotoSansJP-Regular.ttf);
}

h1 {
    font-size: 2.5vw;
    text-shadow: 1px 1px 2px;
}

h2 {
    letter-spacing: -.25em;
    font-size: 2.9vw;
    font-family: noto;
    color: #7B4E4B;
}

h3 {
    letter-spacing: .15em;
    font-size: 1.8vw;
    font-family: noto;
    color: #7B4E4B;
}

h4 {
    letter-spacing: .15em;
    font-size: 1.7vw;
    font-family: noto;
    color: #7B4E4B;
}

h5 {
    margin-bottom: 1vw;
    text-align: center;
    letter-spacing: .1em;
    font-size: 1.45vw;
    font-family: noto;
    color: #7B4E4B;
}

p {
    letter-spacing: .1em;
    font-size: 1.4vw;
    line-height: 1.3;
    font-family: noto;
    color: #7B4E4B;
}

a {
    text-decoration: none;
    text-align: center;
    font-family: noto;
    color: #7B4E4B;
}

ul {
    list-style-type: none;
}

li {
    font-family: noto;
    text-align: center;
    font-size: 1.5vw;
}

html {
    scroll-behavior: smooth;
}

label {
    font-family: noto;
    color: #7B4E4B;
}
/* ヘッダーここから */
header:nth-of-type(2) {
    display: none;
}

header {
    display: flex;
    width: 100%;
}

header .h1-box {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    margin-top: 1vw;
    z-index: 10000;
}

header .h1-box h1 {
    width: 25%;
    margin-top: .2vw;
    margin-left: 4%;
    margin-right: 17%;
}

header .h1-box h1 img {
    position: relative;
    width: 100%;
    vertical-align: bottom; 
    z-index: 5;
}

.h1-box nav {
    width: 48%;
    height: 4.5vw;
    margin-top: 1.1vw;
    margin-right: 1.5%;
    border-radius: 5vw;
    background-color: rgba(255, 255, 255, .8);
}

.h1-box nav ul {
    display: flex;
    padding-top: .6vw;
    padding-left: 6.5%;
}

.h1-box nav ul li {
    width: fit-content;
    margin-left: 1%;
    margin-right: 4.5%;
    transition: .5s;
}

.h1-box nav ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: .5vw;
    padding-bottom: .5vw;
    letter-spacing: .05em;
    font-family: noto;
    color: #59BC7B;

    text-shadow: 0.3px 0.3px 0 #7B4E4B, -0.3px -0.3px 0 #7B4E4B,
                -0.3px 0.3px 0 #7B4E4B, 0.3px -0.3px 0 #7B4E4B,
                0px 0.3px 0 #7B4E4B,  0-0.3px 0 #7B4E4B,
                -0.3px 0 0 #7B4E4B, 0.3px 0 0 #7B4E4B,
                1px 1px 0px rgb(203, 203, 203);

    transition: .5s;
}

.h1-box nav ul li:hover {
    transition: .5s;
}

.h1-box nav ul li a:hover {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: .5vw;
    padding-bottom: .5vw;
    font-family: noto;
    color: #7B4E4B;
    transition: .5s;
}
/* ヘッダーここまで */

/* 60%ここから------------------------------------------------------------ */
.center60 {
    position: relative;
    width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5%;
    padding-bottom: 3vw;
    border-radius: 20px;
    box-shadow: 2px 2px 4px gray;
    background-color: #EBEBDC;
    z-index: 9;
}
/* 60%ここまで */

/* 真下のここから ----------------------------------------------------------*/
.link-box {
    display: none;
    position: fixed;
    right: -18.4vw;
    bottom: 2.5vw;
    width: 35%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    z-index: 10000000;
    opacity: .9;
}

.link-box1 {
    width: 50%;
    margin-right: 2%;
    margin-bottom: 1vw;
    border: 3px solid #F7F7F7;
    border-radius: 10px;
    box-shadow: 1px 1px .5px gray;
    background-color: #FFED97;
}

.link-box1 p {
    padding-top: .7vw;
    padding-bottom: .6vw;
    text-align: center;
    color: #59BC7B;
    font-size: 1.4vw;
}

.link-box2 {
    width: 50%;
    border: 3px solid #F7F7F7;
    border-radius: 10px;
    box-shadow: 1px 1px .5px gray;
    background-color: #FFED97;
}

.link-box2 p {
    padding-top: .7vw;
    padding-bottom: .6vw;
    text-align: center;
    color: #59BC7B;
    font-size: 1.4vw;
}
/* 真下のここまで */

main {
    position: relative;
    background: #ffffff;
    background: linear-gradient(0deg,rgb(189, 226, 255) 50%, rgb(233, 244, 252) 100%);
    padding-bottom: 9vw;
    overflow: hidden;
}

/* フッターの雲 */
.left-cloud {
    position: absolute;
    bottom: -5vw;
    left: -2vw;
    width: 90%;
    z-index: 3;
    opacity: 0;
    transition: 2s;
    transform: translateY(50px);
}

.cloud-left-img {
    width: 45%;
}

.cloud-left-img img {
    width: 100%;
    vertical-align: bottom;
}

.right-cloud {
    position: absolute;
    bottom: -6vw;
    left: 65vw;
    width: 90%;
    opacity: 0;
    transition: 2s;
    transform: translateY(50px);
}

.cloud-right-img {
    width: 45%;
}

.cloud-right-img img {
    width: 100%;
    vertical-align: bottom;
}

.center-raimbow {
    position: absolute;
    bottom: -5vw;
    left: 2vw;
    width: 94%;
    opacity: 0;
    transition: 8s;
    transform: translateY(50px);
}

.center-raimbow-img {
    width: 120%;
    opacity: .6;
}

.center-raimbow-img img {
    width: 100%;
    vertical-align: bottom;
}
/* Sampleここから */
.faq-box {
    width: 100%;
    margin-top: 15vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8vw;
    padding-bottom: 4vw;
}

.faq-box .faq-title {
    position: relative;
    width: 26.5%;
    height: 1.1vw;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    background-color: #FFE37C;
}

.faq-box .faq-title h2 {
    position: absolute;
    top: -2.7vw;
    width: fit-content;
    text-align: center;
    text-indent: .3em;
    letter-spacing: normal;
}

.faq-article {
    width: 95%;
    margin-top: 3vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vw;
}

.faq-article p {
    text-align: center;
}
/* PCサイズ */
.movie-pc {
    display: flex;
    width: 98%;
    margin-top: 2.5vw;
    margin-left: auto;
    margin-right: auto;
}

.movie-pc-child {
    width: 31%;
    margin-left: auto;
    margin-right: auto;
}

.movie-pc-child .sample-img {
    width: 100%;
}

.sample-img video {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.movie-pc-child h5 {
    width: fit-content;
    margin-top: .8vw;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #59BC7B;
}
/* スマホサイズ */
.movie-smart {
    display: flex;
    width: 98%;
    margin-top: 2.5vw;
    margin-left: auto;
    margin-right: auto;
}

.movie-smart-child {
    width: 22%;
    margin-left: auto;
    margin-right: auto;
}

.movie-smart-child .sample-img {
    width: 100%;
}

.movie-smart-child h5 {
    width: fit-content;
    margin-top: .7vw;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #59BC7B;
}
/*  */












/* Sampleここまで */

/* フッターここから */
footer {
    position: relative;
    width: 100%;
    height: 29vw;
    margin-top: -15.5vw;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/footer-center.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
}

.footer-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16vw;
}

.footer-imgbox {
    display: flex;
    width: 100%;
}

.footer-imgbox img {
    width: 100%;
    vertical-align: bottom;
}

.imgbox1 {
    display: none;
}

.imgbox2 {
    width: 20%;
    margin-left: 4%;
    padding-top: 1.4vw;
}
/* mail */
.footer-address {
    display: flex;
    width: 90%;
    margin-left: 4.5%;
    margin-right: auto;
    align-items: flex-end;
}

.mail-img {
    width: 2%;
    margin-right: 1%;
    padding-bottom: .2vw;
}

.mail-img img {
    width: 100%;
    vertical-align: bottom;
}

.mail-address {
    width: 30%;
    margin-right: auto;
    padding-top: 1.8vw;
}

.footer-address p {
    text-align: left;
    font-size: 1.2vw;
}
/* 利用規約・プライバシー */
.footer-link {
    display: flex;
    width: 90%;
    margin-top: 1vw;
    margin-left: 4.5%;
}

.footer-kiyaku {
    width: 14%;
}

.footer-kiyaku a p {
    font-size: 1.2vw;
    text-align: left;
}

.kugiri {
    width: 1%;
}

.kugiri p {
    font-size: 1.2vw;
}

.footer-privacy {
    width: 30%;
    margin-left: .2%;
}

.footer-privacy a p {
    font-size: 1.2vw;
    text-align: left;
}
/* ソーシャルアイコンここから */
.social-box {
    position: absolute;
    bottom: 4.5vw;
    right: 28.6vw;
    display: flex;
    width: 25%;
    margin-right: auto;
}

.social-box a:nth-of-type(1) {
    width: 14%;
    margin-right: 5%;
}

.social-box a:nth-of-type(2) {
    width: 14%;
}

.social-box a img {
    width: 100%;
    vertical-align: bottom;
    filter: sepia(90%);
    
}
/* ソーシャルアイコンここまで */
.footer-copy {
    width: 100%;
    padding-top: .5vw;
}

.footer-copy p {
    text-align: center;
    font-size: 1.2vw;
}
/* フッターここまで */
.isAnimate {
    opacity: 1;
    transform: translateY(0px);
}