@charset "utf-8";

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

@media(max-width:999px){

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

.cts {
width:90%;
}

.wrap {
    overflow-x:hidden;
}



/*-----HEADER-----*/
header {
    position:fixed;
    top:10px;
    left:15px;
    z-index:9999;
}

header .logo {
    display:flex;
    align-items:center;
}

header .logo h1 {
    width:90px;
}

header .logo .names {
    border-left:#f0f0f0 1px solid;
    padding-left:15px;
    margin-left:15px;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-direction:column;
}

header .logo .names .name {
    font-size:100%;
    line-height:100%;
    letter-spacing:2px;
    padding-bottom:10px;
}

header .logo .names .kana {
    font-size:60%;
    line-height:100%;
    letter-spacing:2px;
}



/*-----MV-----*/
#mv {
    display:flex;
    flex-direction:row-reverse;
    position:relative;
    margin-bottom:50px;
}

#mv .obj {
    width:calc(100% - 50px);
    height:30vw;
    background:#ebf0f5;
    position:absolute;
    bottom:-40px;
    left:0;
}

#mv .mv {
    width:calc(100% - 30px);
    max-height:600px;
    overflow:hidden;
    margin:85px 0 0 auto;
    position:relative;
    background:#222;
}

#mv .mv .movie {
}

#mv .mv video{
    width:100%;
    height:auto;
    vertical-align:bottom;
}

#mv .decoration {
    width:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position:relative;
    transform:scale(0.8);
    transform-origin:center;
    margin-top:20vw;
}

#mv .decoration p {
    font-size:50%;
    letter-spacing:1.5px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin-bottom:10px;
}

#mv .sound {
    width:30px;
    position:absolute;
    right:10px;
    bottom:-40px;
    z-index:900;
    cursor:pointer;
}



/*-----TOP COMMON-----*/
.top_titles h2 {
    font-size:400%;
    line-height:100%;
    padding-bottom:15px;
    color:#3791b3;
}

.top_titles .kana {
    font-size:100%;
}

.top_titles .kana:first-letter {
    color:#3791b3;
}



/*-----TOP TOPICS-----*/
#top_topics {
    padding:35px 0 0;
    border-bottom:#f0f0f0 1px solid;
}

#top_topics .cts {
    position:relative;
}

#top_topics .cts .top_titles {
    width:100%;
    position:relative;
}

#top_topics .cts .top_titles h2 {
    font-size:300%;
    line-height:100%;
    padding-bottom:10px;
    color:#000;
}

#top_topics .cts .top_titles h2:first-letter {
    color:#aa9682;
}

#top_topics .cts .top_titles .kana:first-letter {
    color:#aa9682;
}

#top_topics .cts .top_titles .obj {
    width:280px;
    position:absolute;
    bottom:0;
    right:-50px;
    z-index:-1;
}

#top_topics .cts .chara {
    width:55%;
    position:absolute;
    top:30px;
    right:-10px;
    margin:auto;
}

#top_topics .cts .topics_cts {
    width:100%;
    padding:30px 0 30px;
}

#top_topics .cts .topics_cts .top_topics {
}

#top_topics .cts .topics_cts .top_topics .top_topic {
    margin-bottom:35px;
}

#top_topics .cts .topics_cts .top_topics .top_topic:last-child {
    margin-bottom:0;
}

#top_topics .cts .topics_cts .top_topics .top_topic .date_cate {
    display:flex;
    margin-bottom:7px;
}

#top_topics .cts .topics_cts .top_topics .top_topic .date_cate .date {
    font-size:90%;
    line-height:100%;
    letter-spacing:2px;
    color:#787878;
    border-right:#f0f0f0 1px solid;
    padding-right:15px;
    margin-right:15px;
}

#top_topics .cts .topics_cts .top_topics .top_topic .date_cate .cate {
    font-size:90%;
    line-height:100%;
    letter-spacing:2px;
    color:#3791b3;
}

#top_topics .cts .topics_cts .top_topics .top_topic .topic_title {
    letter-spacing:2px;
}

#top_topics .cts .topics_cts .more_btn {
    text-align:right;
    margin-top:30px;
}

#top_topics .cts .topics_cts .more_btn .btn {
    display:inline-block;
}



/*-----TOP COMPANY-----*/
#top_company {
    position:relative;
    padding:50px 0 80px;
    border-bottom:#f0f0f0 1px solid;
}

#top_company .cts {
    width:85%;
}

#top_company .bgLine {
    width:94%;
    height:calc(100% + 50px);
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto;
    border-left:#f0f0f0 1px solid;
    border-right:#f0f0f0 1px solid;
    z-index:-1;
}

#top_company .top_titles {
    margin-bottom:20px;
}

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

#top_company .details .obj_top {
    width:350px;
    position:absolute;
    top:50px;
    right:-100px;
    z-index:-1;
}

#top_company .details .obj_bottom {
    width:250px;
    position:absolute;
    bottom:30px;
    left:-100px;
    z-index:-1;
}

