@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(max-width:999px){

/*STYLE*/
.pc {
display:none;
}

.cts {
width:90%;
margin:auto;
position:relative;
}

.titles {
    position:relative;
    display:flex;
    align-items:center;
}

.titles h2 {
    margin-bottom:5px;
}

.titles h2 img {
    width:auto;
    height:70px;
}

.titles .kana {
    font-size:110%;
    font-weight:bold;
    position:absolute;
}

.more_btn {
}

.more_btn a {
    background:linear-gradient(to right,#ccc,#aaa);
    display:inline-block;
    padding:15px 40px;
    border-radius:50vw;
}

.more_btn a p {
    font-size:100%;
    font-weight:500;
    color:#fff;
}



/*----- HEADER -----*/
header {
    width:100%;
    height:70px;
    position:fixed;
    display:flex;
    justify-content:space-between;
    z-index:999;
}

header h1 {
    width:250px;
    margin:15px 0 0 15px;
}



/*----- MV -----*/
#mv {
    width:100vw;
    height:100vh;
    position:relative;
    padding:90px 0 0;
}

#mv .cts {
    width:90%;
}

#mv .mv {
    width:100%;
    height:55vh;
    background:url(../img/mv.jpg) center;
    background-size:cover;
    border-radius:8vw;
}

#mv .copies {
    width:100%;
    height:calc(45vh - 70px);
    padding-top:4.5vh;
    text-align:center;
}

#mv .copies .copy {
    font-size:170%;
    font-weight:600;
    line-height:160%;
    letter-spacing:3px;
}

.objects {
    width:70px;
    position:absolute;
    right:0;
    bottom:20px;
}

.objects .object {
    margin-top:5px;
}

.objects .object.gra {
    width:70px;
    height:6px;
    position:relative;
    transform:translate(120%,0);
    display:none;
    -webkit-animation:wave 1.5s infinite alternate;
    animation:wave 1.5s infinite alternate;
}

.objects .object.gradation_b {
    background:linear-gradient(to right,#50b7e9,#50b7e9,#327abe,#327abe);
    animation-delay:0.1s;
}

.objects .object.gradation_b:before {
    content:"";
    width:6px;
    height:6px;
    background:#50b7e9;
    border-radius:100vw;
    position:absolute;
    left:-3px;
}

.objects .object.gradation_b:after {
    content:"";
    width:6px;
    height:6px;
    background:#327abe;
    border-radius:100vw;
    position:absolute;
    right:-3px;
}

.objects .object.gradation_e {
    background:linear-gradient(to right,#2eaf6c,#2eaf6c,#75c29e,#75c29e);
    animation-delay:0.2s;
}

.objects .object.gradation_e:before {
    content:"";
    width:6px;
    height:6px;
    background:#2eaf6c;
    border-radius:100vw;
    position:absolute;
    left:-3px;
}

.objects .object.gradation_e:after {
    content:"";
    width:6px;
    height:6px;
    background:#75c29e;
    border-radius:100vw;
    position:absolute;
    right:-3px;
}

.objects .object.gradation_r {
    background:linear-gradient(to right,#e85c9b,#e85c9b,#da1260,#da1260);
    animation-delay:0.3s;
}

.objects .object.gradation_r:before {
    content:"";
    width:6px;
    height:6px;
    background:#e85c9b;
    border-radius:100vw;
    position:absolute;
    left:-3px;
}

.objects .object.gradation_r:after {
    content:"";
    width:6px;
    height:6px;
    background:#da1260;
    border-radius:100vw;
    position:absolute;
    right:-3px;
}

.objects .object.gradation_y {
    background:linear-gradient(to right,#f4ab17,#f4ab17,#f3dc24,#f3dc24);
    animation-delay:0.4s;
}

.objects .object.gradation_y:before {
    content:"";
    width:6px;
    height:6px;
    background:#f4ab17;
    border-radius:100vw;
    position:absolute;
    left:-3px;
}

.objects .object.gradation_y:after {
    content:"";
    width:6px;
    height:6px;
    background:#f3dc24;
    border-radius:100vw;
    position:absolute;
    right:-3px;
}

.objects .object.gradation_p {
    background:linear-gradient(to right,#564497,#564497,#252850,#252850);
    animation-delay:0.5s;
}

.objects .object.gradation_p:before {
    content:"";
    width:6px;
    height:6px;
    background:#564497;
    border-radius:100vw;
    position:absolute;
    left:-3px;
}

.objects .object.gradation_p:after {
    content:"";
    width:6px;
    height:6px;
    background:#252850;
    border-radius:100vw;
    position:absolute;
    right:-3px;
}

.objects .object.gradation_o {
    background:linear-gradient(to right,#e73e18,#e73e18,#ee7b1a,#ee7b1a);
    animation-delay:0.6s;
}

.objects .object.gradation_o:before {
    content:"";
    width:6px;
    height:6px;
    background:#e73e18;
    border-radius:100vw;
    position:absolute;
    left:-3px;
}

.objects .object.gradation_o:after {
    content:"";
    width:6px;
    height:6px;
    background:#ee7b1a;
    border-radius:100vw;
    position:absolute;
    right:-3px;
}



/*----- TOP TOPICS -----*/
#top_topics {
    padding:50px 0 100px;
}

#top_topics .cts {
    width:90%;
}

#top_topics .titles {
    position:relative;
    display:flex;
    align-items:center;
    flex-direction:column;
    margin-bottom:10px;
}

#top_topics .titles h2 {
    margin:0 auto 0;
    text-align:center;
}

#top_topics .titles h2 img {
    width:auto;
    height:80px;
}

#top_topics .titles .kana {
    margin:auto;
    position:relative;
}

#top_topics .titles .kana:first-letter {
    color:#50b7e9;
}

#top_topics .topics {
    width:100%;
    padding:25px 25px 25px;
    background:rgba(245,245,245,0.85);
    border-radius:5vw;
    position:relative;
}

#top_topics .topics .more_btn {
    text-align:center;
    margin-top:25px;
}

#top_topics .topics .more_btn a {
    background:linear-gradient(to right,#50b7e9,#50b7e9,#327abe,#327abe);
}

.topics {
}

.topics .topic {
    margin-bottom:20px;
}

.topics .topic:last-child {
    margin-bottom:0;
}

.date_cate {
    display:flex;
    align-items:center;
    margin-bottom:3px;
}

.date_cate .date {
    line-height:100%;
    margin-right:15px;
}

.date_cate .cate {
    min-width:100px;
    text-align:center;
    font-size:70%;
    font-weight:500;
    line-height:100%;
    color:#fff;
    padding:3px 5px;
    border-radius:5px;
}



