@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&family=Zen+Kaku+Gothic+New&display=swap');


/* 全体 */

#contentsarea{
width: 100%;
margin: 0 auto;
font-family: "Montserrat", "Zen Kaku Gothic New", sans-serif;
font-size: 17px;
line-height: 1.8;
letter-spacing: 0.2em;
color: #333;
}

#contentsarea a.inline_link{
color: #03a196;
transition: 0.3s ease-in-out;
}

#contentsarea a.inline_link:hover{
color: #03857c;
text-decoration: underline;
}


/* トップスライダー */

#contentsarea .top_slider.swiper-container{
height: calc(100vh - 60px);
}

#contentsarea .top_slider.swiper-container .swiper-slide{
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
background-size: cover;
background-position: center left;
position: relative;
}

#contentsarea .top_slider.swiper-container .swiper-slide:after{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
} 

#contentsarea .top_slider.swiper-container .swiper-slide div.model_link{
width: 500px;
position: absolute;
top: 50%;
right: 0;
padding: 0 10% 0 0;
transform: translateY(-50%);
color: #fff;
text-align: right;
z-index: 10;
}

#contentsarea .top_slider.swiper-container .swiper-slide .brandlogo{
width: 60%;
margin: 0 0 25px auto;
aspect-ratio: 200 / 73;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url('/features/allstores/thalia/thalia_logo-l.png');
}

#contentsarea .top_slider.swiper-container .swiper-slide h3{
font-size: 35px;
line-height: 1.3;
}

#contentsarea .top_slider.swiper-container .swiper-slide a.dummy_btn{
display: inline-block;
margin: 1em 0 0;
padding: 0.5em 1.2em 0.5em 0.6em;
border-radius: 5px;
color: #fff;
border: 1px solid #fff;
transition: 0.3s ease-in-out;
position: relative;
}

#contentsarea .top_slider.swiper-container .swiper-slide a.dummy_btn:after{
content: "";
width: 0.3em;
height: 0.3em;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
transform: rotate(135deg);
position: absolute;
right: 0.6em;
top: calc(50% - 0.2em);
transition: 0.3s ease-in-out;
}

#contentsarea .top_slider.swiper-container .swiper-slide a.dummy_btn:hover{
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #03857c;
}

#contentsarea .top_slider.swiper-container .swiper-slide a.dummy_btn:hover:after{
border-top: solid 1px #03857c;
border-right: solid 1px #03857c;
}

#contentsarea .top_slider.swiper-container .swiper-pagination-bullet{
opacity: 0.8;
margin: 0 8px;
width: 10px;
height: 10px;
background: #fff;
}

#contentsarea .top_slider.swiper-container .swiper-pagination-bullet-active{
background: #03a196;
}


/* グローバルメニュー */

#contentsarea #submenu{
width: 100%;
z-index: 999;
}

#contentsarea #submenu.top_fixed{
left: 0;
position: fixed;
top: 0;
}

#contentsarea #submenu .inner{
padding-bottom: 0;
padding-top: 0;
margin: 0 auto;
max-width: 100%;
padding: 0 5%;
background: #fff;
border-bottom: 1px solid #dadada;
}

#contentsarea #submenu .submenu_list{
max-width: calc(1194px - 10%);
display: flex;
list-style: none;
margin: 0 auto;
padding: 0;
position: relative;
}

#contentsarea #submenu .submenu_list .totop_icon{
position: absolute;
width: 30px;
top: 50%;
left: -40px;
transform: translateY(-50%);
}

#contentsarea #submenu .submenu_list .totop_icon a{
display: block;
width: 100%;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url('/features/allstores/thalia/thalia_logo-s.png');
}


#contentsarea #submenu .submenu_list li{
border-right: 1px solid #dadada;
width: 15%;
height: 60px;
display: flex;
align-items: center;
padding: 0 0.5em;
}

#contentsarea #submenu .submenu_list li:first-child{
border-left: 1px solid #dadada;
}

#contentsarea #submenu .submenu_list li a{
width: 100%;
font-size: 12px;
display: block;
line-height: 1.5;
text-align: center;
text-decoration: none;
color: #03a196;
transition: 0.3s ease-in-out;
}

#contentsarea #submenu .submenu_list li a:hover{
color: #03857c;
}


/* 楽器店大賞 */

#contentsarea #award{
margin: 0 auto;
padding: 25px 5%;
border-bottom: 1px solid #eee;
text-align: center;
}

