/* メニュー */

.takamoro_main {
font-family:  "Arial", 'Segoe UI', 'Hiragino Sans', 'Yu Gothic';
box-sizing: border-box;
position: fixed;
top: 0px;
max-height: 61px;
z-index: 999;
width: 100%;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
}

.to_mikigakki{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e0e0e0;
padding: 2px 5%;
font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

.to_mikigakki img{
display: block;
height: 13px;
}

.to_mikigakki a{
font-size: 12px;
line-height: 1em;
color: #333;
transition: 0.25s;
}

.to_mikigakki a:hover{
color: #8f8f8f;
}

.return_link{
position: relative;
padding-right: 15px; 
}

.return_link:after{
position: absolute;
font-size: 10px;
content:'\f101';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-left: 0.5em;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}

.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
}

.takamoro_main .logo {
width: 85px;
float: left;
display: block !important;
padding-top: 5px;
height: 35px;
}

.takamoro_main .logo img{
display: block;
width: 100%;
}

.takamoro_main nav {
float: right;
width: 60%;
}

.takamoro_main nav ul {
height: 35px;
display: flex;
flex-wrap: nowrap;
justify-content: end;
align-items: center;
}

.takamoro_main nav ul li {
display: inline-block;
margin-left: 35px;
line-height: 1em;
}

.takamoro_main nav ul a {
color: #333;
text-transform: uppercase;
font-size: 12px;
transition: 0.3s;
}

.takamoro_main nav ul a:hover{
color: #8f8f8f;
}

.open-nav {
max-height: 100vh !important;
}

.open-nav .mobile-toggle span:nth-of-type(1) {
top: 11px;
transform: translateY(6px) rotate(-45deg);
width: 21px;
}

.open-nav .mobile-toggle span:nth-of-type(2) {
opacity: 0
}

.open-nav .mobile-toggle span:nth-of-type(3){
top: 23px;
transform: translateY(-6px) rotate(45deg);
width: 21px;
}

.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 5%;
top: 0;
width: 21px;
height: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}

.mobile-toggle span {
width: 21px;
display: inline-block;
transition: all .4s;
position: absolute;
right: 0;
height: 2px;
border-radius: 2px;
background: #8f8f8f;
display: block;
}

.mobile-toggle span:nth-of-type(1) {
top: 10px; 
}

.mobile-toggle span:nth-of-type(2) {
top: 17px;
}

.mobile-toggle span:nth-of-type(3) {
top: 24px;
}

.takamoro_main .row {
width: 100%;
margin: 0 auto;
position: relative;
padding: 0 5%;
box-sizing: border-box;
}


/* 全体 */

#contentsarea{
width: 100%;
margin: 0 auto;
font-family:  "Arial", 'Segoe UI', 'Hiragino Sans', 'Yu Gothic';
font-size: 17px;
line-height: 2em;
letter-spacing: .5rem;
}

#contentsarea h3{
margin: 0 0 20px;
font-size: 50px;
line-height: 1.2em;
font-weight: 400;
display: inline-block;
}

#contentsarea h4{
width: 100%;
margin: 0;
font-size: 50px;
line-height: 1em;
font-weight: 400;
display: block;
letter-spacing: 1.5rem;
color: #fff;
text-shadow: #333 1px 0 30px;
word-break: break-word;
}

#contentsarea h4 span{
display: block;
width: 100%;
font-size: 20px;
line-height: 1.8em;
margin: 0.5em 0 0;
text-indent: -1.5em;
padding-left: 1.5em;
}

#contentsarea h5{
width: 100%;
margin: 0 0 20px;
font-size: 40px;
line-height: 1.5em;
font-weight: 400;
display: block;
letter-spacing: 1rem;
}

#contentsarea h5 span{
display: block;
font-size: 28px;
line-height: 2em;
}

#contentsarea .main_title{
width: 100%;
margin: 0 0 50px;
}

#contentsarea .main_title img{
display: block;
width: 300px;
max-width: 70%;
margin: 0;
}

#contentsarea .main_caption{
width: 100%;
margin: 0 auto;
}

#contentsarea .main_caption p{
margin: 20px 0 0;
text-align: justify;
word-break: break-all;
}


/* パララックス */

#contentsarea .background_area {
position: relative;
width: 100%;
height: 100vh;
}

#contentsarea .background_inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: inset(0);
}

#contentsarea .background_image {
position: fixed;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}

#contentsarea .title_logo_area{
position: absolute;
width: 75%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#contentsarea .title_logo_area img{
display: block;
width: 100%;
margin: 0;
}

#contentsarea .title_text_area{
position: absolute;
width: 93%;
top: 50%;
left: 7%;
transform: translateY(-50%);
}

#contentsarea .background_image.bg_image-top {
background-image: url('../../../features/umeda/moro/moro_guitars-image.jpg');
}

#contentsarea .background_image.bg_image-1{
background-image: url('../../../features/umeda/moro/guitar-image01.jpg');
}