/*----- TOP ABOUT -----*/
#top_about {
    padding:0 0 100px;
}

#top_about .cts {
    width:90%;
    position:relative;
}

#top_about .titles .kana {
    position:absolute;
    right:0;
}

#top_about .titles .kana:first-letter {
    color:#75c29e;
}

#top_about .details {
    width:100%;
    margin:auto;
}

#top_about .details .patterns {
    width:90%;
    margin:0 auto 30px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

#top_about .details .patterns .pattern {
    width:31%;
    margin-bottom:3.5%;
}

#top_about .details .patterns .pattern:nth-child(n+7) {
    margin-bottom:0;
}

#top_about .details .detail {
    width:100%;
}

#top_about .details .detail h3 {
    font-size:160%;
    text-align:center;
    margin-bottom:15px;
}

#top_about .details .detail .ex {
}

#top_about .details .detail .ex p {
}

#top_about .more_btn {
    text-align:center;
    margin-top:30px;
}

#top_about .more_btn a {
    background:linear-gradient(to right,#2eaf6c,#75c29e);
}




/*----- TOP SERVICE -----*/
#top_service {
    padding:0 0 100px;
    position:relative;
}

#top_service .gramask {
    display:none;
}

#top_service .cts {
    width:90%;
}

#top_service .titles .kana {
    right:0;
}

#top_service .titles .kana:first-letter {
    color:#e85c9b;
}

#top_service .titles {
    position:relative;
    z-index:2;
}

#top_service .details {
}

#top_service .details .copies {
    width:100%;
    position:relative;
    z-index:1;
    text-align:center;
    margin-bottom:25px;
}

#top_service .details .copies .copy {
}

#top_service .details .copies .copy h3 {
    font-size:150%;
    padding-bottom:5px;
}

#top_service .details .copies .copy .tx {
}

#top_service .details .copies .line {
    width:100px;
    height:1px;
    background:#e1e1e1;
    display:none;
}

#top_service .details .copies .more_btn {
}

#top_service .details .copies .more_btn a {
    width:80px;
    height:80px;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:linear-gradient(to left,#da1260,#e85c9b);
}

#top_service .details .copies .more_btn a p {
    line-height:135%;
}

#top_service .details .detail {
    width:100%;
}

#top_service .details .detail .division:nth-child(odd) {
    transform:translate(105%,0);
}

#top_service .details .detail .division:nth-child(even) {
    transform:translate(-105%,0);
}

#top_service .details .detail .division {
    width:95%;
    margin-bottom:12px;
}

#top_service .details .detail .division:nth-child(2n) {
    margin:0 0 12px auto;
}

#top_service .details .detail .division a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:30vw;
    padding:10px 20px;
}

#top_service .details .detail .division:nth-child(2n) a {
    flex-direction:row-reverse;
}

#top_service .details .detail .division.graphic a {
    background:linear-gradient(to left,#327abe,#50b7e9);
}

#top_service .details .detail .division.web a {
    background:linear-gradient(to right,#e73e18,#ee7b1a);
}

#top_service .details .detail .division.movie a {
    background:linear-gradient(to left,#f4ab17,#f3dc24);
}

#top_service .details .detail .division.writing a {
    background:linear-gradient(to right,#2eaf6c,#75c29e);
}

#top_service .details .detail .division a .photo {
    width:25vw;
}

#top_service .details .detail .division a .items {
    width:calc(100% - 25vw);
}

#top_service .details .detail .division:nth-child(odd) a .items {
    text-align:right;
    padding-right:20px;
}  

#top_service .details .detail .division:nth-child(even) a .items {
    text-align:left;
    padding-left:20px;
}

#top_service .details .detail .division a .items .item {
    font-size:150%;
    font-weight:600;
    line-height:100%;
    color:#fff;
    margin-bottom:7px;
}

#top_service .details .detail .division a .items .jp {
    font-size:80%;
    line-height:100%;
    color:#fff;
}

#top_service .more_btn {
    text-align:center;
    margin-top:20px;
}

#top_service .more_btn a {
    background:linear-gradient(to left,#da1260,#e85c9b);
}




/*----- TOP WORKS -----*/
#top_works {
    padding:0 0 100px;
}

#top_works .cts {
    width:90%;
}

#top_works .titles {
    margin-bottom:20px;
}

#top_works .titles h2 img {
    width:auto;
    height:45px;
}

#top_works .titles .kana {
    right:0;
}

#top_works .titles .kana:first-letter {
    color:#e73e18;
}

#top_works .galleries {
    display:flex;
    flex-wrap:wrap;
}

#top_works .galleries .gallery {
    width:48%;
    height:25vw;
    overflow:hidden;
    margin:0 4% 4% 0;
    border-radius:3vw;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    border:#efefef 1px solid;
}

#top_works .galleries .gallery img {
    border-radius:3vw;
}

#top_works .galleries .gallery:nth-child(2n) {
    margin-right:0;
}

#top_works .galleries .gallery:nth-child(n+11) {
    margin-bottom:0;
}

#top_works .more_btn {
    text-align:center;
    margin-top:0;
}

#top_works .more_btn a {
    background:linear-gradient(to right,#ee7b1a,#e73e18);
    display:inline-block;
    padding:10px 30px;
    border-radius:50vw;
}




/*----- TOP BLOG -----*/
#top_blog {
    padding:100px 0 100px;
    display:none;
}

#top_blog .cts {
    width:90%;
    background:#f6f6f6;
    border-radius:5vw;
    padding:25px 25px
}

#top_blog .titles {
    margin-bottom:20px;
    position:relative;
}

#top_blog .titles .kana {
    right:-110px;
}

#top_blog .titles .kana:first-letter {
    color:#564497;
}

#top_blog .articles {
}

#top_blog .articles .article {
    width:100%;
    background:#fff;
    border-radius:2vw;
    margin-bottom:25px;
}

#top_blog .articles .article:last-child {
    margin-bottom:0;
}

#top_blog .articles .article .photo {
    width:100%;
    height:50vw;
    overflow:hidden;
    position:relative;
    border-radius:2vw 2vw 0 0;
}

#top_blog .articles .article .photo img {
    position:absolute;
    left:-100%;
    right:-100%;
    margin:auto;
    top:-100%;
    bottom:-100%;
    vertical-align:middle;
    min-height:15vw;
}

#top_blog .articles .article .detail {
    padding:15px 30px 25px;
}

#top_blog .articles .article .detail .category {
    font-size:70%;
    line-height:100%;
    padding:4px 6px;
    background:#e1e1e1;
    display:inline-block;
    margin-bottom:5px;
}

