@charset "utf-8";

.story{
	margin: 1vw auto 0;
}
@media screen and (min-width: 769px) {
    .story {
    width: var(--common-in-width);
    max-width: 1600px;
    }
}
.story a{
	text-decoration: none;
}
.innerPage_contWrap{
    transition: opacity .4s ease;
}

/*-----------------------------------------------
 * navi
-------------------------------------------------*/
.storysubNav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.storysubNav li{
	display: flex;
    width: calc(100% / 7);
    padding: 0 2.5%;
    align-items: center;
	font-size: var(--fontsize-20);
    position: relative;
}
@media screen and (max-width: 768px) {
    .storysubNav li {
		margin-top: 1vw;
		font-size: var(--fontsize-16);
        width: calc(100% / 4);
        margin: 0;
        padding: 0 5%;
    }
}
.storysubNav li:after {
    content: "";
    background-color: rgb(var(--color-orange));
    display: block;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-position: center;
    mask-position: center;
    width: 10px;
    height: 20px;
    transition: transform .3s ease;
	-webkit-mask-image: url(../img/common/parts/arrow_r.svg);
	margin-left: 20px;
    position: absolute;
    right: 15.5%;
}
@media screen and (max-width:768px){
    .storysubNav li:after {
        margin-left: 0.5em;
        width: 2vw;
        height: 4vw;
    }
}

/*-----------------------------------------------
 * CONTENTS
-------------------------------------------------*/
#op{
	padding-top: 40px;
}
@media screen and (max-width: 768px) {
    #ed{
		padding-bottom: 60px;
	}
}
.story h2{
    font-size: min(2vw,24px);	
	font-weight: 700;
    padding: min(2.5vw,30px) 0;
	text-align: center;
}
@media screen and (max-width: 768px) {
    .story h2 {
        font-size: 3.73333vw;
		border-bottom:none;
    }
}
.story h2 .mTit{
	font-size: min(2.5vw,30px);	
}
@media screen and (max-width: 768px) {
    .story h2 .mTit {
        font-size: 4.73333vw;
    }
}
.story h2 .mSingle{
	background: rgb(var(--color-orange));
	display: inline-block;
	color: #fff;
    text-align: center;
    font-size: min(1.5vw,13px);
    padding: 0px 8px;
    margin-right: 16px;
}
@media screen and (max-width: 768px) {
    .story h2 .mSingle {
        font-size: 2.53333vw;
    }
}

.stories {
    padding-top:50px;
    width:100%;
}
@media screen and (max-width:768px){
    .stories {
        padding-top:8vw;
    }
}
.story_title {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.story_title h3 {
    font-size:24px;
    font-weight:700;
    width:100%;
    text-align: center;
    line-height:1.4;
    margin-bottom: 50px;
}
@media screen and (max-width:768px){
    .story_title h3 {
        font-size:4vw;
        margin-bottom: 7vw;
    }
}
.story_title h3 .en {
    font-size:18px;
    opacity:0.75;
    width:100%;
    text-align: center;
}
@media screen and (max-width:768px){
    .story_title h3 .en {
        font-size:3.2vw;
    }
}
.stories {
    max-width: 1200px;
    margin:0 auto;
}
.story_Img {
    width:100%;
    margin-bottom:10px;
}
@media screen and (max-width:768px){
    .story_Img {
        margin-bottom:2vw;
    }
}
.storyimg img {
    width:100%;
    height:auto;
}
.story_staff {
    padding-top:30px;
}
@media screen and (max-width:768px){
    .story_staff {
        padding-top:1.8em;
    }
    .storyWrap {
        padding-bottom:13vw;
    }
}
.story_staff h4 {
    font-size:14px;
    opacity:0.75;
}

/* story_subImg */
.story_subImg {
    display: flex;
    width:100%;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
@media screen and (max-width:768px){
    .story_subImg {
        margin-bottom: 5vw;
    }
}
.story_subImg li {
    width:calc(100% / 6);
}
.story_subImg2 li {
    width:calc(100% / 5);
}
.story_subImg li img {
    width:100%;
    height:auto;
    display: block;
}
.story_subImg a {
    display: block;
    position: relative;
}
.story_subImg a:before {
    content:'';
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgb(var(--color-orange));
    opacity:0;
    z-index:500;
    transition: all 0.3s ease;
}
.story_subImg a.is-active:before {
    opacity:0.4;
}
@media screen and (min-width:769px){
    .story_subImg a:hover:before {
        opacity:0.4;
    }
}
.story_subImg a:after {
    content:'';
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    border:4px solid rgb(var(--color-orange));
    opacity:0;
    transition: all 0.3s ease
}
.story_subImg a.is-active:after {
    opacity:1;
}
@media screen and (max-width:768px){
    .story_subImg a:after {
        border:2px solid rgb(var(--color-orange));
    }
}

/*-----------------------------------------------
 * TAB
-------------------------------------------------*/
.tabList{
	display: flex;
	justify-content: center;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}
.tabList li{
    margin: 0 10px;
}
.tab-content:not(.is-active){
    display: none;
}
/**
 * changeBtn
 */
.changeBtn > li {
	width: 300px;
    height: 50px;
	position: relative;
}
@media screen and (max-width:767px){
	.changeBtn {
		width: 100%;
		justify-content: center;
	}
	.changeBtn > li {
		width: 40vw;
		height: 8vw;
	}
}

/* border */
.changeBtn > li:before {
	content: "";
	border: 1px solid rgb(var(--color-gold));
	box-sizing: border-box;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	position: absolute;
	margin: auto;
	bottom: 2px;
	right: 0;
	left: 0;
	pointer-events: none;
	z-index: 2;
}

/* a */
.changeBtn > li > button {
	background-color: rgb(var(--color-brown));
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: background-color .3s ease;
	z-index: 1;
}
.changeBtn > li > button:hover,
.changeBtn > li > button.is-active {
	background-color: rgb(var(--color-orange));
}

/* dot deco */
.changeBtn > li > button:before,
.changeBtn > li > button:after {
	content: "";
	background-color: rgb(var(--color-gold));
	width: 3px;
	height: 3px;
	position: absolute;
	bottom: 6px;
	transform: rotate(45deg);
}
@media screen and (max-width:767px){
	.changeBtn > li > button:before,
	.changeBtn > li > button:after {
		width: calc(100% - 12px);
		height: calc(100% - 12px);
	}
	.changeBtn > li > button:before,
	.changeBtn > li > button:after {
		width: 1px;
		height: 1px;
	}
}
.changeBtn > li > button:before {
	left: 6px;
}
.changeBtn > li > button:after {
	right: 6px;
}
/* text */
.changeBtn__text {
	color: #fff;
	font-size: var(--fontsize-18);
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	white-space: nowrap;
    margin-top: 5px;
}
@media screen and (max-width:767px){
	.changeBtn__text {
		font-size: 3vw;
        margin-top: 1vw;
	}
}
/* line */
.changeBtn__line {
	background-color: rgb(var(--color-gold));
	width: 50%;
	height: 1px;
	margin: auto;
	position: absolute;
	top: 16%;
	right: 0;
	left: 0;
}

/* deco */
.changeBtn__line:before,
.changeBtn__line:after {
	content: "";
	background-color: rgb(var(--color-gold));
	width: 3px;
	height: 3px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	transform: rotate(45deg);
}
.changeBtn__line:before {
	left: 0;
}
.changeBtn__line:after {
	right: 0;
}

/* activ */
.story__activ{
    color: rgb(var(--color-orange));
}