#content_area{
width: 100%;
margin: 0 auto;
color: #777;
font-size: 18px;
line-height: 1.5em;
font-family: "Hiragino Maru Gothic ProN W4","Yu Gothic","YuGothic","Hiragino Sans","Hiragino Kaku Gothic ProN", sans-serif;
letter-spacing: 0.2em;
text-align: justify;
}

#content_area img{
display: block;
width: 100%;
margin: 0;
padding: 0;
}

#content_area .main_visual{
width: 100%;
height: auto;
max-height: calc(100vh - 60px);
margin: 0 auto;
aspect-ratio: 16 / 9;
background: url(../../../features/allstores/vocalmist/vocalmist_bgimage.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: left center;
position: relative;
}

#content_area .main_visual .main_title{
position: absolute;
width: 45%;
max-width: 550px;
margin: 0;
text-align: center;
top: 50%;
right: 10%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}

#content_area .main_visual .main_title .header_text{
width: 100%;
margin: 5% auto 0;
font-size: min(2.5vw,26px);
line-height: 1.5em;
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', MS P明朝;
color: #fff;
}

#content_area .outset_content{
width: 100%;
margin: 0 auto;
padding: 80px 8% 0;
}

#content_area .outset_content h1{
font-size: 50px;
line-height: 1em;
padding: 0 0 20px 1.2em;
border-bottom: 3px solid #4ddb94;
position: relative;
}

#content_area .outset_content h1:before{
display: inline-block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
background: url(../../../features/allstores/vocalmist/VocalMist_Logo_ss.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

#content_area .outset_content h1 span{
display: inline-block;
font-size: 20px;
line-height: 1.5em;
margin: 0 0 0 1em;
}

#content_area .outset_content h2{
font-size: 30px;
line-height: 1.3em;
margin: 40px auto 0;
color: #4ddb94;
}

#content_area .outset_content p{
width: 100%;
margin: 30px auto 0;
}

#content_area .outset_content p.notes{
font-size: 0.8em;
line-height: 1.5em;
text-indent: -0.5em;
padding-left: 0.5em;
}

#content_area .outset_content p.feature{
font-size: 20px;
padding: 0 0 0 1.5em;
position: relative;
color: #4ddb94;
}

#content_area .outset_content p.feature:before{
display: inline-block;
content: '';
position: absolute;
top: 50%;
left: 0;
width: 1em;
height: 1em;
background: url(../../../features/allstores/vocalmist/VocalMist_Logo_ss.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}

#content_area .outset_content .image_photo{
width: 100%;
margin: 40px auto 0;
}

#content_area .main_content{
width: 100%;
margin: 0 auto;
padding: 80px 8%;
border-bottom: 1px solid #bbb;
}

#content_area .main_content .menu_btn{
width: 100%;
margin: 0 auto;
color: #fff;
display: flex;
justify-content: space-between;
}

#content_area .main_content .menu_btn li{
width: 24.5%;
display: flex;
align-items: flex-end;
}

#content_area .main_content .menu_btn li a{
display: block;
width: 100%;
text-align: center;
border-top: 1px solid #013356;
border-left: 1px solid #013356;
border-right: 1px solid #013356;
border-radius: 5px 5px 0 0;
padding: 0.5em;
color: #013356;
font-size: min(1.6vw,18px);
line-height: 1em;
letter-spacing: 0.2em;
}

#content_area .main_content .menu_btn li a span{
display: block;
font-size: min(1.2vw,14px);
line-height: 1em;
margin: 0.5em 0 0;
}

#content_area .main_content .menu_btn li a:hover{
color: #fff;
background: #013356;
}

#content_area .main_content .menu_btn li.active_btn a{
color: #fff;
background: #013356;
padding: 1em 0.5em;
position: relative;
}

#content_area .main_content .menu_btn li.active_btn a:before{
content: "";
position: absolute;
left: 50%;
width: 1em;
height: 1em;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
bottom: -0.5em;
background: #013356;
}

