a { outline: none; } a:link { text-decoration: none; color: #ffffff; } a:visited { text-decoration: none; color: #ffffff; } a:hover { text-decoration: none; color: #FFCC00; } a:active { text-decoration: none; } h1,h2,h3,h4,h5,h6 { margin: 0px; padding: 0px; font-size: 12px; font-weight:normal; } strong { font-weight: normal !important;} p { margin: 0px; padding: 0px; } img { border: 0px; vertical-align: bottom; margin: 0px; padding: 0px;} .smf { display:none;} .pc {} .jgroup_banner { display:block; width:20%; height:auto; backgroud-color:#000; transition:0.6s; margin:0 auto; text-align:center;} .jgroup_banner hover { backgroud-color:#333; transition:0.3s;} .jgroup_banner img { padding:1.5%;} .sister_area td { width:25% !important;} .dial_img { width:100%; height:auto;} .icon_css { width:80%; padding:2%; color:#000; font-size:0.9rem; border-color:#000; border-style:solid; border-width:2px; margin:0px auto; border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px; margin-top:6%; vertical-align:middle; } .icon_css:hover { background-color:#000; color:#FFF; -webkit-transition-duration:0.3s; transition-duration:0.3s; border-color:#999;} .icon_css a { color:#000;} .icon_css a:hover { color:#fff;} .icon_css2 { width:80%; padding:2%; color:#bbb; font-size:0.9rem; border-color:#bbb; border-style:solid; border-width:2px; margin:0px auto; border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px; margin-top:6%; vertical-align:middle; } .icon_css2:hover { background-color:#fff; color:#000; -webkit-transition-duration:0.3s; transition-duration:0.3s; border-color:#999;} .icon_css2 a { color:#000;} .icon_css2 a:hover { color:#fff;} .vision_table { width:100%; height:auto; margin:0px auto;} .vision_table_td { width:100%; height:auto;} .recruit_table { width:100%; height:auto; margin:0px auto; margin-top:5%;} .recruit_table_tr {background-color:rgba(255,255,255,0.1); margin-bottom:2%;border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px;} .recruit_table_td01 { width:35%; height:auto; padding:2%; color:#ddd; font-size:0.9rem; text-align:right;} .recruit_table_td02 { width:65%; height:auto; padding:2%; color:#ddd; font-size:0.9rem; text-align:left;} .contact_area { width:100%; height:auto; margin:0px auto; margin-top:5%;} .contact_area2 { width:80%; height:auto; margin:0px auto; margin-top:5%;} .sister_area { width:100%; height:auto; margin:0px auto; margin-top:5%;} .sister_div { width:80%; padding:2%; text-align:center; color:#000; font-size:0.9rem; border-style:solid; border-width:0px; margin:0px auto;margin-top:6%; vertical-align:middle;} .sister_bannar { width:100%; height:auto; background-color:#aaa; border-style: dashed; border-width:5px; border-color:#FFF; border-radius:50% 50%; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px;} .sister_bannar:hover {background-color:#000; color:#FFF; -webkit-transition-duration:0.8s; transition-duration:0.8s;} .leaf { width:20%; height:auto; float:left; margin-left:3%; z-index:60000 !important; position: absolute; margin-top:-15%; display:block;filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;} .leaf2 { width:20%; height:auto; float:right; margin-right:3%; z-index:60000; position: absolute; margin-top:0%; display:block;filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;} .page_layout { width:960px; margin:0px auto; text-align:left;} .space_introduction { width:100%; height:auto;background-color: rgba(255,255,255,0.90);background-image:url(../img/bg_01.png); background-size:cover;z-index:1;} .space_sister { width:100%; height:auto;background-color: rgba(255,255,255,0.90);background-image:url(../img/bg_01.png); background-size:cover;z-index:1;} .page_space { width:100%; height:auto; padding-top:70px;} .about_txt { width:70%; height:auto; margin:0px auto; line-height:2.4rem; text-align:left; color:#111;} .logo_txt { width:30%; height:auto; margin-top:25%; float:left; margin-left:3%;} .logo_txt_tablet { display:none; width:30%; height:auto; margin-top:25%; float:left; margin-left:3%;} .logo_txt_smf { display:none; width:30%; height:auto; margin-top:25%; float:left; margin-left:3%;} .logo_txt_sub { width:30%; height:auto; margin:0px auto; display:block; position:absolute; left:5%; top:30%;} .logo_txt_sub_logo { width:20%; height:auto; margin:0px auto; display:block; position:absolute; right:5%; top:80%;} .relative { width:100%; height:auto; position:relative; text-align:center;} .footer_div { font-size:0.7rem; text-align:center; width:33%; float:left; display:block;} .footer_menu_a { display:block; width:100%;} .footer_img { width:40%; height:auto; margin:0px auto; display:block;} .footer_table_td { width:100%; font-size:1.0rem; text-align:center; font-size:1.2rem; color:#333; padding-bottom:5%; line-height:1.8rem;} .footer_logo { padding-top:5%; padding-bottom:5%;} .attention_txt { text-align:center; font-size:0.6rem; color:#aaa; padding-top:2%;} .attention_txt a { color:#aaa;} .space_subpage { width:100%; height:auto;background-color: rgba(0,0,0,0.9);background-image:url(); background-size:cover;z-index:1;} .page_title_01 { width:50%; height:auto; display:block; margin:0px auto;} .sister_title { margin-top:5%; display:block; margin:0px auto; padding-top:10%;} .dial_table { width:80%; height:auto; margin:0px auto; background-color:#; margin-top:0%; margin-bottom:0%;} .staff_table_td { font-size:1.2rem; color:#eee; padding:3%; text-align:center;} .map { width:100%; height:400px; margin:0px auto; background-color:#444; padding:1%;} .access_train_logo { width:4%; height:auto;} .access_entrance{ width:60%; height:auto; margin:0px auto; background-color:#444; padding:1%;} .access_entrance:hover {background-color:#aaa;-webkit-transition-duration:0.8s; transition-duration:0.8s;} .demo_pic { width:100%; height:auto;border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px; background-color:#111; padding:1%;} .recruit_table_tr2 {background-color:rgba(255,255,255,0.1); margin-bottom:2%;border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px;} .recruit_table_tr2:hover {background-color:rgba(255,255,255,0.7) !important; color:#333 !important;-webkit-transition-duration:0.8s; transition-duration:0.8s;} .recruit_table_tr2 td:hover {color:#111 !important;} .question_txt { font-size:1.2rem; color:#CC9900;} .answer_txt { font-size:1.2rem; color: #FFCC00;} .question_table_td01 { width:100%; height:auto; padding:2%; color:#ddd; font-size:0.9rem; text-align:left;} .question_table_td02 { width:100%; height:auto; padding:4%; color:#ddd; font-size:0.8rem; text-align:left;} .question_table { width:100%; height:auto; margin:0px auto; margin-top:5%;} .demo_merit li {list-style:lower-greek; text-align:left; padding:0.5%; font-size:0.8rem;} .gallery_td { width:33%; height:auto; padding:2%; text-align:center;} .gallery_td:hover {background-color:rgba(255,255,255,0.7) !important; color:#333 !important;-webkit-transition-duration:0.8s; transition-duration:0.8s;} .gallery_img { width:100%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px;} .gallery_img2 { width:100%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px;} .gallery_img3 { width:98%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px; margin:0px auto;} .recruit_table_tr3 {background-color:rgba(255,255,255,0.1); margin-bottom:2%;border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px;} .page_title_02 { width:100%; height:auto; margin-bottom:1%;} .space_news { text-align:left; background-color:#eeeeec;} .space_about { background-color:#000;} .space_film { background-color:#000;} .space_works { background-color:#e3e1d7;} .space_members { background-image:url(../img/bg_member.png);} .space_contact { background-color:#000;} .caption_point { padding:1%; text-align:center; border-color:#333; border-style:solid; border-width:1px;} .gotop { text-align:center; padding-top:20px; color:#000; padding-bottom:20px;} .gotop a { color:#000;} .gotop2 { text-align:center; padding-top:20px; color:#000; padding-bottom:20px;} .gotop2 a { color:#fff;} .about_title { background-color:#000; padding:10px;} .vision_title { background-color:#; padding:10px;} .film_title { background-color:#000; padding:10px; border-color:#333; border-style:solid; border-width:0px;} .works_title { background-color:#000; padding:10px;} .members_title {background-color:#000; padding:10px;} .contact_title {background-color:#000; padding:10px; border-color:#333; border-style:solid; border-width:1px;} .creator_main-title { padding:10px; margin:0px auto; text-align:center;} .about_logo_img { width:35%; height:auto; margin:10px;} .about_box { width:95%; height:auto; margin:0px auto; font-size:0.8rem !important; margin-top:3%; border-color:#ddd; border-style:dashed; border-width:2px; padding:2%;} .introduction_table_td { width:100%; font-size:1.0rem; text-align:center; font-size:1.2rem; color:#333; padding-top:0px; padding-bottom:100px; line-height:1.8rem;} .news_table { width:960px; height:auto; margin:0px auto; background-color:#; border-top-color:#000; border-top-style:solid; border-top-width:1px; border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px; margin-bottom:300px;} .film_img { width:100%; height:auto;} .film_img_smf { display:none;} .film_contents { width:100%; height:auto;} .letter_contents { width:70%; height:auto; margin:0px auto; text-align:left; color:#FFF; padding-bottom:40px;} .button { font-size:0.8rem; background-color:#eeeeec;-moz-border-radius:5px;-webkit-border-radius:5px; color:#000;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; padding:10px; margin-top:10px; margin-bottom:10px;} .button:hover { background-color: #000;-webkit-transition-duration:1.0s; transition-duration:1.0s; color:#fff;} .button2 { font-size:0.8rem; background-color:#000;-moz-border-radius:5px;-webkit-border-radius:5px; color:#000;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; padding:10px; margin-top:10px; margin-bottom:10px;} .button2:hover { background-color: #fff;-webkit-transition-duration:1.0s; transition-duration:1.0s; color:#000;} .button3 { font-size:0.8rem; background-color:#e3e1d7;-moz-border-radius:5px;-webkit-border-radius:5px; color:#000;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; padding:10px; margin-top:10px; margin-bottom:10px;} .button3:hover { background-color: #000;-webkit-transition-duration:1.0s; transition-duration:1.0s; color:#fff;} .button4 { font-size:0.8rem; background-color:#fff;-moz-border-radius:5px;-webkit-border-radius:5px; color:#000;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; padding:10px; margin-top:10px; margin-bottom:10px;} .button4:hover { background-color: #000;-webkit-transition-duration:1.0s; transition-duration:1.0s; color:#fff;} .works_title { text-align:left; font-size:1.0rem;} .works_title span { background-color:#e3e1d7; color:#222; padding:10px; border-bottom-color:#999; border-bottom-style:solid; border-bottom-width:1px;} .works_contents { text-align:left; font-size:0.9rem; padding:10px; color:#222; line-height:1.6rem;} .works_contents_img { width:100%; height:auto; margin-top:5px; margin-bottom:5px; border-color:#666; border-style:solid; border-width:1px; background-color:#000;} .works_contents_img_smf { display:none;} .works_contents_img2 { width:98%; height:auto; margin-top:5px; margin-bottom:5px; border-color:#666; border-style:solid; border-width:1px; background-color:#000;} .works_contents_img2_smf { display:none;} .works_contents_img3 { width:100%; height:auto; margin-top:5px; margin-bottom:5px; border-color:#666; border-style:solid; border-width:0px; background-color:#fff;} .works_contents_img3_smf { display:none;} .works_carrer { padding:10px; text-align:left; background-color:#d7d3be; font-size:0.8rem;} .works_carrer span { background-color:#afa573; color:#000; padding:5px;} .works_carrer div { padding:10px; width:90%;} .works_carrer div a { color: #000; text-decoration:underline;} .works_carrer div a:hover { color: #fff; text-decoration:underline;} .works_img_s { padding:10px;} .stage_youtube { width:30%; height:auto;} .member_table { width:100%; height:auto; margin:0px auto;} .member_pic { width:15%; height:auto; padding:10px;} .member_txt { width:85%; height:auto; padding:10px; color:#FFF; text-align:left;} .contact_txt { width:70%; color:#fff; text-align:left; padding-bottom:40px; margin:0px auto;} .contact_txt a { color:#000;} .works_carrer_div { padding:10px; width:100%; text-align:left;} /*--------------------------------------------------------------------------------------- EFFECT FADE IN DELAY ---------------------------------------------------------------------------------------*/ .item{ float: left; margin-right: 0px; padding: 0px; width: 100%; height: auto; background: #; color: #fff; list-style: none; text-align: center; line-height: px; opacity: 0; z-index:99000; } .item:nth-child(1) { -webkit-animation: example 0.5s ease 0.5s 1 forwards; animation: example 1.6s ease 2.5s 1 forwards; } .item:nth-child(2) { -webkit-animation: example 0.5s ease 0.5s 1 forwards; animation: example 1.6s ease 5.0s 1 forwards; } .item:nth-child(3) { -webkit-animation: example 0.5s ease 1.5s 1 forwards; animation: example 1.6s ease 5.4s 1 forwards; } .item:nth-child(4) { -webkit-animation: example 0.5s ease 1.5s 1 forwards; animation: example 1.6s ease 5.6s 1 forwards; } .item2{ float: left; margin-right: 0px; padding: 0px; width: 100%; height: auto; background: #; color: #fff; list-style: none; text-align: center; line-height: px; opacity: 0; z-index:99000; } .item2:nth-child(1) { -webkit-animation: example 0.5s ease 0.5s 1 forwards; animation: example 1.6s ease 1.0s 1 forwards; } .item2:nth-child(2) { -webkit-animation: example 0.5s ease 0.5s 1 forwards; animation: example 1.6s ease 1.0s 1 forwards; } .item2:nth-child(3) { -webkit-animation: example 0.5s ease 1.5s 1 forwards; animation: example 1.6s ease 1.1s 1 forwards; } .item2:nth-child(4) { -webkit-animation: example 0.5s ease 1.5s 1 forwards; animation: example 1.6s ease 1.3s 1 forwards; } @-webkit-keyframes example { 100% { opacity: 1; } } @keyframes example { 100% { opacity: 1; } } .logo_position_tablet { position:absolute; top:30%; left:0%;} /*--------------------------------------------------------------------------------------- ポートフォリオ画像のテキスト表示設定 ---------------------------------------------------------------------------------------*/ .portfolio { width:100%; height:auto; z-index:500; margin-top:8%;} .portfolio_img { width:100%; height:250px;z-index:500;} .portfolio_table { width:100%; height:auto;} .portfolio_td { display:inline-table; width:24.9%; height:auto; padding:1px;} .portfolio_div { z-index:501; width: 100%; height: auto; overflow: hidden; margin: 0px; padding:0px; position: relative; /* 相対位置指定 */ } .caption { line-height:2.0rem;} .portfolio_div .caption { font-size: 80%; text-align: center; padding-top: 21%; color: #000; } .portfolio_div .mask { width: 100%; height: 100%; position: absolute; /* 絶対位置指定 */ top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(255,255,255,0.95); /* マスクは半透明 */ -webkit-transition: all 0.2s ease; transition: all 0.2s ease; z-index:501 } .portfolio_div:hover .mask { opacity: 1; /* マスクを表示する */ } /*--------------------------------------------------------------------------------------- 会社概要の設定PC ---------------------------------------------------------------------------------------*/ .company_div { width:70%; height:auto; margin:0px auto; margin-bottom:8%;} .company_table { width:100%; height:auto; margin:0px auto;} .company_td { width:20%; height:auto; margin:0px auto; font-weight:bold; padding:10px; text-align:left; border-bottom-color:#333; border-bottom-style:solid; border-bottom-width:2px; border-top-color:#333; border-top-style:solid; border-top-width:2px;} .company_td2 { width:80%; height:auto; margin:0px auto; font-weight:normal; padding:10px; text-align:left; border-bottom-color:#aaa; border-bottom-style:solid; border-bottom-width:1px; border-top-color:#aaa; border-top-style:solid; border-top-width:1px;} /*--------------------------------------------------------------------------------------- コンタクトの設定PC ---------------------------------------------------------------------------------------*/ .contact_div { width:90%; height:auto; margin:0px auto; margin-bottom:40px;} .contact_table { width:90%; height:auto; margin:0px auto;} .contact_td { width:30%; height:auto; margin:0px auto; font-weight:bold; padding:10px; text-align:left; border-bottom-color:#333; border-bottom-style:solid; border-bottom-width:0px; border-top-color:#333; border-top-style:solid; border-top-width:0px;} .contact_td2 { width:100%; color:#CCC; height:auto; margin:0px auto; font-weight:normal; padding:10px; text-align:left; border-bottom-color:#aaa; border-bottom-style:solid; border-bottom-width:0px; border-top-color:#aaa; border-top-style:solid; border-top-width:0px;} .contact_td3 { width:100%; height:auto; margin:0px auto; font-weight:normal; padding:10px; text-align:center; border-bottom-color:#aaa; border-bottom-style:solid; border-bottom-width:0px; border-top-color:#aaa; border-top-style:solid; border-top-width:0px;} .contact03 { padding:10px; text-align:center; color:#ccc;} .form-container { border: 1px solid #f2e3d2; background: #c9b7a2; background: -webkit-gradient(linear, left top, left bottom, from(#f2e3d2), to(#c9b7a2)); background: -webkit-linear-gradient(top, #f2e3d2, #c9b7a2); background: -moz-linear-gradient(top, #f2e3d2, #c9b7a2); background: -ms-linear-gradient(top, #f2e3d2, #c9b7a2); background: -o-linear-gradient(top, #f2e3d2, #c9b7a2); background-image: -ms-linear-gradient(top, #f2e3d2 0%, #c9b7a2 100%); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; -moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; font-family: 'Helvetica Neue',Helvetica,sans-serif; text-decoration: none; vertical-align: middle; padding:20px; width:100%; } option { color:#ccc;} @include placeholder { color: #ccc;} .form-field { border: 1px solid #000; background: #444; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #aaa; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; padding:2%; margin-bottom:20px; width:100%; -webkit-box-shadow:0 0 0px 2px rgba(145,108,63,0.2) inset; -moz-box-shadow:0 0 0px 2px rgba(145,108,63,0.2) inset; box-shadow:0 0 0px 2px rgba(145,108,63,0.2) inset; } .form-field:hover {border: 1px solid #aaa;} .form-field:active {border: 1px solid #aaa;} .form-field:focus { background: #; color: #ccc; } .form-container h2 { text-shadow: #fdf2e4 0 1px 0; font-size:18px; margin: 0 0 10px 0; font-weight:bold; text-align:center; } .form-title { margin-bottom:10px; color: #725129; font-weight:bold; text-shadow: #fdf2e4 0 1px 0; width:30%; } .submit-container { margin:8px 0; text-align:right; } .submit-button { border: 1px solid #e7d2b8; background: #e7d2b8; background: -webkit-gradient(linear, left top, left bottom, from(#e7d2b8), to(#b0906a)); background: -webkit-linear-gradient(top, #e7d2b8, #b0906a); background: -moz-linear-gradient(top, #e7d2b8, #b0906a); background: -ms-linear-gradient(top, #e7d2b8, #b0906a); background: -o-linear-gradient(top, #e7d2b8, #b0906a); background-image: -ms-linear-gradient(top, #e7d2b8 0%, #b0906a 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #addc7e 0 0px 0; color: #fff; font-family: helvetica, serif; padding: 15px; font-size: 14px; text-decoration: none; vertical-align: middle; } .submit-button:hover { border: 1px solid #916c3f; text-shadow: #31540c 0 0px 0; background: #b0906a; background: -webkit-gradient(linear, left top, left bottom, from(#e7d2b8), to(#b0906a)); background: -webkit-linear-gradient(top, #e7d2b8, #b0906a); background: -moz-linear-gradient(top, #e7d2b8, #b0906a); background: -ms-linear-gradient(top, #e7d2b8, #b0906a); background: -o-linear-gradient(top, #e7d2b8, #b0906a); background-image: -ms-linear-gradient(top, #e7d2b8 0%, #b0906a 100%); color: #fff; } .submit-button:active { text-shadow: #31540c 0 0px 0; border: 1px solid #e7d2b8; background: #e7d2b8; background: -webkit-gradient(linear, left top, left bottom, from(#b0906a), to(#e7d2b8)); background: -webkit-linear-gradient(top, #b0906a, #e7d2b8); background: -moz-linear-gradient(top, #b0906a, #e7d2b8); background: -ms-linear-gradient(top, #b0906a, #e7d2b8); background: -o-linear-gradient(top, #b0906a, #e7d2b8); background-image: -ms-linear-gradient(top, #b0906a 0%, #e7d2b8 100%); color: #fff; } /*--------------------------------------------------------------------------------------- チェックボックスのデザイン ---------------------------------------------------------------------------------------*/ input[type=checkbox] { display: none; } .checkbox { box-sizing: border-box; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; position: relative; display: inline-block; margin: 0 20px 8px 0; padding: 12px 12px 12px 42px; border-radius: 8px; background-color: #b99c7a; vertical-align: middle; color:fff; cursor: pointer; } .checkbox:hover { background-color: #7ecd6f; color:#fff; } .checkbox:hover:after { border-color: #fff; } .checkbox:after { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; position: absolute; top: 50%; left: 15px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 2px solid #e3caae; border-radius: 6px; color:#FFF; content: ''; } .checkbox:before { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 50%; left: 21px; display: block; margin-top: -7px; width: 5px; height: 9px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; content: ''; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); color:#FF0000; } input[type=checkbox]:checked + .checkbox:before { opacity: 1; color:#725129; } .logo_txt2 { width:100%; height:auto;} .header { width:100%; height:auto;} .chart { width:100%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; margin-bottom:10px;} .main_smf { display:none;} .main_logo { width:30%; height:auto;} .menu { width:100%; background-color:#000; z-index:100000;} #fixedBox {position: fixed; z-index: 10000;} .menu_table { width:960px; height:auto; margin:0px auto;} .menu_table_logo { padding:10px;} .menu_table_menu { width:16.6%; height:auto; padding:10px; text-align:center; border-bottom-color:#; border-bottom-style:solid; border-bottom-width:0px;} .menu_table_menu:hover {border-bottom-color:#bab69f; border-bottom-style:solid; border-bottom-width:0px;-webkit-transition-duration:1.0s; transition-duration:1.0s;} .menu_table_menu:after {border-bottom-color:#fff;} .menu_table_menu:active {background-color:#; border-bottom-color:#FFF;-webkit-transition-duration:0.1s; transition-duration:0.1s;} .top_credit { width:100%; height:auto; text-align:center; vertical-align:middle; background-image:url(../img/pattern2.png);background-size:cover;} .main { display:block;} .menu_table_menu a { display:block;} .menu_img { width:100%; height:auto;} .menu_img_title { width:30%; height:auto; margin-bottom:20px;} .news_table_td { width:40%; padding:10px; font-size:1.0rem; text-align:left;} .news_table_td span { color:#000; padding:5px; background-color:#bab69f; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:0px;-webkit-border-radius:0px;-o-border-radius:0px;-ms-border-radius:0px; border-radius:0px;} .news_table_td2 { width:60%; padding:10px; font-size:0.8rem; text-align:left; color:#222;} .news_table_td2 span { color:#fff; padding:5px; background-color:#; border-bottom-style: dotted; border-bottom-width:1px; border-bottom-color: #666;} .introduction_table { width:960px; height:auto; margin:0px auto; background-color:#; margin-top:20px; margin-bottom:20px;} .introduction_table_td span { color:#000; padding:5px; background-color:#bab69f; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .introduction_table_td2 { width:50%; padding:10px; font-size:0.8rem; text-align:left; color:#fff;} .introduction_table_td2 div { background: rgba(0,0,0,0.6); font-size:0.7rem; line-height:1.0rem; border-style: dotted; border-width:1.5px; border-color: #999;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; padding:10px;} .introduction_txt01 { width:100%;height:auto;} .introduction_txt02 { font-size:1.2rem; font-weight:bold;-webkit-box-shadow:0 0 2px 2px rgba(200,200,200,0.2) inset; -moz-box-shadow:0 0 2px 2px rgba(150,150,150,0.2) inset; box-shadow:0 0 2px 2px rgba(150,150,150,0.2) inset;} .story_table { display:none; width:960px; height:auto; margin:0px auto; background-color:#;} .story_table_td { width:50%; padding:5px; font-size:1.0rem; text-align:right;} .story_table_td img { width:100%; height:auto; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .story_table_td span { color:#000; padding:5px; background-color:#bab69f; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .story_table_td2 { width:50%; padding:5px; font-size:0.8rem; text-align:left; color:#FFF;} .story_table_td2 span { color:#fff; padding:5px; background-color:#; border-bottom-style: dotted; border-bottom-width:1px; border-bottom-color: #666;} .story_img { width:90%; height:auto;} .story_gallery { width:960px; height:auto; margin:0px auto; text-align:center;} .story_gallery01 { width:85%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; padding:10px; border-color:#000; border-style:solid; border-width:2px; background-color:#000; margin-top:20px; margin-bottom:20px;} .credit_table { width:960px; height:auto; margin:0px auto; background-color:#;} .credit_table_td { width:100%; padding:5px; font-size:1.0rem; text-align:left;} .credit_table_td span { color:#000; padding:5px; background-color:#bab69f; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .credit_table_td2 { width:100%; padding:10px; font-size:0.8rem; text-align:left; color:#FFF; border-left-color:#007c7c; border-left-style:dotted; border-left-width:5px;} .credit_table_td2 a { color:#FFF;} .credit_table_td2 span { font-weight:bold; font-size:1.2rem; color:#fff; padding:5px; background-color:#; border-bottom-style: dotted; border-bottom-width:0px; border-bottom-color: #666;} .credit_face { width:15%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; background-color:#bab69f; padding:3px;} .credit_bio { width:100%; list-style:circle; font-size:0.8rem; float:left; margin-bottom:10px;} .space_story { background-color:#bab69f; height:auto; background-image:url(../img/bg_story.png);background-size:cover;} .space_credit { background-color: #009999;} .space_theater { background-color: #FFCC66;} .theater { width:960px; height:auto; margin:0px auto;} .theater_txt01 { text-align:center; width:25%; height:auto; padding:5px; text-align:center; color:#000; font-size:0.8rem;} .theater_txt02 { text-align:center; width:12.5%; height:auto; padding:5px; text-align:center; color:#000; font-size:0.8rem;} .theater_txt03 { text-align:center; width:25%; height:auto; padding:5px; text-align:center; color:#000; font-size:0.8rem;} .theater_info_title {border-color:#000; border-style:solid; border-width:2px; background-color:#000; color:#FFF;} .theater_return { text-align:center; padding-top:150px; padding-bottom:20px;} .theater_info_list { color:#000;} .theater_info_list a { color:#000;} .cast_table { width:100%; height:auto; margin:0px auto;} .cast_table_td { width:25%; text-align:center; color:#FFF; line-height:1.4rem;} .credit_face2 { width:50%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; background-color:#bab69f; padding:3px;} .introduction_title {-moz-border-radius:30px;-webkit-border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px; border-radius:30px; background-color:#000; padding:10px;} .news_title {-moz-border-radius:0px;-webkit-border-radius:0px;-o-border-radius:0px;-ms-border-radius:0px; border-radius:0px; padding:10px; background-color:#000;} .music_cd { width: 100%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; border-color:#bab69f; border-style:solid; border-width:2px; padding:1px;} .music_td { width:50%; text-align:left; padding:10px; line-height:1.0rem; font-size:0.8rem;} .music_point { background-color:#bab69f; color:#000; font-size:1.0rem; -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; border-color:#bab69f; border-style:solid; border-width:2px; padding:5px;} .music_point2 { color:#000; background-color:#bab69f; font-size:0.7rem;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; border-color:#bab69f; border-style:solid; border-width:2px; padding:5px;} .music_point3 { font-size:0.6rem; background-color:#97936c; color:#FFF;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; border-color:#bab69f; border-style:solid; border-width:2px; padding:5px; margin-top:5px; margin-bottom:3px;} .music_point4 { line-height:1.2rem font-size:0.8rem; background-color:#bab69f; color:#000; padding:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; margin-top:3px; margin-bottom:5px;} .music_point4 a { color:#000; text-decoration:none;} .music_point4:hover { background-color:#FFF;-webkit-transition-duration:1.0s; transition-duration:1.0s;} .music_table_td2 { padding:10px; font-size:0.8rem; text-align:left; color:#FFF; line-height:1.6rem} .music_play { line-height:2.0rem;} #loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; z-index: 1; } #loader { display: none; position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: #fff; z-index: 2; } /* Let's get this party started */ ::-webkit-scrollbar { width: 0.5%; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(50,80,30,0.3); -webkit-border-radius: 10px; border-radius: 5px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 5px; background: rgba(129,123,85,0.5); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(145,176,124,0.5); } /* Tutorial Name: Modernize Your Site: Building a YouTube Video Background Author: Samuel Dalusung */ /* GENERAL STYLES ================================================== */ html {height:100%; margin:0; padding:0;} body { font:15px/23px 'Raleway',sans-serif; margin:0; padding:0; height:100%; width:100%; background-color:#000; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; -khtml-user-select:none; -webkit-user-drag: none; -khtml-user-drag: none; -webkit-touch-callout: none; } p { font-size:20px; line-height:140%; text-align:center } ul li { display:inline-block; list-style:none; padding-right: 10px; } .wrapper { z-index:600; position:relative } .pattern { background-image:url(); background-size:cover; background-attachment:scroll; width:100%; height:100%; position:absolute; top:0; left:0 } .divider { background-image:url(../img/divider.png); display:block; width:300px; height:35px; margin:10px auto } #colorize { color:#f1c40f; font-family:'Lato',sans-serif; font-size:40px } /* BIG VIDEO BACKGROUND =============================================../img/pattern.png===== */ .big-background { z-index:550; text-align:center; height:100%; min-height:100%; position:relative; overflow:hidden; background-image:url(); background-size: cover; } .big-background .big-background-container { width:100%; max-width:100%; display:inline-block; position:relative; text-align:center; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .big-background-title { font-family:'Raleway',sans-serif; font-size:78px; color:#fff; font-weight:300; text-transform:uppercase; text-align:center; margin-bottom:22px; padding-top:20px; display:inline-block; background-attachment:scroll; background-repeat:repeat-x; background-position:top center } a.big-background-btn { font-family:'Lato',sans-serif; font-size:13px; text-transform:uppercase; text-decoration:none; color:#fff; background:transparent; border:2px solid #fff; padding:10px 14px; cursor:pointer; letter-spacing:2px; text-align:center; display:inline-block; -webkit-transition:.4s background ease; -moz-transition:.4s background ease; -o-transition:.4s background ease; transition:.4s background ease; } .big-background-btn:hover { color:#fff; background:rgba(255,255,255,0.20) } a.big-background-btn2 { width:90%; height:auto; font-family:'Lato',sans-serif; font-size:13px; text-transform:uppercase; text-decoration:none; color:#fff; background:transparent; border:2px solid #fff; padding:10px; cursor:pointer; letter-spacing:2px; text-align:center; display:inline-block; -webkit-transition:.4s background ease; -moz-transition:.4s background ease; -o-transition:.4s background ease; transition:.4s background ease; } .big-background-btn2:hover { color:#fff; background:rgba(255,255,255,0.20) } .big-background-default-image { background:url(../images/sunset.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover; width:100%; height:100%; z-index:0; backface-visibility:hidden } /* ABOUT SECTION ================================================== */ .about-section { font-family:'Lato',sans-serif; color:#7f8c8d; background:#; padding:0px 0px } .about-section-container { text-align:center; padding-bottom:50px } .about-section-title { font-family:'Raleway',sans-serif; font-size:40px; background:#fff; color:#3d566e; padding:0 35px; margin-bottom:22px; background-attachment:scroll; background-repeat:repeat-x; background-position:center center; text-transform:uppercase } a.about-section-btn { font-family:'Lato',sans-serif; font-size:13px; text-transform:uppercase; text-decoration:none; color:#34495e; background:transparent; border:2px solid #34495e; padding:10px 14px; cursor:pointer; letter-spacing:2px; text-align:center; display:inline-block; -webkit-transition:.4s background ease; -moz-transition:.4s background ease; -o-transition:.4s background ease; transition:.4s background ease; } .about-section-btn:hover { color:#fff; background: #34495e; } /* SMALL VIDEO BACKGROUND ================================================== */ .small-background-section { font-family:'Raleway',sans-serif; padding:100px 0; position:relative; width:100%; overflow:hidden } .small-background-container { position:relative; text-align:center } .small-background-title { font-size:40px; color:#f1c40f; font-weight:300; z-index:10; display:inline-block; text-transform:uppercase; margin-bottom:20px; margin-top: 20px; position:relative; background-attachment:scroll; background-repeat:repeat-x; background-position:top center } /* SOCIALS ================================================== */ .socials a { color:#fff } .socials a:hover { color:#bdc3c7 } /* Sweep To Bottom ================================================== */ .hvr-sweep-to-bottom { -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } .hvr-sweep-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { color: white; } .hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* 色調反転*/ .img_effect:hover { -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); } .img_effect2 { -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); } /*--------------------------------------------------------------------------------------- スマホメニュー設定 PC対応 ---------------------------------------------------------------------------------------*/ .wrap { top:0; display:block; position: fixed; z-index: 999999; margin-top:20px; } .wrap a { color:#fff;} .wrap a:hover { color:#000;} .panel { display:block;font-family:Myfont; z-index: 99999999; background-image:url(../img/bg_menu.png); background-color: rgba(0,0,0,0.7) !important; position: fixed relative; left: -30.625em; /*or width of your navigation panel*/ width: 30.625em; /*should match the above value*/ color:#fff; text-align:left; padding-top:0px; border-right-color:#fff; border-right-style:solid; border-right-width:0px; } .panel h1 a {} .panel ul { border-top: 0px solid #34495D; list-style:none; float:left; text-align:left; } .panel li a { display: block; border-bottom: 0px solid #fff; padding-bottom: 3%; text-align:left; } .panel_logo { padding:5%; margin-bottom:0 !important;margin-top:0 !important;background-color: #62472b; opacity: 1.0; background-image: linear-gradient(30deg, #6a4f32 12%, transparent 12.5%, transparent 87%, #6a4f32 87.5%, #6a4f32), linear-gradient(150deg, #6a4f32 12%, transparent 12.5%, transparent 87%, #6a4f32 87.5%, #6a4f32), linear-gradient(30deg, #6a4f32 12%, transparent 12.5%, transparent 87%, #6a4f32 87.5%, #6a4f32), linear-gradient(150deg, #6a4f32 12%, transparent 12.5%, transparent 87%, #6a4f32 87.5%, #6a4f32), linear-gradient(60deg, #6a4f3277 25%, transparent 25.5%, transparent 75%, #6a4f3277 75%, #6a4f3277), linear-gradient(60deg, #6a4f3277 25%, transparent 25.5%, transparent 75%, #6a4f3277 75%, #6a4f3277); background-size: 20px 35px; background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px; border-left:20px #000 dashed;border-right:20px #000 dashed;} .logo_menu_img { width:80%; height:auto; margin:0px auto; text-align:center; margin-bottom:10px;} .panel_menu { background-color:#; width:94.5%; text-align:left; color:#FFF; margin:0px auto; border-bottom-color:#666; border-bottom-style:solid; border-bottom-width:1px; padding-left:5px; padding-right:5px; border-radius:0px; font-size:0.7rem; line-height:0.8rem; margin-bottom:0px; font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; padding-top:3%;} .panel_menu:hover {-webkit-transition-duration:0.6s; transition-duration:0.6s; background-color: #eee; color:#111;} .panel_menu a:hover { color:#111;} .panel_menu span { font-size:0.6rem; letter-spacing:0.2rem; border-bottom-width:0px; border-bottom-color:#444; font-weight:bold; border-bottom-style: dotted; line-height:1.2rem;color:#a18f38;} .panel_menu span a { color:#CC9900;} .panel_menu a { color:#fff; display:block;　width:100%; padding:3%;} .panel_menu a:active { background-color:#666;} .panel_menu2 { background-color:#ccc; width:94.5%; text-align:left; color:#111; margin:0px auto; border-bottom-color:#666; border-bottom-style:solid; border-bottom-width:1px; padding-left:5px; padding-right:5px; border-radius:0px; font-size:0.7rem; line-height:0.8rem; margin-bottom:0px; font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; padding-top:3%;} .panel_menu2:hover {-webkit-transition-duration:0.6s; transition-duration:0.6s; background-color: #eee; color:#111;} .panel_menu2 a:hover { color:#111;} .panel_menu2 span { font-size:0.6rem; letter-spacing:0.2rem; border-bottom-width:0px; border-bottom-color:#444; font-weight:bold; border-bottom-style: dotted; line-height:1.2rem;color:#a18f38;} .panel_menu2 span a { color:#CC9900;} .panel_menu2 a { color:#111; display:block;　width:100%; padding:3%;} .panel_menu2 a:active { background-color:#666;} .menu-link { text-decoration:none;} .menu_btm { font-size:0.75rem; line-height:1.0rem;} .menu_txt01 { color:#CC9900;} .menu_side { text-align:right; padding-right:2.5rem;} .menu_side a { text-decoration:none; border-bottom: 0px solid #fff; font-size:3.0rem;} .smf-menu { font-size:1.5rem; padding:8%; padding-left:5%; padding-right:5%; background-color: rgba(0,0,0,0.70); color:#fff;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%; margin-left:10px; margin-top:15px; border-style: dashed; border-width:2px; border-color:#999; position:relative;} .smf-menu:hover { background-color: rgba(255,255,255,0.10);border-style: solid; border-color:#333; -webkit-transition-duration:0.6s; transition-duration:0.6s;} .smf-menu:after {-webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; transition: opacity 1s ease-out;} .cast_table_td { display: inline-table; width:45%; margin:0px auto; text-align:center; color:#FFF; line-height:1.4rem;} .credit_face2 { width:90%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; background-color:#bab69f; padding:3px;} .music_td { display:block; width:100%; margin:0px auto;} .music_table_td2 { display:block; width:95%; height:auto; margin:0px auto;} .player {filter: gray; -webkit-filter: grayscale(100%);} .logo_menu_img_smf { width:96%; height:auto; margin:5px; display:block;} /*--------------------------------------------------------------------------------------- スマホメニュー設定終了 ---------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------- トップへもどる設定 ---------------------------------------------------------------------------------------*/ #pageTop { z-index:7500; position: fixed !important; bottom: 5%; right: 3%; text-align:center; background-color:#000; border-radius: 15px; border-color:#999; border-style: dotted; border-width:3px; } #pageTop a { display: block; z-index: 999; padding: 15px; border-radius: 30px; width: 10%; height: 3%; font-size:1.8rem; background-color: #; color: #fff; font-weight: bold; text-decoration: none; text-align: center; } #pageTop a:hover { text-decoration: none; color:#fff; } #pageTop:hover { color:#000; border-color:#FFF; border-style:solid; -webkit-transition-duration:1.0s; transition-duration:1.0s;} /* loading-box --------------------------------------------------------- */ .c-loading-box{ display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; text-align: center; background: #fff; } .c-loading-box__spinner { font-size: 88px; display: inline-block; margin-top: 80px; color: #f1f1f1; -webkit-animation-name: rotateThis; -webkit-animation-duration:1s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } @-webkit-keyframes rotateThis { from {-webkit-transform:scale(0.5) rotate(0deg);} to {-webkit-transform:scale(0.5) rotate(360deg);} } .c-loading-box.is-fadeout{ opacity: 0; animation-duration: 0.1s; animation-name: fade-out; -webkit-animation-duration: 0.1s; -webkit-animation-name: fade-out; } .c-loading-box.is-hidden{ display: none; } /* fade out 100% */ @keyframes fade-out { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; } } /*--------------------------------------------------------------------------------------- /* LETTER SETTING ---------------------------------------------------------------------------------------*/ .letter_table { width:100%; height:auto; margin:0px auto;} .letter_table_td { width:33%; height:auto; margin:0px auto; padding:3%; text-align:center;} .letter_img {-webkit-filter: grayscale(100%); width:70%; height:auto;} .letter_img:hover {-webkit-filter: grayscale(0%);-webkit-transition-duration:1.0s; transition-duration:1.0s;} /*--------------------------------------------------------------------------------------- CREATOR SETTING ---------------------------------------------------------------------------------------*/ .creator_contents { width:100%; height:auto; margin:0px auto; margin-bottom:40px;} .creator_table { width:100%; height:auto; margin:0px auto;} .creator_table_td { width:25%; height:auto; line-height:1.6rem; padding-bottom:15px;} .creator_name { color:#CC9900; font-size:0.7rem;} .creator_title { color:#999; font-size:0.8rem; border-color:#999; border-style:solid; border-width:1px; padding:3px;} .creator_img { width:60%!important; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);} .copyright { width:90%; margin:0px auto; text-align:center; color:#999; font-size:0.6rem; padding-top:1%; padding-bottom:4%;} /*--------------------------------------------------------------------------------------- クリエーター各ページ設定 PC ---------------------------------------------------------------------------------------*/ .creator_layout_title { border-bottom-color:#666; border-bottom-style:solid; border-bottom-width:1px; padding:5px;} .creator_pg_title { width:15%; height:auto; display:block; margin:0px auto; padding-bottom:1%;} .creator_layout { width:95%; height:auto; margin:0px auto; padding-bottom:0px; background-color:#; margin-top:1%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .creator_face { width:25%; padding:2%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .creator_profile { width:40%; padding:2%; color:#eee;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .creator_portfolio { color:#ddd; font-size:0.85rem; line-height:1.6rem; padding:1%;} .creator_portfolio_title { font-size:0.9rem; background-color:#333; color:#eee; padding:2%; line-height:1.4rem; border-color:#999; border-style:dashed; border-width:2px; border-radius:5px 5px 5px 5px;} .creator_face_img {-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); width:100%;} .creator_pg_name { font-size:2.3rem; color:#CCC;} .creator_pg_name2 { font-size:0.8rem; color: #CC9900; line-height:2.0rem; letter-spacing:2px;} .creator_pr { padding:10px; color:#eee;} .creator_reel { width:35%; height:auto; border-top-color:#666; border-top-style:solid; border-top-width:0px;border-bottom-color:#666; border-bottom-style:solid; border-bottom-width:0px; padding-top:0%; padding-bottom:0%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .reel_table { width:100%; height:auto; margin:0px auto;} .creator_reel_div { width:22%; float:left; padding:10px; line-height:1.6rem; font-size:0.8rem; color:#CCC;} .reel_st { width:100%; margin:0px auto; display:block; float:left; height:auto; background-color:#000; border-style:solid; border-width:2px; border-color:#333;-moz-border-radius:5px;-webkit-border-radius:5px; -o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; padding:1%; margin:1%;} .reel_st:hover { border-color:#ccc;-webkit-transition-duration:0.5s; transition-duration:0.5s;} .creator_link_box { width:100%; margin:0px auto;} .creator_link_box td { display:inline-table; vertical-align:top; vertical-align:text-top; width:45%; height:auto; color:#eee; text-align:center; margin:0px auto; padding:5%; margin-right:5%;} .close2 { font-size:30px; margin-bottom:40px; margin-top:20px; text-align:center;} .close2 a { color:#999; border-color:#999; border-style:solid; border-width:3px; -moz-border-radius:35px;-webkit-border-radius:35px;-o-border-radius:35px;-ms-border-radius:35px; border-radius:35px;} .close2 a:hover { color:#FF3300; border-color: #999;} .creator_carrer { width:100%; padding:1%; color:#ddd; line-height:1.6rem; margin-top:3%; margin-bottom:3%;} .main_tablet { display:none;} section { padding:0; margin:0;} .main_pc { display:block; width:100%; height:auto; text-align:center; top:0; margin:0; padding:0;} .main_pc_img { width:100%; height:auto;} /* MEDIA QUERIES (iPad) ================================================== */ @media screen and (max-width: 1024px) { img { border: 0px; vertical-align: bottom; margin: 0px; padding: 0px; user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; -khtml-user-select:none; -webkit-user-drag: none; -khtml-user-drag: none; -webkit-touch-callout: none; pointer-events: none;} .page_space { width:100%; height:auto; padding-top:0px;} .big-background { display:none;} .logo_txt { display:none; width:30%; height:auto; margin-top:25%; float:left; margin-left:3%;} .logo_txt_tablet { display: block; width:40%; height:auto; margin-top:25%; margin:0px auto;} .logo_txt_smf { display:none; width:30%; height:auto; margin-top:25%; float:left; margin-left:3%;} .smf_main_space { width:100%; height:100vh;} .smf_main_space2 { width:100%; height:auto;} .creator_layout { width:95%; height:auto; margin:0px auto; padding-bottom:40px; margin-top:2%;} .portfolio { width:100%; height:auto; z-index:500; display:block; position:relative;margin-top:0; padding:0;top:0;} .portfolio_img { width:100%; height:130px; margin:0px auto;} .portfolio_td { display:inline-table; width:25%; height:auto; padding:0px;} .main_tablet { display:block; width:100%; height:auto; text-align:center; top:0; margin:0; padding:0;} .main_tablet_img { width:100%; height:auto;} .main { display:none; !important} .caption { font-size: 80%; text-align: center; padding-top: 14% !important; color: #000; } .creator_table_td { width:25%; height:auto; line-height:1.6rem; padding-bottom:15px; text-align:center;} .creator_img { width:50%!important;} .creator_face_img {-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); width:100%; margin:0px auto;} .main_pc { display:none; height:auto;} .logo_position_tablet { position:absolute; top:40%; left:0%;} .leaf { width:30%; height:auto; float:left; z-index:6 !important; position: absolute; margin-top:15%; display:block; filter:alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4;} .leaf2 { width:30%; height:auto; float:left; left:0; z-index:6; position: absolute; margin-top:30%; display:block; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; } .sister_title { margin-top:5%; display:block; margin:0px auto; padding-top:10%;} .logo_txt_sub_tablet {width:40%; height:auto; z-index:500; display:block; position: absolute;margin-top:0; padding:0;top:30%; left:0;} .page_title_tablet {width:25%; height:auto; z-index:500; display:block; position: absolute;margin-top:0; padding:0;top:60%; right:0;} .footer_table { margin-top:5%; height:auto;} .dial_table { width:80%; height:auto; margin:0px auto; background-color:#; margin-top:6%; margin-bottom:0%;} .page_title_01 { width:40%; height:auto; display:block; margin:0px auto; padding-top:5%; padding-bottom:0%;} .gallery_td { width:33%; height:auto; padding:2%; text-align:center; margin:0px auto;} .gallery_img { display:block; width:100%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px; margin:0px auto;} .gallery_img2 { display:block; width:100%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px; margin:0px auto;} .gallery_img3 { display:block; width:98%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px; margin:0px auto;} } /* MEDIA QUERIES (iPhone / Android) ================================================== */ @media screen and (max-width: 768px) { .jgroup_banner { display:block; width:45%; height:auto; backgroud-color:#000; transition:0.6s; margin:0 auto; text-align:center; margin-top:10%; margin-bottom:10%;} .main_pc { display:none;} .main_tablet { display:none;} .caption { font-size: 80%; text-align: center; padding-top: 10% !important; color: #000; line-height:1.4rem; } .film_img { display:none;} .film_img_smf { display: block; width:100%; height:auto;} .about-section-title { line-height:1 } .main_smf { display:block; width:100%; height:auto; text-align:center; top:0;} .main_smf_img { width:100%; height:auto;} .top_credit { display:none;} .main { display:none; !important} .news_table { width:90%; height:auto; margin:0px auto; background-color:#;} .news_table_td { display:block; width:100%; padding:5px; font-size:1.0rem; text-align:left; line-height:1.5rem;} .news_table_td span { color:#000; padding:5px; background-color:#bab69f; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:0px;-webkit-border-radius:0px;-o-border-radius:0px;-ms-border-radius:0px; border-radius:0px;} .news_table_td2 { display:block; width:100%; padding:5px; font-size:0.8rem; text-align:left; color:#222;} .news_table_td2 span { color:#fff; padding:5px; background-color:#; border-bottom-style: dotted; border-bottom-width:2px; border-bottom-color: #fff;} .menu_img_title { width:90%; height:auto; margin:0px auto; margin-bottom:10px; margin-top:20px;} .introduction_table { width:90%; height:auto; margin:0px auto; background-color:#; margin-top:20px; margin-bottom:20px;} .introduction_table_td { display:block; width:100%; padding:5px; font-size:1.0rem; text-align:center;} .introduction_table_td img { width:100%; height:auto; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .introduction_table_td span { color:#000; padding:5px; background-color:#bab69f; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .introduction_table_td2 { display:block; width:100%; padding:10px; font-size:0.8rem; text-align:center; color:#333;} .introduction_table_td2 div { color:#fff; padding:5px; background-color:#; border-bottom-style: dotted; border-bottom-width:1px; border-bottom-color: #666; width:90%; height:auto; margin:0px auto; text-align:left;} .introduction_txt01 { width:100%;height:auto;} .button { display:none;} .story_gallery { display:none;} .story_table { display:block; width:90%; height:auto; margin:0px auto; background-color:#;} .story_table_td { display:block; width:100%; padding:5px; font-size:1.0rem; text-align:center;} .story_table_td img { width:85%; height:auto; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .story_table_td span { color:#000; padding:5px; background-color:#bab69f; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .story_table_td2 { display:block; width:100%; padding:5px; font-size:0.8rem; text-align:left; color:#000;} .story_table_td2 span { color:#fff; padding:5px; background-color:#; border-bottom-style: dotted; border-bottom-width:1px; border-bottom-color: #666;} .story_table_td_theme { background-color: #000000;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; color:#FFF;} .story_space { display:none;} .space_story { background-color:#bab69f; height:auto; background-image:;} .credit_table { width:80%; height:auto; margin:0px auto; background-color:#;} .credit_table_td { display:block; width:100%; padding:5px; font-size:1.0rem; text-align:left;} .credit_table_td span { color:#000; padding:5px; background-color:#bab69f; border-style: dotted; border-width:0px; border-color: #fff;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px;} .credit_table_td2 { display:block; width:100%; padding:5px; font-size:0.8rem; text-align:left; color:#FFF; border-left-color:#007c7c; border-left-style:dotted; border-left-width:2px;} .credit_table_td2 span { font-size:1.2rem; color:#fff; padding:5px; background-color:#; border-bottom-style: dotted; border-bottom-width:0px; border-bottom-color: #666;} .credit_face { width:50%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; background-color:#bab69f; padding:3px;} .theater { width:90%; height:auto; margin:0px auto;} .theater_txt01 { display:block; width:100%; text-align:center; width:25%; height:auto; padding:5px; text-align:center; color:#000; font-size:0.8rem;} .theater_txt02 { display:block; width:100%; text-align:center; width:12.5%; height:auto; padding:5px; text-align:center; color:#000; font-size:0.8rem;} .theater_txt03 { display:block; width:100%; text-align:center; width:25%; height:auto; padding:5px; text-align:center; color:#000; font-size:0.8rem;} .theater_smf_delete { display:none;} .theater_info_title { margin:0px auto; width:90%; border-color:#000; border-style:solid; border-width:2px; background-color:#000; color:#FFF;} .theater_return { display:none;} .theater_info_list { color:#000; margin:0px auto; width:90%; text-align:left; border-bottom-color:#eab346; border-bottom-style:dotted; border-bottom-width:2px;} .theater_info_list a { color:#000;} /*--------------------------------------------------------------------------------------- スマホメニュー設定 ---------------------------------------------------------------------------------------*/ .wrap { top:0; display:block; position: fixed; z-index: 999999; margin-top:20px; } .wrap a { color:#fff;} .wrap a:hover { color:#000;} .panel { display:block;font-family:Myfont; z-index: 99999999; background-image:url(../img/bg_menu.png); background-color: rgba(0,0,0,0.7) !important; position: fixed relative; left: -30.625em; /*or width of your navigation panel*/ width: 30.625em; /*should match the above value*/ color:#fff; text-align:left; padding-top:0px; border-right-color:#fff; border-right-style:solid; border-right-width:0px; } .panel ul { border-top: 0px solid #34495D; list-style:none; float:left; text-align:left; } .panel li a { display: block; border-bottom: 0px solid #fff; padding-bottom: 3%; text-align:left; } .panel_logo { background-color:#;} .logo_menu_img { width:80%; height:auto; margin:0px auto; text-align:center; margin-bottom:10px;} .panel_menu { background-color:#; width:94.5%; text-align:left; color:#FFF; margin:0px auto; border-bottom-color:#666; border-bottom-style:solid; border-bottom-width:1px; padding-left:5px; padding-right:5px; border-radius:0px; font-size:0.7rem; line-height:0.8rem; margin-bottom:0px; font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; padding-top:3%;} .panel_menu:hover {-webkit-transition-duration:0.6s; transition-duration:0.6s; background-color: #eee; color:#111;} .panel_menu a:hover { color:#111;} .panel_menu span { font-size:0.6rem; letter-spacing:0.2rem; border-bottom-width:0px; border-bottom-color:#444; font-weight:bold; border-bottom-style: dotted; line-height:1.2rem;color:#a18f38;} .panel_menu span a { color:#CC9900;} .panel_menu a { color:#fff; display:block;　width:100%; padding:10px;} .panel_menu a:active { background-color:#666;} .panel_menu2 { background-color:#ccc; width:94.5%; text-align:left; color:#111; margin:0px auto; border-bottom-color:#666; border-bottom-style:solid; border-bottom-width:1px; padding-left:5px; padding-right:5px; border-radius:0px; font-size:0.7rem; line-height:0.8rem; margin-bottom:0px; font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; padding-top:3%;} .panel_menu2:hover {-webkit-transition-duration:0.6s; transition-duration:0.6s; background-color: #eee; color:#111;} .panel_menu2 a:hover { color:#111;} .panel_menu2 span { font-size:0.6rem; letter-spacing:0.2rem; border-bottom-width:0px; border-bottom-color:#444; font-weight:bold; border-bottom-style: dotted; line-height:1.2rem;color:#a18f38;} .panel_menu2 span a { color:#CC9900;} .panel_menu2 a { color:#111; display:block;　width:100%; padding:10px;} .panel_menu2 a:active { background-color:#666;} .menu-link { text-decoration:none;} .menu_btm { font-size:0.75rem; line-height:1.0rem;} .menu_side { text-align:right; padding-right:2.5rem;} .menu_side a { text-decoration:none; border-bottom: 0px solid #fff; font-size:3.0rem;} .smf-menu { font-size:1.5rem; padding:8%; padding-left:5%; padding-right:5%; background-color: rgba(0,0,0,0.70); color:#fff;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%; margin-left:10px; margin-top:15px; border-style: dashed; border-width:2px; border-color:#999; position:relative;} .smf-menu:hover { background-color: rgba(255,255,255,0.10);border-style: solid; border-color:#333; -webkit-transition-duration:0.6s; transition-duration:0.6s;} .smf-menu:after {-webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; transition: opacity 1s ease-out;} .cast_table_td { display: inline-table; width:45%; margin:0px auto; text-align:center; color:#FFF; line-height:1.4rem;} .credit_face2 { width:90%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; background-color:#bab69f; padding:3px;} .music_td { display:block; width:100%; margin:0px auto;} .music_table_td2 { display:block; width:95%; height:auto; margin:0px auto;} .player {filter: gray; -webkit-filter: grayscale(100%);} /*--------------------------------------------------------------------------------------- スマホメニュー設定終了 ---------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------- PCメニュー設定 ---------------------------------------------------------------------------------------*/ .menu { display:none;} /*--------------------------------------------------------------------------------------- PCメニュー設定終了 ---------------------------------------------------------------------------------------*/ .page_layout { width:95%; margin:0px auto; text-align:left; text-align:center;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .page_layout table { width:100%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .about_txt { width:90%; height:auto; margin:0px auto; text-align:left; font-size:0.9rem; padding-bottom:40px; z-index:8;} .about_logo_img { width:50%; height:auto; margin:10px;} .about_txt img { width:60%;} .works_contents_img { display:none;} .works_contents_img_smf { display:block; width:100%; height:auto; margin-top:5px; margin-bottom:5px; border-color:#666; border-style:solid; border-width:1px; background-color:#000;} .works_contents_img2 { display:none;} .works_contents_img2_smf { display:block; width:98%; height:auto; margin-top:5px; margin-bottom:5px; border-color:#666; border-style:solid; border-width:1px; background-color:#000;} .works_contents_img3 { display:none;} .works_contents_img3_smf { display:block; width:98%; height:auto; margin-top:5px; margin-bottom:5px; border-color:#666; border-style:solid; border-width:0px; background-color:#fff;} .works_title span { width:90%; background-color:#e3e1d7; color:#222; padding:10px; border-bottom-color:#999; border-bottom-style:solid; border-bottom-width:0px;} .works_carrer { width:90%; padding:10px; text-align:left; margin:0px auto; background-color:#d7d3be; font-size:0.8rem;} .works_carrer div { padding:10px; width:100%; text-align:left;} .stage_youtube { width:90%; height:auto; margin:0px auto; margin-top:10px; margin-bottom:10px; padding:5px; background-color:#000;} .member_table { width:95%; height:auto; margin:0px auto;} .member_pic { display:block; width:100%; height:auto; padding:10px; text-align:center;} .member_txt { display:block; width:90%; height:auto; margin:0px auto; padding:10px; color:#FFF; text-align:left; font-size:0.8rem;} .contact_txt { color:#FFF; text-align:left; font-size:0.8rem;} .music_cd { width:70%; height:auto;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; border-color:#bab69f; border-style:solid; border-width:2px; padding:1px;} .creator_table_td { display:inline-table; width:40%; margin:0px auto; margin-bottom:20px;} /*--------------------------------------------------------------------------------------- ポートフォリオ画像のテキスト表示設定 ---------------------------------------------------------------------------------------*/ .portfolio { width:100%; height:auto; z-index:500;} .portfolio_img { width:100%; height:100px; margin:0px auto;} .portfolio_table { display:block; width:100%; height:auto; margin:0px auto;} .portfolio_td { display: inline-table block; width:50%; height:auto; padding:0px; margin:0px auto; margin:0%;} .portfolio_div { z-index:501; width: 100%; height: auto; overflow: hidden; margin: 0px; padding:0px; position: relative; /* 相対位置指定 */ } .portfolio_div .caption { font-size: 70%; text-align: center; padding-top: 20%; color: #000; } .portfolio_div .mask { width: 100%; height: 100%; position: absolute; /* 絶対位置指定 */ top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(255,255,255,0.95); /* マスクは半透明 */ -webkit-transition: all 0.2s ease; transition: all 0.2s ease; z-index:501 } .portfolio_div:hover .mask { opacity: 1; /* マスクを表示する */ } .letter_contents { width:90%; height:auto; margin:0px auto; text-align:left; color:#FFF; padding-bottom:40px;} .smf { display: inherit;} .pc { display:none;} /*--------------------------------------------------------------------------------------- 会社概要の設定SMF ---------------------------------------------------------------------------------------*/ .company_div { width:100%; height:auto; margin:0px auto; margin-bottom:40px;} .company_table { width:100%; height:auto; margin:0px auto;} .company_td { display:block; width:90%; height:auto; margin:0px auto; font-weight:bold; padding:10px; text-align:left; border-bottom-color:#999; border-bottom-style:solid; border-bottom-width:1px; border-top-color:#999; border-top-style:solid; border-top-width:4px;} .company_td2 { font-size:0.7rem; display:block; width:90%; height:auto; margin:0px auto; font-weight:normal; padding:10px; text-align:left; border-bottom-color:#aaa; border-bottom-style:solid; border-bottom-width:0px; border-top-color:#aaa; border-top-style:solid; border-top-width:0px; margin-bottom:15px; margin-top:0px;} /*--------------------------------------------------------------------------------------- コンタクトの設定SMF ---------------------------------------------------------------------------------------*/ .contact_div { width:90%; height:auto; margin:0px auto; margin-bottom:40px;} .contact_table { width:85%; height:auto; margin:0px auto;} .contact_td { display:block; width:90%; height:auto; margin:0px auto; font-weight:bold; padding:10px; text-align:left; border-bottom-color:#333; border-bottom-style:solid; border-bottom-width:0px; border-top-color:#333; border-top-style:solid; border-top-width:0px;} .contact_td2 { display:block; width:90%; height:auto; margin:0px auto; font-weight:normal; padding:10px; text-align:left; border-bottom-color:#aaa; border-bottom-style:solid; border-bottom-width:0px; border-top-color:#aaa; border-top-style:solid; border-top-width:0px;} .contact_td3 { display:block; width:90%; height:auto; margin:0px auto; font-weight:normal; padding:5px; text-align:center; border-bottom-color:#aaa; border-bottom-style:solid; border-bottom-width:0px; border-top-color:#aaa; border-top-style:solid; border-top-width:0px;} .contact03 { padding:10px; text-align:center; color:#aaa;} .form-container { border: 1px solid #f2e3d2; background: #c9b7a2; background: -webkit-gradient(linear, left top, left bottom, from(#f2e3d2), to(#c9b7a2)); background: -webkit-linear-gradient(top, #f2e3d2, #c9b7a2); background: -moz-linear-gradient(top, #f2e3d2, #c9b7a2); background: -ms-linear-gradient(top, #f2e3d2, #c9b7a2); background: -o-linear-gradient(top, #f2e3d2, #c9b7a2); background-image: -ms-linear-gradient(top, #f2e3d2 0%, #c9b7a2 100%); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; -moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; font-family: 'Helvetica Neue',Helvetica,sans-serif; text-decoration: none; vertical-align: middle; padding:1.5%; margin:0px auto; width:85%; } .form-field { width:85%; margin:0px auto; border: 1px solid #aaa; background: #444; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #c9b7a2; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; padding:5%;; margin-bottom:20px; -webkit-box-shadow:0 0 0px 2px rgba(145,108,63,0.2) inset; -moz-box-shadow:0 0 0px 2px rgba(145,108,63,0.2) inset; box-shadow:0 0 0px 2px rgba(145,108,63,0.2) inset; } .form-field:hover {border: 1px solid #fff;} .form-field:active {border: 1px solid #c9b7a2;} .form-field:focus { background: #; color: #fff; } .form-container h2 { text-shadow: #fdf2e4 0 1px 0; font-size:18px; margin: 0 0 10px 0; font-weight:bold; text-align:center; } .form-title { display:block; width:90%; height:auto; margin:0px auto; text-align:left; margin-bottom:10px; color: #725129; font-weight:bold; text-shadow: #fdf2e4 0 0px 0; } .submit-container { margin:8px 0; text-align:right; } .submit-button { border: 1px solid #e7d2b8; background: #e7d2b8; background: -webkit-gradient(linear, left top, left bottom, from(#e7d2b8), to(#b0906a)); background: -webkit-linear-gradient(top, #e7d2b8, #b0906a); background: -moz-linear-gradient(top, #e7d2b8, #b0906a); background: -ms-linear-gradient(top, #e7d2b8, #b0906a); background: -o-linear-gradient(top, #e7d2b8, #b0906a); background-image: -ms-linear-gradient(top, #e7d2b8 0%, #b0906a 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #addc7e 0 0px 0; color: #fff; font-family: helvetica, serif; padding: 15px; font-size: 14px; text-decoration: none; vertical-align: middle; width:90%; display:block; margin:0px auto; } .submit-button:hover { border: 1px solid #916c3f; text-shadow: #31540c 0 0px 0; background: #b0906a; background: -webkit-gradient(linear, left top, left bottom, from(#e7d2b8), to(#b0906a)); background: -webkit-linear-gradient(top, #e7d2b8, #b0906a); background: -moz-linear-gradient(top, #e7d2b8, #b0906a); background: -ms-linear-gradient(top, #e7d2b8, #b0906a); background: -o-linear-gradient(top, #e7d2b8, #b0906a); background-image: -ms-linear-gradient(top, #e7d2b8 0%, #b0906a 100%); color: #fff; } .submit-button:active { text-shadow: #31540c 0 0px 0; border: 1px solid #e7d2b8; background: #e7d2b8; background: -webkit-gradient(linear, left top, left bottom, from(#b0906a), to(#e7d2b8)); background: -webkit-linear-gradient(top, #b0906a, #e7d2b8); background: -moz-linear-gradient(top, #b0906a, #e7d2b8); background: -ms-linear-gradient(top, #b0906a, #e7d2b8); background: -o-linear-gradient(top, #b0906a, #e7d2b8); background-image: -ms-linear-gradient(top, #b0906a 0%, #e7d2b8 100%); color: #fff; } /*--------------------------------------------------------------------------------------- クリエーター各ページ設定 SMF ---------------------------------------------------------------------------------------*/ .creator_layout_title { border-bottom-color:#666; border-bottom-style:solid; border-bottom-width:1px; padding:5px;} .creator_pg_title { width:80%; height:auto;} .creator_layout { width:90%; height:auto; margin:0px auto; display:block;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .creator_face { display:block; width:95%; padding:2%; text-align:center;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .creator_profile { display:block; width:95%; font-size:0.9rem; padding:2%; color:#eee; text-align:center;} .creator_portfolio { color:#CCC; font-size:0.7rem; line-height:1.2rem; padding:10px; text-align:left;} .creator_face_img {-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); width:70%; margin:0px auto;} .creator_pg_name { font-size:2.3rem; color:#CCC; text-align:center;} .creator_pg_name2 { font-size:0.8rem; color: #CC9900; line-height:2.0rem; letter-spacing:2px; text-align:center;} .creator_pr { padding:10px; text-align:left; margin-top:4%;} .creator_reel { background-color:#; text-align:center; display:block; width:95%; margin:0px auto; height:auto; border-top-color:#666; border-top-style:solid; border-top-width:0px;border-bottom-color:#666; border-bottom-style:solid; border-bottom-width:0px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .reel_table { width:90%; height:auto; margin:0px auto;} .creator_reel_div { display: inline-table; width:40%; padding:10px; line-height:1.6rem; font-size:0.8rem; color:#CCC; margin:0px auto; margin-right:10%; margin-bottom:10%;} .reel_st { width:95%; margin:0px auto; height:auto; background-color:#000; border-style:solid; border-width:2px; border-color:#333;-moz-border-radius:5px;-webkit-border-radius:5px; -o-border-radius:5px;-ms-border-radius:5px; border-radius:5px; padding:1%;} .reel_st:hover { border-color:#ccc;-webkit-transition-duration:0.5s; transition-duration:0.5s;} .close2 { font-size:50px; margin-bottom:0px; margin-top:10px; text-align:center; position:fixed; position:; top:0; right:0; padding:2%;} .close2 a { color:#999; border-color:#999; border-style:solid; border-width:0px; -moz-border-radius:35px;-webkit-border-radius:35px;-o-border-radius:35px;-ms-border-radius:35px; border-radius:35px;} .close2 a:hover { color:#FF3300; border-color: #999;} .close2 a:active { color:#FF3300;} .creator_link_box { width:100%; margin:0px auto;} .creator_link_box td { display:block; width:95%; height:auto; color:#eee; text-align:center; margin:0px auto !important; padding:1%; background-color:#;} .adjust01 { padding-top:15%;} .dial_img { display:none; width:80%; height:auto;} .contact_area td { display:block !important; width:95%; margin:0px auto;} .icon_css { width:80%; padding:2%; color:#000; font-size:0.9rem; border-color:#000; border-style:solid; border-width:1px; margin:0px auto; border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px; margin-top:6%; vertical-align:middle; } .icon_css:hover { background-color:#000; color:#FFF;} .icon_css a { color:#000;} .icon_css a:hover { color:#fff;} .sister_table { width:100%; height:auto; display:block;} .sister_area { width:95% !important; height:auto; margin:0px auto; margin-top:0%; margin-bottom:15%; background-color:#000000;} .sister_bannar { display:block; width:60% !important; height:auto; margin:0px auto; background-color:#000; border-style: dashed; border-width:5px; border-color:#FFF; border-radius:50% 50%; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px;} .smf_bannar { display:block !important; width:100%;} .sister_div { position:absolute; position:relative; display:block; width:90%; padding:2%; text-align:center; color:#000; font-size:0.9rem; border-style:solid; border-width:0px; margin:0px auto;margin-top:6%; vertical-align:middle;} .dial_m { width:80% !important; height:auto; margin:0px auto; display:block;} .footer_div { font-size:0.7rem; color:#ccc; text-align:center; width:80%; float: none; display:block; margin:0px auto; margin-top:7%; background-color: rgba(255,255,255,0.00);} .footer_menu_a { display:block; width:100%; color:#CCC; font-size:0.8rem;} .footer_img { width:100%; height:auto; margin:0px auto; display:block;} .footer_table { padding-top:20% !important; width:90% !important; height:auto; margin:0px auto;} .smf_main_space { width:100%; height:100vh;} .smf_main_space2 { width:100%; height:auto;} .logo_txt { display:none; width:30%; height:auto; margin-top:25%; float:left; margin-left:3%;} .logo_txt_tablet { display: none; width:30%; height:auto; margin-top:25%; float:left; margin-left:3%;} .logo_txt_smf { display: block; width:100%; height:auto; margin-top:25%; float: none; margin:0px auto;} .leaf { width:40%; height:auto; float:none; z-index:6 !important; position: absolute; margin-top:15%; display:block; filter:alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4;} .leaf2 { width:40%; height:auto; float:none; z-index:6; position: absolute; margin-top:50%; display:block; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; } .icon_css2 { width:80%; padding:2%; color:#000; font-size:0.9rem;background-color:#fff; border-color:#999; border-style:solid; border-width:2px; margin:0px auto; border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px; margin-top:6%; vertical-align:middle; } .icon_css2:hover { background-color:#333; color:#fff; -webkit-transition-duration:0.3s; transition-duration:0.3s; border-color:#999;} .icon_css2 a { color:#000;} .icon_css2 a:hover { color:#fff;} .vision_table { width:100%; height:auto; margin:0px auto;} .vision_table_td { width:100%; height:auto; margin-top:0; padding-top:0;} .recruit_table { width:90%; height:auto; margin:0px auto; margin-top:0%;} .recruit_table_tr {background-color:rgba(255,255,255,0.1); margin-bottom:2%;border-radius:5px 5px; -moz-border-radius:5px 5px; -webkit-border-radius:5px 5px; -khtml-border-radius:5px 5px;} .recruit_table_td01 { display:block; width:96%; height:auto; padding:2%; color:#ddd; font-size:0.9rem; text-align:left;background-color:rgba(255,255,255,0.1);-moz-border-radius: 5px 5px; -webkit-border-radius: 5px 5px; -o-border-radius: 5px 5px; -ms-border-radius: 5px; border-radius: 5px 5px;} .recruit_table_td02 { display:block; width:95%; height:auto; padding:4%; color:#ccc; font-size:0.8rem; text-align:left;} .recruit_table_td02 a { color:#ccc;} .contact_area { width:100%; height:auto; margin:0px auto; margin-top:5%;} .contact_area2 { width:80%; height:auto; margin:0px auto; margin-top:5%;} .contact_area2 td { display:block; width:95%; height:auto; margin:0px auto; margin-top:5%; text-align:left;} .logo_txt_sub { display:none; width:30%; height:auto; margin-top:15%; float:none;} .logo_txt_sub_tablet { display: none; width:30%; height:auto; margin-top:25%; float:left; margin-left:3%;} .logo_txt_sub_smf { display: block; width:100%; height:auto; margin-top:5%; float: none; position:absolute; margin:0px auto; top:35%; left:0;} .page_title_smf { display: block; width:60%; height:auto; margin-top:15%; float: none; position:absolute; margin:0px auto; top:60%; left:20%;} .page_title_leaf { display: block; width:20%; height:auto; margin-top:0%; float: none; position:absolute; margin:0px auto; top:20%; left:20%;-moz-transform: rotate(-65deg);-webkit-transform: rotate(-65deg);-o-transform: rotate(-65deg);-ms-transform: rotate(-65deg); transform: rotate(-65deg); } .page_title_leaf2 { display: block; width:25%; height:auto; margin-top:0%; float: none; position:absolute; margin:0px auto; top:25%; left:30%;transform:-moz-transform: rotate(-65deg);-webkit-transform: rotate(-65deg);-o-transform: rotate(-65deg);-ms-transform: rotate(-65deg); transform: rotate(-65deg); } .page_title_01 { width:80%; height:auto; display:block; margin:0px auto; padding-top:8%; padding-bottom:8%;} .point_txt01 { font-size:0.7rem; color:#a18f38;} .point_txt01 a { font-size:0.7rem; color:#a18f38;} .point_txt02 { font-size:0.8rem; color:#a8a490;} .sister_title { margin-top:5%; display:block; margin:0px auto; padding-top:15%;} .dial_table { width:80%; height:auto; margin:0px auto; background-color:#; margin-top:6%; margin-bottom:6%;} .map { width:90%; height:400px; margin:0px auto; display:block;} .access_train_logo { width:10%; height:auto; margin-right:2%;} .access_entrance{ width:80%; height:auto; margin:0px auto; background-color:#444; padding:1%; display:block;} .demo_pic { width:90%; height:auto;border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -khtml-border-radius:50%; background-color:#333; padding:1%; display:block; margin:0px auto;} .demo_pic_space { background-color:transparent !important; padding-top:10%;} .demo_merit li { display:block; width:95%; height:auto; list-style:lower-greek; text-align:left; padding:0.5%; font-size:0.6rem; float:left; left:0;} .gallery_td { width:33%; height:auto; padding:2%; text-align:center; margin:0px auto;} .gallery_img { display:block; width:95%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px; margin:0px auto;} .gallery_img2 { display:block; width:95%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px; margin:0px auto;} .gallery_img3 { display:block; width:95%; height:auto; padding:1%; border-radius:10px 10px; -moz-border-radius:10px 10px; -webkit-border-radius:10px 10px; -khtml-border-radius:10px 10px; margin:0px auto;} img { border: 0px; vertical-align: bottom; margin: 0px; padding: 0px; user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; -khtml-user-select:none; -webkit-user-drag: none; -khtml-user-drag: none; -webkit-touch-callout: none; pointer-events: none;} .page_title_02 { width:100%; height:auto; margin-bottom:8%;} } @media screen and (max-width: 480px) { .big-background-title { font-size:58px } .small-background-title { line-height:1 } /*.player{ display: none;} -> If you want to remove the video bg on a specific viewport w/o plugin*/ } @media screen and (max-width: 360px) { .big-background-title,#colorize { line-height:1 } } @media screen and (max-width: 320px) { .small-background-title { font-size:30px } } /* 20250324 */ .contact-20250220 { color:#fff; color:#fff; display:block; text-align:center; width:80%; margin:0 auto;margin-top:6%;} .contact-20250220 a { display:block;} .contact-20250220 a i { font-size:6.0rem; margin-bottom:5%;} .contact-txt-link{ display:inline !important;} /* 20250327 */ @media screen and (max-width: 768px) { .group-list {} .group-list a { font-size:1.0rem; font-family: 'Helvetica Neue',Helvetica,sans-serif;} .group-list a span { font-size:0.7rem;} #footerFloatingMenu { width:101vw !important;} #footerFloatingMenu .jgroup_banner {} #footerFloatingMenu .jgroup_banner img{height:15px;filter: invert(1.0);} #footerFloatingMenu .home_banner {} #footerFloatingMenu .home_banner img {height:30px; } #footerFloatingMenu a i { font-size:2.0rem !important;} #footerFloatingMenu a { letter-spacing:0.1rem;} #footerFloatingMenu div:nth-child(1) { background-color: #a68565; font-size:0.5rem; font-family: 'Helvetica Neue',Helvetica,sans-serif; height:100%; line-height:1.5rem; padding-top:2.1%; padding-bottom:0.0%; } #footerFloatingMenu div:nth-child(2) { background-color: #bda288; font-size:0.5rem; font-family: 'Helvetica Neue',Helvetica,sans-serif; height:100%; padding-top:3.5%; padding-bottom:3.5%; } #footerFloatingMenu div:nth-child(3) { background-color: #a7cd4c; font-size:0.5rem; font-family: 'Helvetica Neue',Helvetica,sans-serif; height:100%; padding-top:3.5%; padding-bottom:3.0%; } }