#contentsarea #award .grandprize_logo{
display: block;
margin: 0 auto;
width: 15em;
max-width: 1000px;
aspect-ratio: 1000 / 181;
background: url(/features/allstores/thalia/grandprize_logo.png) center / contain no-repeat;

}

#contentsarea #award .grandprize_text{
display: inline-block;
width: auto;
margin: 0.5em auto 0;
position: relative;
padding-right: 2.5em;
font-size: 18px;
}

#contentsarea #award .grandprize_text:after{
content:"";
position: absolute;
width: 2.5em;
height: auto;
aspect-ratio: 500 / 367;
top: 50%;
right: 0;
transform: translateY(-50%);
background: url(/features/allstores/thalia/award.png) center / contain no-repeat;
}


/* 冒頭 */

#contentsarea #beginning{
max-width: 1200px;
margin: 0 auto;
padding: 100px 5% 0;
}

#contentsarea #beginning h1{
font-size: 30px;
line-height: 1.5;
}

#contentsarea #beginning p{
margin-top: 1em;
}

#contentsarea #beginning ul{
display: flex;
flex-wrap: wrap;
align-items: center;
}

#contentsarea #beginning .beginning_image{
width: 40%;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url('/features/allstores/thalia/thalia_image.jpg');
}

#contentsarea #beginning .beginning_text{
width: 60%;
}


/* メイン */

#contentsarea .maincontents{
margin: 0 auto;
width: 100%;
max-width: 1200px;
padding: 0 5% 100px;
border-bottom: 1px solid #bbb;
}

#contentsarea .maincontents h4{
font-size: 20px;
background: #03a196;
color: #fff;
padding: 0.5em 25px;
line-height: 1.0;
margin: 0 auto 25px;
}

#contentsarea .maincontents h5{
position: relative;
font-size: 20px;
width: calc(100% - 50px);
margin: 50px 25px 25px;
padding: 0 25px;
}

#contentsarea .maincontents h5:after{
position: absolute;
content: "";
width: 100%;
height: 1.6em;
bottom: 0;
left: 0;
border-left: 10px solid #03a196;
border-bottom: 1px solid #03a196;
}

#contentsarea .maincontents span.notes{
font-size: 14px;
display: inline-block;
line-height: 1.8;
text-indent: -0.7em;
padding-left: 0.7em;
margin: 1em auto 0;
}

#contentsarea .maincontents > div{
padding: 100px 0 0;
}

#contentsarea .maincontents > div:last-child{
border-bottom: none;
}


/* 製品 */

#contentsarea .maincontents .product_text{
padding: 0 25px;
}

#contentsarea .maincontents .product_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 25px auto 0;
padding: 0 25px;
}

#contentsarea .maincontents .product_list.pad_list{
margin: 50px auto 0;
}

#contentsarea .maincontents .product_list:after{
content: "";
display: block;
width: 30%;
height: 0;
}

#contentsarea .maincontents .product_list li{
width: 30%;
padding: 0 0 50px;
}

#contentsarea .maincontents .product_list figure img{
width: 100%;
}

#contentsarea .maincontents .product_list .model_name{
font-size: 14px;
line-height: 1.5;
margin: 1em 0;
padding: 0 0 1em;
border-bottom: 1px solid #eee;
color: #03a196;
}

#contentsarea .maincontents .product_list .model_name span{
font-size: 12px;
color: #333;
}

#contentsarea .maincontents .product_list .model_include{
font-size: 13px;
line-height: 1.5;
}

#contentsarea .maincontents .product_list .pad-image{
width: 100%;
background-size: cover;
background-position: center;
aspect-ratio: 1 / 1;
}


/* 製品スライダー */

#contentsarea .maincontents .js-swiper-main .swiper-slide{
width: 100%;
background-size: cover;
background-position: center;
aspect-ratio: 1 / 1;
}

#contentsarea .maincontents .js-swiper-thumbs{
margin: 0.5em 0 0;
padding: 0 0 0 100px;
position: relative;
}

#contentsarea .maincontents .js-swiper-thumbs .swiper-wrapper{transform: translate3d(0px, 0px, 0px)!important;
}

#contentsarea .maincontents .js-swiper-thumbs .swiper-slide{
width: 24px !important;
}

#contentsarea .maincontents .js-swiper-thumbs .swiper-slide:hover{
cursor: pointer;
}

#contentsarea .maincontents .js-swiper-thumbs span{
content: "";
display: block;
width: 16px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center; 
background-size:  cover; 
}

.#contentsarea .maincontents js-swiper-thumbs span:hover{
opacity: 0.8;
cursor: pointer;
}

