@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/txm6kjs.css");

div#item_block { width:74%; max-width:800px; margin:150px auto; padding:5%; background-color:#fefefe; border:solid #231815 2px; border-radius: 20px; }
@media (max-width: 800px) {
    div#item_block { margin:100px auto; padding:8% 5%; }
}


div#item_flex { display: flex; gap:8%; width:100%; justify-content: center; padding-bottom:80px; margin-bottom:80px; border-bottom:2px solid #231815; }
div#item_flex div#item_img { width:46%; }
div#item_flex div#item_img div#slider_main { position:relative; max-height:380px; margin-bottom:20px; }
div#item_flex div#item_img div#slider_main > div { border:solid #231815 2px; box-sizing: border-box; }
div#item_flex div#item_img div#slider_main > div > img { width:100%; height: auto; vertical-align: bottom; }
div#item_flex div#item_img div#slider_thum { display: flex; gap:2%; position:relative; }
div#item_flex div#item_img div#slider_thum > div { width:25%; border:solid #231815 2px; box-sizing: border-box; overflow: hidden; }
div#item_flex div#item_img div#slider_thum > div img { width:100%; height: auto; vertical-align: bottom; transition: all 0.5s ease-in-out; }
div#item_flex div#item_img div#slider_thum > div img:hover { cursor: pointer; transform: scale(1.1); filter: brightness(0.6); }

div#item_flex div#item_txt { width:46%; line-height: 1; position:relative; }
@media (max-width: 800px) {
    div#item_flex { flex-direction: column; gap:0; padding-bottom:40px; margin-bottom:40px; }
    div#item_flex div#item_img { display: flex; gap:5%; width:100%; max-width:100%; margin:auto; margin-bottom:20px; }
    div#item_flex div#item_img div#slider_main { width:75%; }
    div#item_flex div#item_img div#slider_thum { width:20%; display: flex; flex-direction: column; }
    div#item_flex div#item_img div#slider_thum > div { width:100%; }
    div#item_flex div#item_txt { width:100%; }
}

div#item_flex div#item_txt div#txt_first { padding-bottom:20px; border-bottom:solid 1px #231815; margin-bottom:20px; }
div#item_flex div#item_txt p#item_copy { font-size:24px; font-family: "Noto Serif Display", serif; font-weight: 400; font-style: normal; padding-bottom:10px; }
div#item_flex div#item_txt p#item_title { font-size:40px; font-weight: bold; padding-bottom:15px; }
div#item_flex div#item_txt p#item_jp_title { font-size:24px; font-weight: bold; padding-bottom:25px; }
div#item_flex div#item_txt p#item_price { font-size:20px; font-weight: bold; padding-bottom:30px; }
div#item_flex div#item_txt p#item_sub { font-size:20px; font-weight: bold; padding-bottom:10px; }
div#item_flex div#item_txt p#item_text { font-size:15px; font-weight: normal; line-height: 1.6; }
div#item_flex div#item_txt p#item_text > span { display: inline-block; text-align: right; font-size:13px; }
div#item_flex div#item_txt p#item_info { font-size:75%; padding-top:15px; line-height: 1.6; }
div#item_flex div#item_txt p#item_detail { font-size:13px; line-height: 1.8; }
a#cart_btn { font-size: 21px; color:#231815; font-weight: 700; background-color:#95caff; display: block; text-align:center; width:70%; line-height: 52px; height:50px; border-radius: 30px; border: #231815 solid 2px; margin-top:40px; box-shadow: 3px 5px #231815; }
a#cart_btn:hover { background-color:#fefefe; position:relative; top:3px; box-shadow: 2px 2px #231815; }
@media (max-width: 800px) {
    div#item_flex div#item_txt div#txt_first { margin-bottom:0; }
    div#item_flex div#item_txt p#item_copy { font-size:18px; }
    div#item_flex div#item_txt p#item_title { font-size:32px; padding-bottom:10px; }
    div#item_flex div#item_txt p#item_jp_title { font-size:16px; padding-bottom:20px; }
    div#item_flex div#item_txt p#item_price { font-size:18px; }
    div#item_flex div#item_txt p#item_sub { font-size:15px; }
    div#item_flex div#item_txt p#item_text { font-size:13px; }
    div#item_flex div#item_txt p#item_detail { font-size:12px; }
    div#item_flex div#item_txt a#cart_btn { font-size:16px; width:84%; line-height: 40px; height:40px; margin:30px auto; }
}

a#regularBtn { font-size: 21px; color:#231815; font-weight: 700; background-color:#fefefe; display: block; text-align:center; width:90%; line-height: 52px; height:50px; border-radius: 30px; border: #231815 solid 2px; margin-top:30px; box-shadow: 3px 5px #231815; }
a#regularBtn:hover { background-color:#95caff; position:relative; top:3px; box-shadow: 2px 2px #231815; }
#regularInfo { margin-top:30px; }
#regularInfo > p { font-size:15px; line-height: 1.4; }
#regularInfo > p > span { font-size:12px; }
#regularLink { margin-top:20px; }
#regularLink > a { font-size:15px; color:#95caff; font-weight: 500; width: fit-content; display: inline-block; position:relative; }
#regularLink > a::after { content:""; width:100%; height:1px; bottom:-3px; left:0; background-color:#95caff; position:absolute; }
#regularLink > a:hover::after { animation:hoverLine 0.6s ease-in-out; transform-origin: bottom left; }
@media (max-width: 800px) {
    a#regularBtn { font-size: 16px; width:84%; line-height: 40px; height:40px; margin:auto; }
    #regularInfo > p { font-size:12px; }
    #regularInfo > p > span { font-size:11px; }
    #regularLink > a { font-size:13px; }
}