#top_blog .articles .article .detail h3 {
    font-size:135%;
    line-height:135%;
    margin-bottom:10px;
    color:#564497;
}

#top_blog .articles .article .detail .tx {
    font-size:90%;
}

#top_blog .more_btn {
    margin-top:30px;
    text-align:center;
}

#top_blog .more_btn a {
    background:linear-gradient(to left,#252850,#564497);
}



/*----- TOP COMPANY -----*/
#top_company {
    padding:0 0 50px;
}

#top_company .cts {
    width:90%;
}

#top_company .titles {
    margin-bottom:10px;
}

#top_company .titles .kana {
    right:0;
}

#top_company .titles .kana:first-letter {
    color:#f3dc24;;
}

#top_company .details {
}

#top_company .details .overviews {
    width:100%;
    background:#f6f6f6;
    border-radius:5vw;
    padding:25px 30px;
}

#top_company .details .overviews .overview {
    display:flex;
    justify-content:space-between;
    margin-bottom:30px;
}

#top_company .details .overviews .overview:last-child {
    margin-bottom:0;
}

#top_company .details .overviews .overview .item {
    width:25%;
}

#top_company .details .overviews .overview .detail {
    width:75%;
}

#top_company .details .overviews .overview .detail .divisions {
}

#top_company .details .overviews .overview .detail .divisions .division {
    margin-bottom:15px;
}

#top_company .details .overviews .overview .detail .divisions .division:last-child {
    margin-bottom:0;
}

#top_company .details .overviews .overview .detail .divisions .division .business {
    width:100%;
    font-weight:bold;
}

#top_company .more_btn {
    margin-top:20px;
    text-align:center;
}

#top_company .more_btn a {
    background:linear-gradient(to left,#f4ab17,#f3dc24);
}



/*----- TOP BANNER -----*/
#banner {
}

#banner .cts {
    width:90%;
    display:flex;
    justify-content:space-between;
}

#banner .banner {
    width:48%;
}

#banner .banner a {
    display:block;
}

#banner .banner a .banner_recruit {
    background:url(../img/banner_recruit.jpg) top center;
    background-size:cover;
    border-radius:3vw;
    padding:5vw;
    height:40vw;
    display:flex;
    align-items:center;
}

#banner .banner a .banner_contact {
    background:url(../img/banner_contact.jpg) center;
    background-size:cover;
    border-radius:3vw;
    padding:5vw;
    height:40vw;
    display:flex;
    align-items:center;
}

#banner .banner a .detail {
}

#banner .banner a .detail .item {
    font-size:135%;
    color:#fff;
}

#banner .banner a .detail .tx {
    font-size:80%;
    color:#fff;
}



/*----- PAGE -----*/
main {
    padding:75px 0 70px;
}

.pagetitles {
    width:94%;
    height:90px;
    margin:0 auto 15px;
    border-radius:100vw;
    background:linear-gradient(to right,#aaa,#ccc);
    display:flex;
    align-items:center;
    padding-left:30px;
}

.pagetitles .pagetitle {
    display:flex;
    align-items:center;
}

.pagetitles .pagetitle img {
    width:auto;
    height:30px;
}

.pagetitles .pagetitle .dot {
    width:6px;
    height:6px;
    background:#fff;
    border-radius:6px;
    margin:0 10px;
}

.pagetitles .pagetitle h2 {
    font-size:100%;
    font-weight:600;
    color:#fff;
}

.bread {
    width:90%;
    margin:0 auto 35px;
    text-align:right;
    font-size:70%;
}

.BackBtn {
    text-align:center;
    margin-top:30px;
}

.BackBtn a {
    display:inline-block;
    background:linear-gradient(to right,#969696,#b4b4b4);
    text-align:center;
    padding:10px 35px;
    border-radius:30vw;
}

.BackBtn a p {
    color:#fff;
}



/*----- ABOUT -----*/
#about {
}

#about .cts {
    width:90%;
}

#about .pagetitles {
    background:linear-gradient(to right,#2eaf6c,#75c29e);
}

#about #about_us {
    margin-bottom:150px;
}

#about #about_us .cts_title {
    position:relative;
    text-align:center;
    margin-bottom:70px;
}

#about #about_us .cts_title .typo {
    width:80%;
    margin:auto;
}

#about #about_us .cts_title h3 {
    font-size:135%;
    font-weight:600;
    line-height:100%;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
}

#about #about_us .cts_title h3:first-letter {
    color:#75c29e;
}

#about #about_us .details {
}

#about #about_us .details .gradation {
    width:100%;
    display:flex;
    padding:30px 0 70px;
}

#about #about_us .details .gradation .gra {
    width:15vw;
    height:45vw;
    position:relative;
    transform:translate(0,0);
}

#about #about_us .details .gradation .gra:nth-child(even) {
    animation:float 2s ease infinite alternate;
}

#about #about_us .details .gradation .gra:nth-child(odd) {
    animation:float_re 2s ease infinite alternate;
}

#about #about_us .details .gradation .gradation_b {
    background:linear-gradient(#50b7e9,#50b7e9,#327abe,#327abe);
}

#about #about_us .details .gradation .gradation_b:before {
    content:"";
    width:15vw;
    height:15vw;
    background:#50b7e9;
    border-radius:100vw;
    position:absolute;
    top:-7.5vw;
}

#about #about_us .details .gradation .gradation_b:after {
    content:"";
    width:15vw;
    height:15vw;
    background:#327abe;
    border-radius:100vw;
    position:absolute;
    bottom:-7.5vw;
}

#about #about_us .details .gradation .gradation_e {
    background:linear-gradient(#2eaf6c,#2eaf6c,#75c29e,#75c29e);
}

#about #about_us .details .gradation .gradation_e:before {
    content:"";
    width:15vw;
    height:15vw;
    background:#2eaf6c;
    border-radius:100vw;
    position:absolute;
    top:-7.5vw;
}

#about #about_us .details .gradation .gradation_e:after {
    content:"";
    width:15vw;
    height:15vw;
    background:#75c29e;
    border-radius:100vw;
    position:absolute;
    bottom:-7.5vw;
}

#about #about_us .details .gradation .gradation_r {
    background:linear-gradient(#e85c9b,#e85c9b,#da1260,#da1260);
}

#about #about_us .details .gradation .gradation_r:before {
    content:"";
    width:15vw;
    height:15vw;
    background:#e85c9b;
    border-radius:100vw;
    position:absolute;
    top:-7.5vw;
}

#about #about_us .details .gradation .gradation_r:after {
    content:"";
    width:15vw;
    height:15vw;
    background:#da1260;
    border-radius:100vw;
    position:absolute;
    bottom:-7.5vw;
}

