@charset "UTF-8";

/* SELF RESET */
a { text-decoration: none; }
ul,ol { margin:0; padding:0; list-style: none; }

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix:before {
    content: "";
	display: block;
	clear: both;
}
.clearfix { display: block; }

/* ---------- GENERAL ---------- */
html {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    min-width: 1000px;
}
.inner,
.min_inner { margin: 0 auto; }
.inner { width: 1000px; }
.min_inner { width: 690px; }

.kinari { background: #f6f5e0; }
br.sp { display: none; }

@media screen and (max-width:768px) {
    html { min-width: 100%; }
    .inner,.min_inner { width: 100%; padding: 0 10px; }
    br.sp { display: block; }
}

/* ----- SNS BTN ----- */
.sns_btn ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    z-index: 9999;
}
.twitter a,
.facebook a,
.youtube a {
    display: block;
    text-indent: 100%;
    overflow: hidden;
}
.twitter a {
    background: center / contain no-repeat url(../imgs/sns_twitter_de.png),
    center / 0 no-repeat url(../imgs/sns_twitter_ov.png);
}
.facebook a {
    background: center / contain no-repeat url(../imgs/sns_facebook_de.png),
    center / 0 no-repeat url(../imgs/sns_facebook_ov.png);
}
.youtube a {
    background: center / contain no-repeat url(../imgs/sns_youtube_de.png),
    center / 0 no-repeat url(../imgs/sns_youtube_ov.png);
}
.twitter a:hover,
.facebook a:hover,
.youtube a:hover { background-size: 0, contain; }

/* HEADER SNS */
.h_sns {
    position: absolute;
    bottom: 50px;
    width: 100%;
    z-index: 999;
}
.h_sns.sns_btn ul {
    width: 160px;
}
.h_sns.sns_btn .twitter a,
.h_sns.sns_btn .facebook a,
.h_sns.sns_btn .youtube a { width: 27px; height: 27px; }
/* FOOTER SNS */
.f_sns.sns_btn { margin: 160px 0; }
.f_sns.sns_btn ul { width: 420px; }
.f_sns.sns_btn .twitter a,
.f_sns.sns_btn .facebook a,
.f_sns.sns_btn .youtube a { width: 72px; height: 72px; }

@media screen and (max-width:768px) {
    .h_sns { bottom: 50px; }
    .h_sns.sns_btn ul {
        flex-direction: column;
        width: 40px; height: 125px;
        margin: 0; margin-left: 20px;
        bottom: 0;
    }
    .f_sns.sns_btn { margin: 40px 0; }
    .f_sns.sns_btn ul { width: 210px; }
    .f_sns.sns_btn .twitter a,
    .f_sns.sns_btn .facebook a,
    .f_sns.sns_btn .youtube a { width: 36px; height: 36px; }
}

/* ----- HEADER ----- */
header {
    width: 100%;
    background: #fff;
}
header div.pc-nav {
    display: flex;
    width: 1000px;
    height: 140px;
    margin: 0 auto;
    align-items: center;
}
header h1 {
    width: 94px; height: 88px;
    margin-left: 24px;
    margin-right: 85px;
}

/* ----- GLOBAL NAVIGATION ----- */

/* PC NAVIGATION */
header .sp-nav { display: none; }
header .pc-nav ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 765px;
}
header .pc-nav ul li:nth-child(1) a {
    width: 65px; height: 18px;
}
header .pc-nav ul li:nth-child(2) a {
    width: 148px; height: 18px;
}
header .pc-nav ul li:nth-child(3) a {
    width: 98px; height: 18px;
}
header .pc-nav ul li:nth-child(4) a {
    width: 82px; height: 18px;
}
header .pc-nav ul li:nth-child(5) a {
    width: 115px; height: 18px;
}

@media screen and (max-width:768px) {
    header div.pc-nav { display: none; }
    header div.sp-nav { display: block; }
}
/* SP NAVIGATION */
header .sp-nav ul li { margin-bottom: 40px; }
header .sp-nav ul li:nth-child(1) img,
header .sp-nav ul li:nth-child(2) img,
header .sp-nav ul li:nth-child(3) img,
header .sp-nav ul li:nth-child(4) img,
header .sp-nav ul li:nth-child(5) img,
header .sp-nav ul li:nth-child(6) img { max-width: none; height: 35px; }
header #sp-g-nav {
    position: fixed;
    z-index: -1;
    opacity: 0;
    top:0;
    width: 100%;
    height: 100vh;
    background:#00a2ac url(../imgs/sp_nav_bg.png) no-repeat;
    background-position: center;
    background-size: 375px;
    transition: all 0.3s;
}
header #sp-g-nav.panelactive {
    opacity: 1;
    z-index: 9999;
}
header #sp-g-nav.panelactive #g-nav-list {
    position: fixed;
    z-index: 9999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
