@charset "utf-8";

/*===cariier===cariier===cariier===
...................................

-------------------------- SP ONLY

...................................
===cariier===cariier===cariier===*/

@media screen and (max-width:599px) {
    .pc_only,
    .tb_only,
    .pctb_only,
    .sp_none {
        display: none !important;
    }
    html {
        font-size: 2.1vw;
    }
    .inner {
        width: 82vw;
        margin-left: 9vw;
        margin-right: 9vw;
    }
    .txt_type_s {
        font-size: 91%;
    }
	.news_scroll {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
	}
    #front_page .news_li {
    width: 173vw;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: 9vw;
    margin-right: 9vw;

    }
    #front_page .news_li li {
        width: 50vw;
    }
    #front_page .news_li li + li {
        margin-left: 7vw;
    }
.tl_area {
	text-align: center;
	font-size: 150%;
	margin: 8vw 0 4vw 0;
}
h3.tl_area:first-child {
	margin-top: 0;
}

}

.bnrbox {
	width: 100%;
	margin: 0 auto 70px auto;
}


/*===cariier===cariier===cariier===
...................................

-------------------------- PC ONLY

...................................
===cariier===cariier===cariier===*/

@media screen and (min-width:1081px) {
    .tb_only,
    .sp_only,
    .pc_none,
    .pctb_none {
        display: none !important;
    }
    .inner,
    .inner_pc {
        width: 1040px;
        margin-left: auto;
        margin-right: auto;
    }
    a:hover {
        text-decoration: none;
        opacity: 0.7;
        transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
    }
    .sa {
        opacity: 0;
        transition: all 3s ease;
    }
    .sa.show {
        opacity: 1;
        transform: none;
    }
    .sa--lr {
        transform: translate(-200px, 0);
    }
    .sa--rl {
        transform: translate(200px, 0);
    }
    header .h_inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        transition: 0.3s;
    }
    .js_scrolled .h_inner {
        background: rgba(255, 255, 255, 0.9);
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        width: -webkit-calc(100% - 110px);
        width: calc(100% - 110px);
        padding-right: 110px;
        position: relative;
    }
    nav a {
        text-decoration: none;
    }

    nav .main_nav {
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    nav .main_nav li {
        margin-left: 38px;
    }
	.li_dot_large .btn a {
		width: 100%;
}

.bnrbox {
	width: 480px;
	margin: 0 auto 70px auto;
}


/*==========================================言語切替*/

    nav .lang_nav {
        position: absolute;
	top: 5px;
	right: 100px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
	border-radius: 100px;
	border: 1px solid #4a3730;
	line-height: 1;
	font-size: 76%;
	padding: 3px 6px;
	text-transform: uppercase;
    }

	#front_page nav .lang_nav {
	border: 1px solid #FFF;
}
	#front_page .js_scrolled nav .lang_nav, .js_scrolled nav .lang_nav {
	border: 1px solid #4a3730;
	}

    nav .sns_nav {
        position: absolute;
        top: 50%;
        right: 0;
        -webkit-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
        width: 80px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }
    nav .sns_nav li {
        font-size: 25px;
        line-height: 1;
    }
    nav .sns_nav li + li {
        margin-left: 15px;
    }

    #front_page header nav a {
        color: #fff;
        font-size: 96%;
    }

    #front_page .js_scrolled nav a {
        color: #4a3730;
    }

    #front_page .logo {
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
    }

    #front_page .js_scrolled .logo {
        opacity: 1;
        pointer-events: auto;
        transition: 0.7s;
    }

}
@media screen and (min-width:1081px) and ( max-width:1250px) {
    nav .main_nav li {
        margin-left: 24px;
    }
}

/*===cariier===cariier===cariier===
...................................

----------------------- TB/SP ONLY

...................................
===cariier===cariier===cariier===*/