#top_company .detail {
    width:90%;
    margin:auto;
}

#top_company .detail .intro {
    position:relative;
}

#top_company .detail .intro h3 {
    font-size:120%;
    line-height:150%;
    letter-spacing:2px;
    text-align:center;
    margin-bottom:20px;
}

#top_company .detail .intro h3:first-letter {
    color:#3791b3;
}

#top_company .detail .intro .photos {
    width:100%;
    height:60vw;
    position:relative;
    margin-bottom:30px;
}

#top_company .detail .intro .photos .obj {
    width:50vw;
    height:35vw;
    background:#ebf0f5;
    position:absolute;
    left:40px;
    bottom:60px;
}

#top_company .detail .intro .photos .photo1 {
    width:50vw;
    position:absolute;
    left:0;
    bottom:0;
}

#top_company .detail .intro .photos .photo2 {
    width:36vw;
    position:absolute;
    top:0;
    right:0;
}

#top_company .detail .intro .photos .chara {
    width:20vw;
    position:absolute;
    top:10px;
    left:50px;
}

#top_company .detail .copies {
    margin-bottom:25px;
}

#top_company .detail .copies .subtitle {
    margin-bottom:10px;
}

#top_company .detail .copies .jp {
    font-size:110%;
    margin-bottom:10px;
}

#top_company .detail .copies .tx {
    font-size:100%;
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#top_company .detail .more_btn {
    text-align:right;
    margin-top:50px;
    position:absolute;
    bottom:30px;
    right:10%;
}

#top_company .detail .more_btn .btn {
    display:inline-block;
}

#top_company .gallery {
    width:70%;
    margin:auto;
    position:relative;
}

#top_company .gallery .gallery_slider {
}



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

#top_service .cts {
    width:100%;
    background:#faf5f0;
    margin:0 auto 0 0;
    padding:160px 30px 50px;
    position:relative;
}

#top_service .top_titles {
    position:absolute;
    top:25px;
    right:5%;
    z-index:1;
}

#top_service .top_titles h2 {
    padding-bottom:0;
    line-height:90%;
    color:#aa9682;
}

#top_service .top_titles .kana {
    text-align:right;
}

#top_service .top_titles .kana:first-letter {
    color:#aa9682;
}

#top_service .details {
    width:90%;
    margin:auto;
    margin-bottom:30px;
}

#top_service .details .obj_top {
    width:300px;
    position:absolute;
    top:50px;
    right:250px;
}

#top_service .details .obj_bottom {
    width:200px;
    position:absolute;
    bottom:30px;
    left:-50px;
}

#top_service .details .photos {
    width:100%;
    height:60vw;
    position:relative;
    margin-bottom:50px;
}

#top_service .details .photos .obj1 {
    width:50vw;
    height:35vw;
    background:#f0ebe6;
    position:absolute;
    right:-25px;
    bottom:-25px;
}

#top_service .details .photos .obj2 {
    width:36vw;
    height:50vw;
    background:#f0ebe6;
    position:absolute;
    left:25px;
    top:-25px;
}

#top_service .details .photos .photo1 {
    width:50vw;
    position:absolute;
    right:0;
    bottom:0;
}

#top_service .details .photos .photo2 {
    width:36vw;
    position:absolute;
    top:0;
    left:0;
}

#top_service .details .photos .chara {
    width:22vw;
    position:absolute;
    top:0;
    right:7vw;
}

#top_service .details .service {
    width:90%;
    margin:auto;
    position:relative;
}

#top_service .details .service .service_slider {
    overflow:hidden;
}

#top_service .copies {
    width:100%;
    margin:auto;
    position:relative;
}

#top_service .copies .copy {
    width:100%;
}

#top_service .copies .copy h3 {
    font-size:130%;
    letter-spacing:2px;
    margin-bottom:10px;
}

#top_service .copies .copy h3:first-letter {
    color:#aa9682;
}

#top_service .copies .copy .subtitle {
}

#top_service .copies .explain {
    width:100%;
}

#top_service .copies .explain .tx {
    font-size:100%;
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#top_service .copies .explain .more_btn {
    text-align:right;
    margin-top:30px;
}

#top_service .copies .explain .more_btn .btn {
    display:inline-block;
}

#top_service .copies .explain .more_btn a p {
    line-height:100%;
    margin-right:10px;
    color:#aa9682;
}

#top_service .copies .explain .more_btn .arrow {
    width:50px;
    height:1px;
    background:#aa9682;
    position:relative;
    margin-top:5px;
    animation:arrow_right 1s infinite alternate;
    -webkit-animation:arrow_right 1s infinite alternate;
}

#top_service .copies .explain .more_btn .arrow:after {
    content:"";
    width:18px;
    height:1px;
    background:#aa9682;
    display:block;
    transform:rotate(45deg);
    position:absolute;
    bottom:6px;
    right:-3.5px;
    margin:auto;
}