#contentsarea .maincontents .js-swiper-thumbs span.icon_ch{
background-image: url(/features/allstores/thalia/coloricon_ch.jpg);
}

#contentsarea .maincontents .js-swiper-thumbs span.icon_gd{
background-image: url(/features/allstores/thalia/coloricon_gd.jpg);
}

#contentsarea .maincontents .js-swiper-thumbs span.icon_bkch{
background-image: url(/features/allstores/thalia/coloricon_bkch.jpg);
}

#contentsarea .maincontents .js-swiper-thumbs:before{
display: block;
position: absolute;
width: 100px;
top: 50%;
left: 0;
content: "Variation: ";
font-size: 13px;
line-height: 1.0;
transform: translateY(-50%);
}


/* モデル詳細説明 */

#contentsarea .maincontents .licensed_text{
margin: 50px auto 0;
justify-content: space-between;
flex-wrap: wrap;
}

#contentsarea .maincontents .licensed_text li{
width: 30%;
}

#contentsarea .maincontents .licensed_text p{
margin: 1em auto 0;
font-size: 14px;
}

#contentsarea .maincontents .licensed_text p:first-of-type{
margin: 25px auto 0;
font-size: 17px;
}

#contentsarea .maincontents .licensed_text p span{
color: #03a196;
}

#contentsarea .maincontents .licensed_image{
width: 100%;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

#contentsarea .maincontents .licensed_image.fender_image{
background-image: url('/features/allstores/thalia/fender.png');
}

#contentsarea .maincontents .licensed_image.gibson_image{
background-image: url('/features/allstores/thalia/gibson.png');
}

#contentsarea .maincontents .licensed_image.taylor_image{
background-image: url('/features/allstores/thalia/taylor.png');
}

#contentsarea .maincontents .fretpad_feature{
margin: 50px auto 0;
justify-content: space-between;
flex-wrap: wrap;
}

#contentsarea .maincontents .fretpad_feature li{
width: 48%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}

#contentsarea .maincontents .fretpad_feature p{
margin: 1em auto 0;
font-size: 15px;
}

#contentsarea .maincontents .fretpad_feature p:first-of-type{
margin: 0 auto;
color: #03a196;
}

#contentsarea .maincontents .fretpad_feature p span{
font-size: 14px;
color: #333;
}

#contentsarea .maincontents .fretpad_text{
width: 61%;
}

#contentsarea .maincontents .fretpad_image{
width: 35%;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

#contentsarea .maincontents .fretpad_image.standard_image{
background-image: url('/features/allstores/thalia/standard-tension.png');
}

#contentsarea .maincontents .fretpad_image.high_image{
background-image: url('/features/allstores/thalia/high-tension.png');
}


/* デザイン */

#contentsarea #feature{
max-width: 1200px;
margin: 100px auto 0;
padding: 0 5% 100px;
background: #f7f7f7;
border-radius: 16px;
}

#contentsarea #feature h2{
font-size: 30px;
line-height: 1.5;
}

#contentsarea #feature a{
color: #03a196;
transition: 0.3s ease-in-out;
}

#contentsarea #feature a:hover{
color: #03857c;
}

#contentsarea #feature p{
margin-top: 1em;
}

#contentsarea #feature ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#contentsarea #feature #design{
padding: 100px 0 0;
}

#contentsarea #feature #howto,
#contentsarea #feature #padtype,
#contentsarea #feature #padtype,
#contentsarea #feature #exchange,
#contentsarea #feature #accessories,
#contentsarea #feature #guide{
padding: 100px 0 0;
margin: 100px auto 0;
border-top: 1px solid #dadada;
}

#contentsarea #feature .feature_image{
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

#contentsarea #feature .feature_text{
width: 52%;
}

#contentsarea #feature #padtype p{
margin-top: 0;
}

#contentsarea #feature .howto_image,
#contentsarea #feature .padtype{
margin: 50px auto 0;
}

#contentsarea #feature .howto_l,
#contentsarea #feature .padtype_l{
width: 50%;
padding-right: 2%;
border-right: 1px solid #dadada;
}

#contentsarea #feature .howto_r,
#contentsarea #feature .padtype_r{
width: 50%;
padding-left: calc(2% + 1px);
}

#contentsarea #feature .feature_image.design{
width: 45%;
height: 100%;
background-image: url('/features/allstores/thalia/capo_parts.png');
}

#contentsarea #feature .feature_image.howto{
background-image: url('/features/allstores/thalia/howto.png');
}

#contentsarea #feature .feature_image.positioning{
background-image: url('/features/allstores/thalia/positioning.png');
}