@media screen and (max-width:1080px) {

    .sp_menu_wrap {
        width: 17vw;
        position: fixed;
        top: 0;
        height: 19vw;
        right: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        z-index: 100;
    }
    .sp_menu_wrap a {
        display: block;
        width: 8vw;
        height: 9vw;
        position: relative;
        text-decoration: none;
        color: #4a3730;
        margin-bottom: 1vw;
    }
    .sp_menu_wrap a:before,
    .sp_menu_wrap a:after,
    .sp_menu_wrap a span:before {
        background: #4a3730;
        width: 100%;
        height: 1.4vw;
        position: absolute;
        content: "";
        border-radius: 1vw;
        top: 0;
        left: 0;
        transition: 0.5s;
    }
    .sp_menu_wrap a:after {
        top: 2.8vw;
    }
    .sp_menu_wrap a span:before {
        top: 5.6vw;
    }
    .sp_menu_wrap a span:after {
        content: "menu";
        font-size: 2vw;
        width: 15vw;
        position: absolute;
        top: 8vw;
        right: -3.5vw;
        text-align: center;
        letter-spacing: 0.2em;
        font-weight: bold;
    }

    .js_scrolled:not(.js_menu_on) .sp_menu_wrap {
        background: rgba(255, 255, 255, 0.54);
    }

    header {
        position: absolute;
    }
    .js_menu_on {
        position: fixed;
        height: 100%;
    }

    .js_menu_on .sp_menu_wrap a span:after {
        content: 'close';
    }
    .js_menu_on .sp_menu_wrap a span:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 2.8vw;
    }
    .js_menu_on .sp_menu_wrap a:before {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 2.8vw;
    }
    .js_menu_on .sp_menu_wrap a:after {
        opacity: 0;
    }

    .js_menu_on .sp_menu_wrap a:before,
    .js_menu_on .sp_menu_wrap a:after,
    .js_menu_on .sp_menu_wrap a span:before {
        background: #fff;
    }

    .js_menu_on .sp_menu_wrap a span:after {
        color: #fff;
    }

    .js_menu_bg {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh;
        height: 100%;
        background: #4a3730;
        opacity: 0.95;
        z-index: 9;
    }
    .h_inner {
        position: relative;
    }
    .logo {
        position: relative;
        z-index: 10;
    }
    nav {
        position: relative;
        z-index: 10;
        display: none;
    }

    .js_menu_on nav {
        display: block;
    }
    .js_menu_on {
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        height: 100%;
    }

    .main_nav {
        margin-top: 6vw;
        margin-bottom: 9vw;
    }
    .main_nav li {
        text-align: center;
    }
    .main_nav li + li {
        margin-top: 3.9vw;
    }
    .main_nav a {
        color: #fff;
        text-decoration: none;
        font-size: 5.2vw;
    }
    header [class^="icon_"],
    header [class*=" icon_"] {
        color: #fff;
    }

	.lang_nav {
		text-align: center;
	
	}
	.lang_nav a {
	color: #fff;
        text-align: center;
	border: 1px solid #FFF;
	border-radius: 100px;
        margin-bottom: 9vw;
	desplay: inline-block;
	color: #fff;
        text-decoration: none;
	padding: 2px 30px;
	}


    .sns_nav {
        margin-top: 0;
        text-align: center;
    }
    .sns_nav li {
        display: inline-block;
    }
    .sns_nav li + li {
        margin-left: 9vw;
    }
    .sns_nav a {
        text-decoration: none;
        font-size: 10vw;
    }

    #front_page .logo {
        opacity: 0;
        pointer-events: none;
    }
    #front_page .js_menu_on .logo {
        opacity: 1;
        pointer-events: auto;
    }

    #front_page .sp_menu_wrap a:before,
    #front_page .sp_menu_wrap a:after,
    #front_page .sp_menu_wrap a span:before {
        background: #fff;
    }

    #front_page .sp_menu_wrap a span:after {
        color: #fff;
    }

    #front_page .js_scrolled:not(.js_menu_on) .sp_menu_wrap a:before,
    #front_page .js_scrolled:not(.js_menu_on) .sp_menu_wrap a:after,
    #front_page .js_scrolled:not(.js_menu_on) .sp_menu_wrap a span:before {
        background: #4a3730;
    }

    #front_page .js_scrolled:not(.js_menu_on) .sp_menu_wrap a span:after {
        color: #4a3730;
    }


	.li_dot_large .btn a {
		width: 100%;
}
}