/*-----TOP RECRUIT-----*/
#top_recruit {
    position:relative;
    padding:50px 0 0;
    border-bottom:#f0f0f0 1px solid;
}

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

#top_recruit .bgLine {
    width:90%;
    height:calc(100% + 100px);
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto;
    border-left:#f0f0f0 1px solid;
    border-right:#f0f0f0 1px solid;
    z-index:-1;
}

#top_recruit .top_titles {
    margin-bottom:20px;
    position:relative;
}

#top_recruit .top_titles h2 {
    padding-bottom:0;
    line-height:90%;
}

#top_recruit .details {
    width:100%;
    margin:auto;
    position:relative;
}

#top_recruit .details .obj {
    width:250px;
    position:absolute;
    top:-120px;
    right:-70px;
    z-index:-1;
}

#top_recruit .details .detail {
    width:100%;
    position:relative;
}

#top_recruit .details .detail h3 {
    font-size:135%;
    letter-spacing:2px;
    margin-bottom:10px;
}

#top_recruit .details .detail h3:first-letter {
    color:#3791b3;
}

#top_recruit .details .detail .subtitle {
    margin-bottom:10px;
}

#top_recruit .details .detail .tx {
    font-size:100%;
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#top_recruit .details .detail .chara {
    width:220px;
    margin:20px auto 0;
}

#top_recruit .details .detail .more_btn {
    text-align:right;
    margin-top:30px;
}

#top_recruit .details .detail .more_btn .btn {
    display:inline-block;
}

#top_recruit .gallery {
    width:96%;
    margin:0 auto 30px;
    position:relative;
}

#top_recruit .gallery .gallery_slider {
}



/*-----TOP CONTACT-----*/
#top_contact {
    margin:100px 0 0;
}

#top_contact .cts {
    width:100%;
    background:#f9f1f6;
    position:relative;
    padding-top:80px;
}

#top_contact .cts .top_titles {
    position:absolute;
    top:-35px;
    left:0;
    right:0;
    text-align:center;
}

#top_contact .cts .top_titles h2 {
    line-height:90%;
    padding-bottom:0;
    color:#c878aa;
}

#top_contact .cts .top_titles .kana:first-letter {
    color:#c878aa;
}

#top_contact .cts .details {
    width:100%;
    margin:auto;
    position:relative;
}

#top_contact .cts .details .obj {
    width:300px;
    position:absolute;
    bottom:50px;
    left:-100px;
}

#top_contact .cts .details .photo {
    width:60%;
    margin:auto;
    position:relative;
}

#top_contact .cts .details .detail {
    width:90%;
    margin:auto;
    position:relative;
}

#top_contact .cts .details .detail h3 {
    font-size:135%;
    letter-spacing:3px;
    margin-bottom:10px;
    text-align:center;
}

#top_contact .cts .details .detail h3:first-letter {
    color:#c878aa;
}

#top_contact .cts .details .detail .subtitle {
    text-align:center;
    margin-bottom:10px;
}

#top_contact .cts .details .detail .tx {
    width:100%;
    margin:auto;
    font-size:100%;
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#top_contact .cts .details .detail .more_btn {
    text-align:right;
    margin-top:30px;
}

#top_contact .cts .details .detail .more_btn .btn {
    display:inline-block;
}

#top_contact .cts .details .detail .more_btn a p {
    line-height:100%;
    margin-right:10px;
    color:#c878aa;
}

#top_contact .cts .details .detail .more_btn .arrow {
    width:50px;
    height:1px;
    background:#c878aa;
    position:relative;
    margin-top:5px;
    animation:arrow_right 1s infinite alternate;
    -webkit-animation:arrow_right 1s infinite alternate;
}

#top_contact .cts .details .detail .more_btn .arrow:after {
    content:"";
    width:18px;
    height:1px;
    background:#c878aa;
    display:block;
    transform:rotate(45deg);
    position:absolute;
    bottom:6px;
    right:-3.5px;
    margin:auto;
}



/*-----UNDER-----*/
.under {
    margin:100px 0 100px;
}

.under .titles h2 {
    font-size:500%;
    line-height:100%;
    color:#3791b3;
}

.under .titles .kana {
    font-size:100%;
}

.under .titles .kana:first-letter {
    color:#3791b3;
}

.under .bread {
    width:100%;
    margin-bottom:30px;
    text-align:right;
    font-size:90%;
}

.under .bread p {
    font-size:80%;
    color:#787878;
}

.under .bread p a {
    color:#787878;
}

.under .pagetitles {
    text-align:center;
    margin-bottom:30px;
}

.under .pagetitles h2 {
    font-size:500%;
    line-height:100%;
    padding-bottom:20px;
    color:#3791b3;
}

.under .pagetitles .pagetitle {
    font-size:120%;
}

.under .pagetitles .pagetitle:first-letter {
    color:#3791b3;
}

.under .bgLine {
    width:800px;
    height:calc(100% + 100px);
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto;
    border-left:#f0f0f0 1px solid;
    border-right:#f0f0f0 1px solid;
    z-index:-1;
}




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

