@charset "utf-8";
/*------------------------  prod  ------------------------*/


/*-----  title  -----*/
#prod .title_content { padding: 0 5%; }
#prod .title_content .title_block { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 150px; font-weight: 700; line-height: 1.3; text-align: center; z-index: 101; }
#prod .title_content .title { font-size: 32px; }

@media screen and (max-width: 840px) {
 #prod .title_content {}
 #prod .title_content .title_block { height: 84px; }
 #prod .title_content .title { font-size: 24px; }
}



/*-----  overview  -----*/
#prod .overview_content { margin: 0 0 60px; padding: 0 5%; background: url(/images/products/overview_img.jpg) no-repeat center; background-size: cover; }
#prod .overview_content .overview_block { display: flex; align-items: center; height: 200px; }
#prod .overview_content .txt { font-weight: 700; font-size: 18px; line-height: 1.8; color: #fff; text-shadow: rgb(0,0,0,.4) 0 1px 8px; }

@media screen and (max-width: 840px) {
 #prod .overview_content { margin: 0 0 40px; }
 #prod .overview_content .overview_block { height: 140px; }
 #prod .overview_content .txt { font-size: 15px; line-height: 1.6; }
}



/*-----  select btn  -----*/
#prod .select_block { display: flex; justify-content: center; flex-wrap: wrap; padding: 0 5% 30px; }
#prod .select_block .select_btn { flex-basis: calc(100% / 2); padding: 0 8px; max-width: 420px; }
#prod .select_block .select_btn .link { display: flex; align-items: center; padding: 0 10px; height: 74px; border: 1px solid #ddd; border-radius: 3px; }
#prod .select_block .select_btn .link .icon { flex-basis: 50px; }
#prod .select_block .select_btn .link .txt { flex: 1; position: relative; padding: 0 0 0 14px; font-weight: 700; font-size: 15px; line-height: 1.3; }
#prod .select_block .select_btn .link .txt::after { content: ''; position: absolute; top: 50%; right: 10px; width: 7px; height: 7px; border-top: 1px solid #a00e14; border-right: 1px solid #a00e14; transform: translate(0, -50%) rotate(135deg); }

@media screen and (max-width: 840px) {
 #prod .select_block { display: block; padding: 0 5% 30px; }
 #prod .select_block .select_btn { padding: 0 0 8px; max-width: inherit; }
 #prod .select_block .select_btn .link { padding: 0 7px; height: 54px; border: 1px solid #ddd; border-radius: 3px; }
 #prod .select_block .select_btn .link .icon { flex-basis: 36px; }
 #prod .select_block .select_btn .link .txt { padding: 0 0 0 12px; font-size: 14px; }
}



/*-----  list  -----*/
#prod .list_content { margin: 0 0 30px; padding: 40px 5% 0; }
#prod .list_content .list_ttl { position: relative; margin: 0 0 40px; padding: 0 0 18px 14px; border-bottom: 1px solid #e6e6e6; font-weight: 700; font-size: 24px; }
#prod .list_content .list_ttl::before { content: ''; position: absolute; top: 1px; left: 0; width: 3px; height: 24px; background: #a00e14; }
#prod .list_content .list_block { display: flex; flex-wrap: wrap; margin: 0 -10px; }
#prod .list_content .list_block .item { flex-basis: calc(100% / 3); padding: 0 10px 20px; }
#prod .list_content .list_block .item .link { position: relative; display: block; padding: 30px 30px 25px; height: 100%; background: #f6f6f6; color: #111; border-radius: 3px; font-weight: 700; line-height: 1.3; text-align: center; }
#prod .list_content .list_block .item .txt_block { padding: 5px 0 0; }
#prod .list_content .list_block .item .txt_block .key_cat { display: flex; position: absolute; top: 16px; left: 16px; }
#prod .list_content .list_block .item .txt_block .key_cat .cat { display: flex; justify-content: center; align-items: center; margin: 0 5px 0 0; padding: 0 8px; background: #a00e14; height: 22px; font-weight: 500; font-size: 12px; color: #fff; border-radius: 2px; }
#prod .list_content .list_block .item .txt_block .key_cat .blank { height: 22px; }
#prod .list_content .list_block .item .txt_block .ttl { font-size: 18px; }
#prod .list_content .list_block .item .txt_block .subttl { margin: 3px 0 0; font-size: 14px; }


@media screen and (max-width: 1020px) {
 #prod .list_content .list_block .item .txt_block .ttl { font-size: 16px; }
 #prod .list_content .list_block .item .txt_block .subttl { font-size: 13px; }
}