#about #about_us .details .gradation .gradation_y {
    background:linear-gradient(#f4ab17,#f4ab17,#f3dc24,#f3dc24);
}

#about #about_us .details .gradation .gradation_y:before {
    content:"";
    width:15vw;
    height:15vw;
    background:#f4ab17;
    border-radius:100vw;
    position:absolute;
    top:-7.5vw;
}

#about #about_us .details .gradation .gradation_y:after {
    content:"";
    width:15vw;
    height:15vw;
    background:#f3dc24;
    border-radius:100vw;
    position:absolute;
    bottom:-7.5vw;
}

#about #about_us .details .gradation .gradation_p {
    background:linear-gradient(#564497,#564497,#252850,#252850);
}

#about #about_us .details .gradation .gradation_p:before {
    content:"";
    width:15vw;
    height:15vw;
    background:#564497;
    border-radius:100vw;
    position:absolute;
    top:-7.5vw;
}

#about #about_us .details .gradation .gradation_p:after {
    content:"";
    width:15vw;
    height:15vw;
    background:#252850;
    border-radius:100vw;
    position:absolute;
    bottom:-7.5vw;
}

#about #about_us .details .gradation .gradation_o {
    background:linear-gradient(#e73e18,#e73e18,#ee7b1a,#ee7b1a);
}

#about #about_us .details .gradation .gradation_o:before {
    content:"";
    width:15vw;
    height:15vw;
    background:#e73e18;
    border-radius:100vw;
    position:absolute;
    top:-7.5vw;
}

#about #about_us .details .gradation .gradation_o:after {
    content:"";
    width:15vw;
    height:15vw;
    background:#ee7b1a;
    border-radius:100vw;
    position:absolute;
    bottom:-7.5vw;
}

#about #about_us .details .detail {
    width:100%;
}

#about #about_us .details .detail h4 {
    font-size:150%;
    font-weight:600;
    padding-bottom:10px;
    text-align:center;
}

#about #about_us .details .detail h4:first-letter {
    color:#75c29e;
}

#about #name {
    width:90%;
    background:url(../about/img/name_bg.png);
    background-size:13px;
    padding:80px 25px 25px;
    margin:0 auto 70px;
    border:#eee 1px solid;
    border-radius:5vw;
    position:relative;
}

#about #name .cts_title {
    position:absolute;
    text-align:center;
    top:-65px;
    left:0;
    right:0;
    margin:auto;
}

#about #name .cts_title .typo {
    width:80%;
    margin:auto;
}

#about #name .cts_title h3 {
    font-size:150%;
    font-weight:600;
    line-height:100%;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
}

#about #name .cts_title h3:first-letter {
    color:#75c29e;
}

#about #name .concepts {
    width:100%;
    height:30vw;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 30px;
    position:relative;
}

#about #name .concepts .concept {
    width:55%;
    height:30vw;
    border-radius:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

#about #name .concepts .concept:first-child {
    background:linear-gradient(rgba(80,183,233,0.9),rgba(50,122,190,0.9));
    position:absolute;
    left:0;
}

#about #name .concepts .concept:last-child {
    background:linear-gradient(rgba(232,92,155,0.9),rgba(218,18,96,0.9));
    position:absolute;
    right:0;
}

#about #name .concepts .concept img {
    width:120px;
}

#about #name .tx {
    text-align:center;
}

#about #logo {
}

#about #logo .cts_title {
    position:relative;
    text-align:center;
    margin-bottom:30px;
}

#about #logo .cts_title .typo {
    width:65%;
    margin:auto;
}

#about #logo .cts_title h3 {
    font-size:150%;
    font-weight:600;
    line-height:100%;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

#about #logo .cts_title h3:first-letter {
    color:#75c29e;
}

#about #logo .details {
}

#about #logo .details .logo {
    width:100%;
    height:60vw;
    display:flex;
    justify-content:center;
    align-items:center;
    border:#e1e1e1 1px solid;
    border-radius:5vw;
    margin-bottom:25px;
}

#about #logo .details .logo img {
    width:40vw;
}

#about #logo .details .detail {
    width:100%;
    text-align:center;
}

#about #logo .details .detail h4 {
    font-size:150%;
    font-weight:600;
    line-height:135%;
    padding-bottom:15px;
}

#about #logo .details .detail h4:first-letter {
    color:#75c29e;
}




/*----- SERVICE -----*/
#service {
}

#service .cts {
    width:90%;
}

#service .pagetitles {
    background:linear-gradient(to right,#da1260,#e85c9b);
}

#service .cts_title {
    position:relative;
    text-align:center;
    margin-bottom:50px;
}

#service .cts_title .typo {
    width:100%;
    margin:auto;
}

#service .cts_title h3 {
    font-size:135%;
    font-weight:600;
    line-height:100%;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
}

#service .cts_title h3:first-letter {
    color:#e85c9b;
}

#service .productions {
}

#service .productions .production {
    margin-bottom:100px;
}

#service .productions .production:last-child {
    margin-bottom:0;
}

#service .productions .production .details {
    margin-bottom:50px;
}

#service .productions .production:nth-child(even) .details {
    flex-direction:row;
}

#service .productions .production .details .photo {
    width:100%;
    height:60vw;
    background:#eee;
    border-radius:5vw;
    margin-bottom:25px;
}

#service .productions .production .details .detail {
    width:100%;
}

#service .productions .production:nth-child(odd) .details .detail {
}

#service .productions .production:nth-child(even) .details .detail {
}

#service .productions .production .details .detail h4 {
    font-size:200%;
    font-weight:600;
    line-height:125%;
    padding-bottom:15px;
}

#service .productions .production .details .detail h4:first-letter {
    color:#e85c9b;
}

#service .productions .production .details .detail .genre {
    font-size:100%;
    font-weight:600;
    line-height:135%;
    padding-bottom:15px;
}

#service .productions .production .details .detail .ex {
}

#service .productions .production .details .detail .ex p {
}

#service .productions #graphic_design .details .photo {
    background:url(../service/img/graphic_design.jpg) center;
    background-size:cover;
}

#service .productions #web_design .details .photo {
    background:url(../service/img/web_design.jpg) center;
    background-size:cover;
}

#service .productions #movie_design .details .photo {
    background:url(../service/img/movie_design.jpg) center;
    background-size:cover;
}

#service .productions #writing .details .photo {
    background:url(../service/img/writing.jpg) center;
    background-size:cover;
}

#service .productions .production .services {
}

#service .services .service {
    width:100%;
    border-bottom:#d2d2d2 1px dotted;
    margin-bottom:15px;
}