#topics .bread {
    text-align:left;
}

#topics .topics_index {
    margin-bottom:50px;
}

#topics .topics_index .intro {
    width:100%;
}

#topics .topics_index .intro .titles {
    margin-bottom:30px;
}

#topics .topics_index .intro .titles h2 {
    font-size:500%;
    line-height:95%;
    padding-bottom:20px;
}

#topics .topics_index .intro .titles .kana {
    font-size:100%;
}

#topics .topics_index .intro .category {
    display:flex;
    margin-bottom:20px;
}

#topics .topics_index .intro .category nav {
    margin-right:20px;
}

#topics .topics_index .intro .category nav a {
    display:inline-block;
}

#topics .topics_index .intro .category nav a p {
    font-size:110%;
}

#topics .topics_index .intro .category nav.now a {
    pointer-events:none;
}

#topics .topics_index .intro .category nav.now a p {
    color:#3791b3;
}

#topics .topics_index .intro .category nav.none a {
    pointer-events:none;
}

#topics .topics_index .intro .category nav.none a p {
    color:#e6e6e6;
}

#topics .topics_cts {
    width:100%;
}

#topics .topics_cts .topics {
}

#topics .topics_cts .topics .topic {
    padding-bottom:25px;
    margin-bottom:25px;
    border-bottom:#f0f0f0 1px solid;
}

#topics .topics_cts .topics .topic:first-child {
    border-top:#f0f0f0 1px solid;
    padding-top:25px;
}

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

#topics .topics_cts .topics .topic .date_cate {
    display:flex;
    margin-bottom:7px;
}

#topics .topics_cts .topics .topic .date_cate .date {
    font-size:90%;
    line-height:100%;
    letter-spacing:2px;
    color:#787878;
    border-right:#f0f0f0 1px solid;
    padding-right:15px;
    margin-right:15px;
}

#topics .topics_cts .topics .topic .date_cate .cate {
    font-size:90%;
    line-height:100%;
    letter-spacing:2px;
    color:#3791b3;
}

#topics .topics_cts .topics .topic .topic_title {
    letter-spacing:2px;
}

#topics .topics_cts .pagenation {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:25px;
}

#topics .topics_cts .pagenation nav {
    margin:0 10px;
}

#topics .topics_cts .pagenation nav a {
}

#topics .topics_cts .pagenation nav a p {
    font-size:85%;
    letter-spacing:2px;
    color:#787878;
}

#topics .cts .back_btn {
    margin-top:70px;
    text-align:center;
}

#topics .cts .back_btn .btn {
    display:inline-block;
}


/*-----TOPICS DETAIL-----*/
#topics .topics_detail {
}

#topics .topics_detail .category {
    display:flex;
}

#topics .topics_detail .intro {
    width:250px;
}

#topics .topics_detail .intro .titles {
    margin-bottom:30px;
}

#topics .topics_detail .intro .titles h2 {
    font-size:500%;
    line-height:95%;
    padding-bottom:20px;
}

#topics .topics_detail .intro .titles h2:first-letter {
    color:#3791b3;
}

#topics .topics_detail .intro .titles .kana {
    font-size:100%;
}

#topics .topics_detail .intro .category {
    display:flex;
    margin-bottom:20px;
}

#topics .topics_detail .intro .category nav {
    margin-right:20px;
}

#topics .topics_detail .topics_cts {
}

#topics .topics_detail .topics_cts .bread {
    margin-bottom:30px;
}

#topics .topics_detail .topics_cts .bread p {
    font-size:70%;
}

#topics .topics_detail .topics_cts article {
}

#topics .topics_detail .topics_cts article h3 {
    font-size:150%;
    letter-spacing:2px;
    margin-bottom:15px;
}

#topics .topics_detail .topics_cts article h3:first-letter {
    color:#3791b3;
}

#topics .topics_detail .topics_cts article .date_cate {
    display:flex;
}

#topics .topics_detail .topics_cts article .date_cate .date {
    font-size:90%;
    line-height:100%;
    letter-spacing:2px;
    color:#787878;
    border-right:#f0f0f0 1px solid;
    padding-right:15px;
    margin-right:15px;
}

#topics .topics_detail .topics_cts article .date_cate .cate {
    font-size:90%;
    line-height:100%;
    letter-spacing:2px;
    color:#3791b3;
}

#topics .topics_detail .topics_cts article .photo {
    margin-top:30px;
}

#topics .topics_detail .topics_cts article .ex {
    margin-top:30px;
}

#topics .topics_detail .topics_cts article .ex p {
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#topics .topics_detail .topics_cts article .youtube {
    margin:30px auto 0;
    padding-top: 56.25%;
    position:relative;
}
    
#topics .topics_detail .topics_cts article .youtube iframe {
    position: absolute;
    top:0;
    right:0;
    width:100% !important;
    height:100% !important;
}

#topics .topics_detail .topics_cts article .btns {
    margin-top:30px;
}