#contentsarea #feature .feature_image.standard-tension{
background-image: url('/features/allstores/thalia/standard-tension.png');
}

#contentsarea #feature .feature_image.high-tension{
background-image: url('/features/allstores/thalia/high-tension.png');
}

#contentsarea #feature .feature_image.exchange{
width: 45%;
height: 100%;
background-image: url('/features/allstores/thalia/exchange.png');
}

#contentsarea #feature .feature_image.accessories{
width: 45%;
height: 100%;
background-image: url('/features/allstores/thalia/accessories.png');
}


/* ガイド */

#contentsarea #feature #guide table{
margin: 50px auto 0;
width: 100%;
border-collapse: collapse;
display: block;
overflow-y: scroll;
height: calc(100vh - 100px);
font-size: 15px;
}

#contentsarea #feature #guide table thead th{
color: #fff;
position: sticky;
top: 0;
z-index: 1;
background: #03a196;
padding: 1em;
border-left: 1px solid #fff;
}

#contentsarea #feature #guide table thead th:first-child{
border-left: none;
}

#contentsarea #feature #guide table tbody tr{
border-bottom: 1px solid #dadada;
background: #fff;
}

#contentsarea #feature #guide table tbody tr:last-child{
border-bottom: none;
}

#contentsarea #feature #guide table td.brand{
padding: 0 1em;
margin: 1em 0;
}

#contentsarea #feature #guide table td span{
border-left: 1px solid #dadada;
padding: 0 1em;
margin: 1em 0;
display: block;
}


/* 外部リンク */

#contentsarea #official_link{
width: 100%;
text-align: center;
}

#contentsarea #official_link a{
display: inline-block;
margin: 0 auto;
padding: 0.5em 2em 0.5em 1em;
border-radius: 5px;
color: #333;
border: 1px solid #333;
transition: 0.3s ease-in-out;
position: relative;
}

#contentsarea #official_link a:hover{
color: #03857c;
border: 1px solid #03857c;
}

#contentsarea #official_link a:after{
position: absolute;
content:'\f08e';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
right: 1.5em;
top: 50%;
width: 1em;
padding: 0 0 1.8em;
transform: translateY(-50%);
font-size: 10px;
transition: 0.3s ease-in-out;
}

#contentsarea #official_link a:hover:after{
color: #03857c;
}



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

/* SPグローバルメニュー */

#contentsarea #submenu .inner{
padding: 0;
}

#contentsarea #submenu .submenu_list{
max-width: 100%;
}

#contentsarea #submenu .submenu_list:before{
content: none;
}
}



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

/* SP全体 */

#contentsarea{
font-size: 16px;
}

/* SPトップスライダー */

#contentsarea .top_slider.swiper-container{
height: calc(100vh - 50px);
}

#contentsarea .top_slider.swiper-container .swiper-slide div.model_link{
width: 70%;
left: 50%;
padding: 0;
transform: translate(-50%, -50%);
text-align: center;
}

#contentsarea .top_slider.swiper-container .swiper-slide .brandlogo{
width: 200px;
margin: 0 auto 20px;
}

#contentsarea .top_slider.swiper-container .swiper-slide h3{
font-size: 30px;
}


/* SPグローバルメニュー */

#contentsarea #submenu .inner{
border-bottom: 1px solid #fff;
}

#contentsarea #submenu .submenu_list{
flex-wrap: wrap;
}

#contentsarea #submenu .submenu_list .totop_icon{
position: static;
width: 25%;
height: 8vw;
max-height: 50px;
transform: none;
}

#contentsarea #submenu .submenu_list .totop_icon a{
height: 100%;
aspect-ratio: auto;
background-size: 60%;
background-image: url('/features/allstores/thalia/thalia_logo-grey.png');
}

#contentsarea #submenu .submenu_list li{
width: 25%;
height: 8vw;
max-height: 50px;
padding: 0 0.5em;
background: #03a196;
border-right: 1px solid #fff;
transition: 0.3s ease-in-out;
}

#contentsarea #submenu .submenu_list li:has(a:hover){
background: #03857c;
}

#contentsarea #submenu .submenu_list li:nth-child(-n+4) {
border-bottom: 1px solid #fff;
}

#contentsarea #submenu .submenu_list li:nth-child(4n){
border-right: none;
}

#contentsarea #submenu .submenu_list li:first-child{
border-left: none;
}

#contentsarea #submenu .submenu_list li a{
font-size: min(2vw,12px);
color: #fff;
}