/*===cariier===cariier===cariier===
...................................

-------------------------- TB ONLY

...................................
===cariier===cariier===cariier===*/

@media screen and (min-width:600px) and ( max-width:1080px) {
    .pc_only,
    .sp_only,
    .tb_none,
    .pctb_none {
        display: none !important;
    }
    .inner,
    .inner_pc {
        width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }
    .sp_menu_wrap {
        width: 90px;
        height: 100px;
    }
    .sp_menu_wrap a {
        width: 50px;
        height: 60px;
        margin-bottom: 0;
    }
    .sp_menu_wrap a:before,
    .sp_menu_wrap a:after,
    .sp_menu_wrap a span:before {
        height: 7px;
    }
    .sp_menu_wrap a:after {
        top: 15px;
    }
    .sp_menu_wrap a span:before {
        top: 30px;
    }
    .sp_menu_wrap a span:after {
        width: 100%;
        right: 0;
        font-size: 1.2rem;
        top: 40px;
    }
    .js_menu_on .sp_menu_wrap a span:before {
        top: 15px;
        width: 50px
    }
    .js_menu_on .sp_menu_wrap a:before {
        top: 15px;
        width: 50px;
    }
    #moviefrontarea:before {
        width: 90%;
}
    .f_contact .img {
        height: 62vw;
    }
    .halfphot.halfphot_l .inner {
        flex-direction: column;
        justify-content: center;
    }
    .halfphot.halfphot_l .inner:before {
        left: 0;
    }
	
    .halfphot.halfphot_l .img_block {
        max-width: 610px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .halfphot.halfphot_l .img_block + .txt_block {
        margin-top: 30px;
        width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
	.main_nav a {
    font-size: 2.3rem;
}

.main_nav li + li {
    margin-top: 10px;
}

.main_nav {
    margin-top: 90px;
}

.sns_nav {
    margin-top: 10px;
}

.sns_nav a {
    font-size: 3.3rem;
}

.sns_nav li + li {
    margin-left: 20px;
}

header .h_inner {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

header .logo {
    position: fixed;
    left: 45px;
    top: 20px;
}
	.js_menu_bg {
    position: fixed;
}
	nav {
    margin-bottom: 90px;
}
.f_main .inner {
    display: block;
    overflow: hidden;
}

.f_main .f_logobox {
    float: left;
}

.f_main .f_txtbox {
    float: right;
    width: 50%;
    margin-bottom: 30px;
letter-spacing: 0 !important;
}

.f_main .f_nav {
    float: left;
    width: 47%;
}

.f_main .f_nav ul {
    float: left;
}
}
@media screen and (min-width:750px) and ( max-width:1080px) {
    .f_contact .img {
        height: 54vw;
    }


}
@media screen and (max-width:599px) {
	.notice_block {
	padding: 6vw;
    margin-left: 9vw;
    margin-right: 9vw;
}
    .f_contact_en .img {
        height: 79vw;
    }
.f_main .f_nav {
letter-spacing: 0.1em;
}
	.f_main .f_logobox {
	    order: 1;
    width: 30vw;
	}
.f_main .f_nav {
	width: 60%;
}
table.handling th {
background: #f9f9f4;
}
.news_box .btn01 a {
	width: 100% !important;
	margin-bottom: 4vw;
}

.jcct {
	padding-top: 8vw;
}

}