#content_area .main_content .tab_content{
width: 100%;
margin: 0 auto;
}

#content_area .main_content .tab_content .area{
display: none;
opacity: 0;
}

#content_area .main_content .tab_content .area.is-active{
display: block;
animation-name: displayAnime;
animation-duration: 2s;
animation-fill-mode: forwards;
}

@keyframes displayAnime{
from {
opacity: 0;
}
to {
opacity: 1;
}
}

#content_area .main_content .tab_content .tab_container{
width: 100%;
padding: 40px 0;
background: #fafafa;
border-radius: 0 0 5px 5px;
}

#content_area .main_content .tab_content .tab_container h3{
position: relative;
margin: 0 0 50px;
font-size: 30px;
line-height: 1em;
text-align: center;
}

#content_area .main_content .tab_content .tab_container h3:before {
content: '';
position: absolute;
left: 50%;
bottom: -25px;
display: inline-block;
width: 60px;
height: 2px;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%);
background: #4ddb94;
}

#content_area .main_content .tab_content .tab_container h3 span{ 
font-size: 18px;
line-height: 1.5em;
}

#content_area .main_content .tab_content .tab_container h4{
font-size: 18px;
line-height: 1.5em;
margin: 0 0 40px;
text-align: center;
}

#content_area .main_content .tab_content .tab_container .tab_image{
width: 100%;
margin: 0 auto;
}

#content_area .main_content .tab_content .tab_container p{
margin: 40px auto 0;
padding: 0 5%;
}

#content_area .main_content .tab_content .tab_container p.notes{ 
font-size: 14px;
line-height: 1.5em;
}

#content_area .main_content .tab_content .tab_container .float_text{
overflow: hidden;
clear: both;
}

#content_area .main_content .tab_content .tab_container span.inner_image{
float: right;
display: inline-block;
width: 30%;
max-width: 250px;
aspect-ratio: 4 / 5;
height: auto; 
margin: 40px 5% 0;
background: url(../../../features/allstores/vocalmist/vocalmist_image6.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

#content_area .main_content .tab_content .tab_container .tab_feature{
display: flex;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
margin: 40px auto 0;
padding: 0 10%;
text-align: center;
color: #fff;
}

#content_area .main_content .tab_content .tab_container .tab_feature li{
width: 30%;
aspect-ratio: 1 / 1;
height: auto;
color: #4ddb94;
border: 3px solid #4ddb94;
margin: 20px 0 0;
text-align: center;
position: relative;
border-radius: 50%;
background: url(../../../features/allstores/vocalmist/VocalMist_Logo_trans.png);
background-repeat: no-repeat;
background-size: 35%;
background-position: center;
}

#content_area .main_content .tab_content .tab_container .tab_feature li span{
position: absolute;
display: block;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
text-align:center;
font-size: 1.8vw;
line-height: 1.5em;
}

#content_area .main_content .tab_content .tab_container .products_search{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 40px auto 0;
padding: 0 5%;
}

#content_area .main_content .tab_content .tab_container .products_search li{
width: 47.5%;
margin: 0;
}

#content_area .main_content .tab_content .tab_container .products_search li:nth-child(n+3){
margin: 5% 0 0;
}

#content_area .main_content .tab_content .tab_container .products_search li a{
width: 100%;
color: #4ddb94;
}

#content_area .main_content .tab_content .tab_container .products_search li a{
width: 100%;
transition: all 0.3s;
}

#content_area .main_content .tab_content .tab_container .products_search li a:hover{
opacity: 0.6;
}

#content_area .main_content .tab_content .tab_container .products_search li .item_name{
text-align: center;
margin: 20px auto 0;
font-size: 20px;
line-height: 1em;
position: relative;
color: #4ddb94;
}

#content_area .main_content .tab_content .tab_container .products_search li .item_name span{
display: block;
margin: 1em 0 0;
font-size: 14px;
line-height: 1.5em;
color: #777;
}