#service .services .service:nth-child(3n) {
}

#service .services .service h5 {
    font-size:120%;
    font-weight:600;
    line-height:135%;
}

#service .services .service h5:first-letter {
    color:#e85c9b;
}

#service .services .service .tx {
    font-size:90%;
    margin:5px 0 15px;
}

#service .other {
    margin-top:15px;
    border-bottom:#d2d2d2 1px dotted;
}

#service .other h5 {
    font-size:120%;
    font-weight:600;
    line-height:135%;
}

#service .other h5:first-letter {
    color:#e85c9b;
}

#service .other .tx {
    width:100%;
    padding-bottom:15px;
    font-size:100%;
}




/*----- WORKS -----*/
#works {
}

#works .cts {
    width:90%;
}

#works .pagetitles {
    background:linear-gradient(to right,#e73e18,#ee7b1a);
}

#works .cate_titles {
    width:100%;
    margin:0 auto 35px;
}

#works .cate_titles .cate_title {
    font-size:180%;
    font-weight:600;
    line-height:100%;
    margin-bottom:15px;
}

#works .cate_titles .cate_title:first-letter {
    color:#e73e18;
}

#works .cate_titles .categories {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}


#works .cate_titles .categories a {
    padding:5px 25px;
    border-radius:10vw;
    margin:5px 5px;
}

#works .cate_titles .categories a p {
    font-size:90%;
    color:#fff;
}

#works .cate_titles .categories a.none {
    pointer-events:none;
    opacity:0.3;
}

#works .articles {
    display:flex;
    flex-wrap:wrap;
}

#works .articles .article {
    width:48%;
    margin:0 4% 4% 0;
}

#works .articles .article:nth-child(2n) {
    margin-right:0;
}

#works .articles .article .photo {
    height:25vw;
    border-radius:3vw;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:12px;
    border:#efefef 1px solid;
}

#works .articles .article .photo img {
    border-radius:3vw;
}

#works .articles .article .detail {

}

#works .articles .article .detail .categories {
}

#works .articles .article .detail .categories .category {
    border:#d2d2d2 1px solid;
    color:#d2d2d2;
    display:inline-block;
    font-size:70%;
    line-height:100%;
    padding:3px 5px 5px;
    margin:0 4px 5px 0;
}

#works .articles .article .detail .categories .category:last-child {
}

#works .articles .article .detail .client {
    font-size:80%;
}

#works .articles .article .detail h3 {
    font-size:100%;
    font-weight:600;
    line-height:150%;
    color:#e73e18;
}

#works .pagenation a.now {
    pointer-events:none;
    background:#ee7b1a;
}

/*----- WORKS DETAIL -----*/
#works #project {
}

#works #project .main_photo {
    width:100%;
    max-height:100vw;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:30px;
}

#works #project .main_photo img {
    border:#efefef 1px solid;
    border-radius:3vw;
}

#works #project .names {
    text-align:center;
    margin-bottom:35px;
}

#works #project .names .categories {
}

#works #project .names .categories .category {
    border:#d2d2d2 1px solid;
    color:#d2d2d2;
    display:inline-block;
    font-size:80%;
    line-height:100%;
    padding:3px 5px 3px;
    margin:0 2px 5px;
}

#works #project .names .categories .category:last-child {
}

#works #project .names h3 {
    font-size:150%;
    font-weight:600;
    line-height:150%;
    color:#e73e18;
}

#works #project .names .client {
    font-weight:500;
}

#works #project .copy {
    width:100%;
    margin:0 auto 35px;
}

#works #project .tags {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    margin:0 auto 35px;
}

#works #project .tags li {
    margin:0 10px 10px 0;
}

#works #project .tags li a {
    background:#f0f0f0;
    color:#b4b4b4;
    font-size:80%;
    line-height:100%;
    padding:3px 5px 4px;
    border-radius:5px;
}

#works #project .details {
    width:100%;
    margin:0 auto 50px;
}

#works #project .details .photo {
    margin-top:30px;
}

#works #project .details .photo img {
    border-radius:30px;
    border:#efefef 1px solid;
}

#works #project .details .tx_top {
}

#works #project .details .tx_bottom {
    margin-top:30px;
}

#works #project .galleries {
    width:100%;
    margin:0 auto 50px;
}

#works #project .galleries .gallery {
    margin-bottom:20px;
    max-height:100vw;
    overflow:hidden;
}

#works #project .galleries .gallery:last-child {
    margin-bottom:0;
}

#works #project .galleries .gallery img {
    border-radius:30px;
}

#works #project .data {
    width:1000px;
    margin:0 auto 30px;
}

#works #project .data h4 {
    font-size:110%;
    font-weight:600;
    margin-bottom:10px;
}

#works #project .data h4:first-letter {
    color:#e73e18;
}

#works #project .data .infos {

}

#works #project .data .infos .info {
    display:flex;
    justify-content:space-between;
    border-bottom:#f0f0f0 1px solid;
    padding:20px 30px;
}

#works #project .data .infos .info:first-child {
    border-top:#f0f0f0 1px solid;
}

#works #project .data .infos .info:last-child {

}

#works #project .data .infos .info .item {
    width:20%;
}

#works #project .data .infos .info .tx {
    width:80%;
}

#works #project .more_btn {
    text-align:center;
}

#works #project .more_btn a {
    background:linear-gradient(to right,#ee7b1a,#e73e18);
    display:inline-block;
    padding:15px 70px;
    border-radius:50vw;
}

#works #project .more_btn a p {
    font-size:120%;
    font-weight:500;
    color:#fff;
}





/*----- COMPANY -----*/
#company {
}

#company .pagetitles {
    background:linear-gradient(to right,#f4ab17,#f3dc24);
}

#company #overview {
    margin-bottom:100px;
}

#company #overview .cts_title {
    position:relative;
    text-align:center;
    margin-bottom:30px;
}

#company #overview .cts_title .typo {
    width:100%;
    margin:auto;
}

#company #overview .cts_title h3 {
    font-size:135%;
    font-weight:600;
    line-height:100%;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

#company #overview .cts_title h3:first-letter {
    color:#f4ab17;
}

#company #overview .overviews {
    width:100%;
    margin:auto;
}

#company #overview .overviews .overview {
    background:#f5f5f5;
    padding:15px 20px;
    margin-bottom:15px;
    border-radius:15px;
}

#company #overview .overviews .overview:last-child {
    margin-bottom:0;
}

#company #overview .overviews .overview .item {
    width:100%;
    font-weight:bold;
}

#company #overview .overviews .overview .detail {
    width:100%;
}

