@charset "utf-8";

div {box-sizing: border-box;}

/* フルードイメージ対応 */
img {
	max-width: 100%;
	height: auto;
	-ms-interpolation-mode: bicubic;
}
.ie8 img {
	width: auto;
}

/* Web限定デザイン図書カード　トップ */

.gentei {
	background-image: url('/gentei/common/images/top/bg_gentei.svg');
	background-position: center;
	background-size: contain;
	font-family: YuGothic, "Yu Gothic", Verdana, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;font-size: 16px;font-weight:400;line-height: 1.8;
}

.genbody {width:100%; overflow: hidden;}
@media screen and (max-width: 767px){.genbody {font-size:14px;}}

.tx-engmedium {
font-family: "haboro-contrast-normal", sans-serif;
font-weight: 500;
font-style: normal;
}

.tx-engbook {
font-family: "haboro-contrast-normal", sans-serif;
font-weight: 300;
font-style: normal;
}

.tx-engregular {
font-family: "haboro-contrast-normal", sans-serif;
font-weight: 200;
font-style: normal;
}

.tx18 {font-size: 1.125em;}
.tx-step {color: #B09548; font-size:30px;}
@media screen and (max-width: 767px){.tx-step {font-size:24px;}}
.tx-step b {font-size:166%;}
.tx-keycolor {color: #B09548;}
.tx-88 {font-size:88% !important;}

/*-- メインビジュアル --*/
.mainvisArea {
	position: relative;
	margin-top:87px;
	background: #FAF8F4;
}
.mainvisArea .mvImg {
	width: 100%;
	height:605px;
	position: relative;
	/*height:auto;*/
}

.mainvisArea .mvImg picture {
	position: absolute;
	top:0;
	right:0;	
	z-index: 10;
}
.mainvisArea .mvImg img { width:100%; height:605px; object-fit: cover; object-position: 100% 100%; }


.mainvisArea .mvCatch {
	position: absolute;
	top:104px;
	/*left:80px;
	width:462px;*/
	left: calc((80/1280)*100vw);
	width: calc((462/1280)*100vw);
	z-index: 20;
}

.mainvisArea .deliday {
	position: absolute;
	left:0;
	bottom:0;
	background:rgba(182,153,72,0.3);
	padding:25px;
	text-align: center;
	z-index: 30;
	width:100%;
}

.mainvisArea .deliday p.dayday {
	background:rgba(255,255,255,1.0);
	margin: 0 auto;
	padding:8px auto;
	border-radius: 8px;
	width:80%;
	max-width: 800px;
}

@media screen and (max-width: 810px){
.mainvisArea {/*height:75vh;*/ margin-top:60px;}
.mainvisArea .mvImg {/*height:69.3vh;*/}
.mainvisArea .mvImg picture {}
.mainvisArea .mvImg img {width:100%; height:auto;}

.mainvisArea .mvCatch { left:25px; top:55%; bottom:auto; width: calc((283/375)*100vw);}
.mainvisArea .mvCatch img { width: calc((400/800)*100vw);}
.mainvisArea .deliday p.dayday {font-size:0.875em; width:95%; padding:8px;}
}

@media screen and (max-width: 640px){
.mainvisArea .mvCatch { left:25px; top:calc((180/370)*100%); bottom:auto; width: calc((283/375)*100vw);}
.mainvisArea .mvCatch img { width: calc((283/375)*100vw);}
}

@media screen and (max-width: 640px){
.mainvisArea .mvImg {height:500px;}
}

/*-- PRポイント アイコン --*/
.topPoint { text-align: center; padding-bottom:130px; }

.topPoint .tPinner {
	max-width:1040px;
	margin:0 auto;
}

h3.bodyCcopy {
	color: #B09548;
	font-weight:400;
	font-size: 200%;
	text-align: center;
	margin:60px auto;
}

.topPoint .pointIcon {
	display: flex;
	justify-content: space-between;
	width:810px;
	flex-wrap: wrap;
	margin: 0 auto;
}

.topPoint .pointIcon img { margin-bottom:calc((30/810)*100%);}

@media screen and (max-width: 809.98px) {
.topPoint .pointIcon {width: calc((810/1040)*100vw);}
.topPoint .pointIcon img {width: calc((250/1040)*100vw);}
}
@media screen and (max-width: 767px) {
h3.bodyCcopy {font-size:150%;}
}

/*-- ラインナップ --*/
.lineUp { text-align: center; background-color: #F2EDDF; padding-bottom:130px; position: relative;}
.lineUp .lUinner {max-width:1040px;	margin:0 auto;}

h2.lu {
	color:#614C3F;
	height:83px;
	font-size:1.125em;
	position:absolute;
	text-align: left;
	font-weight:600;
	padding-left: 287px;
	top:-30px;
}
h2.lu:before {
	content:"";
	display: inline-block;
	position: absolute;
	width: 256px;
	height: 143px;
	background-image: url('/gentei/common/images/top/h2_lineup.png');
	background-position: center;
	background-size: contain;
	top: -53px;
	left: 15px;
}
h3.lUcopy {
	color: #B09548;
	font-weight:400;
	font-size: 1.5em;
	text-align: center;
	margin:0 auto 55px auto;
	padding-top:70px;
}

.lUitem {display: flex;	justify-content: space-between;	width:100%;}
.lUitem .lUitemCard {width:320px; background: #FFF;	padding:35px; border-radius: 8px;}
.lUitem .lUitemCard img { width:100%; }
.lUitem .lUitemCard h4 { font-weight:normal; margin:20px 0 25px 0; line-height:1.35; }
.lUitem .lUitemCard h4 span { font-size:1.44em;}
.lUitem .lUitemCard p { line-height:1.625; text-align:left; }
@media screen and (max-width: 767px){
.lineUp .lUinner {padding-top:50px;}
.lUitem {display:block; width:100%; }
.lUitem .lUitemCard {width:auto; margin-bottom:15px; box-sizing: border-box; padding:7.69%;}
.lUitem .lUitemCard img { width:auto; }
h2.lu {padding-left: 186px; font-size: 1em; top:-25px; }
h2.lu:before {width: 166px;	height: 93px; top:-29px;}
h3.lUcopy {font-size: 1.35em; padding-top:50px; margin:0 auto;}
}

/*-- ラッピング --*/
.wrapPing { text-align: center; background-color: #ECE3D8; padding-bottom:130px; position: relative;}
.wrapPing .wPinner {max-width:1040px; margin:0 auto;}

h2.wP {
	color:#614C3F;
	height:83px;
	font-size:1.125em;
	position:relative;
	text-align: left;
	font-weight:600;
	padding-left: 383px;
	top:-30px;
}
h2.wP:before {
	content:"";
	display: inline-block;
	position: absolute;
	width: 364px;
	height: 143px;
	background-image: url('/gentei/common/images/top/h2_wrapping.png');
	background-position: center;
	background-size: contain;
	top: -53px;
	left: 15px;
}
h3.lUcopy {
	color: #B09548;
	font-weight:400;
	font-size: 1.5em;
	text-align: center;
	margin:15px auto 55px auto;
}

.wPttl {display: flex; justify-content: center; align-items:center; margin-bottom:70px;}
.wPttl .wPttltx {margin-right:85px;}
.wPttl .wPttlicon {display: flex; justify-content:center;}
.wPttl .wPttlicon img {margin-left:15px;}
.wPttl .wPttlicon a:hover {opacity:0.7;}

.wPitem {display: grid; grid-template-areas:"itemImg itemSum"; grid-template-columns: 50% 50%; margin-bottom:37px;}
.wPitem .itemImg {grid-area: itemImg; background:#FFF; text-align:center; padding:30px auto;}
.wPitem .itemImg img { margin:30px auto; }
.wPitem .itemSum {grid-area: itemSum; border:#FFF 3px solid; padding:30px 40px;}
.wPitem .itemSum p {text-align:left; line-height:1.7; margin:35px auto 40px auto;}
@media screen and (min-width: 768px){.spWpimg {display: none;}}
@media screen and (max-width: 767px){
h2.wP {padding-left: 260px; font-size: 1em; top:-23px; }
h2.wP:before {width:240px; height:93px; top:-31px;}
.wPttl {display: block; text-align: center;}
.wPttl .wPttltx {margin:0 auto;}
/*.wPttl .wPttlicon img {margin-left:0;}*/
.wPttl .wPttlicon a:nth-of-type(1) img {margin-left:0;}
.wPitem {grid-template-areas:"itemSum" "itemImg"; grid-template-columns: 100%;}
.wPitem .itemSum {border-left:none; border-right:none; padding:30px 20px 10px 20px;}
.spWpimg {background:#FFF; text-align: center; display: block; margin-bottom:30px; padding:0 10px;}
.spWpimg img {margin:30px auto 15px auto;}
.wPitem .itemSum p {margin:35px auto 30px auto;}
.wPitem .itemImg,.wPitemop .itemopImg01,.wPitemop .itemopImg02 {display: none;}
}

.wPttlop {padding-bottom: 0 !important; height: 56px;}
.wPitemop {display: grid; grid-template-areas:"itemopImg01 itemopSum01" "itemopImg02 itemopSum02"; grid-template-columns: 50% 50%; border-top:#B09548 1px solid; border-bottom:#B09548 1px solid; align-items: center;}
.wPitemop .itemopImg01,
.wPitemop .itemopImg02 {background:#FFF; text-align:center; padding:30px auto; height:100%;}
.wPitemop .itemopImg01 {grid-area: itemopImg01; border-bottom:#ECE3D8 1px solid; }
.wPitemop .itemopImg02 {grid-area: itemopImg02;}
.wPitemop .itemopImg01 img { margin:35% auto 15% auto; }
.wPitemop .itemopImg02 img { margin:25% auto; }
.wPitemop .itemopSum01,
.wPitemop .itemopSum02 {background: #F9F7F3; padding:30px 40px;}
.wPitemop .itemopSum01 {grid-area: itemopSum01; border-bottom:#ECE3D8 1px solid;}
.wPitemop .itemopSum02 {grid-area: itemopSum02;}
.wPitemop .itemopSum01 p,
.wPitemop .itemopSum02 p {text-align:left; line-height:1.7; margin:35px auto 43px auto;}
@media screen and (max-width: 767px){
.wPitemop {grid-template-areas:"itemopSum01" "itemopImg01" "itemopSum02" "itemopImg02"; grid-template-columns: 100%; margin-top:-24px;}
.wPitemop .itemopImg01,
.wPitemop .itemopImg02 {height:auto; padding-left:20px; padding-right:20px;}
.wPitemop .itemopImg01 img,
.wPitemop .itemopImg02 img { margin:30px auto; }
.wPitemop .itemopSum01,
.wPitemop .itemopSum02 {background: #F9F7F3; padding: 30px 20px 10px 20px;}
.wPitemop .itemopSum01 p,
.wPitemop .itemopSum02 p {margin:35px auto 30px auto;}

}

.btn-wP .btnto {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: 49px;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  width:100%;
}
.btn-wP .btnto {
  background: url(/gentei/order/images/btn_arrow_go.svg) right 20px center no-repeat #B59948;
  display: block;
  font-size: 1.25em;
  line-height: 1.5;
  padding: 20px 40px;
  border: 2px solid #B59948;
  box-sizing: border-box;
}
.btn-wP .btnto:hover {
  background: url(common/images/top/btn_arrow_about.svg) right 20px center no-repeat #FFFFFF;
  color: #B59948;
}
.btn-wP .btnto:clicked {
  background: url(common/images/top/btn_arrow_about.svg) right 20px center no-repeat #FFFFFF;
  color: #B59948;
}

@media screen and (max-width: 767px){.btn-wP .btnto {font-size:1em; max-width: 400px;}}

/*-- オーダー（注文の流れ） --*/
.orderFlow { text-align: center; padding-top:80px; padding-bottom:130px; }
.orderFlow .oFinner {max-width:1040px; margin:0 auto;}

h2.oF {
	color:#614C3F;
	height:83px;
	font-size:1.125em;
	position:relative;
	text-align: left;
	font-weight:600;
	padding-left: 275px;
	z-index: 50;
}
h2.oF:before {
	content:"";
	display: inline-block;
	position: absolute;
	width: 246px;
	height: 143px;
	background-image: url('/gentei/common/images/top/h2_order.png');
	background-position: center;
	background-size: contain;
	top: -55px;
	left: 15px;
}

h3.oStep {
	height:58px;
	font-size:1.33em;
	position:relative;
	text-align: left;
	padding-left: 114px;
	border-bottom:#707070 1px solid;
	font-weight:500;
	margin-top:40px;
	margin-bottom:30px;
}
h3.oStep:before {
	content:"";
	display: inline-block;
	position: absolute;
	width: 83px;
	height: 68px;
	background-position: center;
	background-size: contain;
	top: -25px;
	left: 20px;
}

.step1:before {background-image: url('/gentei/common/images/top/step1.png');}
.step2:before {background-image: url('/gentei/common/images/top/step2.png');}
.step3:before {background-image: url('/gentei/common/images/top/step3.png');}

.oFbody {background:#FFF; padding:30px 40px 60px 40px; text-align:left; margin-top:-55px; font-size: 1.125em; font-weight:500; position: relative;}
.oFbody .flowImg {text-align:center;}
.oFbody .flowImg img {margin:0 auto;}
.oFbody p {padding-left:24px;}

.stepCom {display: grid; grid-template-areas:"comstep1 comstep2 comstep3"; grid-template-columns: 27% 27% 27%; justify-content: space-between; margin-top:20px;}
.stepCom .comstep1 {grid-area: comstep1;}
.stepCom .comstep2 {grid-area: comstep2;}
.stepCom .comstep3 {grid-area: comstep3;}
.stepCom .comstep1,
.stepCom .comstep2,
.stepCom .comstep3 {background: #F9F7F3; padding:15px 15px 15px 35px; box-sizing: border-box;}
ul.flowstep {list-style: url("common/images/top/flow_listcircle.svg"); font-size: 0.88em;}
ul.flowstep li {margin-bottom:8px; letter-spacing:-0.06em; }
.txDeli {margin-left:8%; margin-top:30px;}
.delicom {position:absolute; right:40px; bottom:-95px; width:26.4%;}

@media screen and (max-width: 767px){
h2.oF {padding-left: 180px; font-size: 1em; height:78px; }
h2.oF:before {width:162px; height:93px; top:-31px;}
.oFbody {line-height: 1.75; padding:30px 30px 100px 30px;}
.oFbody p {padding-left:0;}
h3.oStep {height:42px; padding-left: 59px; margin-top:30px; margin-bottom:20px;}
h3.oStep:before {width: 54px; height: 51px; top: -17px;	left: 0;}
.step1:before {background-image: url('/gentei/common/images/top/step1_sp.png');}
.step2:before {background-image: url('/gentei/common/images/top/step2_sp.png');}
.step3:before {background-image: url('/gentei/common/images/top/step3_sp.png');}
.step1FlowSp { display: flex; justify-content: space-between;}
.step1FlowSp .flowImg {width:39.6%;}
.stepCom {display: grid; grid-template-areas:"comstep1" "comstep2" "comstep3"; grid-template-columns: 100% 100% 100%; margin-top:0; gap:20px; width:57%;}
.txDeli {margin-left:0; margin-top:25px; text-align: center;}
.txDeli picture {margin:0 auto;}
.delicom {left: 50%; bottom:-95px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width:187px;}
}
@media screen and (max-width: 548px){
ul.flowstep {font-size: 0.8em;}
.stepCom .comstep1,.stepCom .comstep2,.stepCom .comstep3 {padding:15px 15px 15px 28px;}
h3.oStep {font-size:1em !important; font-weight:600;}
}


/*-- Attentionご注意 --*/
.atTention { text-align: center; padding-top:80px; padding-bottom:130px; }
.atTention .aTinner {max-width:1040px; margin:0 auto;}

h2.aT {
	color:#614C3F;
	height:83px;
	font-size:1.125em;
	position:relative;
	text-align: left;
	font-weight:600;
	padding-left: 393px;
	z-index: 50;
}
h2.aT:before {
	content:"";
	display: inline-block;
	position: absolute;
	width: 374px;
	height: 143px;
	background-image: url('/gentei/common/images/top/h2_attention.png');
	background-position: center;
	background-size: contain;
	top: -55px;
	left: 15px;
}

li span.indent{text-indent: 0;margin-left: 1em; display: block;}

/* アコーディオン */
.aTsumm {
  border-radius: 8px;
  margin: 40px auto 10px auto;
  width:86%;
  text-align: left;
}

/* アコーディオンのヘッダー */
.aTttl {
  padding: 20px 25px 25px 25px;
  background-color: #F2EDDF;
  cursor: pointer;
  outline: none;
  position: relative;
  list-style: none;
  height:70px;
  box-sizing: border-box;
  border-radius: 8px;
}

.aT-content {
  padding: 17px 25px 20px 50px;
  background: #FFF;
  border-radius: 0 0 8px 8px;
  animation:1s forwards attsumm;
  animation-iteration-count: 1;
}

@keyframes attsumm {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100;
    }
}

.aTttl::after {
  content: "";
  display: inline-block;
  position: absolute;
  background-image:url('/gentei/order/images/btn_arrow_extention.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width:24px;
  height:24px;
  right:30px;
  top:23px;
  transition: transform 0.2s ease-in-out; 
}

/* アコーディオンが開いている時 */
.aTsumm[open] .aTttl::after {transform: rotate(180deg);}
.aTsumm[open] .aTttl {border-radius: 8px 8px 0 0;} 
.aTsumm .aTttl::-webkit-details-marker {display: none;}

@media screen and (max-width: 767px){
h2.aT {padding-left: 245px; font-size: 1em; height:35px; }
h2.aT:before {width:237px; height:93px; top:-31px; left:0;}
.aTsumm {width:100%;}
.aT-content ul.flowstep {font-size: 1em !important;}
}


.btn-go {text-align: center;}
.btn-go .abtn {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: 49px;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;  background: url(/gentei/order/images/btn_arrow_go.svg) right 20px center no-repeat #5F4C3F;
  display: block;
  font-size: 1.875em;
  padding: 23px 50px;
  border: 2px solid #5F4C3F;
  width:440px;
}
.btn-go .abtn:hover {
  background: url(/gentei/order/images/btn_arrow_go_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}
.btn-go .abtn:clicked {
  background: url(/gentei/order/images/btn_arrow_go_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}

.bnrtoOrig {text-align: center; margin-top: 70px; }
.bnrtoOrig a {margin:0 auto; }
.bnrtoOrig a:hover {opacity:0.7; }
.bnrtoOrig a img {width:70%; max-width: 680px;}

/*-- 関連サイトリンク --*/
.linkBtnArea {background:#F9F7F3; text-align: center; padding-top:50px; padding-bottom:70px; margin-top:70px; margin-bottom:-70px; mix-blend-mode: multiply;}
.linkBtnArea .lBAinner {max-width:1040px; margin:0 auto; font-weight: 600; }

.btn-goTosho {display: flex; justify-content: space-between; flex-wrap: wrap;}
.btn-goTosho .abtnTosho,
.btn-goTosho .goOnlinest,
.btn-goTosho .goNext {
  font-weight: 700;
  text-decoration: none;
  border-radius: 49px;
  text-align: center;
  margin: 20px auto 0 auto;
  cursor: pointer;
  font-size: 1.375em;
  padding: 15px 30px;
  box-sizing: border-box;
  display: block;
}

.btn-goTosho .abtnTosho {border: 2px solid #B59948; background: url(/gentei/order/images/btn_arrow_go.svg) right 20px center no-repeat #B59948; color: #FFFFFF; width: 46%;}
.btn-goTosho .abtnTosho:hover { background: url(common/images/top/btn_arrow_about.svg) right 20px center no-repeat #FFFFFF; color: #B59948;}
.btn-goTosho .abtnTosho:clicked { background: url(common/images/top/btn_arrow_about.svg) right 20px center no-repeat #FFFFFF; color: #B59948;}
.btn-goTosho .goOnlinest { border: 2px solid #B4A89C; background:url(/gentei/order/images/btn_arrow_go.svg) right 20px center no-repeat #B4A89C; color: #FFFFFF; width: 46%;}
.btn-goTosho .goOnlinest { border: 2px solid #B4A89C; background:url(/gentei/order/images/btn_arrow_go.svg) right 20px center no-repeat #B4A89C; color: #FFFFFF; width: 46%;}
.btn-goTosho .goOnlinest:hover { background: url(/gentei/common/images/top/btn_arrow_goonline_on.svg) right 20px center no-repeat #FFFFFF; color: #B4A89C ;}
.btn-goTosho .goOnlinest:clicked { background: url(/gentei/common/images/top/btn_arrow_goonline_on.svg) right 20px center no-repeat #FFFFFF; color: #B4A89C;}
.btn-goTosho .goNext { width:96%; border: 2px solid #B59948; background:url(common/images/top/btn_arrow_about.svg) right 20px center no-repeat #FFF ; color:#B59948; }
.btn-goTosho .goNext:hover { background: url(/gentei/order/images/btn_arrow_go.svg) right 20px center no-repeat #B59948 ; color: #FFF;}
.btn-goTosho .goNext:clicked { background: url(/gentei/order/images/btn_arrow_go.svg) right 20px center no-repeat #B59948; color: #FFF;}


@media screen and (max-width: 767px){
.lineUp,.atTention,.wrapPing {padding-bottom:70px;}
.orderFlow {padding-bottom:100px;}
.lineUp .lUinner,
.atTention .aTinner,
.linkBtnArea .lBAinner {width:100%; padding:0 20px; box-sizing: border-box;}
.wrapPing .wPinner,.orderFlow .oFinner {width:100%; margin:0;}

.btn-go .abtn {margin: 0 auto;max-width: 700px;width: 90%;box-sizing: border-box;font-size:26px; background-size:20px;background-position: right 25px center; padding: 18px 26px;}
.btn-go .abtn:hover {background-size:20px;background-position: right 25px center;}
.bnrtoOrig {margin-top: 50px; }
.bnrtoOrig a img {width:90%; max-width: 560px;}
.btn-goTosho .abtnTosho, .btn-goTosho .goOnlinest, .btn-goTosho .goNext {font-size:1em; background-size:20px !important;}
}

@media screen and (max-width: 640px){
.btn-goTosho {display: block;}
.btn-goTosho .abtnTosho, .btn-goTosho .goOnlinest, .btn-goTosho .goNext {width:100% !important; padding:15px 15px 15px 10px; background-position: right 10px center;}	
}

/* アナウンス */

.special-infobl {
    border: #CC0000 1px solid;
	color: #CC0000;
    /*padding: 1.5em;*/
	padding:1em 1.5em;
    margin: 22px auto 1.5em auto;
    line-height: 160%;
    text-align: center;
	font-weight: bold;
	width:90%;
	max-width: 800px;
}

.special-infobl a {color: #CC0000;}
.special-infobl span.notice { display: inline-block; background:#CC0000; color:#FFF; margin-right:1em; padding:0.25em 0.25em 0.25em 0.5em; letter-spacing: 0.25em; }

.tx-red {color: #CC0000; font-weight: bold;}