#topics .topics_detail .topics_cts article .btns .btn {
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

#topics .topics_detail .topics_cts article .btns .btn:last-child {
    margin-bottom:0;
}

#topics .topics_detail .topics_cts article .btns .btn .arrow {
    width:8px;
    height:8px;
    border-top:#787878 1px solid;
    border-right:#787878 1px solid;
    transform:rotate(45deg);
    margin-right:10px;
}

#topics .topics_detail .topics_cts article .btns .btn a {

}

#topics .topics_detail .topics_cts article .btns .btn a p {
    letter-spacing:2px;
    color:#787878;
}



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

#company .cts {
    width:100%;
}

#company .bread {
    width:90%;
    margin:0 auto 20px;
}

#company .set_titles {
    position:realtive;
    margin-bottom:30px;
}

#company .set_titles h3 {
    font-size:350%;
    line-height:100%;
    color:#3791b3;
}
#company .set_titles .set_title {
    font-size:100%;
}

#company .set_titles .set_title:first-letter {
    color:#3791b3;
}

#company #overview {
    position:relative;
    border-bottom:#f0f0f0 1px solid;
    padding-bottom:50px;
}

#company #overview .bgLine {
    border-right:none;
    z-index:0;
}

#company #overview .obj {
    width:calc(100% - 30px);
    height:115vw;
    background:#ebf0f5;
    position:absolute;
    top:-150px;
    right:0;
    z-index:-1;
}

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

#company #overview .overview .details {
    position:relative;
}

#company #overview .overview .details .photos {
    width:95%;
    position:relative;
}

#company #overview .overview .details .photos .main {
    width:100%;
    height:70vw;
    background:url(../company/img/overview_1.jpg) center;
    background-size:cover;
    margin-bottom:30px;
    position:relative;
    z-index:1;
}

#company #overview .overview .details .photos .sub {
    width:230px;
    margin:0 0 0 auto;
    position:relative;
    z-index:1;
}

#company #overview .overview .details .photos .square {
    width:230px;
    height:345px;
    background:#ebf4f7;
    position:absolute;
    right:50px;
    bottom:50px;
    z-index:0;
}

#company #overview .overview .details .detail {
    width:90%;
    margin:auto;
    padding-top:30px;
}

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

#company #overview .overview .details .detail .company_cts .companies {
}

#company #overview .overview .details .detail .company_cts .companies .company {
    display:flex;
    justify-content:space-between;
    border-bottom:#f0f0f0 1px solid;
    padding:12px 0;
}

#company #overview .overview .details .detail .company_cts .companies .company:first-child {
    border-top:#f0f0f0 1px solid;
}

#company #overview .overview .details .detail .company_cts .companies .company .item {
    width:20%;
    font-size:100%;
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#company #overview .overview .details .detail .company_cts .companies .company .tx {
    width:75%;
    font-size:90%;
    line-height:180%;
    letter-spacing:2px;
}

#company #access {
    padding:50px 0 0;
    margin-bottom:100px;
    position:relative;
    border-bottom:#f0f0f0 1px solid;
}

#company #access .bgLine {
    height:calc(100% + 100px);
}

#company #access .set_titles {
    width:1000px;
    margin:auto;
    margin-bottom:15px;
}

#company #access .set_titles .set_title {
    padding-top:15px;
    margin-left:20px;
}

#company #access .map {
    width:100%;
    height:60vw;
    margin-bottom:30px;
}

#company #access .details {
    width:90%;
    margin:auto;
    position:relative;
}

#company #access .details .detail {
}

#company #access .details .detail .name {
    font-size:110%;
    letter-spacing:2px;
    padding-bottom:5px;
}

#company #access .details .detail .address {
    font-size:90%;
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#company #access .details .photo {
    width:60%;
    margin:20px auto 0;
}



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

#service .bread {
    width:90%;
    margin:0 auto 20px;
}

#service .bg {
    width:calc(100% - 100px);
    height:60vw;
    position:absolute;
    top:150px;
    left:0;
    background:#ebf0f5;
    z-index:-1;
}

#service .bg .bg_cts {
}

#service .cts {
    width:100%;
}

#service .pagetitles h2 {
    padding-bottom:0;
}

#service .services {
    position:relative;
}

#service .services .service {
    padding:70px 0 0;
    position:relative;
    border-bottom:#f0f0f0 1px solid;
}

#service .services .service .details {
}

#service .services .service:nth-child(odd) .details {
    flex-direction:row-reverse;
}

#service .services .service:nth-child(even) .details {
}

#service .services .service:first-child .details {
    padding-top:0;
}

#service .services .service .details .slider {
    width:95%;
    position:relative;
    margin:0 auto 30px 0;
}

#service .services .service:nth-child(even) .details .slider {
    margin:0 0 30px auto;
}

#service .services .service .details .slider .service_slider {
    overflow:hidden;
}

#service .services .service .details .detail {
    width:90%;
    margin:auto;
    position:relative;
}