header #sp-g-nav ul {
    display: none;
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
header #sp-g-nav.panelactive ul {
    display: block;
}
header .open {
    position: fixed;
    height: 50px;
    z-index: 9999;
}
header .open img {
    position: fixed;
    left: 50%; top: 14px;
    margin-left: -23px;
    cursor: pointer;
    width: 47px; height: 44px;
}

/* ----- GLOBAL NAVIGATION ----- */

/* ----- FOOTER ----- */
footer {
    position: relative;
}
@media screen and (max-width:768px) {
    footer .inner { padding: 0; }
}
footer nav {
    position: relative;
    padding: 42px 0;
    background: #f15c17;
    color: #fff;
    font-weight: bold;
}
footer nav img {
    position: absolute;
    bottom: -95px;
    z-index: 10;
}
footer nav ul {
    position: relative;
    margin-right: 164px;
    text-align: right;
    z-index: 99;
}
footer nav ul li { margin-bottom: 30px; }
footer nav ul li:last-child { margin-bottom: 0; }
footer nav ul li a { color: #fff; }
footer nav ul li a:hover { color: #34ccca; }

footer .seiza {
    position: relative;
    background: #ef794e;
    height: 130px;
}
footer copy {
    display: block;
    background: #000;
    color: #fff;
    line-height: 80px;
    text-align: center;
}

/* SP */
@media screen and (max-width:768px) {
    footer nav { padding: 20px 0; }
    footer nav img { height: 200px; bottom: -45px; left: -40px;
     }
    footer nav ul { margin-right: 20px; }
    footer nav ul li { margin-bottom: 6px; }
    footer .seiza { height: 65px; }
    footer copy { font-size: 0.5rem; line-height: 40px; }
}

/* ========== TOP PAGE ========== */

/* ----- KEYVISUAL ----- */
#keyvisual {
    display: block;
    position: relative;
    width: 1000px;
    margin: 0 auto;
    z-index: 0;
}
.slick-dotted.slick-slider { margin-bottom: 0; }
.slick-dots li button:before {
    content:'';
    width: 8px;
    height: 8px;
    border-radius: 8px;
    border: solid 2px #00a4ae;
    background: #fff;
    opacity: 1;
}
.slick-dots li.slick-active button:before { background: #000; }
.slick-dots li.slick-active button:before {
    background: #ff4500;
    border: solid 2px #ff4500;
    opacity: 1;
}
.slick-dots {
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    bottom: auto;
    z-index: 999;
    width: auto;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
#keyvisual .pc_img { display: block; }
#keyvisual .sp_img { display: none; }
.slick-dots li { display: block; }
@media screen and (max-width:768px) {
    .slick-dots {
        top:inherit; left:inherit; right:inherit; bottom:inherit;
        transform:inherit;
        flex-direction:inherit;
        justify-content: center;
        width: 100%;
        bottom: 10px;
    }
    #keyvisual { width: 100%; margin-top: 72px; }
    #keyvisual img { height: auto; }
    #keyvisual .pc_img { display: none; }
    #keyvisual .sp_img { display: block; }
}

/* ----- PERFORM ----- */
#perform { padding-bottom: 80px; }
#perform .inner {
    background: url(../imgs/bg_e.png) no-repeat;
    background-position: top 6px left 6px;
}
#perform h1 {
    width: 194px;
    margin: 0 auto;
    padding: 80px 0;
}
#perform section { margin-bottom: 40px; }
#perform section:last-child { margin-bottom: 0; }
#perform section .data {
    float: left;
    margin-left: 40px;
    font-size: 1.6rem;
    font-weight: bold;
}
#perform section .contents {
    display: flex;
    float: right;
    width: 820px;
    padding-left: 65px;
    padding-bottom: 45px;
    border-left: solid 2px #000;
}
#perform section .contents:last-child { padding-bottom: 0; }
#perform section .contents h2 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-top: 0;
}
#perform section .btn {
    margin: auto 25px 0 auto;
}
#perform section .btn img {
    width: 110px; height: 110px;
}
#perform section .btn a {
    display: block;
    text-indent: -200px;
    overflow: hidden;
    background: center / contain no-repeat url(../imgs/ticket_btn_de.png),
    center / 0 no-repeat url(../imgs/ticket_btn_ov.png);
    width: 110px; height: 110px;
}
#perform section .btn a:hover { background-size: 0, contain; }