#content_area .main_content .tab_content .tab_pager .tab_pagination{
width: 100%;
display: flex;
justify-content: center;
text-align: center;
margin: 20px 0 0;
}

#content_area .main_content .tab_content .tab_pager .tab_pagination li{
display: inline-block;
margin: 0 2px;
padding: 0;
background: #013356;
width: 50px;
height: 50px;
text-align: center;
position: relative;
border-radius: 50px;
border: 2px solid #013356;
}

#content_area .main_content .tab_content .tab_pager .tab_pagination li a{
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: table;
color: #fff;
text-decoration: none;
transition: all 0.3s;
}

#content_area .main_content .tab_content .tab_pager .tab_pagination li a span{
font-size: 14px;
line-height: 1em;
display: table-cell;
vertical-align: middle;
}

#content_area .main_content .tab_content .tab_pager .tab_pagination li a:hover,
#content_area .main_content .tab_content .tab_pager .tab_pagination li a.active{
color: #013356;
background: #fff;
border-radius: 50px;
}


@media only screen and (max-width: 800px) {

#content_area .main_visual{
max-height: calc(100vh - 50px);
}
}


@media only screen and (max-width: 750px) {

#content_area {
font-size: 16px;
}

#content_area .outset_content h1{
font-size: 40px;
}

content_area .outset_content h1 span{
font-size: 18px;
}

#content_area .outset_content h2{
font-size: 24px;
}

#content_area .outset_content p.feature{
font-size: 18px;
}

#content_area .main_content .menu_btn li a{
padding: 1em 0.5em;
}

#content_area .main_content .menu_btn li.active_btn a{
padding: 1.5em 0.5em;
}

#content_area .main_content .menu_btn li.active_btn a:before{
width: 1.2em;
height: 1.2em;
bottom: -0.6em;
}

#content_area .main_content .tab_content .tab_container h3{
font-size: 24px;
}

#content_area .main_content .tab_content .tab_container h4{
font-size: 16px;
}

#content_area .main_content .tab_content .tab_container .products_search li .item_name{
font-size: 16px;
line-height: 1.2em;
}

#content_area .main_content .tab_content .tab_container .products_search li .item_name span{
font-size: 12px;
}
}


@media only screen and (max-width: 640px) {

#content_area .outset_content h1 span{
display: block;
margin: 0.5em 0 0 0;
}
}


@media only screen and (max-width: 450px) {

#content_area .main_visual{
aspect-ratio: 1 / 1;
background-position: 25% center;
}

#content_area .main_visual .main_title{
right: 6%;
}

#content_area .outset_content{
padding: 60px 8% 0;
}

#content_area .outset_content h2{
font-size: 20px;
}

#content_area .main_content{
padding: 60px 8%;
}

#content_area .main_content .menu_btn li a{
font-size: min(2.2vw, 14px);
letter-spacing: 0.1em;
padding: 1.5em 0.5em;
}

#content_area .main_content .menu_btn li a span{
font-size: min(1.8vw, 12px);
}

#content_area .main_content .menu_btn li.active_btn a{
padding: 2em 0.5em;
}

#content_area .main_content .tab_content .tab_container .tab_feature{
margin: 20px auto 0;
}

#content_area .main_content .tab_content .tab_container .tab_feature li{
width: 46%;
border: 2px solid #4ddb94;
}

#content_area .main_content .tab_content .tab_container .tab_feature li span{
font-size: 2.5vw;
}

#content_area .main_content .tab_content .tab_container span.inner_image {
width: 40%;
}

#content_area .main_content .tab_content .tab_pager .tab_pagination li{
width: 40px;
height: 40px;
}

#content_area .main_content .tab_content .tab_pager .tab_pagination li a span{
font-size: 13px;
}

#content_area .main_content .tab_content .tab_container .products_search li .item_name{
font-size: 14px;
padding: 0 1em;
}

#content_area .main_content .tab_content .tab_container .products_search li .item_name span{
font-size: 10px;
}
}