#service .services .service:nth-child(odd) .details .detail {
    padding-right:5%;
}

#service .services .service:nth-child(even) .details .detail {
    padding-left:5%;
}

#service .services .service .details .detail .set_titles {
    position:realtive;
    margin-bottom:30px;
}

#service .services .service .details .detail .set_titles h3 {
    font-size:350%;
    line-height:85%;
    padding-bottom:5px;
}
#service .services .service .details .detail .set_titles .set_title {
    font-size:120%;
}

#service .services .service .details .detail .set_titles .set_title:first-letter {
}

#service .services .service .details .detail .tx {
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#service .services .service .details .detail .menu {
    margin-top:30px;
}

#service .services .service .details .detail .menu .item {
    font-size:90%;
}

#service .services .service .details .detail .menu ul {
}

#service .services .service .details .detail .menu ul li {
    display:flex;
    font-weight:500;
}

#service .services .service .details .detail .menu ul li:before {
    content:"";
    width:25px;
    height:1px;
    background:#b4b4b4;
    margin:13px 10px 0 0;
}

/*PURCHASE*/
#service .services .service.purchase {
    padding:0 0 70px;
    overflow:hidden;
}

#service .services .service.purchase .details {
    margin-bottom:35px;
}

#service .services .service.purchase .bgLine {
    border-left:none;
    height:100%;
    z-index:1;
}

#service .services .service.purchase .slider .obj {
    position:absolute;
    bottom:-40vw;
    right:-50px;
    width:50vw;
}

#service .services .service.purchase .details .detail .set_titles h3 {
    color:#d26464;
}

#service .services .service.purchase .details .detail .set_titles .set_title:first-letter {
    color:#d26464;
}

#service .services .service.purchase .details .detail .menu .item {
    color:#d26464;
}

#service .services .service.purchase .details .detail .menu ul li {
    color:#d26464;
}

#service .services .service.purchase #product {
    width:90%;
    margin:auto;
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
}

#service .services .service.purchase #product .product_cts {
    width:100%;
}

#service .services .service.purchase #product .product_cts .item {
    font-size:90%;
    margin-bottom:10px;
}

#service .services .service.purchase #product .product_cts .item:first-letter {
    color:#d26464;
}

#service .services .service.purchase #product .product_cts .products {
    width:100%;
    display:flex;
    flex-wrap:wrap;
}

#service .services .service.purchase #product .product_cts .products .product {
    width:32%;
    margin:0 2% 3.5% 0;
}

#service .services .service.purchase #product .product_cts .products .product:nth-child(3n) {
    margin-right:0;
}

#service .services .service.purchase #product .product_cts .products .product:nth-child(n+9) {
    margin-bottom:0;
}

#service .services .service.purchase #product .product_cts .products .product .photo {
    margin-bottom:5px;
}

#service .services .service.purchase #product .product_cts .products .product .genre {
    font-size:60%;
}

#service .services .service.purchase #product .chara {
    width:25%;
    position:absolute;
    bottom:-20vw;
    right:20px;
}

#service .services .service.purchase #product .chara img {
}


/*MARKETING*/
#service .services .service.marketing .bgLine {
    border-right:none;
    height:100%;
}

#service .services .service.marketing .slider .obj {
    position:absolute;
    bottom:-40vw;
    right:-50px;
    width:50vw;
}

#service .services .service.marketing .details .detail .set_titles h3 {
    color:#c89646;
}

#service .services .service.marketing .details .detail .set_titles .set_title:first-letter {
    color:#c89646;
}

#service .services .service.marketing .details .detail .menu .item {
    color:#c89646;
}

#service .services .service.marketing .details .detail .menu ul li {
    color:#c89646;
}

#service .services .service.marketing .details .detail .photo {
    width:50%;
    margin:30px auto 0;
}


/*CONSULTING*/
#service .services .service.consulting .bgLine {
    border-left:none;
    height:calc(100% + 200px);
}

#service .services .service.consulting .slider .obj {
    position:absolute;
    bottom:-40vw;
    right:-50px;
    width:50vw;
}

#service .services .service.consulting .details .detail .set_titles h3 {
    color:#78aa64;
}

#service .services .service.consulting .details .detail .set_titles .set_title:first-letter {
    color:#78aa64;
}

#service .services .service.consulting .details .detail .menu .item {
    color:#78aa64;
}

#service .services .service.consulting .details .detail .menu ul li {
    color:#78aa64;
}

#service .services .service.consulting .bgLine {
    height:calc(100% + 200px);
}

#service .services .service.consulting .details .detail .photo {
    width:50%;
    margin:30px auto 0;
}



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

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

#contact .intro h3 {
    font-size:150%;
}

#contact #contact_form {

}

#contact #contact_form h4 {
    border-left:#3791b3 5px solid;
    padding:3px 0 3px 10px;
    margin-bottom:10px;
    font-weight:500;
}

#contact #contact_form .copy {
    margin-bottom:20px;
}