@media screen and (max-width: 840px) {
 #prod .list_content { margin: 0 0 30px; padding: 20px 5% 0; }
 #prod .list_content .list_ttl { margin: 0 0 25px; padding: 0 0 12px 11px; font-size: 18px; }
 #prod .list_content .list_ttl::before { width: 3px; height: 18px; }
 #prod .list_content .list_block { display: block; margin: 0; }
 #prod .list_content .list_block .item { padding: 0 0 10px; }
 #prod .list_content .list_block .item:last-of-type { padding: 0; }
 #prod .list_content .list_block .item .link { display: flex; padding: 8px 2px; text-align: left; }
 #prod .list_content .list_block .item .link::after { content: ''; position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; border-top: 1px solid #a00e14; border-right: 1px solid #a00e14; transform: translate(0, -50%) rotate(45deg); }
 #prod .list_content .list_block .item .link .img { flex-basis: 86px; }
 #prod .list_content .list_block .item .txt_block { flex: 1; padding: 6px 22px 6px 6px; }
 #prod .list_content .list_block .item .txt_block .key_cat { position: relative; top: inherit; left: inherit; margin: 0 0 5px; }
 #prod .list_content .list_block .item .txt_block .key_cat .cat { padding: 0 6px; height: 16px; font-size: 10px; }
 #prod .list_content .list_block .item .txt_block .key_cat .blank { height: 18px; }
 #prod .list_content .list_block .item .txt_block .ttl { font-size: 15px; }
 #prod .list_content .list_block .item .txt_block .subttl { margin: 2px 0 0; font-size: 13px; }
}



/*-----  location  -----*/
#prod .location_content { margin: 0 0 80px; padding: 40px 5% 0; }
#prod .location_content .location_ttl { position: relative; margin: 0 0 50px; padding: 0 0 18px 14px; border-bottom: 1px solid #e6e6e6; font-weight: 700; font-size: 24px; }
#prod .location_content .location_ttl::before { content: ''; position: absolute; top: 1px; left: 0; width: 3px; height: 24px; background: #a00e14; }

#prod .tabs { display: flex; justify-content: center; flex-wrap: wrap; }
#prod .tabs .tab_item { flex-basis: calc(100% / 3); cursor: pointer; }
#prod .tabs .tab_item:hover { opacity: .7; }
#prod .tabs .tab_item .tab_box { display: flex; align-items: center; margin: 0 8px; padding: 0 10px; height: 64px; border: 1px solid #ddd; border-radius: 3px; }
#prod .tabs .tab_item .tab_box .icon { width: 50px; height: 50px }
#prod .tabs .tab_item .tab_box .icon01 { background: url(/images/products/icon_tab01.png) no-repeat center; background-size: contain; }
#prod .tabs .tab_item .tab_box .icon02 { background: url(/images/products/icon_tab02.png) no-repeat center; background-size: contain; }
#prod .tabs .tab_item .tab_box .icon03 { background: url(/images/products/icon_tab03.png) no-repeat center; background-size: contain; }
#prod .tabs .tab_item .tab_box .txt { flex: 1; position: relative; padding: 0 0 0 12px; font-weight: 700; font-size: 15px; line-height: 1.3; color: #999; }
#prod .tabs input[name="location_tab"] { display: none; }
#prod .tabs .tab_content { display: none; padding: 40px 0 0; width: 100%; }
#tab01:checked ~ #content01,
#tab02:checked ~ #content02,
#tab03:checked ~ #content03 { display: block; }
#prod .tabs input:checked + .tab_item .tab_box { border: 1px solid #a00e14; color: #a00e14; }
#prod .tabs input:checked + .tab_item .tab_box .txt { color: #111; }
#prod .tabs input:checked + .tab_item .tab_box .icon01 { background: url(/images/products/icon_tab01_on.png) no-repeat center; background-size: contain; }
#prod .tabs input:checked + .tab_item .tab_box .icon02 { background: url(/images/products/icon_tab02_on.png) no-repeat center; background-size: contain; }
#prod .tabs input:checked + .tab_item .tab_box .icon03 { background: url(/images/products/icon_tab03_on.png) no-repeat center; background-size: contain; }

#prod .location_content .location_block { display: flex; align-items: center; padding: 30px 0 20px; border-bottom: 1px solid #e6e6e6; }
#prod .location_content .location_block:first-of-type { border-top: 1px solid #e6e6e6; }
#prod .location_content .location_block .place { flex-basis: 140px; text-align: center; }
#prod .location_content .location_block .place .place_img { margin: 0 auto; width: 110px; }
#prod .location_content .location_block .place .place_ttl { padding: 0 0 10px; font-weight: 700; font-size: 14px; line-height: 1.3; }
#prod .location_content .location_block .list_block { display: flex; flex-wrap: wrap; flex: 1; padding: 0 0 0 20px; }
#prod .location_content .location_block .list_block .item { flex-basis: calc(100% / 3); padding: 0 10px 10px 0; }
#prod .location_content .location_block .list_block .item .link { display: flex; align-items: center; padding: 4px 6px 4px 0; background: #f6f6f6; color: #111; border-radius: 3px; font-weight: 700; line-height: 1.3; }
#prod .location_content .location_block .list_block .item .link .img { flex-basis: 64px; }
#prod .location_content .location_block .list_block .item .txt_block {}
#prod .location_content .location_block .list_block .item .txt_block .ttl { font-size: 15px; }
#prod .location_content .location_block .list_block .item .txt_block .subttl { margin: 2px 0 0; font-size: 13px; }