@media screen and (max-width:768px) {
    #perform { padding-bottom: 40px; }
    #perform .inner {
        background-position: top 6px left 6px;
        background-size: 180px;
    }
    #perform h1 { padding: 40px 0; }
    #perform section .data {
        margin-left: 0px;
        margin-top: 2px;
        font-size: 1rem;
        writing-mode: vertical-rl;
    }
    #perform section .data span {
        -ms-text-combine-horizontal: all;
        -webkit-text-combine: horizontal;
        text-combine-upright: all;
        margin-bottom: 4px;
    }
    #perform section .contents {
        width: 90%;
        padding-left: 2%;
        padding-bottom: 40px;
    }
    #perform section .contents h2 {
        font-size: 1rem;
        line-height: 1.4rem;
        margin: 0;
        margin-bottom: 10px;
    }
    #perform section .contents .detail ul { line-height: 1.4rem; }
    #perform section .btn { margin: auto 0 0 auto; }
    #perform section .btn a { width: 75px; height: 75px; }
}

/* ----- INTRODUCTION ----- */
#intro .inner {
    background: url(../imgs/bg_n.png) no-repeat;
    background-position: top 165px left 370px;
}
#intro h1 {
    width: 142px;
    margin: 0 auto;
    padding: 80px 0;
}
#intro section { display: flex; }
#intro .profile {
    width: 460px;
    margin-left: 40px;
    order: 1;
}
#intro h2 {
    margin-bottom: 40px;
    font-size: 1.8rem;
}
#intro p { margin-bottom: 30px; }
#intro dl {
    width: 460px;
    margin: 0 auto;
}
#intro dl dt {
    float: left;
    width: 110px;
}
#intro dl dd {
    width: 350px;
    padding-left: 30px;
    padding-bottom: 1rem;
    margin-left: 110px;
    border-left: solid 2px #000;
}
#intro dl dd:last-of-type { padding-bottom: 0; }
#intro .honnin {
    width: 500px;
    order: 2;
}
@media screen and (max-width:768px) {
    #intro .inner {
        background-position: top 24px left 30px;
        background-size: 100px;
    }
    #intro h1 {
        width: 142px;
        padding: 40px 0 20px;
    }
    #intro section { display: block; }
    #intro .profile h2,
    #intro .profile p { text-align: center; }
    #intro .profile {
        width: 100%;
        margin: 0;
        order: 2;
    }
    #intro h2 {
        margin-bottom: 10px;
        font-size: 2rem;
    }
    #intro p { margin-bottom: 20px; }
    #intro dl {
        width: 300px;
        margin-bottom: 40px;
    }
    #intro dl dt { width: 100px; }
    #intro dl dd {
        width: 190px;
        padding-left: 10px;
        margin-left: 100px;
    }
    #intro dl dd:last-of-type { padding-bottom: 0; }
    #intro .honnin {
        width: 280px;
        margin: 0 auto 10px;
        padding-left: 10px;
        order: 1;
    }
}


/* ----- MEDIA ----- */
#media .inner {
    background: url(../imgs/bg_gi.png) no-repeat;
    background-position: top 115px right 170px;
}
#media h1 {
    width: 300px;
    margin: 0 auto;
    padding: 80px 0;
}
#media section { padding-bottom: 80px; }
#media h2 { margin: 0 auto 40px; }
#media h2.tv { width: 120px; }
#media h2.movie { width: 89px; }
#media h2.cd_dvd { width: 174px; }
#media ul { text-align: center; }

@media screen and (max-width:768px) {
    #media .inner {
        background-position: top 80px right 30px;
        background-size: 60px;
    }
    #media h1 { width: 265px; padding: 40px 0; }
    #media section { padding-bottom: 40px; }
    #media h2 { margin-bottom: 20px; }
}

/* ----- YOUTUBE CHANNEL ----- */
#youtube_channel { padding: 80px 0; }
#youtube_channel .inner {
    background: url(../imgs/bg_ku.png) no-repeat;
    background-position: top 20px left 20px;
}
#youtube_channel h1 {
    width: 578px;
    margin: 0 auto 80px;
}
#youtube_channel iframe {
    display: block;
    width: 690px; height: 388px;
    margin: 0 auto;
}

@media screen and (max-width:768px) {
    #youtube_channel { padding: 0; }
    #youtube_channel h1 {
        width: 100%;
        margin: 0 auto 40px;
        padding-top: 40px;
    }
    #youtube_channel .inner {
        background-position: top 10px left 5px;
        background-size: 100px;
    }
    #youtube_channel .movie_wrap {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        margin-bottom: 40px;
    }
    #youtube_channel iframe {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
    }
}