#contentsarea #submenu .submenu_list li a:hover{
color: #fff;
}


/* SP楽器店大賞 */

#contentsarea #award{
padding: 1.5em 5%;
}

#contentsarea #award .grandprize_logo{
width: 11em;
}

#contentsarea #award .grandprize_text{
font-size: 13px;
}


/* SP冒頭 */

#contentsarea #beginning{
padding: 8vw 5% 0;
}

#contentsarea #beginning h1{
font-size: 22px;
}

#contentsarea #beginning .beginning_image,
#contentsarea #beginning .beginning_text{
width: 100%;
}


/* SPメイン */

#contentsarea .maincontents{
padding: 0 5% 16vw;
}

#contentsarea .maincontents h4{
font-size: 18px;
padding: 0.5em 20px;
margin: 0 auto 4vw;
}

#contentsarea .maincontents h5{
font-size: 18px;
margin: 8vw 2% 4vw;
width: 96%;
padding: 0 20px;
}

#contentsarea .maincontents span.notes{
font-size: 13px;
}

#contentsarea .maincontents > div{
padding: 16vw 0 0;
}


/* SP製品 */

#contentsarea .maincontents .product_text{
padding: 0 2%;
}

#contentsarea .maincontents .product_list{
margin: 20px auto 0;
padding: 0 2%;
}

#contentsarea .maincontents .product_list.pad_list{
margin: 8vw auto 0;
}

#contentsarea .maincontents .product_list:after{
content: "";
display: block;
width: 48%;
height: 0;
}

#contentsarea .maincontents .product_list li{
width: 48%;
padding: 0 0 8vw;
}


/* SPモデル詳細説明 */

#contentsarea .maincontents .licensed_text{
margin: 8vw auto 0;
}

#contentsarea .maincontents .licensed_text p:first-of-type{
margin: 4vw auto 0;
font-size: 16px;
}

#contentsarea .maincontents .fretpad_feature{
margin: 8vw auto 0;
}

#contentsarea .maincontents .fretpad_feature p{
font-size: 16px;
}

#contentsarea .maincontents .fretpad_feature p span{
font-size: 13px;
color: #333;
}

#contentsarea .maincontents .fretpad_text{
width: 100%;
height: 100%;
}

#contentsarea .maincontents .fretpad_image{
width: 100%;
}


/* SPデザイン */

#contentsarea #feature{
margin: 16vw auto 0;
padding: 0 5% 16vw;
border-radius: 12px;
}

#contentsarea #feature h2{
font-size: 22px;
}

#contentsarea #feature .sp_first{
order: 1;
}

#contentsarea #feature .sp_second{
order: 2;
}

#contentsarea #feature #design{
padding: 16vw 0 0;
}

#contentsarea #feature #howto,
#contentsarea #feature #padtype,
#contentsarea #feature #padtype,
#contentsarea #feature #exchange,
#contentsarea #feature #accessories,
#contentsarea #feature #guide{
padding: 16vw 0 0;
margin: 16vw auto 0;
}

#contentsarea #feature .feature_text{
width: 100%;
}

#contentsarea #feature .howto_image{
margin: 0 auto;
}

#contentsarea #feature .howto_l,
#contentsarea #feature .howto_r{
width: 100%;
margin: 8vw auto 0;
padding: 0;
border: none;
}

#contentsarea #feature .padtype_l,
#contentsarea #feature .padtype_r{
width: 48%;
padding: 0;
border: none;
}

#contentsarea #feature .feature_image.design,
#contentsarea #feature .feature_image.exchange,
#contentsarea #feature .feature_image.accessories{
width: 100%;
}

#contentsarea #feature .feature_image.design,
#contentsarea #feature .feature_image.exchange,
#contentsarea #feature .feature_image.accessories{
margin: 8vw auto 0;
}


/* SPガイド */

#contentsarea #feature #guide table{
margin: 8vw auto 0;
height: calc(100vh - 22vw);
font-size: 14px;
}

#contentsarea #feature #guide table thead th{
padding: 0.5em;
}

#contentsarea #feature #guide table td.brand,
#contentsarea #feature #guide table td span{
padding: 0 0.5em;
}



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

/* SP_s製品 */

#contentsarea .maincontents .product_list:after,
#contentsarea .maincontents .product_list li{
width: 100%;
}


/* SP_sモデル詳細説明 */

#contentsarea .maincontents .licensed_text{
margin: 0 auto;
}

#contentsarea .maincontents .licensed_text li{
width: 48%;
margin: 8vw 0 0;
}
}