@charset "UTF-8";
/* Scss Document */
/* color */
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:600&display=swap");
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 200;
    src: url("../../fonts/SourceHanSansJP-ExtraLight.woff2") format("woff2"), url("../../fonts/SourceHanSansJP-ExtraLight.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 300;
    src: url("../../fonts/SourceHanSansJP-Light.woff2") format("woff2"), url("../../fonts/SourceHanSansJP-Light.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    src: url("../../fonts/SourceHanSansJP-Regular.woff2") format("woff2"), url("../../fonts/SourceHanSansJP-Regular.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 500;
    src: url("../../fonts/SourceHanSansJP-Medium.woff2") format("woff2"), url("../../fonts/SourceHanSansJP-Medium.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 600;
    src: url("../../fonts/SourceHanSansJP-Bold.woff2") format("woff2"), url("../../fonts/SourceHanSansJP-Bold.woff") format("woff");
    font-display: swap;
}
html {
    font-size: calc(100vw / 3.84);
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, serif;
    font-size: .16rem;
    font-weight: 300;
    color: #181800;
    overflow-x: hidden;
    letter-spacing: 0;
    font-display: swap;
}
.pc {
    display: none;
}
@keyframes scroll {
    0% {
        top: -100%;
    }
    100% {
        top: 100%;
    }
}
@keyframes ship {
    0% {
        background-position: -670px 0;
    }
    100% {
        background-position: 0 0;
    }
}
.index {
    /* overflow-x: hidden; */
    display: block;
}
.index .main_box {
    width: 100%;
    height: 86.84895833333333vw;
    background: url("../images/index/main_box_sp.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}
.index .main_box .inner {
    position: absolute;
    left: .2rem;
    bottom: .2rem;
}
.index .main_box .inner h2 {
    margin-bottom: .15rem;
    font-size: 0.3rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 160%;
}
.index .main_box .inner p {
    font-size: 0.085rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 120%;
    font-family: 'Josefin Sans', sans-serif;
}
.index .search_box {
    margin: .5rem 0;
}
.index .search_box h3 {
    margin-bottom: .3rem;
    text-align: center;
    font-size: 0.1rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    line-height: 190%;
    color: #999999;
}
.index .search_box h3:after {
    content: " "attr(data-title);
    margin-top: .05rem;
    display: block;
    font-size: 0.225rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 120%;
    font-family: 'Josefin Sans', sans-serif;
    color: #333333;
}
.index .search_box .tab {
    width: auto;
    margin: 0 .2rem .3rem;
    border-bottom: 1px solid #CCCCCC;
    font-size: 0;
}
.index .search_box .tab li {
    width: 1.05rem;
    margin-bottom: -1px;
    display: inline-block;
    margin-right: .145rem;
    color: #333333;
    border: 1px solid transparent;
    border-bottom: none;
    transition: 0.5s ease;
}
.index .search_box .tab li span {
    display: block;
    padding: .1rem;
    margin-bottom: 1px;
    font-size: 0.12rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 120%;
    color: #333333;
    text-align: center;
    background: #F1F1F1;
    cursor: pointer;
    transition: 0.5s ease;
}
.index .search_box .tab li:nth-child(3n + 3) {
    margin-right: 0;
}
.index .search_box .tab li.active {
    border: 1px solid #CCCCCC;
    border-bottom: none;
}
.index .search_box .tab li.active span {
    margin: 0;
    padding: 0.1rem 0.1rem calc(.1rem + 1px);
    background: #fff;
}
.index .search_box .tab li.active:hover {
    opacity: 1;
}
.index .search_box .tab li:hover {
    opacity: 0.5;
}
.index .search_box .tab_body {
    width: auto;
    margin: 0 auto;
    position: relative;
    transition: height 0.5s ease;
}
.index .search_box .tab_body div {
    margin: 0 .2rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transform: scale(0.9, 0.9);
    transition: 0.5s ease;
    transition-property: opacity, transform;
}
.index .search_box .tab_body div:after {
    content: " ";
    height: 0;
    display: block;
    clear: both;
}
.index .search_box .tab_body div.active {
    position: static;
    opacity: 1;
    z-index: 1;
    transform: scale(1, 1);
}
.index .search_box .tab_body div input {
    width: 100%;
    margin-bottom: .1rem;
    padding: .1rem .1rem .1rem .3rem;
    display: block;
    border: 1px solid #CCCCCC;
    background: url("../images/index/ico_search_sp.png") no-repeat center left 0.1rem;
    background-size: .12rem auto;
}
.index .search_box .tab_body div select {
    width: 100%;
    margin: 0;
    padding: .1rem;
    display: block;
    border: 1px solid #CCCCCC;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.index .search_box .tab_body div .select_box{
	display: block;
	position:relative;
}
.index .search_box .tab_body div .select_box::before{
	content: " ";
	width:0;
	height:0;
	display: block;
	border:.04rem solid transparent;
	border-top:.05rem solid #000;
	position:absolute;
	top:calc(50% - .03rem);
	right:.1rem;
}
.index .search_box .tab_body div button {
    width: 1.71rem;
    display: block;
    margin: .05rem auto;
    padding: .1rem .15rem .1rem 0;
    font-size: 0.11rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 120%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #333333;
    position: relative;
}
.index .search_box .tab_body div button:after {
    content: " ";
    width: .15rem;
    height: .045rem;
    display: block;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    transform: skew(45deg);
    position: absolute;
    top: .12rem;
    right: 2px;
}
.index .pick_box {
    margin: 0 0 1.2rem;
}
.index .pick_box h3 {
    margin-bottom: .3rem;
    text-align: center;
    font-size: 0.1rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    line-height: 190%;
    color: #999999;
}
.index .pick_box h3:after {
    content: " "attr(data-title);
    display: block;
    margin-top: .05rem;
    font-size: 0.225rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 120%;
    font-family: 'Josefin Sans', sans-serif;
    color: #333333;
}
.index .pick_box ul {
    position: relative;
    position: relative;
}
.index .pick_box ul:before {
    content: " ";
    width: .42rem;
    height: 100%;
    display: block;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
}
.index .pick_box ul:after {
    content: " ";
    width: .42rem;
    height: 100%;
    display: block;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
}
.index .pick_box ul li {
    width: 3rem;
    padding: 0 0.11rem;
    transition: opacity 0.5s ease;
}
.index .pick_box ul li a {
    display: block;
}
.index .pick_box ul li a img {
    width: 3rem;
}
.index .pick_box ul .slick-dots {
    width: 100%;
    position: absolute;
    text-align: center;
    font-size: 0;
    right: 0;
    bottom: -.3rem;
    left: 0;
}
.index .pick_box ul .slick-dots li {
    width: auto;
    display: inline-block;
    padding: 0;
    margin: 0 .075rem;
}
.index .pick_box ul .slick-dots li button {
    width: .085rem;
    height: .085rem;
    padding: 0;
    display: block;
    background: #DDDDDD;
    border: none;
    border-radius: .1rem;
    text-indent: -9999px;
}
.index .pick_box ul .slick-dots li.slick-active button {
    background: #333333;
}
.index .pick_box ul .slick-arrow {
    width: .125rem;
    height: .125rem;
    display: block;
    padding: 0;
    text-indent: -9999px;
    border: none;
    border-top: 1px solid #333333;
    background: none;
    position: absolute;
    top: 45%;
    z-index: 55;
}
.index .pick_box ul .slick-arrow.slick-prev {
    border-left: 1px solid #333333;
    transform: rotate(-45deg);
    left: .27rem;
}
.index .pick_box ul .slick-arrow.slick-next {
    border-right: 1px solid #333333;
    transform: rotate(45deg);
    right: .27rem;
}
.index .philosophy_box {
    margin: .5rem 0;
    overflow: hidden;
}
.index .philosophy_box h3 {
    margin-bottom: .3rem;
    text-align: left;
    font-size: 0.1rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    line-height: 190%;
    color: #999999;
}
.index .philosophy_box h3:after {
    content: " "attr(data-title);
    display: block;
    margin-top: .05rem;
    font-size: 0.225rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 120%;
    font-family: 'Josefin Sans', sans-serif;
    color: #333333;
}
.index .philosophy_box .inner:after {
    content: " ";
    height: 0;
    display: block;
    clear: both;
}
.index .philosophy_box .philosophy_slider li {
    width: 100%;
    height: 3.44rem;
}
.index .philosophy_box .philosophy_slider .slick-arrow {
    width: .37rem;
    height: .37rem;
    display: block;
    text-indent: -9999px;
    border: none;
    background: #333333;
    position: absolute;
    bottom: 0;
    z-index: 55;
}
.index .philosophy_box .philosophy_slider .slick-arrow.slick-prev {
    right: .37rem;
}
.index .philosophy_box .philosophy_slider .slick-arrow.slick-prev:after {
    content: " ";
    width: .08rem;
    height: .08rem;
    display: block;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
    position: absolute;
    top: 50%;
    left: 55%;
}
.index .philosophy_box .philosophy_slider .slick-arrow.slick-next {
    right: 0;
}
.index .philosophy_box .philosophy_slider .slick-arrow.slick-next:after {
    content: " ";
    width: .08rem;
    height: .08rem;
    display: block;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: translate(50%, -50%) rotate(45deg);
    transform-origin: center;
    position: absolute;
    top: 50%;
    right: 55%;
}
.index .philosophy_box .text_box {
    background: #F1F1F1;
    margin: 0;
    padding: .5rem 0;
}
.index .philosophy_box .text_box:after {
    content: " ";
    height: 0;
    display: block;
    clear: both;
}
.index .philosophy_box .text_box .inner {
    margin: 0 .2rem;
}
.index .philosophy_box .text_box .inner p {
    margin-bottom: .25rem;
    font-size: 0.12rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 190%;
}
.index .philosophy_box .text_box .inner p strong {
    display: block;
    margin-bottom: .15rem;
    font-size: 0.2rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 160%;
}
.index .philosophy_box .text_box .inner a {
    width: 1.71rem;
    display: block;
    margin: .05rem 0;
    padding: .1rem .15rem .1rem 0;
    font-size: 0.11rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 120%;
    color: #333333;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #333333;
    position: relative;
}
.index .philosophy_box .text_box .inner a:after {
    content: " ";
    width: .15rem;
    height: .045rem;
    display: block;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    transform: skew(45deg);
    position: absolute;
    top: .12rem;
    right: 2px;
}
.index .total_box {
    margin: 1.35rem 0 .7rem;
    padding: 3.4rem 0 0;
    position: relative;
}
.index .total_box:after {
    content: " ";
    width: 2.86rem;
    height: .8rem;
    display: block;
    background: url("../images/index/text_total.png") no-repeat center;
    background-size: contain;
    position: absolute;
    top: -.6rem;
    right: .1rem;
    z-index: 5;
}
.index .total_box .inner {
    padding: .2rem .2rem;
}
.index .total_box .inner h3 {
    margin-bottom: .25rem;
    text-align: left;
    font-size: 0.1rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    line-height: 190%;
    color: #999999;
}
.index .total_box .inner h3:after {
    content: " "attr(data-title);
    display: block;
    margin-top: .05rem;
    font-size: 0.225rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 120%;
    font-family: 'Josefin Sans', sans-serif;
    color: #333333;
}
.index .total_box .inner p {
    margin-bottom: .3rem;
    font-size: 0.12rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 190%;
}
.index .total_box .inner p strong {
    display: block;
    margin-bottom: .15rem;
    font-size: 0.2rem;
    font-weight: 300;
    letter-spacing: 0.015em;
    line-height: 160%;
}
.index .total_box .inner a {
    width: 1.71rem;
    display: block;
    margin: .05rem 0;
    padding: .1rem .15rem .1rem 0;
    font-size: 0.11rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 120%;
    color: #333333;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #333333;
    position: relative;
	z-index: 2;
}
.index .total_box .inner a:after {
    content: " ";
    width: .15rem;
    height: .045rem;
    display: block;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    transform: skew(45deg);
    position: absolute;
    top: .12rem;
    right: 2px;
}
.index .total_box .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.index .total_box .img li {
    position: absolute;
}
.index .total_box .img li img {
    width: 100%;
    height: auto;
}
.index .total_box .img li span {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.index .total_box .img li:nth-child(1) {
    width: 1.205rem;
    height: .805rem;
    top: .25rem;
    left: 0;
}
.index .total_box .img li:nth-child(2) {
    width: 1rem;
    height: .665rem;
    top: 1rem;
    left: .35rem;
}
.index .total_box .img li:nth-child(3) {
    width: 1.5rem;
    height: 2rem;
    top: .85rem;
    left: .95rem;
    z-index: 2;
}
.index .total_box .img li:nth-child(4) {
    width: 1.605rem;
    height: 2.355rem;
    top: 0;
    right: 0;
    z-index: 3;
}
.index .total_box .img li:nth-child(5) {
    width: 1.2rem;
    height: 1.335rem;
    top: 1.9rem;
    left: 0;
}
.index .total_box .img li:nth-child(5) img {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.index .total_box .img li:nth-child(6) {
    width: 1.5rem;
    height: 1rem;
    top: 2.1rem;
    right: .31rem;
    z-index: 4;
}
.index .info_box {
    margin: 0.7rem 0.2rem;
}
.index .info_box h3 {
    margin-bottom: .25rem;
    text-align: left;
    font-size: 0.1rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    line-height: 190%;
    color: #999999;
}
.index .info_box h3:after {
    content: " "attr(data-title);
    display: block;
    margin-top: .05rem;
    font-size: 0.225rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 120%;
    font-family: 'Josefin Sans', sans-serif;
    color: #333333;
}
.index .info_box ul {
    width: auto;
    margin: 0 auto .35rem;
    font-size: 0;
}
.index .info_box ul li {
    width: 100%;
    vertical-align: top;
    margin-bottom: .2rem;
}
.index .info_box ul li:nth-child(3n + 3) {
    margin-bottom: 0;
}
.index .info_box ul li:after {
    content: " ";
    height: 0;
    display: block;
    clear: both;
}
.index .info_box ul li p {
    width: 1.2rem;
    float: left;
}
.index .info_box ul li dl {
    /*width:2.1rem;
          float:right;*/
}
.index .info_box ul li dl dt {
    margin-bottom: .1rem;
    font-size: 0;
}
.index .info_box ul li dl dt:after {
    content: " ";
    height: 0;
    display: block;
    clear: both;
}
.index .info_box ul li dl dt time {
    margin: .02rem .1rem .02rem 0;
    display: inline-block;
    font-size: 0.11rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 190%;
    color: #999999;
}
.index .info_box ul li dl dt span {
    width: .4rem;
    padding: .005rem 0 .015rem;
    display: inline-block;
    font-size: 0.1rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 120%;
    text-align: center;
    color: #fff;
    background: #333333;
    margin-left: .1rem;
}
.index .info_box ul li dl dd {
    font-size: 0.12rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 160%;
    color: #333333;
}
.index .info_box > a {
    width: 1.71rem;
    display: block;
    margin: .05rem 0;
    padding: .1rem .15rem .1rem 0;
    font-size: 0.11rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 120%;
    color: #333333;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #333333;
    position: relative;
}
.index .info_box > a:after {
    content: " ";
    width: .15rem;
    height: .045rem;
    display: block;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    transform: skew(45deg);
    position: absolute;
    top: .12rem;
    right: 2px;
}
.contact {
    margin: 0 .2rem;
}
.contact_p {
    margin-bottom: .7rem;
    font-size: .14rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 200%;
    text-align: center;
}
.contact_p span {
    color: #B76F6F;
}


.info {
margin: .3rem .2rem;
}
.info h4{
font-size: .15rem;
color: #181800;
font-weight: 500;
text-align: left;
margin-bottom: .15rem;
}
.info p{
font-size: .12rem;
letter-spacing: .1em;
line-height: 190%;
text-align: left;
margin-bottom: .1rem;
}
.info.bn{margin-bottom: 0;}
.info p strong{font-weight: 500;}

.info.bn p{
margin-top: .2rem;
font-weight: 500;
letter-spacing: .05em;
}
.info.bn .bn_area{
margin-bottom: .3rem;
}


.index_movie{
	margin:.5rem .2rem;
}
.index_movie .movie video{width:100%;}