#regularAboutBtn { position: absolute; bottom:105px; left:-200px; width:180px; height:180px; }
#regularAboutBtn a img { width:100%; height:auto; object-fit: contain; transition:all 0.6s ease-in-out; }
#regularAboutBtn a:hover img { position:relative; top:2px; filter: brightness(0.9); }
@media (max-width: 800px) {
    #regularAboutBtn { position: relative; bottom:0; left:0; margin:30px auto 10px; width:130px; height:130px; }
}


@keyframes hoverLine {
    0% { transform: scale(0,1); transform-origin: bottom left; }
    1000% { transform: scale(1,1); transform-origin: bottom left; }
}


.imageImg { margin-top:20px; }
.imageImg > img { width:240px; object-fit: contain; }
@media (max-width: 800px) {
    .imageImg > img { width:200px; }
}

div#item_flex div#item_txt div#txt_component { padding-bottom:20px; border-bottom:solid 1px #231815; margin-bottom:20px; }
@media (max-width: 800px) {
    div#item_flex div#item_txt div#txt_component { padding-bottom:0; }
}

div#txt_component div.faq_content { padding-left:0.5em; padding-right:0.5em; }
div#txt_component div.faq_content .toggle { display: none; }
div#txt_component div.faq_content .faq_question, div.faq_content .faq_answer { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.5s ease-in-out; }
div#txt_component div.faq_content .faq_question { font-size:15px; letter-spacing: 1px; display: block; position:relative; }
div#txt_component div.faq_content .faq_question::before { content:""; width:1em; height:1px; background-color:#231815; top:50%; position:absolute; right:0; transform: rotateZ(90deg); }
div#txt_component div.faq_content .faq_question::after { content:""; width:1em; height:1px; background-color:#231815; top:50%; position:absolute; right:0; transition: all 0.5s ease-in-out; }
div#txt_component div.faq_content .faq_question:hover { cursor: pointer; color:#98ca00; }
div#txt_component div.faq_content .faq_question:hover::before { background-color:#98ca00; }
div#txt_component div.faq_content .faq_question:hover::after { background-color:#98ca00; }
div#txt_component div.faq_content .faq_answer { font-size:80%; height: 0; line-height: 1.6; overflow: hidden; }
div#txt_component div.faq_content .toggle:checked + .faq_question + .faq_answer { height: auto; padding:20px 0 1px; transition: all 0.5s ease-in-out; }
div#txt_component div.faq_content .toggle:checked + .faq_question::before { opacity: 0; }
div#txt_component div.faq_content .toggle:checked + .faq_question::after { transform: rotateZ(360deg); }
@media (max-width: 800px) {
  div#txt_component div.faq_content { padding:15px 10px; }
  div#txt_component div.faq_content .faq_question { font-size:13px; line-height: 1.5; padding-right:1.4em; padding-left:1em; text-indent: -1em; }
  div#txt_component div.faq_content .faq_answer { font-size:70%; }
  div#txt_component div.faq_content .toggle:checked + .faq_question + .faq_answer { padding:10px 0 1px; }
}




div#other_flex { display: flex; gap:10%; justify-content: center; margin-bottom:100px; }
div#other_flex > div { width:30%; text-align: center; }
div#other_flex > div img { height:240px; width:100%; object-fit: contain; margin-bottom:20px; }
div#other_flex > div p.other_title { font-size:24px; font-weight: 700; padding-bottom:10px; }
div#other_flex > div p.other_text { font-size:16px; font-weight: 500; }
div#other_flex > div a.other_btn { font-size: 22px; color:#231815; font-weight: 700; background-color:#fefefe; display: inline-block; text-align:center; width:80%; line-height: 52px; height:50px; border-radius: 30px; border: #231815 solid 2px; margin-top:30px; box-shadow: 3px 5px #231815; }
div#other_flex > div a.other_btn:hover { background-color:#95caff; position:relative; top:3px; box-shadow: 2px 2px #231815; }
@media (max-width: 800px) {
    div#other_flex { gap:6%; margin-bottom:30px; }
    div#other_flex > div { width:47%; margin:auto; margin-bottom:20px; }
    div#other_flex > div img { height:auto; max-height: 240px; margin-bottom:15px; }
    div#other_flex > div p.other_title { font-size:16px; }
    div#other_flex > div p.other_text { font-size:13px; }
    div#other_flex > div a.other_btn { font-size:15px; width:90%; line-height: 40px; height:40px; margin-top:20px; }
}


div#item_block h3 { font-size:35px; margin:auto; margin-bottom:50px; text-align:center; }
@media (max-width: 800px) {
    div#item_block h3 { font-size:24px; margin-bottom:30px; }
}