/* ----- JOB REQUEST ----- */
#job_request { padding: 80px 0; }
#job_request h1 {
    width: 350px;
    margin: 0 auto 80px;
}
#job_request p {
    text-align: center;
    margin-bottom: 80px;
}
#job_request .flyer {
    margin: 0 auto;
    margin-bottom: 45px;
}
#job_request .btn {
    display: block;
    margin: 0 auto;
    width: 250px;
}

@media screen and (max-width:768px) {
    #job_request { padding: 40px 0; }
    #job_request h1,
    #job_request p { margin-bottom: 40px; }
    #job_request h1 { width: 300px; }
    #job_request .flyer { margin-bottom: 28px; }
    #job_request .btn { width: 127px; }
}

/* ========== OTHER PAGE ALL SETTING ========== */
header div.pc-nav.min { height: 100px; }
@media screen and (max-width:768px) {
    .mtop { margin-top: 70px; }
}

/* ========== CONTACT PAGE ========== */
#contact { padding: 80px 0; }
#contact h1 {
    width: 606px;
    margin: 0 auto 80px;
}
#contact p,
#contact p.txt {
    text-align: center;
    margin-bottom: 40px;
}
#contact dl {
    margin-bottom: 40px;
    font-weight: bold;
}
#contact dl dt { display: flex; margin-bottom: 10px; }
#contact form dl dt div { order: 1; }
#contact form dl dt span.required {
    margin-left: 10px;
    font-size: 0.6rem;
    padding: 0 8px;
    height: 16px;
    margin-top: 5px;
    background: #f15c17;
    color: #fff;
    order: 2;
}
#contact form dl dd { margin-bottom: 10px;}
#contact form dl .mt { margin-top: 60px; }
#contact label {
    display: block;
    text-align: center;
    margin: 0 auto 40px;
    cursor: pointer;
}
#contact dl dd { margin-left: 0; }
#contact form input,
#contact form textarea {
    width: 100%;
    padding: 10px;
    border: solid 2px #000;
}
#contact form #name_1,
#contact form #name_2,
#contact form #read_1,
#contact form #read_2 { margin-right: 1%; width: 49.5%; }
#contact form #name_2,
#contact form #read_2 { margin-right: 0; }
#contact form textarea { height: 300px; }
#contact form input[type="checkbox"] { width: auto; }

#contact form span.error_blank {
    color: #f15c17;
    display: block;
    margin-top: 10px;
}

form#mail_form #form_submit_button:disabled {
    opacity: 0.5;
    cursor: auto;
    background: url(../imgs/submit_btn_off.png) no-repeat;
    text-indent: -9999;
}
form#mail_form input[type="button"] {
/*    background: url(../imgs/submit_btn_off.png) no-repeat; */
    background: center / contain no-repeat url(../imgs/submit_btn_off.png),
    center / 0 no-repeat url(../imgs/submit_btn_on.png);
    background-size: 100%;
    width: 250px; height: 250px;
    border: none;
    cursor: pointer;
    opacity: 1;
}
form#mail_form input[type="button"]:hover { background-size: 0, contain; }
@media screen and (max-width:768px) {
    #contact { padding: 40px 0 }
    #contact h1 { width: 100%; margin-bottom: 40px; }
    #contact form dl .mt { margin-top: 40px; }
    form#mail_form #form_submit_button:disabled { background-size: 125px; }
    form#mail_form input[type="button"] {
        width: 125px; height: 125px;
    }
}
/* ----- THANKS PAGE ----- */
#contact .btn {
    display: block;
    margin: 0 auto;
    width: 250px;
}
@media screen and (max-width:768px) {
    #contact .btn { width: 125px; }
}

/* ========== GOODS PAGE ========== */
#goods { padding: 80px 0; }
#goods h1 {
    width: 248px;
    margin: 0 auto 80px;
}
#goods p {
    text-align: center;
    margin-bottom: 100px;
}
#goods .btn {
    display: block;
    margin: 0 auto;
    width: 250px;
}
@media screen and (max-width:768px) {
    #goods { padding: 40px 0; }
    #goods h1 { margin: 0 auto 40px; }
    #goods p { margin-bottom: 60px; }
    #goods .btn { width: 125px; }
}

/* ========== SITEPOLICY PAGE ========== */
#sitepolicy { padding: 80px 0; }
#sitepolicy h1 {
    width: 400px;
    margin: 0 auto 80px;
}
#sitepolicy h2 {
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: normal;
}
#sitepolicy .mb50 { margin-bottom: 50px; }
#sitepolicy .mb { margin-bottom: 1rem; }
#sitepolicy .in_one { text-indent: 1rem; }
#sitepolicy .in_two { text-indent: 2rem; }

@media screen and (max-width:768px) {
    #sitepolicy { padding: 40px 0; }
    #sitepolicy h1 { width: 320px; margin: 0 auto 40px; }
}