@media screen and (max-width: 840px) {
 #prod .location_content { margin: 0 0 50px; padding: 20px 5% 0; }
 #prod .location_content .location_ttl { margin: 0 0 25px; padding: 0 0 12px 11px; font-size: 18px; }
 #prod .location_content .location_ttl::before { width: 3px; height: 18px; }
 #prod .tabs .tab_item:hover { opacity: 1; }
 #prod .tabs .tab_item .tab_box { margin: 0 3px; padding: 0 7px; height: 52px; }
 #prod .tabs .tab_item .tab_box .icon { width: 36px; height: 36px }
 #prod .tabs .tab_item .tab_box .txt { padding: 0 0 0 5px; font-size: 13px; }
 #prod .tabs .tab_content { padding: 25px 0 0; }
 #prod .location_content .location_block { display: block; padding: 14px 0 18px; }
 #prod .location_content .location_block .place { text-align: center; }
 #prod .location_content .location_block .place .place_img { width: 94px; }
 #prod .location_content .location_block .place .place_ttl { padding: 0 0 18px; font-size: 14px; }
 #prod .location_content .location_block .list_block { display: block; padding: 0; }
 #prod .location_content .location_block .list_block .item { padding: 0 0 8px; }
 #prod .location_content .location_block .list_block .item .link { position: relative; padding: 2px 4px 2px 0; }
 #prod .location_content .location_block .list_block .item .link::after { content: ''; position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; border-top: 1px solid #a00e14; border-right: 1px solid #a00e14; transform: translate(0, -50%) rotate(45deg); }
 #prod .location_content .location_block .list_block .item .link .img { flex-basis: 56px; }
 #prod .location_content .location_block .list_block .item .txt_block { padding: 0 0 0 2px; }
 #prod .location_content .location_block .list_block .item .txt_block .ttl { font-size: 14px; }
 #prod .location_content .location_block .list_block .item .txt_block .subttl { margin: 1px 0 0; font-size: 12px; }
}



/*-----  supplement  -----*/
#prod .suppl_content { margin: 0 0 80px; padding: 0 5%; }
#prod .suppl_content .suppl_inner { display: flex; flex-wrap: wrap; }
#prod .suppl_content .item { flex-basis: calc(100% / 2); padding: 0 15px; }
#prod .suppl_content .item .link { display: block; }
#prod .suppl_content .item .ttl { margin: 14px 0 0; font-weight: 700; font-size: 20px; line-height: 1.3; }
#prod .suppl_content .item .txt { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
#prod .suppl_content .suppl_sub { display: flex; justify-content: center; padding: 55px 0 0; }
#prod .suppl_content .suppl_btn { flex-basis: calc(100% / 2); padding: 0 15px; }
#prod .suppl_content .suppl_btn .link { display: flex; align-items: center; position: relative; padding: 0 30px 0 20px; height: 84px; border: 1px solid #ccc; border-radius: 3px; }
#prod .suppl_content .suppl_btn .link::after { content: ''; position: absolute; top: 50%; right: 20px; width: 7px; height: 7px; border-top: 1px solid #a00e14; border-right: 1px solid #a00e14; transform: translate(0, -50%) rotate(45deg); }
#prod .suppl_content .suppl_btn .link .txt { font-weight: 700; font-size: 18px; line-height: 1.3; }
#prod .suppl_content .suppl_btn .link .txt .sub { display: block; margin: 4px 0 0; font-weight: 400; font-size: 14px; line-height: 1.3; }



@media screen and (max-width: 840px) {
 #prod .suppl_content { margin: 0 0 20px; }
 #prod .suppl_content .suppl_inner { display: block; }
 #prod .suppl_content .item { padding: 0 0 30px; }
 #prod .suppl_content .item .ttl { margin: 12px 0 0; font-size: 16px; }
 #prod .suppl_content .item .txt { margin: 5px 0 0; font-size: 14px;}
 #prod .suppl_content .suppl_sub { display: block; padding: 0; }
 #prod .suppl_content .suppl_btn { padding: 6px 0; }
 #prod .suppl_content .suppl_btn .link { padding: 0 22px 0 13px; height: 78px; }
 #prod .suppl_content .suppl_btn .link::after { right: 13px; }
 #prod .suppl_content .suppl_btn .link .txt { font-size: 15px; }
 #prod .suppl_content .suppl_btn .link .txt .sub { margin: 2px 0 0; font-size: 13px; }
}