#contact #contact_form .copy .tx {

}

#contact #contact_form .attention {
    font-size:80%;
    color:#787878;
}

#contact #contact_form .forms {
    margin-bottom:25px;
}

#contact #contact_form .forms .form {
    border-bottom:#f0f0f0 1px solid;
    padding:15px 0;
}

#contact #contact_form .forms .form:first-child {
    border-top:#f0f0f0 1px solid;
}

#contact #contact_form .forms .form .items {
    width:100%;
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

#contact #contact_form .forms .form .items .item {
    font-weight:400;
    margin-left:8px;
}

#contact #contact_form .forms .form .items .required {
    font-size:70%;
    line-height:100%;
    background:#d26464;
    color:#fff;
    padding:3px 5px 5px;
}

#contact #contact_form .forms .form .items .any {
    font-size:70%;
    line-height:100%;
    background:#787878;
    color:#fff;
    padding:3px 5px 5px;
}

#contact #contact_form .forms .form .detail {
    width:100%;
}

.forms .form .privacy_cts {
width:100%;
height:240px;
border:#e1e1e1 1px solid;
padding:20px 20px 20px 25px;
margin:15px 0;
}

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

.forms .form .privacy_cts .terms .privacies {
}

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

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

.forms .form .privacy_cts .terms .privacies .privacy .privacy_item {
    font-size:80%;
    font-weight:400;
    color:#3791b3;
}

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

.forms .form .consent_cap {
    font-weight:400;
}

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

.forms .form .consent label {
    font-weight:500;
    line-height:100%;
    cursor:pointer;
    padding-left:5px;
    color:#3791b3;
    position:relative;
}

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

.forms .form .consent label:after {
content:"";
width:10px;
height:15px;
border-right:#3791b3 2px solid;
border-bottom:#3791b3 2px solid;
display:block;
transform:rotate(45deg);
position:absolute;
top:-4px;
left:-13px;
opacity:0;
}

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

.forms .form 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,textarea {
padding:15px 20px;
background:transparent;
border:#e1e1e1 1px solid;
}

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

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

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

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

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

.forms .form .style_privacy {
}

.style_submit {
background:transparent;
padding:15px 50px;
font-weight:500;
color:#fff;
background:#3791b3;
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;
font-weight:500;
color:#fff;
background:#787878;
cursor:pointer;
border:none;
}

.style_fix:focus {
    border:none;
}







/*-----PRIVACY-----*/
#privacy {

}

#privacy .privacies {

}

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

#privacy .privacies .privacy .privacy_item {
    margin-bottom:3px;
    font-weight:500;
    color:#3791b3;
}

#privacy .privacies .privacy .ex {
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}




/*-----ARROW-----*/
.arrow_vertical {
    width:1px;
    height:30px;
    background:#000;
    position:relative;
    animation:arrow_down 1s infinite alternate;
    -webkit-animation:arrow_down 1s infinite alternate;
}

.arrow_vertical:after {
    content:"";
    width:12px;
    height:1px;
    background:#000;
    display:block;
    transform:rotate(-45deg);
    position:absolute;
    bottom:4.5px;
    left:-1.5px;
    margin:auto;
}

.more_btn {
}

.more_btn a {
    display:flex;
    align-items:center;
}

.more_btn a p {
    line-height:100%;
    margin-right:10px;
    color:#3791b3;
}

.more_btn .arrow {
    width:50px;
    height:1px;
    background:#3791b3;
    position:relative;
    margin-top:5px;
    animation:arrow_right 1s infinite alternate;
    -webkit-animation:arrow_right 1s infinite alternate;
}

.more_btn .arrow:after {
    content:"";
    width:18px;
    height:1px;
    background:#3791b3;
    display:block;
    transform:rotate(45deg);
    position:absolute;
    bottom:6px;
    right:-3.5px;
    margin:auto;
}

.arrow_BackToTop {
    width:1px;
    height:70px;
    background:#000;
    position:relative;
}

.arrow_BackToTop:after {
    content:"";
    width:20px;
    height:1px;
    background:#000;
    display:block;
    transform:rotate(-45deg);
    position:absolute;
    top:5.5px;
    right:-2.5px;
    margin:auto;
}

.back_btn {
}

.back_btn a {
    display:flex;
    align-items:center;
}

.back_btn a p {
    line-height:100%;
    margin-left:15px;
}

.back_btn .arrow {
    width:50px;
    height:1px;
    background:#000;
    position:relative;
    margin-top:5px;
    animation:arrow_right 1s infinite alternate;
    -webkit-animation:arrow_right 1s infinite alternate;
}

.back_btn .arrow:after {
    content:"";
    width:18px;
    height:1px;
    background:#000;
    display:block;
    transform:rotate(-45deg);
    position:absolute;
    bottom:6px;
    left:-3.5px;
    margin:auto;
}




/*-----PAGE CONTACT-----*/
#page_contact {
}

