@charset "utf-8";
/* CSS Document */





section.item .container { max-width: 1140px; padding: 20px 0 60px; border-bottom: 1px solid #e8e8e8; }
section h2 { font-size: 32px; margin: 0 0 30px; font-weight: 900; }
section h2 { font-size: 28px; margin: 0 0 30px; font-weight: 900; }
section h2 + p { font-weight: 400; font-size: 20px; }

@media screen and (max-width:768px) {
section h2 { font-size: 24px; margin: 0 0 20px; }
section h2 + p { font-size: 15px; }
}

section.breadcrum { border-top: 1px solid #eee; }
section.breadcrum .container { padding: 10px 15px; }
section.breadcrum ul { list-style: none; padding: 0; margin: 0; font-size: 14px; display: flex; }
section.breadcrum a { text-decoration: none; color: #ccc; font-weight: 400; }
section.breadcrum a:hover { text-decoration: underline; color: #0d6efd; }
section.breadcrum li { color: #ccc; padding-right: 0; }
section.breadcrum li::before { font-weight: normal; margin-left: 0; }
section.breadcrum li::before { content: "\f105"; width: 1em; height: 1em; line-height: 1; text-align: center; font-size: 1em; font-weight: 400; color: #ccc; margin: 0 8px; position: static; top: 50%; right: 0; font-family: FontAwesome; }
section.breadcrum li:first-of-type::before{ display: none; }


.layout { display: grid; align-items: flex-start; column-gap: 40px; }

.mp_thumbnail { padding: 0 15px; }
.layout .layout_cart { width: 480px; padding: 0 15px; position: sticky; top: 70px; }
.layout .layout_media { /*min-height: 520px;*/ padding: 0 15px; }

@media screen and (max-width:768px) {
.layout { display: inherit; column-gap: normal; }
.mp_thumbnail { width: 100%; padding: 0; }
.layout .layout_media { width: 100%; min-height: inherit; padding-top: 30px; }
.layout .layout_cart { width: 100%; position: inherit; top: inherit; padding-top: 15px; }
section.item .container { padding: 0 0 60px; }
}


.mp_thumbnail { grid-area: image; }
.layout_cart { grid-area: cart; }
.layout_media { grid-area: text; }
.layout { grid-template-areas:
	"image cart"
	"text cart";
}


.layout h1 { margin: 0 0 5px; font-size: 32px; font-weight: 900; }
.layout h1 { margin: 0 0 5px; font-size: 26px; font-weight: 900; }
.layout h2 { margin: 30px 0 15px; font-size: 22px; font-weight: 400; text-align: left; }
.layout h2 + p { font-size: 15px!important; line-height: 1.6; margin: 0 0 1.2em; text-align: left; font-weight: normal; }
.layout .fee { margin: 0 0 10px; letter-spacing: 0.05em; }

.layout .layout_media h2:first-of-type { font-size: 24px; font-weight: 700; }
.layout .layout_media h2:first-of-type + p { font-size: 15px!important; line-height: 1.6; margin: 0 0 15px; text-align: left; font-weight: normal; }

@media screen and (max-width:768px) {
.layout h1 { font-size: 26px; }
.layout .layout_media h2:first-of-type { font-size: 24px; }
.layout .layout_media h2:first-of-type + p { font-size: 15px!important; }
}

.layout h2.top { margin-top: 0; }
.layout h3 { margin: 25px 0 10px; font-size: 16px; font-weight: 900; }
.layout h3.top { margin-top: 0; }

.layout .accd { margin: 15px 0; padding: 15px 0 0; margin: 0; padding: 15px 0; font-size: 18px; font-weight: 400; text-align: left; border-top: 1px solid #ddd; position: relative; }

.layout .accd::after {
  position: absolute;
  right: 10px;
  font-family: FontAwesome;
  content: '\f107';
  text-align: center;
  width: 24px;
  height: 24px;
  display: inline-block;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  font-size: 18px;
}
.layout .accd.active::after {
    -webkit-transform: rotate(180deg) scale(1.0);
    -ms-transform: rotate(180deg) scale(1.0);
    transform: rotate(180deg) scale(1.0);
}

.layout .accd+div { display: none; padding: 15px 0; }
.layout .accd.active { font-weight: 900; }

.layout_media .feature { margin-bottom: 25px; }
.layout_media .feature h4 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.layout_media .feature .col-3 img { border-radius: 7px; /*border: 1px solid #ddd;*/ }

.layout_media hr { margin: 0; }

.layout p { margin-bottom: 1.5em; line-height: 1.7; font-size: 14px; }

@media screen and (max-width:768px) {
.layout_media .feature .col-3 { padding-bottom: 15px; }
.layout_media .feature { margin-bottom: 0; }
.layout_media .feature h4 { font-size: 15px; }
.layout p { line-height: 1.5; font-size: 14px; }
}
/*
.layout_cart > p:first-of-type { margin: 0; font-weight: 900; background: linear-gradient(51deg,#FF0000,#FF6400 15%,#FFA816 35%,#FF9A87 55%,#F747D1 80%,#AD5DF1);  background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
*/
.layout_cart .cat { margin: 0 0 3px; font-weight: 900; background: linear-gradient(51deg,#FF0000,#FF6400 15%,#FFA816 35%,#FF9A87 55%,#F747D1 80%,#AD5DF1);  background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }


.layout .alert-danger p { line-height: 1.6; }

.layout h2 + .row > div[class^="col"] > h3 { margin-top: 15px; }
.layout .guide { padding: 0; }

.layout_cart .pickup {}
.layout_cart .pickup .title { margin: 0 0 10px; display: none; }
.layout_cart .pickup .delivery { margin: 0 0 5px; }
.layout_cart .pickup .locker { margin: 0; }
.layout_cart .pickup .locker .to_tokyo_dome { padding: 5px 0 0 24px; font-size: 14px; }


.mp_thumbnail { margin: 0; }
.mp_thumbnail .mp_thumb { margin-bottom: 5px; border-radius: 4px; }
.mp_thumbnail .mp_thumb img { width: 100%; border-radius: 4px; }
.mp_thumbnail .mp_nail { width: 100%; margin: 0 0 10px; padding: 0; }

@media screen and (max-width:768px) {
/*
.mp_thumbnail { margin: 0 0 20px; }
*/
.mp_thumbnail .mp_thumb img { border-radius: 0; }
/*
.mp_thumbnail .mp_nail { padding: 0 10px; }
*/
}

/*
.mp_thumbnail .mp_nail li { display: block; float: left; width: 15.7%; width: 89px; margin: 0 5px 14px 0; border: 1px solid #dfdfdf; list-style-type: none; border-radius: 3px; }
.mp_thumbnail .mp_nail li img { width: 100%; cursor: pointer; border: 1px solid transparent; border-radius: 1px; }
.mp_thumbnail .mp_nail li.current { border: 2px solid #333 !important; border-radius: 3px; }
.mp_thumbnail .mp_nail li.current img { border: none; }
.mp_thumbnail .mp_nail li:last-child { margin-right: 0; }
*/
section .mp_nail { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; }
section .mp_nail { list-style-type: none; padding: 0; }
section .mp_nail li{ width: 49.5%; border: 1px solid white; border-radius: 4px; }
section .mp_nail li{ width: 49.5%; border: none; border-radius: 4px; }
section .mp_nail li img { width: 100%; height: auto; border-radius: 4px; }
section .mp_nail li.current { border: 1px solid black; }
section .mp_nail li.current { border: none; opacity: 0.4; }
section .mp_nail li:hover { opacity: 0.4; }

@media screen and (max-width:768px) {
section .mp_nail li{ width: 49%; }
.mp_thumbnail .mp_thumb { margin-bottom: 6px; }
}



.device_spec { margin: 15px 0 20px; clear: both; }
.device_spec ul { margin: 8px 0; padding: 0; }
.device_spec ul li { list-style-type: none; width: 177px; margin-right: 6px; padding-bottom: 8px; display: inline-block; vertical-align: middle; line-height: 1.2; border-bottom: 1px solid #ddd; }
.device_spec ul li span { display: inline-block; vertical-align: middle; }
.device_spec ul li img { width: 60px; height: auto; }
.device_spec ul li:last-child { margin-right: 0; }





section.item .fee.sale div:first-of-type { color: #ccc; }



section.item .fee .title { margin: 0 0 10px; }




section.item .fee .basic { font-size: 15px; }
section.item .fee .basic b { line-height: 1; font-size: 1.5rem; margin-left: 2px; font-family: "din-2014",sans-serif; }

section.item .fee .basic { font-size: 20px; }
section.item .fee .basic b { line-height: 1; font-size: 36px; }

section.item .fee.sale .basic b { color: red; }

section.item .fee .basic b span { font-size: 20px; }

section.item .fee .extend { font-size: 15px; }
section.item .fee .info { margin-top: 10px; color:red; font-size: 14px; }
section.item .fee .info small { font-size: 12px; display: block; padding-bottom: 0; }











.entry .btn_order { width: 100%; padding-left: 34px; color: #FFF; background-color: #E11939; border-color: #E11939; font-size: 18px; font-weight: bold; /*box-shadow: 0px 5px 0px 0px #A7002B;*/ }
.entry .btn_order::before { content: "\f054"; font-family: FontAwesome; font-weight: normal; float: right; }
.entry .btn_order:hover { opacity: 0.8; background-color: #E11939; border-color: #E11939; }
.entry .btn_sim { width: 100%; padding-left: 34px; color: #FFF; background-color: #17B610; border-color: #17B610; font-size: 18px; font-weight: bold; /*box-shadow: 0px 5px 0px 0px #009B00;*/ }
.entry .btn_sim::before { content: "\f054"; font-family: FontAwesome; font-weight: normal; float: right; }
.entry .btn_sim:hover { opacity: 0.8; background-color: #17B610; border-color: #17B610; }
.entry .btn_area { width: 350px; font-size: 14px; /*box-shadow: 0 3px 0 0 #eee;*/ }
.entry .btn_area:hover { opacity: 0.7; background-color: white; border-color: #CCC; }

.asu_tsuku .title { margin: 0 0 10px; font-size: 15px; }
.asu_tsuku .title span { color: red; }
.asu_tsuku .title a { text-align: center; letter-spacing: 0; font-weight: normal; }
.asu_tsuku .title a:hover { text-decoration: none; }
.asu_tsuku .title a[aria-expanded="false"]::after { display: inline-block; margin-right: 8px; content: "\f107"; font-family: FontAwesome; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; }
.asu_tsuku .title a[aria-expanded="true"]::after { display: inline-block; margin-right: 8px; content: "\f107"; font-family: FontAwesome; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; -webkit-transform: rotate(180deg) scale(1.08); -ms-transform: rotate(180deg) scale(1.08); transform: rotate(180deg) scale(1.08); }
.asu_tsuku i { font-size: 15px; }
.asu_tsuku table th { padding: 3px 5px; text-align: center; }
.asu_tsuku table td { padding: 3px 5px; }
.asu_tsuku .panel { margin-bottom: 15px; }
.asu_tsuku .panel-body { }
.asu_tsuku .panel-body .title { margin: 14px 0 8px; font-size: 13px; }




.cart_area { margin: 30px 0 10px; padding: 0; font-size: 15px; }
.cart_area .panel { box-shadow: none; }
.cart_area .panel-body { padding: 25px 15px 10px; }
.cart_area .row { margin-bottom: 10px; }
.cart_area h2 { margin-top: 30px; font-weight: 900; }
.cart_area p { font-size: 15px; }

.cart_area .btn { margin-bottom: 10px; }
.cart_area .btn_sim { padding: 7px 30px 7px; color: #17B610; background-color: white; border-color: #17B610; font-size: 16px; font-weight: bold; }
.cart_area .btn_sim:hover { opacity: 0.5; background-color: white; border-color: #17B610; }

.std_tbl { margin: 0 0 15px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; }
.std_tbl th { padding: 8px 15px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #f6f6f6; font-weight: normal; font-size: 15px; text-align: revert; }
.std_tbl td { padding: 8px 15px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 15px; }
.std_tbl td b { font-size: 16px; }


.delively_free { display: flex; margin: 0 0 20px; align-items: center; color: red; justify-content: center; align-items: center; }
.delively_free img { margin-right: 4px; }

.kadomaru_tbl { margin: 0 0 15px; border-radius: 14px; border-spacing: 0; border: none; border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-collapse: inherit; }
.kadomaru_tbl th { padding: 7px 15px; border: none; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #f6f6f6; font-weight: normal; font-size: 15px; text-align: revert-layer; }
.kadomaru_tbl td { padding: 7px 15px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 15px; }
.kadomaru_tbl tr:first-child>*:first-child { border-radius: 14px 0 0 0; }
.kadomaru_tbl tr:first-child>*:last-child { border-radius: 0 14px 0 0; }
.kadomaru_tbl tr:last-child>*:first-child{ border-radius: 0 0 0 14px; }
.kadomaru_tbl tr:last-child>*:last-child{ border-radius: 0 0 14px 0; }
.kadomaru_tbl + .point { border-radius: 0 0 14px 14px; }

@media screen and (max-width:768px) {
	.kadomaru_tbl th { padding: 5px 10px; font-size: 14px; line-height: 1.5; }
	.kadomaru_tbl td { padding: 5px 10px; font-size: 14px; line-height: 1.5; }
}



.point { position: relative; margin: 0 0 1rem; padding: 20px; padding-left: 90px; background-color: #f5f5f7; border-radius: 14px; }
.point::before { background-image: url("/oshikatsu/common/images/icon_point.png"); 
  content: ""; position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px;
  width: 50px;
  height: 80px;
  left: 20px;
  top: 0;
  margin: auto;
  bottom: 0;
}
.point p:last-of-type { margin: 0; }


@media screen and (max-width:768px) {
.point { padding-left: 90px; }
.point::before { width: 50px; height: 80px; left: 20px; }
}




hr { background: none; opacity: inherit; border: none; border-bottom: 1px solid #ddd; }






section.products h2 {}
section.products .container { max-width: 1140px; padding: 60px 15px 60px; border: none; }
section.products .row#binoculars { margin-bottom: 0; border: none; padding-bottom: 0; }
section.guide h2 { margin: 0 0 40px; }




@media screen and (max-width:768px) {
section.products .container { padding: 40px 15px; }

}


section.products2 .container { max-width: 1140px; padding: 60px 15px 60px; border-bottom: 1px solid #e8e8e8; }

section.products2 h2 + p { margin: -20px 0 30px; }
section.products2 .rec_magnification { margin-bottom: 40px; }
section.products2 .row > div[class^="col"] > a { color: inherit; text-decoration: none; }
section.products2 .row > div[class^="col"] > a:hover { opacity: 0.7; }
section.products2 .row > div[class^="col"] figure { margin: 0 0 18px; }
section.products2 .row > div[class^="col"] figure img { border-radius: 7px; }

section.products2 .row > div[class^="col"] .name { margin: 0; padding: 0 0 15px; font-size: 15px; line-height: 1.6; font-weight: 400; }

section.products2 .row > div[class^="col"] .detail { font-size: 16px; line-height: 1.5; display: none; }

section.products2 .row > div[class^="col"] .fee { margin: 0 0 25px; font-size: 14px; font-weight: 400; color: black; line-height: 1.1; text-align: left; letter-spacing: 0.1em; }
section.products2 .row > div[class^="col"] .fee .basic { margin: 0 0 5px; padding: 0; font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif; }
section.products2 .row > div[class^="col"] .fee .extension { margin: 0 0 10px; padding: 0; font-size: 14px; }
section.products2 .row > div[class^="col"] .fee .delivery { color: red; line-height: 1.3; }
section.products2 .row > div[class^="col"] .fee .announce { margin: 0; padding: 0; font-size: 14px; }
section.products2 .row > div[class^="col"] .fee .delivery small { padding-bottom: 3px; font-size: 12px; display: block; }
@media screen and (max-width: 767px) {
section.products2 .row > div[class^="col"] .fee .delivery small { font-size: 10px; }
}

section.products2 .row > div[class^="col"] .fee b { font-weight: 900; margin-left: 3px; }
section.products2 .row > div[class^="col"] .fee span { font-size: 22px; font-family: "din-2014",sans-serif; }

@media screen and (max-width:768px) {
section.products2 .row > div[class^="col"] .name { margin: 0; padding: 0 0 15px; font-size: 14px; line-height: 1.5; font-weight: 400; }
section.products2 .row > div[class^="col"] .detail { font-size: 13px; display: none; }
section.products2 .row > div[class^="col"] .fee { font-size: 12px; font-weight: 400; }
section.products2 .row > div[class^="col"] .fee span { font-size: 26px; }
section.products2 .row > div[class^="col"] .fee .extension { font-size: 12px; }

}