#contentsarea .background_image.bg_image-2{
background-image: url('../../../features/umeda/moro/guitar-image02.jpg');
}

#contentsarea .background_image.bg_image-3{
background-image: url('../../../features/umeda/moro/guitar-image03.jpg');
}

#contentsarea .background_image.bg_image-4{
background-image: url('../../../features/umeda/moro/guitar-image04.jpg');
}

#contentsarea .background_image.bg_image-5{
background-image: url('../../../features/umeda/moro/taka_moro-image-01.jpg');
}


/* メイン */

#contentsarea .scroll_area{
width: 100%;
box-sizing: border-box;
padding: 120px 8%;
color: #ebe7e3;
background-color: #333;
}

#contentsarea .specification{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: 0 auto;
}

#contentsarea .linkbtn{
margin: 50px auto 0;
}

#contentsarea .linkbtn a{
position: relative;
display: inline-block;
width: 100%;
max-width: 400px;
margin: 0;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
overflow: hidden;
padding: 10px;
color: #ebe7e3;
background: #333;
border: 1px solid #ebe7e3;
}

#contentsarea .linkbtn a span {
position: relative;
}

#contentsarea .linkbtn a:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
transition: all .5s ease-in-out;
transform: translateX(-100%);
background: #ebe7e3;
}

#contentsarea .linkbtn a:after{
content: "";
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 40px;
width: 8px;
height: 8px;
border-top: 2px solid #ebe7e3;
border-right: 2px solid #ebe7e3;
transform: rotate(45deg);
}

#contentsarea .linkbtn a:hover {
opacity: 1;
color: #333;
}

#contentsarea .linkbtn a:hover:before {
transform: translateX(0%);
}

#contentsarea .linkbtn a:hover:after{
border-top: 2px solid #333;
border-right: 2px solid #333;
}

#contentsarea .specification .specs{
width: 55%;
order: 1;
}

#contentsarea .specification .specs p{
width: 100%;
margin: 1em 0 0;
}

#contentsarea .specification .photo{
width: 45%;
box-sizing: border-box;
padding-left: 50px;
order: 2;
}

#contentsarea .specification .photo img{
display: block;
width: 100%;
margin: 0;
position: sticky;
top: 100px;
}

#contentsarea .about_caption{
width: 100%;
text-align: justify;
}

#contentsarea .about_caption .photo{
width: 48%;
float: right;
box-sizing: border-box;
padding: 8px 0 10px 30px;
}

#contentsarea .about_caption .photo img{
display: block;
width: 100%;
margin: 0;
}

#contentsarea .about_caption .about_text{
margin: 20px 0 0;
}


/* フッター */

#store_footer{
background: #333;
color: #fff;
border-top: 4px double #ebe7e3;
}

#store_footer .storelogo_black{
display: none;
}

#store_footer .store_info .address a{
background: #fff;
color: #000;
}

#store_footer .store_info .mail a,
#store_footer .store_info .store_sns a{
color: #fff;
}


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

.takamoro_main {
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}

.takamoro_main::-webkit-scrollbar{
display:none;
}

.takamoro_main nav {
width: 100%;
}

.takamoro_main nav ul {
display: block;
height: auto;
padding: 15px 0;
float: left;
text-align: center;
width: 100%;
}

.takamoro_main nav ul li {
width: 100%;
padding: 15px 0;
margin: 0;
}

.takamoro_main .mobile-toggle {
display: block;
}

.takamoro_main .row {
width: 100%;
}

#contentsarea{
font-size: 15px;
text-align: left;
}

#contentsarea h3{
margin: 0 0 20px;
font-size: 40px;
}

#contentsarea h4{
font-size: 30px;
text-shadow: #bbb 1px 0 30px;
letter-spacing: 1.2rem;
}

#contentsarea h4 span{
font-size: 18px;
}

#contentsarea h5{
margin: 0 0 20px;
font-size: 28px;
letter-spacing: 0.7rem;
}

#contentsarea h5 span{
font-size: 12px;
}

#contentsarea .main_title{
margin: 0 0 50px;
}

#contentsarea .main_title img{
width: 100%;
max-width: 350px;
}

#contentsarea .title_logo_area{
width: 90%;
max-width: 500px;
}

#contentsarea .scroll_area{
padding: 80px 8%;
}

#contentsarea .linkbtn{
margin: 50px auto 20px;
text-align: center;
}

#contentsarea .linkbtn a{
padding: 10px 50px;
font-size: 16px;
}

#contentsarea .linkbtn a:after{
right: 25px;
width: 6px;
height: 6px;
}

#contentsarea .specification .specs{
margin: 30px 0 0;
width: 100%;
order: 2;
}

#contentsarea .specification .specs p{
width: 100%;
}

#contentsarea .specification .photo{
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 0;
order: 1;
}

#contentsarea .about_caption .photo{
width: 100%;
max-width: 500px;
margin: 0 auto;
float: none;
padding: 0 0 30px;
}

#contentsarea .about_caption .about_text{
margin: 20px 0 0;
}
}