#page_contact .cts {
    width:100%;
    background:#f9f1f6;
    position:relative;
    padding-top:70px;
}

#page_contact .cts .titles {
    position:absolute;
    top:-25px;
    left:0;
    right:0;
    text-align:center;
    margin-bottom:10px;
}

#page_contact .cts .titles h2 {
    font-size:300%;
    line-height:90%;
    letter-spacing:3px;
    padding-bottom:3px;
}

#page_contact .cts .titles h2:first-letter {
    color:#c878aa;
}

#page_contact .cts .titles .kana {
    font-size:80%;
}

#page_contact .cts .details {
    width:90%;
    margin:auto;
}

#page_contact .cts .details .photo {
    width:50vw;
    margin:15px auto 0;
}

#page_contact .cts .details .detail {
    width:100%;
}

#page_contact .cts .details .detail h3 {
    font-size:135%;
    letter-spacing:2px;
    margin-bottom:10px;
    text-align:center;
}

#page_contact .cts .details .detail h3:first-letter {
    color:#c878aa;
}

#page_contact .cts .details .detail .tx {
    font-size:90%;
    line-height:180%;
    letter-spacing:2px;
    color:#787878;
}

#page_contact .cts .details .detail .more_btn {
    text-align:right;
    margin-top:30px;
}

#page_contact .cts .details .detail .more_btn .btn {
    display:inline-block;
}

#page_contact .cts .details .detail .more_btn a p {
    line-height:100%;
    margin-right:10px;
    color:#c878aa;
}

#page_contact .cts .details .detail .more_btn .arrow {
    width:50px;
    height:1px;
    background:#c878aa;
    position:relative;
    margin-top:5px;
    animation:arrow_right 1s infinite alternate;
    -webkit-animation:arrow_right 1s infinite alternate;
}

#page_contact .cts .details .detail .more_btn .arrow:after {
    content:"";
    width:18px;
    height:1px;
    background:#c878aa;
    display:block;
    transform:rotate(45deg);
    position:absolute;
    bottom:6px;
    right:-3.5px;
    margin:auto;
}







/*GROBAL*/
#grobal {
}

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

#grobal .nav_btn span {
width:100%;
height:1px;
background:#000;
position:absolute;
}

#grobal .nav_btn span:first-child {
top:0;
transition:0.5s;
}

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

#grobal .nav_btn span:nth-child(2) {
transition:0.5s;
}

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

#grobal .nav_btn span:last-child {
bottom:0;
transition:0.5s;
}

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

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

#grobal .grobal_nav {
width:70vw;
height:100%;
position:fixed;
top:0;
left:0;
background:rgba(54,144,180,0.95);
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
transform:translate(-100%,0);
transition:0.5s;
z-index:9999;
}

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

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

#grobal .grobal_nav nav a {
}

#grobal .grobal_nav nav a p {
    font-size:135%;
    letter-spacing:2px;
    color:#fff;
}

#grobal .grobal_nav nav:last-child {
}

#grobal .grobal_nav nav:last-child a {
    width:50vw;
    height:60px;
    border:#fff 1px solid;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

#grobal .grobal_nav nav:last-child img {
    width:25px;
    margin-right:10px;
}

#grobal .grobal_nav nav:last-child p {
}



/*-----BACK TO TOP-----*/
.BackToTop {
    position:fixed;
    right:10px;
    bottom:0;
    z-index:100;
}

.BackToTop a {
    display:flex;
    align-items:center;
}

.BackToTop p {
    font-size:60%;
    letter-spacing:1px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin-left:5px;
}



/*-----FOR CONTACT-----*/
.ForContact {
    position:fixed;
    bottom:0;
    left:10px;
}

.ForContact a {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

.ForContact a p {
    font-size:70%;
    letter-spacing:1px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin-bottom:7px;
}





/*-----FOOTER-----*/
footer {
    background:#3791b3;
    padding:35px 0 20px;
}

footer .cts {
}

footer .cts .footer_cts {
}

footer .cts .footer_cts .footer_nav {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:35px;
}

footer .cts .footer_cts .footer_nav nav {
    margin:0 10px;
}

footer .cts .footer_cts .footer_nav nav p {
    color:#fff;
}

footer .cts .footer_cts .data {
    text-align:center;
}

footer .cts .footer_cts .data .foot_logo {
    width:70px;
    margin:0 auto 20px;
}

footer .cts .footer_cts .data .company {
    font-size:90%;
    color:#fff;
    padding-bottom:3px;
}

footer .cts .footer_cts .data .address {
    font-size:70%;
    color:#fff;
}

footer .copyright {
font-size:60%;
color:#fff;
margin-top:30px;
text-align:center;
}



/*SWIPER*/
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin-top: -25px;
z-index: 10;
cursor: pointer;
background-size: 30px 30px;
background-position: center;
background-repeat: no-repeat;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url(../img/slide_prev.svg);
left: -50px;
right: auto;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url(../img/slide_next.svg);
right: -50px;
left: auto;
}





}