@charset "utf-8";

/* トップ ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#mainVisual {line-height: 0;}
#mainVisual .slider.slick-initialized {display: block;}
#mainVisual .slick-dots {width: 100%;margin: 0;padding: 0;position: absolute;bottom: 10px;display: block;text-align: center;list-style: none;}
#mainVisual .slick-dots li {margin: 0 5px;padding: 0;position: relative;display: inline-block;cursor: pointer;}
#mainVisual .slick-dots li button {width: 10px;height: 10px;display: block;outline: none;cursor: pointer;background: transparent;border: 0;font-size: 0;line-height: 0;}
#mainVisual .slick-dots li button:hover, .slick-dots li button:focus {outline: none;}
#mainVisual .slick-dots li button:before {content: "";width: 10px;height: 10px;position: absolute;top: 0;left: 0;display: block;background: #fff;border: 1px solid #3d62a3;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;border-radius: 50%;}
#mainVisual .slick-dots li.slick-active button:before {opacity: .75;background: #3d62a3;}
#mainVisual .slick-prev, .slick-next {position: absolute;top: 50%;z-index: 10;display: block;font-size: 0;line-height: 1;}
#mainVisual .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {color: transparent;outline: none;background: transparent;}
#mainVisual .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before,.slick-next:focus:before {opacity: 1;}
#mainVisual .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {opacity: .25;}
#mainVisual .slick-prev:before, .slick-next:before {font-family: 'slick';font-size: 50px;line-height: 1;opacity: .75;color: white;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#mainVisual .slick-prev {width: 20px;height: 20px;left: 15px;border: 2px solid;border-color:  transparent transparent #fff #fff;transform: rotate(45deg);}
#mainVisual .slick-next {width: 20px;height: 20px;right: 15px;border: 2px solid;border-color: #fff #fff transparent transparent;transform: rotate(45deg);}

#newly, #recommend {margin-top: 80px;padding: 20px 0;position: relative;border-top: 1px solid #3d62a3;}
#newly h2 {max-width: 250px;margin: auto auto 20px auto;padding: 10px 0;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;}
#newly h2:before {content: "";width: 30px;height: 30px;position: absolute;left: 0;top: 20%;display: table;background: url(../images/i_book.png) no-repeat 0 0;background-size: contain;}
#recommend h2 {max-width: 280px;margin: auto auto 20px auto;padding: 10px 0;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;}
#recommend h2:before {content: "";width: 30px;height: 30px;position: absolute;left: 0;top: 20%;display: table;background: url(../images/i_book.png) no-repeat 0 0;background-size: contain;}
#newly p.moreBtn, #recommend p.moreBtn {position: absolute;right: 1%;bottom: 90%;}
#newly p.moreBtn a, #recommend p.moreBtn a {padding: 5px 70px;display: block;background: #3d62a3;color: #fff;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#newly ul li, #recommend ul li {margin: 0 10px;font-size: 0.8rem;line-height: 1.5;}
#newly ul li a, #recommend ul li a {color: #000;}
#newly ul li figure, #recommend ul li figure {}
#newly ul li figure img, #recommend ul li figure img {width: 70%;margin: auto auto 10px auto;border: 1px solid #ddd;}
#newly ul li figure .bookTit, #recommend ul li figure .bookTit {}
#newly ul li figure .author, #recommend ul li figure .author {color: #888;font-size: 0.7rem;}
#newly ul li figure .bCat, #recommend ul li figure .bCat {color: #3d62a3;font-size: 0.7rem;}
#newly ul li figure .info, #recommend ul li figure .info {margin: 5px auto;padding: 5px 0;display: block;text-align: center;background: #000;color: #fff;font-size: 0.7rem;line-height: 1.3;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#newly .prev, #recommend .prev {width: 30px;height: 100px;position: absolute;left: 0;top: 30%;z-index: 3;background: #fff;border: 1px solid #87a7db;cursor: pointer;}
#newly .next, #recommend .next {width: 30px;height: 100px;position: absolute;right: 0;top: 30%;z-index: 3;background: #fff;border: 1px solid #87a7db;cursor: pointer;}
#newly .prev:after, #recommend .prev:after {content: "";width: 10px;height: 10px;border: 2px solid;border-color:  transparent transparent #87a7db #87a7db;transform: rotate(45deg);position: absolute;left: 40%;top: 45%;z-index: 10;}
#newly .next:after, #recommend .next:after {content: "";width: 10px;height: 10px;border: 2px solid;border-color: #87a7db #87a7db transparent transparent;transform: rotate(45deg);position: absolute;right: 35%;top: 45%;z-index: 10;}
@media only screen and (max-width: 1024px) {#newly p.moreBtn, #recommend p.moreBtn {right: 2%;} #newly p.moreBtn a, #recommend p.moreBtn a {padding: 5px 50px;}}
@media only screen and (max-width: 812px) {
#newly, #recommend {margin-top: 40px;padding: 20px 0 70px 0;position: relative;border-top: 1px solid #3d62a3;}
#newly h2 {max-width: 220px;font-size: 1.1rem;}
#recommend h2 {max-width: 250px;font-size: 1.1rem;}
#newly p.moreBtn, #recommend p.moreBtn {width: 100%;right: 0;bottom: 0;}
#newly p.moreBtn a, #recommend p.moreBtn a {width: 70%;margin: auto;padding: 10px 0;text-align: center;}
#newly ul, #recommend ul {padding: 0 20px;}
#newly ul li figure .bookTit, #recommend ul li figure .bookTit {font-size: 0.7rem;}
#newly .prev, #recommend .prev {width: 20px;height: 70px;top: 25%;}
#newly .next, #recommend .next {width: 20px;height: 70px;top: 25%;}
#newly .prev:after, #recommend .prev:after {top: 40%;}
#newly .next:after, #recommend .next:after {top: 40%;}
}

#infomation {margin: 80px auto;padding: 30px 50px;position: relative;border: 1px solid #c2c2c2;border-radius: 10px;}
#infomation h2 {max-width: 170px;margin: auto auto 20px auto;padding: 10px 0;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;}
#infomation h2:before {content: "";width: 30px;height: 30px;position: absolute;left: 0;top: 20%;display: table;background: url(../images/i_info.png) no-repeat 0 0;background-size: contain;}
#infomation p.moreBtn {position: absolute;right: 1%;top: 5%;}
#infomation p.moreBtn a {padding: 5px 70px;display: block;background: #3d62a3;color: #fff;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#infomation dl {justify-content: space-between;}
#infomation dl dt {width: 27%;padding: 10px 0;border-bottom: 1px dotted #87a7db;}
#infomation dl dt:last-of-type {border-bottom: 0 none;}
#infomation dl dt time {display: inline-block;}
#infomation dl dt .infoCat {width: 50%;max-width: 150px;margin-left: 20px;padding: 3px 0;display: inline-block;text-align: center;color: #fff;font-size: 0.8rem;}
#infomation dl dt .infoCat.new {background: #0d9046;}
#infomation dl dt .infoCat.event {background: #3d62a3;}
#infomation dl dt .infoCat.publisher {background: #e58065;}
#infomation dl dd {width: 72.9%;padding: 10px 0;border-bottom: 1px dotted #87a7db;}
#infomation dl dd span {width: 7%;display: inline-block;vertical-align: top;color: #ff2222;font-size: 0.8rem;}
#infomation dl dd p {width: 85%;display: inline-block;}
#infomation dl dd:last-of-type {border-bottom: 0 none;}
@media only screen and (max-width: 1024px) {
#infomation p.moreBtn {right: 2%;} 
#infomation p.moreBtn a {padding: 5px 50px;}
#infomation h2 {}
#infomation dl dt {width: 40%;}
#infomation dl dd {width: 60%;}
#infomation dl dd span {width: 15%;}
#infomation dl dd p {width: 80%;}
}
@media only screen and (max-width: 812px) {
#infomation {margin: 30px auto;padding: 20px 20px 100px 20px;}
#infomation h2 {max-width: 150px;font-size: 1.1rem;}
#infomation p.moreBtn {width: 100%;right: 0;top: 85%;}
#infomation p.moreBtn a {width: 70%;margin: auto;padding: 10px 0;text-align: center;}
#infomation dl dt {width: 100%;padding: 5px 0;border-bottom: 0 none;}
#infomation dl dt .infoCat {width: 70%;}
#infomation dl dd {width: 100%;padding: 5px 0;}
}

/* お知らせ ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#news {}
#newsDetail section {padding: 80px 0;}
#newsDetail section .newsTit {margin-bottom: 30px;padding-bottom: 10px;border-bottom: 2px solid #eee;align-items: center;font-size: 1.3rem;}
#newsDetail section .newsTit time {margin-right: 20px;}
#newsDetail section .newsTit span {margin-right: 20px;color: #ff2222;font-size: 1rem;}
#newsDetail section .newsTit .infoCat {margin-right: 20px;padding: 3px 10px;text-align: center;color: #fff;font-size: 1rem;}
#newsDetail section .newsTit .infoCat.new {background: #0d9046;}
#newsDetail section .newsTit .infoCat.event {background: #3d62a3;}
#newsDetail section .newsTit .infoCat.publisher {background: #e58065;}
@media only screen and (max-width: 812px) {
#newsDetail section {padding: 50px 0;}
#newsDetail section .newsTit {font-size: 1.1rem;}
#newsDetail section .newsTit time {margin-right: 10px;}
#newsDetail section .newsTit span {margin-right: 10px;}
#newsDetail section .newsTit .tit {}
}

#newsDetail article {}
#newsDetail article .cont {width: 100%;}
#newsDetail article h1 {margin-bottom: 20px;font-size: 1.3rem;font-weight: bold;}
#newsDetail article h2 {margin-bottom: 10px;font-size: 1.2rem;}
#newsDetail article h3 {margin-bottom: 10px;font-size: 1.1rem;}
#newsDetail article strong {font-weight: bold;}
#newsDetail article em {color: #ff2222;font-weight: bold;}

/* 検索一覧 ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#search {}
#searchContainer {padding: 30px 0;justify-content: space-between;}

#breadcrumb {width: 100%;padding: 10px 0;background: #f7f7f7;font-size: 0.8rem;line-height: 1.3;}
#breadcrumb li {display: inline-block;}
#breadcrumb li:after {content: ">";margin: 0 5px;}
#breadcrumb li:last-child {font-weight: 600;}
#breadcrumb li:last-child:after {content: "";margin: 0;}
@media only screen and (max-width: 812px) {#breadcrumb {font-size: 0.6rem;}}

#side {width: 20%;}
#side div {padding: 8px 0 10px 0;position: -webkit-sticky;position: sticky;top: 0;}
#side h3 {margin: auto;padding-bottom: 10px;font-size: 1.1rem;font-weight: 600;line-height: 1.3;border-bottom: 1px solid #eee;color: #3d62a3;}
#side h4 {padding: 15px 0 0 0;font-size: 1rem;font-weight: 600;line-height: 1.3;}
#side ul {padding: 15px 10px;border-bottom: 1px solid #eee;font-size: 0.8rem;}

#list {width: 77%;}
#list form {width: 100%;display: inline-block;}
#list #sort {width: 100%;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 1px solid #eee;}
#list #sort ul {justify-content: flex-end;align-items: center;}
#list #sort ul li:last-child {width: 25%;}
#list #sort ul li .selectBox {width: 100%;display: inline-block;vertical-align: middle;overflow: hidden;text-align: center;background: #fff;}
#list #sort ul li .selectBox.selectS {position: relative;border: 1px solid #ccc;border-radius: 3px;background: #fff;}
#list #sort ul li .selectBox.selectS::before {content: '';width: 0;height: 0;padding: 0;position: absolute;top: 1em;right: 0.9em;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #555;pointer-events: none;}
#list #sort ul li .selectBox.selectS:after {content: '';width: 1px;position: absolute;top: 0;right: 2.5em;bottom: 0;border-left: 1px solid #ccc;}
#list #sort ul li .selectBox select {width: 100%;padding-right: 1em;cursor: pointer;text-indent: 0.01px;text-overflow: ellipsis;border: none;outline: none;background-image: none;box-shadow: none;-webkit-appearance: none;appearance: none;}
#list #sort ul li .selectBox select::-ms-expand {display: none;}
#list #sort ul li .selectBox.selectS select {padding: 5px 38px 5px 5px;}
#list ul#listCont {}
#list ul#listCont li {width: 33.333%;margin: 0 0 20px 0;padding: 20px;border-bottom: 1px solid #ccc;}
#list ul#listCont li:nth-child(3n) {margin-right: 0;}
#list ul#listCont li figure {width: 100%;margin: 0 auto 10px auto;text-align: center;flex-direction: column;}
#list ul#listCont li figure img {width: 60%;border: 2px solid #ddd;}
#list ul#listCont li .cont {width: 100%;}
#list ul#listCont li .bookTit {margin: 0 0 10px 0;color: #3d62a3;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#list ul#listCont li .author {color: #606060;font-size: 0.8rem;line-height: 1.5;}
#list ul#listCont li .publisher {widthcolor: #606060;font-size: 0.8rem;line-height: 1.5;}
#list ul#listCont li .issue {margin-bottom: 5px;color: #606060;font-size: 0.8rem;line-height: 1.5;}
#list ul#listCont li .price1, #list ul#listCont li .price2 {line-height: 1.3;}
#list ul#listCont li .info {margin: 5px auto;padding: 5px 0;display: block;text-align: center;background: #000;color: #fff;font-size: 0.7rem;line-height: 1.3;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#list #pageNation {margin: 30px auto 20px auto;}
#list #pageNation ul {justify-content: center;}
#list #pageNation ul li {margin: 0 3px;}
#list #pageNation ul li.next {}
#list #pageNation ul li a {padding: 0 10px;display: block;border: 1px solid #ccc;}
#list #pageNation ul li span {padding: 0 10px;display: block;border: 1px solid #ccc;background: #eee;font-weight: 600;}
@media only screen and (max-width: 1024px) {#list #sort ul li:last-child {width: 30%;}#list ul#listCont li figure img {width: 40%;}}
@media only screen and (max-width: 768px) {#list #sort ul li:last-child {width: 35%;}#list ul#listCont li {width: 50%;}#list ul#listCont li figure img {width: 50%;}}
@media only screen and (max-width: 812px) {
#list #sort ul {justify-content: center;}
#side {width: 100%;}
#side p a {width: 100%;margin: auto auto 15px auto;padding: 10px 0;display: block;text-align: center;border: 1px solid #eee;}
#list #sort ul li:last-child {width: 50%;}
#list {width: 100%;}
#side h3 {display: none;}
#side h4 {display: none;}
#side ul {display: none;}
#list ul#listCont li {width: 100%;padding: 10px 0 30px 0;display: -webkit-box;display: -moz-box;display: -webkit-flexbox;display: -moz-flexbox;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: flex;}
#list ul#listCont li figure {width: 30%;}
#list ul#listCont li figure img {width: 100%;}
#list ul#listCont li .cont {width: 65%;margin: 0 auto;}
#list ul#listCont li .bookTit {font-size: 0.9rem;}
#list ul#listCont li .info {font-size: 0.6rem;}
#list #pageNation {margin: 0 auto;}
#list #pageNation ul li {padding: 0 5px;}
#list #pageNation ul li a {padding: 3px 5px;}
}

/* 書籍詳細 ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#detail {}

#detailBox {padding: 50px 0;justify-content: space-between;}
#detailBox #image {width: 25%;position: relative;}
#detailBox #image .slick-list {width: 100%;margin: 0 auto;border: 1px solid #ddd;}
#detailBox #image .slick-list .slick-slide img {width: 100%;margin: auto;text-align: center;}
/*#detailBox #image .slideItem img {height: 315px;object-fit: cover;font-family: 'object-fit: cover;';}*/
#detailBox #image .slider.slick-initialized {display: block;}
#detailBox #image .slick-dots {width: 90%;margin: 20px auto auto auto;position: relative;bottom: 0;list-style: none;}
#detailBox #image .slick-dots li {width: 17%;margin: 0 3px;display: inline-block;cursor: pointer;opacity: 0.5;}
#detailBox #image .slick-dots li img {width: 100%;border: 1px solid #ddd;}
#detailBox #image .slick-dots li.slick-active {opacity: 1.0;}
#detailBox #image p {margin-top: 20px;text-align: center;font-size: 0.8rem;}
@media only screen and (max-width: 1024px) {#detailBox #image .slick-dots li img {height: 40px;}}
@media only screen and (max-width: 812px) {
#detailBox #image {width: 100%;margin-bottom: 20px;}
#detailBox #image .slick-list {width: 50%;margin: 0 auto;}
#detailBox #image .slick-dots {width: 100%;margin: 10px auto auto auto;position: static;text-align: center;}
#detailBox #image .slick-dots li {width: 10px;height: 10px;margin: 0 5px;background: #000;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
#detailBox #image .slick-dots li img {width: 0;height: 0;}
}

#detailBox #cont {width: 72%;}
#detailBox #cont h3 {margin-bottom: 10px;color: #3d62a3;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#detailBox #cont .publisher {padding-bottom: 10px;border-bottom: 1px solid #ccc;color: #606060;font-size: 0.8rem;line-height: 1.5;}
#detailBox #cont #remarks {margin: auto;padding: 20px 0;justify-content: space-between;position: relative;}
#detailBox #cont #remarks #registration {width: 45%;font-size: 0.8rem;line-height: 1.5;}
#detailBox #cont #remarks #registration h4 {margin-bottom: 10px;font-size: 1rem;font-weight: 600;}
#detailBox #cont #remarks #registration dl {justify-content: space-between;}
#detailBox #cont #remarks #registration dl dt {width: 25%;}
#detailBox #cont #remarks #registration dl dd {width: 73%;}
#detailBox #cont #remarks .info {margin-top: 10px;padding: 5px 50px;text-align: center;display: table;background: #000;color: #fff;font-size: 0.7rem;line-height: 1.3;}
#detailBox #cont #remarks #cart {width: 50%;padding: 0;justify-content: space-between;align-items: flex-end;}
#detailBox #cont #remarks #cart .price {width: 48%;}
#detailBox #cont #remarks #cart .price .price1, #detailBox #cont #remarks #cart .price .price2 {line-height: 1.5;}
#detailBox #cont #remarks .number {width: 40%;margin-left: auto;text-align: right;}
#detailBox #cont #remarks .number input[type="text"] {padding: 0 2px;text-align: right;border: 1px solid #ccc;}
#detailBox #cont #remarks .addN {padding: 2px 10px;background: #eee;}
#detailBox #cont #remarks .minN {padding: 2px 13px;background: #eee;}
#detailBox #cont #remarks .cart {width: 100%;margin-top: 10px;}
#detailBox #cont #remarks .cartBtn {width: 100%;margin: 0 auto;padding: 5px 0 5px 20px;display: block;text-align: center;position: relative;background: #ff9700;color: #fff;}
#detailBox #cont #remarks .cartBtn:before {content: "";width: 25px;height: 25px;position: absolute;left: 20px;top: 5px;display: block;background: url(../images/i_bcart.png) no-repeat 0 0;background-size: contain;}
#detailBox #cont .description1, #detailBox #cont .description2 {width: 100%;margin-top: 20px;padding: 20px 0;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;font-size: 0.9rem;line-height: 1.5;}
#detailBox #cont .description1 h4, #detailBox #cont .description2 h4 {margin-bottom: 10px;font-size: 1rem;font-weight: 600;}
@media only screen and (max-width: 1024px) {#detailBox #cont #remarks #cart {width: 50%;}#detailBox #cont #remarks #cart .price {width: 100%;margin-bottom: 10px;}#detailBox #cont #remarks .number {width: 100%;}}
@media only screen and (max-width: 768px) {#detailBox #cont #remarks .info {padding: 5px 30px;}}
@media only screen and (max-width: 812px) {
#detailBox #cont {width: 100%;}
#detailBox #cont .description1, #detailBox #cont .description2 {order: 2;font-size: 0.8rem;}
#detailBox #cont #remarks {margin: 10px auto;padding: 10px 0;}
#detailBox #cont #remarks #registration {width: 100%;margin-bottom: 15px;font-size: 0.7rem;order: 1;}
#detailBox #cont #remarks #registration dl dt {width: 20%;}
#detailBox #cont #remarks #registration dl dd {width: 77%;}
#detailBox #cont #remarks .info {padding: 5px 0;display: block;font-size: 0.6rem;}
#detailBox #cont #remarks #cart {width: 100%;padding-top: 20px;order: 3;}
#detailBox #cont #remarks #cart .price {width: 50%;}
#detailBox #cont #remarks #cart .price p {margin-right: 10px;display: inline-block;}
#detailBox #cont #remarks .number {width: 40%;}
#detailBox #cont #remarks .cartBtn {margin: 10px auto auto auto;padding: 10px 0 10px 20px;}
}
@media only screen and (max-width: 375px) {#detailBox #cont #remarks .cartBtn:before {left: 10px;}}

#detail #notes {padding: 30px 30px 10px 30px;background: #fff0f0;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#detail #notes h4 {margin: auto auto 20px auto;padding: 0 55px;position: relative;display: table;text-align: center;font-size: 1.1rem;font-weight: 600;}
#detail #notes h4:before, #detail #notes h4:after {content: '';width: 45px;height: 1px;position: absolute;top: 50%;display: inline-block;background-color: #555;}
#detail #notes h4:before {left: 0;}
#detail #notes h4:after {right: 0;}
#detail #notes h5 {color: #ff0033;font-weight: 600;}
#detail #notes h5 +p {margin: 10px auto 20px auto;padding: 0 12px;font-size: 0.8rem;}

#detail #recommend {margin-top: 0;padding: 20px 0 50px 0;}

/* ショッピングカート ---------------------------------------------------------------------------------------------------------------------------------------------- */

#step {margin-bottom: 70px;}
#step ul {justify-content: center;}
#step ul li {width: 17%;min-width: 200px;padding: 17px 20px;background: url(../images/step.png) no-repeat 0 0;background-size: cover;}
#step ul li.active {background: url(../images/step_ac.png) no-repeat 0 0;background-size: cover;color: #fff;}
@media only screen and (max-width: 1024px) {#step ul li {min-width: 170px;padding: 10px 20px;}}
@media only screen and (max-width: 812px) {#step ul {display: none;}#step p {width: 95%;padding: 20px 10px;background: url(../images/step_sp.png) no-repeat 0 0;background-size: cover;color: #fff;}}

#cart {padding: 80px 0 100px 0;}
#cart h2 {max-width: 300px;margin: auto auto 10px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#cart h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_cart.png) no-repeat 0 0;background-size: contain;}
#cart h2 + p {text-align: center;}
@media only screen and (max-width: 812px) {#cart {padding: 180px 0 50px 0;}#cart h2 {max-width: 240px;font-size: 1.1rem;}#cart h2:before {width: 35px;height: 35px;}}

#cart #cartBox {margin: 50px auto auto auto;justify-content: space-between;align-items: baseline;}
#cart #product {width: 60%;}
#cart #product ul#item {padding-bottom: 10px;border-bottom: 1px solid #ccc;font-size: 1rem;font-weight: 600;line-height: 1.3;}
#cart #product ul#item li:first-child {width: 70%;}
#cart #product ul#item li:last-child {width: 30%;}
#cart #product ul.itemList {min-height: 230px;padding: 20px 0 15px 0;border-bottom: 1px solid #ccc;justify-content: space-between;position: relative;}
#cart #product ul.itemList li:first-child {width: 15%;}
#cart #product ul.itemList li:nth-child(2) {width: 42%;}
#cart #product ul.itemList li:nth-child(3) {width: 28%;}
#cart #product ul.itemList li:nth-child(4) {width: 8%;}
#cart #product ul.itemList li:nth-child(5) {position: absolute;right: 0;bottom: 15px;}
#cart #product ul.itemList li:first-child img {width: 100%;border: 1px solid #ccc;}
#cart #product ul.itemList li:nth-child(3) .price1, #cart #product ul.itemList li:nth-child(3) .price2 {line-height: 1.5;}
#cart #product ul.itemList .bookTit {margin-bottom: 10px;color: #3d62a3;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#cart #product ul.itemList .author {color: #606060;font-size: 0.8rem;line-height: 1.5;}
#cart #product ul.itemList .publisher {color: #606060;font-size: 0.8rem;line-height: 1.5;}
#cart #product ul.itemList .info {color: #000;font-size: 0.7rem;}
#cart #product ul.itemList .delete {padding: 5px 10px;display: block;background: #eaeaea;border: 1px solid #ccc;}
#cart #product ul.itemList li .number {text-align: right;}
#cart #product ul.itemList li .number input[type="text"] {border: 1px solid #ccc;}
#cart #product ul.itemList li .addN {padding: 2px 10px;background: #eee;}
#cart #product ul.itemList li .minN {padding: 2px 13px;background: #eee;}
#cart #product ul.itemList li .cartBtn {margin: 10px auto auto auto;padding: 5px 77px 5px 107px;display: table;position: relative;background: #ff8e00;color: #fff;}
#cart #product ul.itemList li .cartBtn:before {content: "";width: 20px;height: 20px;position: absolute;left: 70px;top: 8px;display: block;background: url(../images/i_reload.png) no-repeat 0 0;background-size: contain;}
#cart #register {width: 37%;padding: 20px 30px;border: 1px solid #ccc;}
#cart #register dl {margin-bottom: 20px;justify-content: center;}
#cart #register dl dt {width: 30%;font-size: 1rem;font-weight: 600;}
#cart #register dl dd {width: 40%;}
#cart #register dl dd .price1, #cart #register dl dd .price2 {line-height: 1.5;}
#cart #register dl dd .price1 span, #cart #register dl dd .price2 span {font-weight: 600;}
#cart #register .cartBtn {width: 100%;margin: auto;padding: 10px 0;display: block;background: #ff9700;color: #fff;}
@media only screen and (max-width: 1024px) {
#cart #product {width: 65%;}
#cart #product ul.itemList li {padding-bottom: 50px;}
#cart #product ul.itemList li:nth-child(5) {bottom: -30px;}
#cart #product ul.itemList .bookTit {font-size: 1rem;}
#cart #product ul.itemList .delete {padding: 3px 5px;font-size: 0.7rem;}
#cart #product ul.itemList li .number {display: inline-block;}
#cart #product ul.itemList li .addN {display: inline-block;}
#cart #product ul.itemList li .minN {display: inline-block;}
#cart #product ul.itemList li .cartBtn {padding: 5px 20px 5px 40px;display: inline-block;font-size: 0.8rem;}
#cart #product ul.itemList li .cartBtn:before {left: 10px;}
#cart #register {width: 30%;padding: 10px;}
#cart #register dl dt {width: 100%;margin-bottom: 10px;text-align: center;}
#cart #register dl dd {width: 100%;text-align: center;}
}
@media only screen and (max-width: 812px) {
#cart #product {width: 100%;}
#cart #register {margin: 40px auto auto auto;}
#cart #product ul.itemList li {min-height: 110px;padding-bottom: 0;}
#cart #product ul.itemList li:first-child {width: 20%;}
#cart #product ul.itemList li:nth-child(2) {width: 75%;}
#cart #product ul.itemList li:nth-child(3) {width: 60%;margin: 0 10px 15px auto;}
#cart #product ul.itemList li:nth-child(3) p {display: inline-block;}
#cart #product ul.itemList li:nth-child(4) {width: auto;margin-left: 10px;}
#cart #product ul.itemList li:nth-child(5) {bottom: -55px;}
#cart #product ul.itemList .bookTit {font-size: 0.8rem;}
#cart #product ul.itemList .author {font-size: 0.6rem;}
#cart #product ul.itemList .publisher {font-size: 0.6rem;}
#cart #product ul.itemList .info {font-size: 0.6rem;}
#cart #product ul.itemList li:nth-child(3) .price1, #cart #product ul.itemList li:nth-child(3) .price2 {margin: 0 5px;}
#cart #product ul.itemList li .cartBtn:before {top: 5px;}
#cart #register {width: 100%;margin-bottom: 40px;}
#cart #register dl dt {width: 40%;}
#cart #register dl dd {width: 40%;}
#cart #register .cartBtn {padding: 5px 0;}
}
@media only screen and (max-width: 320px) {#cart #register dl dt {width: 45%;}#cart #register dl dd {width: 45%;}}

/* ショッピングカートお届け先の情報入力 ------------------------------------------------------------------------------------------------------------------------ */

#send {padding: 80px 0 100px 0;}
#send h2 {max-width: 300px;margin: auto auto 10px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#send h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_box.png) no-repeat 0 0;background-size: contain;}
#send h2 + p {width: 100%;margin-bottom: 50px;text-align: center;}
#send h3 {margin: auto auto 10px auto;padding: 0 30px;position: relative;font-size: 1.3rem;font-weight: 600;}
#send h3:before, #send h3:after {content: "□";width: 4px;height: 4px;position: absolute;color: #91b1e5;}
#send h3:before {left: 0;top: -3px;}
#send h3:after {left: 5.5px;top: 3.5px;}
@media only screen and (max-width: 812px) {#send {padding: 180px 0 50px 0;}#send h2 {max-width: 240px;font-size: 1.1rem;}#send h2:before {width: 35px;height: 35px;}#send h3 {font-size: 1rem;}}

#send #member, #send #address {margin: auto auto 50px auto;}
#send #member dl ,#send #address dl {justify-content: space-between;border: 1px solid #ccc;}
#send #member dl dt, #send #address dl dt {width: 25%;padding: 10px;border-bottom: 1px dotted #fff;background: #e1e4f0;}
#send #member dl dd, #send #address dl dd {width: 75%;padding: 10px;border-bottom: 1px dotted #ccc;}
#send #member dl dd:last-of-type, #send #address dl dt:last-of-type, #send #member dl dd:last-of-type, #send #address dl dd:last-of-type {border-bottom: 0 none;}
#send #address dl dd input[type="text"] {width: 100%;margin: 5px 0;padding: 5px 10px;border: 1px solid #ccc;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#send #address dl dd input[type="text"].short1 {width: 30%;}
#send #address dl dd input[type="text"].short2 {width: 50%;}
#send #address dl dd select {margin: 5px 0;padding: 5px 10px;border: 1px solid #ccc;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#send #address dl dd .error {display: block;color: #ff2222;font-size: 0.8rem;}
#send #address p {color: #ff2222;}
@media only screen and (max-width: 1024px) {#send #member, #send #address {width: 85%;}}
@media only screen and (max-width: 812px) {
#send #member, #send #address {width: 90%;margin: auto auto 30px auto;}
#send #member dl dt {width: 35%;}
#send #member dl dd {width: 65%;} 
#send #address dl dt {width: 100%;padding: 10px 5px 0 5px;}
#send #address dl dd {width: 100%;padding: 3px 5px;}
#send #address dl dd input[type="text"] {padding: 5px 10px;}
#send #address dl dd input[type="text"].short1 {width: 100%;}
#send #address dl dd input[type="text"].short2 {width: 100%;}
#send #address dl dd .error {font-size: 0.6rem;}
}

#send #btnArea {margin-top: 70px;justify-content: center;}
#send #btnArea .backBtn {margin: 0 10px;padding: 15px 100px;display: table;background: #ccc;color: #333;}
#send #btnArea .submitBtn {margin: 0 10px;padding: 15px 100px;display: table;background: rgb(0,176,214);background: #91b1e5;color: #fff;}
@media only screen and (max-width: 812px) {#send #btnArea {margin-top: 40px;}#send #btnArea .backBtn {padding: 10px 30px;}#send #btnArea .submitBtn {padding: 10px 30px;}}

/* 注文・入力情報確認 ------------------------------------------------------------------------------------------------------------------------------------------ */

#confirm {padding: 80px 0 100px 0;}
#confirm h2 {max-width: 300px;margin: auto auto 10px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#confirm h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_box.png) no-repeat 0 0;background-size: contain;}
#confirm h2 + p {width: 100%;padding-bottom: 50px;text-align: center;color: #3d62ad;font-size: 1.1rem;}
#confirm h3 {margin: auto auto 10px auto;padding: 0 30px;position: relative;font-size: 1.3rem;font-weight: 600;}
#confirm h3:before, #confirm h3:after {content: "□";width: 4px;height: 4px;position: absolute;color: #91b1e5;}
#confirm h3:before {left: 0;top: -3px;}
#confirm h3:after {left: 5.5px;top: 3.5px;}
@media only screen and (max-width: 812px) {#confirm {padding: 180px 0 50px 0;}#confirm h2 {max-width: 245px;font-size: 1.1rem;}#confirm h2:before {width: 35px;height: 35px;}#confirm h2 + p {font-size: 0.8rem;}#confirm h3 {font-size: 1rem;}}

#confirm #cartBox {margin: 50px auto auto auto;justify-content: space-between;align-items: baseline;}
#confirm #product {width: 60%;margin-bottom: 50px;}
#confirm #product ul#item {padding-bottom: 10px;border-bottom: 1px solid #ccc;font-size: 1rem;font-weight: 600;line-height: 1.3;}
#confirm #product ul#item li:first-child {width: 75%;}
#confirm #product ul#item li:nth-child(2) {width: 20%;}
#confirm #product ul#item li:last-child {width: 5%;}
#confirm #product ul.itemList {padding: 20px 0 15px 0;border-bottom: 1px solid #ccc;justify-content: space-between;position: relative;}
#confirm #product ul.itemList li:first-child {width: 10%;}
#confirm #product ul.itemList li:nth-child(2) {width: 42%;}
#confirm #product ul.itemList li:nth-child(3) {width: 28%;}
#confirm #product ul.itemList li:nth-child(4) {width: 5%;}
#confirm #product ul.itemList li:first-child img {width: 80%;}
#confirm #product ul.itemList li:nth-child(3) .price1, #confirm #product ul.itemList li:nth-child(3) .price2 {line-height: 1.5;}
#confirm #product ul.itemList .bookTit {margin-bottom: 10px;color: #3d62a3;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#confirm #product ul.itemList .author {color: #606060;font-size: 0.8rem;line-height: 1.5;}
#confirm #product ul.itemList .publisher {color: #606060;font-size: 0.8rem;line-height: 1.5;}
#confirm #product ul.itemList .info {margin-top: 10px;color: #ff2222;font-size: 0.7rem;}
#confirm #member, #confirm #address {margin: auto auto 50px auto;display: block;}
#confirm #member dl, #confirm #address dl {justify-content: space-between;border: 1px solid #ccc;}
#confirm #member dl dt, #confirm #address dl dt {width: 25%;padding: 10px;border-bottom: 1px dotted #fff;background: #e1e4f0;}
#confirm #member dl dd, #confirm #address dl dd {width: 75%;padding: 10px;border-bottom: 1px dotted #ddd;}
#confirm #member dl dt:last-of-type, #confirm #address dl dt:last-of-type, #confirm #member dl dd:last-of-type, #confirm #address dl dd:last-of-type {border-bottom: 0 none;}
#confirm #register {width: 37%;padding: 20px 30px 10px 30px;border: 1px solid #ccc;}
#confirm #register dl {margin-bottom: 20px;justify-content: center;}
#confirm #register dl dt {width: 30%;font-size: 1rem;font-weight: 600;}
#confirm #register dl dd {width: 40%;}
#confirm #register dl dd .price1, #confirm #register dl dd .price2 {line-height: 1.5;}
#confirm #register dl dd .price1 span, #confirm #register dl dd .price2 span {font-weight: 600;}
@media only screen and (max-width: 1024px) {
#confirm #cartBox {margin: auto auto 50px auto;}
#confirm #product {width: 100%;}
#confirm #product ul.itemList .bookTit {font-size: 1rem}
#confirm #register {width: 100%;}
#confirm #register dl dt {width: 30%;}
#confirm #register dl dd {width: 30%;}
}
@media only screen and (max-width: 812px) {
#confirm #cartBox {margin: auto;flex-direction: column-reverse;}
#confirm #product {margin-top: 40px;border-top: 1px solid #ccc;}
#confirm #product ul#item {display: none;}
#confirm #product ul.itemList li:first-child {width: 20%;}
#confirm #product ul.itemList li:nth-child(2) {width: 75%;}
#confirm #product ul.itemList li:nth-child(3) {width: 50%;margin-left: auto;}
#confirm #product ul.itemList li:nth-child(3) p {display: inline-block;}
#confirm #product ul.itemList li:nth-child(4) {width: 10%;}
#confirm #product ul.itemList li:first-child img {width: 100%;height: 100px;}
#confirm #product ul.itemList .bookTit {font-size: 0.8rem;}
#confirm #product ul.itemList .author {font-size: 0.6rem;}
#confirm #product ul.itemList .publisher {font-size: 0.6rem;}
#confirm #product ul.itemList .info {font-size: 0.6rem;}
#confirm #product ul.itemList li:nth-child(3) .price1 span, #confirm #product ul.itemList li:nth-child(3) .price2 span {margin: 0 5px;}
#confirm #member h3, #confirm #address h3 {font-size: 1rem;}
#confirm #register dl dt {width: 40%;}
#confirm #register dl dd {width: 40%;}
}
@media only screen and (max-width: 320px) {#confirm #register dl dt {width: 48%;}#confirm #register dl dd {width: 48%;}}

#confirm #notes {padding: 30px 30px 10px 30px;background: #fff0f0;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#confirm #notes h4 {margin: auto auto 20px auto;padding: 0 55px;position: relative;display: table;text-align: center;font-size: 1.1rem;font-weight: 600;}
#confirm #notes h4:before, #confirm #notes h4:after {content: '';width: 45px;height: 1px;position: absolute;top: 50%;display: inline-block;background-color: #555;}
#confirm #notes h4:before {left: 0;}
#confirm #notes h4:after {right: 0;}
#confirm #notes h5 {color: #ff0033;font-weight: 600;}
#confirm #notes h5 +p {margin: 10px auto 20px auto;padding: 0 12px;font-size: 0.8rem;}

#confirm #btnArea {margin-top: 70px;justify-content: center;}
#confirm #btnArea .backBtn input[type="button"] {width: 300px;margin: 0 10px;padding: 15px 0;background: #c2c2c2;color: #606060;}
#confirm #btnArea .submitBtn input[type="submit"] {width: 300px;margin: 0 10px;padding: 15px 0;display: table;background: #91b1e5;color: #fff;}
@media only screen and (max-width: 812px) {#confirm #btnArea {margin-top: 40px;}}
@media only screen and (max-width: 480px) {#confirm #btnArea .backBtn input[type="button"] {margin-bottom: 10px;padding: 10px 0;}#confirm #btnArea .submitBtn input[type="submit"] {padding: 10px 0;}}

/* ご注文の受付 --------------------------------------------------------------------------------------------------------------------------------------------------- */

#ordercomp {padding: 80px 0 100px 0;}
#ordercomp h2 {max-width: 230px;margin: auto auto 10px auto;padding-bottom: 20px;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#ordercomp h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_order.png) no-repeat 0 0;background-size: contain;}
#ordercomp h2 + p {padding-top: 30px;border-top: 1px solid #ccc;text-align: center;}
@media only screen and (max-width: 812px) {#ordercomp {padding: 180px 0 50px 0;}#ordercomp h2 {max-width: 310px;font-size: 1.1rem;}#ordercomp h2:before {width: 35px;height: 35px;left: 22%;}#ordercomp h2 + p {padding-top: 0;border-top: 0 none;}}

#ordercomp #backBtn {margin: 30px auto 0 auto;padding: 15px 100px;display: table;text-align: center;background-color: #c2c2c2;color: #606060;}

/* 購入履歴一覧 --------------------------------------------------------------------------------------------------------------------------------------------------- */

#history {padding: 30px 0 50px 0;}
/*
#history h2 {max-width: 400px;margin: auto auto 10px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#history h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_bb.png) no-repeat 0 0;background-size: contain;}
*/
@media only screen and (max-width: 812px) {#history {padding: 150px 0 50px 0;}/*#history h2 {max-width: 100%;margin-left: 40px;font-size: 1rem;}*/}

#history section {padding: 50px 0;}
#history section table {width: 48%;margin-bottom: 50px;border-collapse: separate;border: 2px solid #eee;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
#history section table:nth-of-type(odd) {margin-right: auto;}
#history section table:last-of-type {margin-bottom: 0;}
#history section table th {padding: 15px 20px;position: relative;}
#history section table th:first-of-type {background: #eee;border-bottom: 1px solid #ccc;}
#history section table th:first-of-type p {display: block;}
#history section table th .date {}
#history section table th .number {}
#history section table th .cancel {padding: 1px 10px;position: absolute;right: 15px;top: 10px;border: 1px solid #ff2222;color: #ff2222;}
#history section table th a {padding: 1px 19px;position: absolute;right: 15px;bottom: 10px;text-align: center;display: table;background: #3d62a3;color: #fff;}
#history section table td {width: 65%;padding: 5px 40px;border-bottom: 1px solid #eee;}
#history section table td.image {width: 25%;padding: 5px 0;position: relative;z-index: 5;text-align: center;background-color: #e6f2f5;border-right: 1px solid #ccc;}
#history section table td.image::after {content:'';width: 24px;height: 24px;position:  absolute;top: 45%;right: -12px;z-index: -1;border-top: 1px solid #ccc;border-right: 1px solid #ccc;background-color: #E6F2F5;transform:  rotate(45deg);}
#history section table td.image img {width: 70%;}
@media only screen and (max-width: 1024px) {#history section table td.image img {width: 80%;}}
@media only screen and (max-width: 768px) {#history section table td {padding: 5px 20px;}#history section table td.image {width: 30%;}}
@media only screen and (max-width: 812px) {
#history section table {width: 100%;margin-bottom: 30px;}
#history section table:nth-of-type(odd) {margin: 0 auto 50px auto;}
#history section table th .cancel {padding: 1px 12px;}
#history section table td.image::after {width: 15px;height: 15px;right: -8px;top: 47%;}
}

/* 現在未使用　↓↓↓↓↓
#history section {padding: 50px 0;}
#history section table {width: 100%;margin-bottom: 50px;border: 1px solid #ccc;}
#history section table:last-of-type {margin-bottom: 0;}
#history section table th, #history section table td {padding: 10px 20px;}
#history section table thead {background: #eee;}
#history section table thead th {padding: 20px;font-weight: 600;line-height: 1.3;}
#history section table thead th:nth-child(1) {width: 13%;}
#history section table thead th:nth-child(2) {width: 13%;}
#history section table thead th:nth-child(3) {width: 40%;}
#history section table thead th:nth-child(4) {width: 13%;}
#history section table thead th:nth-child(5) {width: 11%;}
#history section table tbody {width: 100%;background: #fff;}
#history section table tbody td {border-bottom: 1px solid #eee;}
#history section table tfoot {background: #fff;}
#history section table tfoot th {padding: 20px;font-weight: 600;line-height: 1.3;}
#history section table tfoot .totalPrice {width: 8%;margin-left: auto;}
@media only screen and (max-width: 1024px) {
#history section table {margin-bottom: 30px;font-size: 0.9rem;}
#history section table thead th {padding: 15px 10px;}
#history section table th, #history section table td {padding: 10px;}
#history section table tfoot th {padding: 15px 10px;}
}
@media only screen and (max-width: 812px) {
#history article {margin-bottom: 30px;padding: 20px;border: 1px solid #ccc;border-radius: 10px;}
#history article:last-of-type {margin-bottom: 0;}
#history article ul.head {margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px solid #ccc;}
#history article ul.head li:nth-child(1) {width: 20%;}
#history article ul.head li:nth-child(2) {width: 30%;}
#history article ul.head li:nth-child(3) {width: 20%;}
#history article ul.head li:nth-child(4) {width: 30%;}
#history article dl.body {justify-content: space-between;align-items: flex-end;}
#history article dl.body dt {width: 70%;padding: 5px 0;border-bottom: 1px dotted #ccc;}
#history article dl.body dd {width: 30%;padding: 5px 0;text-align: right;border-bottom: 1px dotted #ccc;}
#history article ul.foot {margin: 10px auto auto auto;justify-content: flex-end;}
#history article ul.foot li:last-child {margin-left: 15px;font-weight: 600;}
}
*/

#history #pageNation {border: 1px solid #eee;}
#history #pageNation ul {justify-content: center;}
#history #pageNation ul li {padding: 0 10px;}
#history #pageNation ul li a {padding: 5px 10px;display: block;}
#history #pageNation ul li span {padding: 5px 10px;display: block;background: #eee;font-weight: 600;}
@media only screen and (max-width: 812px) {#history #pageNation ul li {padding: 0 5px;}#history #pageNation ul li a {padding: 3px 5px;}}

/* 購入履歴詳細 --------------------------------------------------------------------------------------------------------------------------------------------------- */

#historyD {padding: 30px 0 50px 0;}
/*
#historyD h2 {max-width: 420px;margin: auto auto 10px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#historyD h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_bb.png) no-repeat 0 0;background-size: contain;}
*/
@media only screen and (max-width: 812px) {#historyD {padding: 150px 0 50px 0;}/*#historyD h2 {max-width: 350px;margin-left: 40px;font-size: 1rem;}*/}

#historyD section {padding: 50px 0 0 0;}
#historyD section table {width: 100%;margin-bottom: 50px;}
#historyD section table th {padding: 15px 20px;border: 2px solid #eee;}
#historyD section table td {padding: 5px 20px;border: 2px solid #eee;}
#historyD section table.totalPrice {text-align: right;font-size: 1.1rem;font-weight: 600;}
#historyD section table tr td.image {width: 15%;}
#historyD section table tr td.image img {width: 100%;}
@media only screen and (max-width: 1024px) {#historyD section table tr td.image {width: 25%;}}
@media only screen and (max-width: 812px) {#historyD section table {margin-bottom: 30px;}#historyD section table tr td.image {width: 30%;}}

#historyD .backBtn {width: 100%;margin-bottom: 45px;position: relative;}
#historyD .backBtn a {position: absolute;right: 0;top: 0;padding: 8px 20px;display: table;background: #3d62a3;color: #fff;}

/* ログイン ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#login {padding: 80px 0 100px 0;}
#login h2 {margin: auto auto 40px auto;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#login h2 small {display: block;color: #87a7db;font-size: 0.7rem;font-weight: normal;}
#login h2:before {content: "";width: 40px;height: 40px;margin: auto;display: block;background: url(../images/i_login.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#login {padding: 180px 0 50px 0;}#login h2 {font-size: 1.1rem;}}

#loginBox {max-width: 500px;margin: auto;padding: 40px;text-align: center;background: #fff;border: 2px solid #eee;border-radius: 10px;}
#loginBox input[type="text"], #loginBox input[type="password"] {width: 100%;margin: auto auto 10px auto;padding: 8px 10px;border: 1px solid #eee;}
#loginBox input[type="text"]::placeholder, #loginBox input[type="password"]::placeholder {color:#87a7db;}
#loginBox input[type="button"] {width: 100%;padding: 8px 10px;background: #3d62a3;color: #fff;}
#loginBox #apply-button {width: 100%;margin: auto;padding: 8px 10px;display: block;background: #3d62a3;color: #fff;}
#loginBox p, #loginBox a {margin-bottom: 10px;}
#loginBox #error {color: #ff2222;font-size: 0.8rem;}
#loginBox #lostPass {font-size: 0.8rem;}
#loginBox #lostPass:after {content: ">";margin-left: 5px;}
#loginBox #newUser {margin-top: 10px;font-size: 0.8rem;}
@media only screen and (max-width: 812px) {#loginBox {width: 90%;max-width: auto;margin: auto;padding: 20px;}}

/* 新規会員登録 ------------------------------------------------------------------------------------------------------------------------------------------------- */

#input {padding: 80px 0 100px 0;}
#input h2 {max-width: 240px;margin: auto auto 40px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#input h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_user.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#input {padding: 180px 0 50px 0;}#input h2 {max-width: 200px;font-size: 1.1rem;}}

#edit {padding: 80px 0 100px 0;}
#edit h2 {max-width: 240px;margin: auto auto 40px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#edit h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_user.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#edit {padding: 180px 0 50px 0;}#edit h2 {max-width: 200px;font-size: 1.1rem;}}

#mconf {padding: 80px 0 100px 0;}
#mconf h2 {max-width: 240px;margin: auto auto 40px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#mconf h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_user.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#mconf {padding: 180px 0 50px 0;}#mconf h2 {max-width: 200px;font-size: 1.1rem;}}

#finish {padding: 80px 0 100px 0;}
#finish h2 {max-width: 270px;margin: auto auto 40px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#finish h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_user.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#finish {padding: 180px 0 50px 0;}#finish h2 {max-width: 230px;font-size: 1.1rem;}}

#form {}
#memberForm h3 {margin: 50px auto 30px auto;font-size: 1.2rem;font-weight: 600;}
#memberForm table {width: 100%;border: 1px solid #ccc;}
#memberForm table tr {border-bottom: 1px dotted #ddd;}
#memberForm table tr:last-child {border-bottom: 0 none;}
#memberForm table th {width: 25%;padding: 10px;position: relative;background: #e1e4f0;}
#memberForm table th.nn, #memberForm table td.nn {border: none;padding-bottom: 0;}
#memberForm table th span {padding: 0 10px;position: absolute;left: 180px;color: #fff;background-color: #87a7db;text-align: center;border-radius: 10px;font-size: 0.8rem;}
#memberForm table td {padding: 10px;}
#memberForm table td small {display: block;}
#memberForm table td .err_item {color: #ff2222;font-size: 0.8rem;}
#memberForm table td .gender_btn {padding-right: 25px;}
#memberForm table td input[type="text"] {padding: 10px;border: 1px solid #ccc;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#memberForm table td input[type="password"] {padding: 5px 10px;border: 1px solid #ccc;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#memberForm table td .selectBox {width: 15%;display: inline-block;vertical-align: middle;overflow: hidden;text-align: center;background: #fff;}
#memberForm table td .selectBox.selectS {position: relative;border: 1px solid #ccc;border-radius: 3px;background: #fff;}
#memberForm table td .selectBox.selectS::before {content: '';width: 0;height: 0;padding: 0;position: absolute;top: 1em;right: 0.9em;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #555;pointer-events: none;}
#memberForm table td .selectBox.selectS:after {content: '';width: 1px;position: absolute;top: 0;right: 2.5em;bottom: 0;border-left: 1px solid #ccc;}
#memberForm table td .selectBox select {width: 100%;padding-right: 1em;cursor: pointer;text-indent: 0.01px;text-overflow: ellipsis;border: none;outline: none;background-image: none;box-shadow: none;-webkit-appearance: none;appearance: none;}
#memberForm table td .selectBox select::-ms-expand {display: none;}
#memberForm table td .selectBox.selectS select {padding: 5px 38px 5px 5px;}
#memberForm table td .year_input {width: 160px;height: 40px;}
#memberForm table td #pref_input {width: 270px;height: 40px;}
#memberForm table td #job_input {width: 100%;height: 40px;}
p#completion_txt {margin-top: 50px;padding: 50px 0;text-align: center;font-size: 24px;font-weight: 600;background-color: #eee;color: #606060;}
@media only screen and (max-width: 1024px) {#memberForm table th {width: 35%;}#memberForm table td .m_input {width: 95%;}#memberForm table td .selectBox {width: 20%;}}
@media only screen and (max-width: 812px) {
#memberForm #form h3 {margin: 30px auto 10px auto;font-size: 1rem;}
#memberForm table th p {display: inline-block;padding-top: 0;}
#memberForm table th {width: 100%;padding: 10px;display: block;font-size: 0.8rem;}
#memberForm table td {width: 100%;padding: 10px;display: block;font-size: 0.8rem;}
#memberForm table th.nn, #memberForm table td.nn {padding-bottom: 10px;}
#memberForm table td .selectBox {width: 25%;}
#memberForm table td .year_input {width: 25%;}
#memberForm table th span {position: static;display: inline-block;margin-left: 10px;}
#memberForm table #pref_input {width: 100%;}
}

#submit_button {padding-top: 55px;text-align: center;}
#submit_button button {width: 240px;margin: 0px 20px;display: inline-block;line-height: 55px;text-align: center;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#submit_button button#myreset {background-color: #c2c2c2;color: #606060;}
#submit_button button#submitBtn {background-color: #87a7db;color: #fff;}
@media only screen and (max-width: 812px) {#submit_button button {width: 100%;margin: 0 auto 10px auto;}}

#finish section {padding: 50px 30px;text-align: center;border: 1px solid #eee;border-radius: 10px;}
#finish section h3 {margin-bottom: 30px;font-size: 1.1rem;font-weight: 600;}
#finish section #backBtn {margin: 30px auto 0 auto;padding: 15px 100px;display: table;text-align: center;background-color: #87a7db;color: #fff;}
@media only screen and (max-width: 812px) {#finish section {padding: 30px 20px;}#finish section h3 {font-size: 0.9rem;}}

 /* 会員退会 ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#unsubsribe {padding: 80px 0 100px 0;}
#unsubsribe h2 {max-width: 520px;margin: auto auto 40px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#unsubsribe h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_user.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#unsubsribe {padding: 180px 0 50px 0;}#unsubsribe h2 {max-width: 280px;font-size: 1.1rem;}#unsubsribe h2:before {width: 35px;height: 35px;top: 3px;}}

#unsubsribe section {text-align: center;}
#unsubsribe section ul {width: 50%;margin: 20px auto;padding: 20px 130px;text-align: left;border: 2px solid #eee;border-radius: 10px;list-style: disc;}
#unsubsribe section ul li {margin: auto 50px;padding: 0 10px;}
#unsubsribe section p:nth-of-type(2) {margin-bottom: 40px;}
@media only screen and (max-width: 1024px) {#unsubsribe section ul {width: 80%;padding: 20px 100px;}}
@media only screen and (max-width: 812px) {#unsubsribe section ul {width: 100%;padding: 20px;}}

#unsubsribe #btnArea {margin-top: 70px;}
#unsubsribe #btnArea .backBtn {width: 240px;margin: 0px 20px;display: inline-block;line-height: 55px;text-align: center;background-color: #c2c2c2;color: #606060;}
#unsubsribe #btnArea .submitBtn {width: 240px;margin: 0px 20px;display: inline-block;line-height: 55px;text-align: center;background-color: #87a7db;color: #fff;}
@media only screen and (max-width: 812px) {#unsubsribe #btnArea .backBtn {width: 100%;margin: 0 auto 10px auto;}#unsubsribe #btnArea .submitBtn {width: 100%;margin: 0 auto;}}

/* パスワードリマインダ ------------------------------------------------------------------------------------------------------------------------------------------------ */

#reminder {padding: 80px 0 100px 0;}
#reminder h2 {max-width: 310px;margin: auto auto 40px auto;position: relative;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#reminder h2:before {content: "";width: 40px;height: 40px;position: absolute;left: 0;top: -10px;display: inline-block;background: url(../images/i_login.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#reminder {padding: 200px 0 50px 0;}#reminder h2 {max-width: 270px;font-size: 1.1rem;}#reminder h2:before {width: 35px;height: 35px;}}

#reminder section {max-width: 1000px;margin: auto;padding: 60px 20px;text-align: center;border: 2px solid #eee;border-radius: 10px;}
#reminder section p:first-of-type {margin-bottom: 30px;}
#reminder section p:first-of-type:before {content: "";width: 30px;height: 30px;margin: auto auto 20px auto;display: block;background: url(../images/i_note.png) no-repeat 0 0;background-size: contain;}
#reminder section dl {width: 80%;margin: auto;justify-content: space-between;align-items: center;}
#reminder section dl dt {width: 24%;text-align: right;}
#reminder section dl dd {width: 76%;}
#reminder section input[type="text"], #reminder section input[type="password"] {width: 100%;margin: auto auto 10px auto;padding: 5px 10px;border: 1px solid #eee;}
#reminder section input[type="email"] {width: 100%;margin: auto auto 10px auto;padding: 5px 10px;border: 1px solid #eee;}
#reminder section .error {color: #ff2222;font-size: 0.8rem;}
#reminder section label {margin: auto;text-align: center;}
@media only screen and (max-width: 1024px) {#reminder section {width: 90%;padding: 50px 30px;}#reminder section dl dt {width: 28%;}#reminder section dl dd {width: 72%;}}
@media only screen and (max-width: 812px) {#reminder section {width: 95%;padding: 20px 10px;}#reminder section p:first-of-type {font-size: 0.7rem;}#reminder section .error {font-size: 0.6rem;}#reminder section dl {width: 100%;}#reminder section dl dt {width: 100%;text-align: left;}#reminder section dl dd {width: 100%;}}

#reminder .submitBtn {margin: 30px auto 0 auto;padding: 15px 100px;display: table;text-align: center;background-color: #87a7db;color: #fff;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

/* ご利用ガイド ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#guide {padding: 80px 0 100px 0;}
#guide h2 {margin: auto auto 40px auto;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#guide h2:before {content: "";width: 40px;height: 40px;margin: auto auto 10px auto;display: block;background: url(../images/i_guide.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#guide {padding: 180px 0 50px 0;}#guide h2 {font-size: 1.1rem;}}

#guide dl {}
#guide dl dt {padding: 10px 20px;background: #eee;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#guide dl dd {padding: 30px;}
@media only screen and (max-width: 812px) {#guide dl dt {padding: 10px;font-size: 1rem;}#guide dl dd {padding: 20px 10px;}}

/* よくあるご質問 ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#faq {padding: 80px 0 100px 0;}
#faq h2 {margin: auto auto 40px auto;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#faq h2:before {content: "";width: 40px;height: 40px;margin: auto auto 10px auto;display: block;background: url(../images/i_guide.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#faq {padding: 180px 0 50px 0;}#faq h2 {font-size: 1.1rem;}}

#faq h3 {margin-bottom: 30px;padding: 0 20px;font-size: 1.5rem;font-weight: 600;line-height: 1.3;}
#faq dl {margin-bottom: 30px;}
#faq dl dt {margin-bottom: 20px;padding: 10px 20px;position: relative;display: block;cursor: pointer;border: 1px solid #ccc;font-size: 1rem;font-weight: 600;line-height: 1.3;}
#faq dl dt:after {content: "";width: 8px;height: 8px;position: absolute;right: 25px;top: 38%;transition: all 0.2s ease-in-out;display: block;border-top: solid 2px #ccc;border-right: solid 2px #ccc;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
#faq dl dt.active:after {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);top: 45%;}
#faq dl dd {margin-bottom: 20px;padding: 20px 30px;display: none;}
#faq dl dd blockquote {margin: 20px auto;padding: 30px;background: #eee;}
@media only screen and (max-width: 812px) {#faq h3 {padding: 0;font-size: 1.2rem;}#faq dl dt {padding: 10px;font-size: 0.9rem;}#faq dl dt:after {right: 10px;top: 35%;}#faq dl dd {padding: 10px;}}

/* 個人情報保護方針 ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#privacy {padding: 80px 0 100px 0;}
#privacy h2 {margin: auto auto 40px auto;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#privacy h2 small {display: block;color: #888;font-size: 0.9rem;font-weight: normal;}
#privacy h2:before {content: "";width: 40px;height: 40px;margin: auto auto 10px auto;display: block;background: url(../images/i_guide.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#privacy {padding: 180px 0 50px 0;}#privacy h2 {font-size: 1.1rem;}}
#privacy .right {text-align: right;}
#privacy strong {font-weight: 600;}

#privacy h3 {padding: 10px 20px;background: #eee;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#privacy h5 {margin-top: 30px;padding: 5px 20px;border-bottom: 1px solid #ccc;font-weight: 600;line-height: 1.3;}
#privacy p {padding: 20px 30px;}
#privacy ol {padding: 20px 30px;list-style: decimal;}
#privacy ol li {margin-bottom: 10px;}
#privacy dl {}
#privacy dl dt {padding: 10px 20px;background: #eee;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#privacy dl dd {padding: 30px;}
#privacy dl dd p {padding: 5px 0;}
#privacy blockquote {margin: 20px auto;padding: 30px;border: 3px solid #eee;}
@media only screen and (max-width: 812px) {#privacy h3 {padding: 10px;font-size: 1rem;}#privacy p {padding: 20px 10px;}#privacy ol {padding: 10px 30px;}#privacy dl dt {padding: 10px;font-size: 1rem;}#privacy dl dd {padding: 20px 10px;}}

/* 利用規約 ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#terms {padding: 80px 0 100px 0;}
#terms h2 {margin: auto auto 40px auto;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#terms h2:before {content: "";width: 40px;height: 40px;margin: auto auto 10px auto;display: block;background: url(../images/i_guide.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#terms {padding: 180px 0 50px 0;}#terms h2 {font-size: 1.1rem;}}
#terms .right {text-align: right;}

#terms h3 {padding: 10px 20px;background: #eee;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#terms p {padding: 20px 30px;}
#terms ol {margin-bottom: 30px;padding: 20px 60px;list-style: decimal;}
#terms ol li {margin-bottom: 10px;}
@media only screen and (max-width: 812px) {#terms h3 {padding: 10px;font-size: 1rem;}#terms p {padding: 20px 10px;}#terms ol {padding: 10px 30px;}}

/* 特定商取引法に基づく表示 ---------------------------------------------------------------------------------------------------------------------------------------------------------- */

#tokutei {padding: 80px 0 100px 0;}
#tokutei h2 {margin: auto auto 40px auto;text-align: center;font-size: 1.3rem;font-weight: 600;line-height: 1.3;}
#tokutei h2:before {content: "";width: 40px;height: 40px;margin: auto auto 10px auto;display: block;background: url(../images/i_guide.png) no-repeat 0 0;background-size: contain;}
@media only screen and (max-width: 812px) {#tokutei {padding: 180px 0 50px 0;}#tokutei h2 {font-size: 1.1rem;}}
#tokutei strong {padding: 10px 30px;font-weight: 600;}

#tokutei h3 {padding: 10px 20px;background: #eee;font-size: 1.1rem;font-weight: 600;line-height: 1.3;}
#tokutei h3 + h4 {margin-top: 30px;}
#tokutei h4 {padding: 0 20px;font-size: 1rem;font-weight: 600;line-height: 1.3;}
#tokutei h5 {margin-top: 30px;padding: 5px 20px;border-bottom: 1px solid #ccc;font-weight: 600;line-height: 1.3;}
#tokutei p {padding: 20px 30px;}
#tokutei strong + p {padding: 10px 30px;}
#tokutei dl {padding: 20px 30px;}
#tokutei dl dt {width: 10%;margin-right: auto;}
#tokutei dl dd {width: 85%;}
@media only screen and (max-width: 812px) {#tokutei h3 {padding: 10px;font-size: 1rem;}#tokutei h4 {padding: 10px;font-size: 0.9rem;}#tokutei p {padding: 20px 10px;}#tokutei dl {padding: 20px 10px;}#tokutei dl dt {width: 30%;}#tokutei dl dd {width: 65%;}}

/* ******************** ---------------------------------------------------------------------------------------------------------------------------------------------- */