#company #overview .overviews .overview .detail .divisions {
    margin-top:10px;
}

#company #overview .overviews .overview .detail .divisions .division {
    background:#fff;
    padding:15px 20px;
    margin-bottom:15px;
    border-radius:15px;
}

#company #overview .overviews .overview .detail .divisions .division:last-child {
    margin-bottom:0;
}

#company #overview .overviews .overview .detail .divisions .division .business {
    width:100%;
    font-weight:bold;
}

#company #overview .overviews .overview .detail .divisions .division .tx {
    width:100%;
}

#company #access {
}

#company #access .cts_title {
    position:relative;
    text-align:center;
    margin-bottom:50px;
}

#company #access .cts_title .typo {
    width:80%;
    margin:auto;
}

#company #access .cts_title h3 {
    font-size:135%;
    font-weight:600;
    line-height:100%;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
}

#company #access .cts_title h3:first-letter {
    color:#f4ab17;
}

#company #access .map {
    width:100%;
    height:70vw;
    margin:0 auto 20px;
}

#company #access .map iframe {
    border-radius:30px;
}

#company #access .data {
    width:100%;
    margin:auto;
}

#company #access .data .address {
}




/*----- CONTACT -----*/
#contact {
}

#contact .cts {
    width:90%;
}

#contact .pagetitles {
    background:linear-gradient(to right,#64b400,#96c800);
}

#contact .cts_title {
    position:relative;
    text-align:center;
    margin-bottom:30px;
}

#contact .cts_title .typo {
    width:90%;
    margin:auto;
}

#contact .cts_title h3 {
    font-size:135%;
    font-weight:600;
    line-height:100%;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
}

#contact .cts_title h3:first-letter {
    color:#96c800;
}

#contact .form_cts {
    min-width:100%;
    background:#f5f5f5;
    padding:25px 25px;
    border-radius:2vw;
}

#contact .form_cts .intro {
    text-align:left;
    margin-bottom:30px;
}

#contact .form_cts .intro h3 {
    font-size:150%;
    font-weight:600;
    line-height:135%;
    margin-bottom:10px;
    text-align:center;
}

#contact .form_cts .intro h3:first-letter {
    color:#96c800;
}

#contact .form_cts .intro .ex {
}

#contact .form_cts .intro .attention {
    font-size:70%;
    color:#aaa;
    display:flex;
    justify-content:center;
    margin-top:5px;
}

.forms {
}

.forms .form {
background:#fff;
padding:18px 20px;
margin-bottom:15px;
border-radius:15px;
}

.forms .form .item {
width:100%;
margin-bottom:8px;
}

.forms .form .item .required {
font-size:70%;
background:linear-gradient(to right,#da1260,#e85c9b);
color:#fff;
border-radius:5px;
padding:4px 6px;
margin-right:10px;
}

.forms .form .item .any {
font-size:70%;
background:linear-gradient(to right,#969696,#b4b4b4);
color:#fff;
border-radius:5px;
padding:4px 6px;
margin-right:10px;
}

.forms .form .detail {
width:100%;
}

.forms .form .privacy_cts {
width:100%;
padding:0;
margin:0;
}

.forms .form .privacy_cts .caution {
font-size:95%;
}

.forms .form .privacy_cts .terms {
width:100%;
height:240px;
background:rgba(255,255,255,0.05);
border:#e1e1e1 1px solid;
padding:20px 20px 20px 25px;
margin:15px 0;
}

.forms .form .privacy_cts .terms .term {
overflow-y:scroll;
height:200px;
}

.forms .form .privacy_cts .terms .term  {
}

.forms .form .privacy_cts .terms .term .privacies {
width:100%;
}

.forms .form .privacy_cts .terms .term .privacies .privacy {
padding-bottom:12px;
margin-bottom:12px;
border-bottom:#e1e1e1 1px solid;
}

.forms .form .privacy_cts .terms .term .privacies .privacy:last-child {
padding-bottom:0;
margin-bottom:0;
border-bottom:none;
}

.forms .form .privacy_cts .terms .term .privacies .privacy .privacy_item {
font-size:80%;
font-weight:bold;
padding-bottom:3px;
}

.forms .form .privacy_cts .terms .term .privacies .privacy .ex {
font-size:80%;
}

.forms .form .privacy_cts .consent {
    display:flex;
    align-items:center;
}

.forms .form .privacy_cts .consent label {
    font-weight:600;
    line-height:100%;
    cursor:pointer;
    padding-left:8px;
    color:#da1260;
    position:relative;
}

.forms .form .privacy_cts .consent label:before {
content:"";
width:18px;
height:18px;
border:#da1260 1px solid;
display:inline-block;
position:absolute;
left:-20px;
}

.forms .form .privacy_cts .consent label:after {
content:"";
width:12px;
height:18px;
border-right:#da1260 2px solid;
border-bottom:#da1260 2px solid;
display:block;
transform:rotate(45deg);
position:absolute;
top:-5px;
left:-13px;
opacity:0;
}

.forms .form .privacy_cts input[type="checkbox"] {
width:20px;
visibility:hidden;
}

.forms .form .privacy_cts input[type="checkbox"]:checked + label:after {
opacity:1;
}

.forms .form .detail .warning,
.forms .form .privacy_cts .warning{
font-size:80%;
color:#e63264;
position:relative;
top:7px;
margin-top:20px;
}

form .btns {
display:flex;
justify-content:center;
align-items:center;
}

form .btns .btn {
margin:0 7px;
}

form .btns .btn:hover {
-webkit-animation:hover 0.5s ease forwards;
animation:hover 0.5s ease forwards;
}

input[type="text"],textarea {
padding:15px 20px;
background:transparent;
border:#e1e1e1 1px solid;
}

.forms .form .style_name {
width:100%;
}

.forms .form .style_company {
width:100%;
}

.forms .form .style_mail {
width:100%;
}

.forms .form .style_tel {
width:100%;
}

.forms .form .style_chatwork {
width:100%;
}

.forms .form .style_hp {
width:100%;
}

.forms .form .style_area {
width:100%;
}

.forms .form .style_address {
width:100%;
}

.forms .form .style_text {
width:100%;
height:200px;
}

.forms .form .style_privacy {
}

.style_submit {
background:transparent;
padding:15px 50px;
color:#fff;
background:linear-gradient(to right,#da1260,#e85c9b);
border-radius:30vw;
cursor:pointer;
border:none;
}

#contact .btns .btn .accepted:disabled {
background:#ccc;
color:#fff;
pointer-events:none;
}

.style_submit:focus {
    border:none;
}

.style_fix {
background:transparent;
padding:15px 30px;
color:#fff;
background:linear-gradient(to right,#969696,#b4b4b4);
border-radius:30vw;
cursor:pointer;
border:none;
margin-right:12px;
}

.style_fix:focus {
    border:none;
}



/*THANKS*/
#contact .finish {
}

#contact .finish h3 {
font-size:150%;
font-weight:bold;
padding-bottom:30px;
color:#32bec8;
text-align:center;
}

#contact .finish .ex {
text-align:center;
padding-bottom:30px;
}

#contact .finish .attention {
font-size:90%;
text-align:center;
}



/*PRIVACY POLICY*/
#privacy {
}

#privacy .cts {
    width:90%;
}

#privacy .privacies {
}

#privacy .privacies .privacy {
padding-bottom:20px;
margin-bottom:20px;
border-bottom:#e1e1e1 1px solid;
}

#privacy .privacies .privacy:last-child {
padding-bottom:0;
margin-bottom:0;
border-bottom:none;
}

#privacy .privacies .privacy .item {
font-size:100%;
font-weight:700;
padding-bottom:5px;
}

#privacy .privacies .privacy .ex {
}






/*----- TOPICS -----*/
#topics {
}

#topics .pagetitles {
    background:linear-gradient(to right,#327abe,#50b7e9);
}

#topics .categories {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:30px;
}

#topics .categories a {
    padding:10px 25px;
    border-radius:10vw;
    margin:5px 5px;
}

#topics .categories a p {
    font-size:90%;
    color:#fff;
}

#topics .categories a.none {
    pointer-events:none;
    opacity:0.3;
}

#topics .topics {
}

#topics .topics .topic {

}

#topics .topics .topic a {
    background:#f5f5f5;
    padding:20px 20px;
    margin-bottom:20px;
    border-radius:20px;
    display:block;
}

#topics .topics .topic a .date_cate {
    width:100%;
}

#topics .topics .topic a .list_title {
    width:100%;
}

.pagenation {
    display:flex;
    justify-content:center;
    align-items:center;
}

.pagenation a {
    min-width:30px;
    min-height:30px;
    background:#f5f5f5;
    margin:0 5px;
    padding:5px 5px;
    border-radius:10vw;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.pagenation a:first-child,
.pagenation a:last-child {
    padding:5px 20px;
}

#topics .pagenation a.now {
    pointer-events:none;
    background:#50b7e9;
}

.pagenation a.none {
    pointer-events:none;
    opacity:0.3;
    display:none;
}

.pagenation a p {
    font-size:80%;
}

.pagenation a.now p {
    color:#fff;
}

article {
    width:100%;
    margin:auto;
}

article .date_cate {
    margin-bottom:8px;
}

article h3 {
    font-size:150%;
    font-weight:600;
    line-height:135%;
}

article .photo {
    margin-top:25px;
}

article .photo img {
    border-radius:25px;
}

article .text {
    margin-top:25px;
}

article .movie {
    margin-top:25px;
    padding-top: 56.25%;
    position:relative;
}

article .movie iframe {
    position: absolute;
    top:0;
    right:0;
    width:100% !important;
    height:100% !important;
    border-radius:30px;
}

article .links {
    margin-top:25px;
}

article .links .link {
    display:flex;
    align-items:center;
}

article .links .link img {
    width:20px;
    margin-right:8px;
}

article .links .link a {

}

article .links .link a p {
    font-size:100%;
    font-weight:600;
    color:#327abe;
}

article .links .file {
    display:flex;
    align-items:center;
    margin-top:10px;
}

article .links .file img {
    width:20px;
    margin-right:8px;
}

article .links .file a {

}

article .links .file a p {
    font-size:100%;
    font-weight:600;
    color:#327abe;
}





/*----- BLOG -----*/
#blog {
}

#blog .cts {
    width:calc(100% - 100px);
}

#blog .pagetitles {
    background:linear-gradient(to right,#252850,#564497);
}

#blog .cate_titles {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0 auto 30px;
}

#blog .cate_titles .cate_title {
    font-size:300%;
    font-weight:600;
    line-height:100%;
}

#blog .cate_titles .categories {
    display:flex;
    justify-content:center;
}


#blog .cate_titles .categories a {
    padding:10px 25px;
    border-radius:10vw;
    margin:0 5px;
}


#blog .cate_titles .categories a p {
    font-size:90%;
    color:#fff;
}

#blog .cate_titles .categories a.none {
    pointer-events:none;
    opacity:0.3;
}

#blog .articles {
    min-width:1100px;
    background:#f5f5f5;
    padding:50px 55px;
    display:flex;
    flex-wrap:wrap;
    border-radius:2vw;
    margin-bottom:30px;
}

#blog .articles .article {
    width:31%;
    margin:0 3.5% 3.5% 0;
    background:#fff;
    border-radius:2vw;
}

#blog .articles .article:nth-child(3n) {
    margin-right:0;
}

#blog .articles .article:nth-last-child(-n+3) {
    margin-bottom:0;
}

#blog .articles .article .photo {
    width:100%;
    height:15vw;
    overflow:hidden;
    position:relative;
    border-radius:2vw 2vw 0 0;
}

#blog .articles .article .photo img {
    position:absolute;
    left:-100%;
    right:-100%;
    margin:auto;
    top:-100%;
    bottom:-100%;
    vertical-align:middle;
    min-height:15vw;
}

#blog .articles .article .detail {
    padding:15px 25px 25px;
}

#blog .articles .article .detail .category {
    font-size:70%;
    line-height:100%;
    padding:4px 6px;
    background:#e1e1e1;
    display:inline-block;
    margin-bottom:5px;
}

#blog .articles .article .detail h3 {
    font-size:125%;
    line-height:135%;
    margin-bottom:10px;
    color:#564497;
}

#blog .articles .article .detail .tx {
    font-size:80%;
}

#blog .pagenation a.now {
    pointer-events:none;
    background:#564497;
}

#blog article {

}

#blog article .date_cate .cate {
    background:#e1e1e1;
    color:#595757;
}

#blog article h4 {
    background:linear-gradient(to right,#252850,#564497);
    color:#fff;
    border-radius:20vw;
    padding:12px 30px;
    margin-bottom:15px;
}

#blog article h5 {
    font-size:110%;
    font-weight:600;
    border-left:#564497 4px solid;
    margin-bottom:10px;
    padding:3px 0 3px 10px;
    color:#564497;
}

#blog article .info {
    background:#f6f5fa;
    border-radius:2vw;
    padding:20px 30px;
}



/*----- RECRUIT -----*/
#recruit {
}

#recruit .cts {
    width:90%;
}

#recruit .pagetitles {
    background:linear-gradient(to right,#ff3264,#ff6464);
}

#recruit .cts_title {
    position:relative;
    text-align:center;
    margin-bottom:30px;
}

#recruit .cts_title .typo {
    width:85%;
    margin:auto;
}

#recruit .cts_title h3 {
    font-size:150%;
    font-weight:600;
    line-height:100%;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

#recruit .cts_title h3:first-letter {
    color:#ff3264;
}

#recruit .copy {
    padding:100px 0;
    text-align:center;
}









/*GROBAL*/
#grobal {
}

#grobal .nav_btn {
width:42px;
height:28px;
position:fixed;
top:15px;
right:15px;
display:flex;
justify-content:center;
align-items:center;
z-index:998;
cursor:pointer;
}

#grobal .nav_btn span {
width:100%;
height:4px;
border-radius:2px;
background:#595757;
position:absolute;
}

#grobal .nav_btn span:first-child {
top:0;
transition:0.5s;
background:rgba(50,122,190,0.9);
}

#grobal .nav_btn span.show:first-child {
top:12.5px;
transform:rotate(45deg);
}

#grobal .nav_btn span:nth-child(2) {
transition:0.5s;
background:rgba(46,175,108,0.9);
}

#grobal .nav_btn span.show:nth-child(2) {
opacity:0;
}

#grobal .nav_btn span:last-child {
bottom:0;
transition:0.5s;
background:rgba(218,18,96,0.9);
}

#grobal .nav_btn span.show:last-child {
bottom:12.5px;
transform:rotate(-45deg);
}

#grobal .nav_close {
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
position:fixed;
top:0;
left:0;
display:none;
cursor:pointer;
z-index:999;
}

#grobal .grobal_nav {
width:80vw;
height:80vh;
position:fixed;
top:10%;
left:0;
background:rgba(255,255,255,1);
display:flex;
justify-content:center;
align-items:flex-start;
flex-direction:column;
transform:translate(-100%,0);
transition:0.5s;
z-index:1000;
border-radius:0 10vw 10vw 0;
padding-left:10vw;
}

#grobal .grobal_nav.show {
transform:translate(0,0);
}

#grobal .grobal_nav nav {
padding:12px 0;
}

#grobal .grobal_nav nav a {
    display:flex;
    align-items:center;
}

#grobal .grobal_nav nav a img {
    width:auto;
    height:30px;
    margin-right:20px;
}

#grobal .grobal_nav nav a p {
    font-size:80%;
}




/*START*/
#start {
    width:100vw;
    height:100vh;
    position:absolute;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

#start .screen {
    width:100vw;
    height:100vh;
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    z-index:9999;
}

#start .gra {
    width:16.6666vw;
    height:100vh;
    position:relative;
    transform:translate(0,0);
    display:none;
    z-index:10000;
}

#start .gradation_b {
    background:linear-gradient(#50b7e9,#50b7e9,#327abe,#327abe);
}

#start .gradation_b:before {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#50b7e9;
    border-radius:100vw;
    position:absolute;
    top:-8.3333vw;
}

#start .gradation_b:after {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#327abe;
    border-radius:100vw;
    position:absolute;
    bottom:-8.3333vw;
}

#start .gradation_e {
    background:linear-gradient(#2eaf6c,#2eaf6c,#75c29e,#75c29e);
}

#start .gradation_e:before {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#2eaf6c;
    border-radius:100vw;
    position:absolute;
    top:-8.3333vw;
}

#start .gradation_e:after {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#75c29e;
    border-radius:100vw;
    position:absolute;
    bottom:-8.3333vw;
}

#start .gradation_r {
    background:linear-gradient(#e85c9b,#e85c9b,#da1260,#da1260);
}

#start .gradation_r:before {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#e85c9b;
    border-radius:100vw;
    position:absolute;
    top:-8.3333vw;
}

#start .gradation_r:after {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#da1260;
    border-radius:100vw;
    position:absolute;
    bottom:-8.3333vw;
}

#start .gradation_y {
    background:linear-gradient(#f4ab17,#f4ab17,#f3dc24,#f3dc24);
}

#start .gradation_y:before {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#f4ab17;
    border-radius:100vw;
    position:absolute;
    top:-8.3333vw;
}

#start .gradation_y:after {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#f3dc24;
    border-radius:100vw;
    position:absolute;
    bottom:-8.3333vw;
}

#start .gradation_p {
    background:linear-gradient(#564497,#564497,#252850,#252850);
}

#start .gradation_p:before {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#564497;
    border-radius:100vw;
    position:absolute;
    top:-8.3333vw;
}

#start .gradation_p:after {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#252850;
    border-radius:100vw;
    position:absolute;
    bottom:-8.3333vw;
}

#start .gradation_o {
    background:linear-gradient(#e73e18,#e73e18,#ee7b1a,#ee7b1a);
}

#start .gradation_o:before {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#e73e18;
    border-radius:100vw;
    position:absolute;
    top:-8.3333vw;
}

#start .gradation_o:after {
    content:"";
    width:16.6666vw;
    height:16.6666vw;
    background:#ee7b1a;
    border-radius:100vw;
    position:absolute;
    bottom:-8.3333vw;
}

#start .whitespace {
     width:100vw;
     height:100vh;
     background:#ccc;
     position:absolute;
     top:0;
     left:0;
}




/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:35px;
height:35px;
right:15px;
bottom:15px;
z-index:100;
display:none;
}



/*FOOTER*/
footer {
padding:50px 0 25px;
}

footer .cts {
    width:90%;
    margin-bottom:30px;
}

footer .links {
    display:flex;
    justify-content:space-between;
    margin-bottom:50px;
}

footer .links .link {
    width:50%;
}

footer .links .link p {
    font-size:80%;
    margin-bottom:2px;
}

footer .links .link p:first-child {
    margin-bottom:7px;
}

footer .links .link p:first-child a {
    font-weight:700;
}

footer .links .link p:last-child {
    margin-bottom:0;
}

footer .links .link p a {
}

footer .contact {
    text-align:center;
}

footer .contact .logo {
    width:250px;
    margin:0 auto 15px;
}

footer .contact .address {
    font-size:80%;
    line-height:150%;
    margin-bottom:15px;
}

footer .contact .btn {
}

footer .contact .btn a {
    display:inline-block;
    background:linear-gradient(to left,#64b400,#96c800);
    border-radius:30vw;
    padding:10px 40px;
}

footer .contact .btn a p {
    font-size:100%;
    font-weight:500;
    color:#fff;
}


footer .copyright {
font-size:70%;
text-align:center;
}


}