@charset "utf-8";
/********************************************************/
/******** 共通（body,inner,pタグ,imgタグの基本設定） ********/
/*******************************************************/
/*basis*/
body { font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,  "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; color: #555; }
@media only screen and (max-width:1000px){
  body { font-size: 1.4rem;}
}

p { font-size: 1.4rem; line-height: 1.5; font-weight: 500; overflow-wrap: break-word; transform: rotate(0.03deg);}
ol, ul{ list-style-type:none; }
li { font-size: 1.4rem; line-height: 1.5; font-weight: 500; transform: rotate(0.03deg);}
a:hover { opacity: 0.8;}
a {text-decoration: none; color: #555; font-size: 1.4rem;  line-height: 1.5; text-decoration-color: #00893A;}
table { border-collapse: collapse; }
th { font-size: 1.4rem; line-height: 1.5; font-weight: normal; text-align: center; padding: 10px; border: solid 1px #555;}
td { font-size: 1.4rem; line-height: 1.5; padding: 10px; border: solid 1px #000;}
dt { font-size: 1.4rem; line-height: 1.5; transform: rotate(0.03deg);}
dd { font-size: 1.4rem; line-height: 1.5; transform: rotate(0.03deg);}
img[src$=".svg"] { width: 100%; height: 100%; object-fit: contain;}
@media only screen and (max-width:1000px){
  img { width: 100%; height: auto;}
  img[src$=".svg"] { width: 100%; height: auto;}
}
button:hover { opacity: 0.8;}

h3 { font-size: 2.4rem; font-weight: 700;}
h4 { font-size: 2.2rem; font-weight: 700;}

.pcOnly {}
.spOnly { display: none;}
@media only screen and (max-width:1000px){
  .pcOnly { display: none;}
  .spOnly { display: block;}
}

#page-top { width: 60px; height: 60px; position: fixed; right: 0; bottom: 0; z-index: 3;}



/***********************/
/****** レイアウト ******/
/**********************/
/*大枠(grid-layout)*/
/*.wrap {
  background: #fff9ea;
  display: grid;
  grid-template-rows: 80px 1fr 270px;
  grid-template-columns: 1fr 330px 40px minmax(auto,1000px) 1fr;
}
.headerWrap {
  grid-row: 1 / 2;
  grid-column: 3 / 5;
}
.sidebarWrap {
  grid-row: 1 / 3;
	grid-column: 2 / 3;
  border-left: solid 20px #008A32;
}
.mainWrap {
  min-height: calc(100vh - (80px + 270px));
  grid-row: 2 / 3;
	grid-column: 4 / 5;
}
.footerWrap {
  grid-row: 3 / 4;
	grid-column: 1 / 6;
  background: #E8E4E4;
  border-left: solid 20px #E8E4E4;
}
*/
.whiteWrap {
  padding: 45px 60px 0 60px;
  background: #fff;
  max-width: 1380px;
  margin: 0 auto;
}
.wrapper {
  background: #e3ebc7;;
}
.wrap {
  /*background: #F8F6F1;*/
  background: #f9f6ed;
  /*padding: 0 30px;*/
  display: grid;
  grid-template-rows: 155px 1fr;
  grid-template-columns: 340px 50px minmax(auto,870px);
  border-radius: 40px 40px 0 0;
}
.headerWrap {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  position: relative;
}
.sidebarWrap {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  padding: 40px 0 0 40px;
}
.mainWrap {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  padding-right: 40px;
}
.headerLogo {
  position: absolute;
}
@media only screen and (max-width:1000px){
  .wrapper { padding: 0 1%;}
  .whiteWrap { padding: 15px 4% 0;}
  .wrap { display: block;}
  .mainWrap { padding: 0 5%;}
  .sidebarWrap { display: none;}
}

/*inner・wrap系*/
/*.inner { width: 95%; max-width: 1000px; margin: 0 auto;}*/
.sectionWrap { padding: 30px;}
.contBox + .contBox { margin-top: 40px;}
.box + .box { margin-top: 20px;}
.box90p { width: 90%; margin: 30px auto 0;}
.box80p { width: 80%; margin: 30px auto 0;}
@media only screen and (max-width:1000px){
  .inner { width: 90%; min-width: auto;}
  .sectionWrap { padding: 30px 5%;}
  .box90p { width: 100%;}
  .box80p { width: 100%;}
}

/****** ヘッダー ******/
.headerNavArea { padding: 30px;}
.headerLogo { text-align: center;}
.headerNav { align-items: center; margin-top: 20px; margin-left: auto; background: #fff; padding: 10px 10px 10px 20px; border-radius: 50px;}
.headerNav li + li { /*border-left: solid 1px #000000;*/ margin-left: 1em; padding-left: 1em;}
.headerNav li { font-size: 1.2rem;}
.headerNav li a { font-size: 1.2rem; font-weight: 400; color: #555; text-decoration-color: #707070;}
.headerNav li a:hover { text-decoration: underline; text-underline-offset: 5px;}
.headerNavCart { background: linear-gradient( to bottom right, #ce627b 50%, #be3858 50% ); border-radius: 50px; padding: 5px 10px;}
.headerNav li.headerNavCart img { width: auto; height: 15px; margin-right: 0.5em;}
.headerNav li.headerNavCart a { color: #fff;}

@media only screen and (max-width:1000px){
  .headerNavArea { padding: 0;}
  .headerNav { display: none;}
  .headerLogo { /*display: none;*/ position: static; width: 70%;}
  .spLogo { width: 55%; margin: 0 auto; padding: 30px 0;}
}

/****** フッター ******/
.footerWrap { padding: 60px 0 30px;}
.footerWrap { background: #E8E4E4;}
.footerWrap > .flex { margin: 0 auto;}
.footerWrap > .copyright { margin: 0 auto;}
.footerLeft { width: 330px; text-align: center;}
.footerRight { width: calc(100% - 420px);}
.footerRight p { margin-bottom: 10px;}
.footerNavArea { }
.footerNav { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 30px;}
.footerNav li + li { border-left: solid 1px #000000; margin-left: 1em; padding-left: 1em;}
.footerNav li a { font-size: 1.6rem; font-weight: 500;}
.copyright { font-size: 1.3rem; text-align: right; padding-right: 60px; margin-top: 30px;}

@media only screen and (max-width:1000px){
  .footerArea { padding: 80px 5% 40px;}
  .footerLeft { width: 50%; margin: 0 auto;}
  .footerRight { display: none;}
  .copyright { text-align: center; margin-top: 30px; padding: 0;}
}

/****** サイドバー ******/
.sidebarArea {}
.headlineSidebarMenu { color: #fff; font-size: 1.6rem; font-weight: 400; text-align: center; background: linear-gradient( to bottom right, #ff9329 50%, #ff8700 50% ); padding: 6px 0 8px; border-radius: 50px;}
.headlineSidebarMenu span { font-size: 1.2rem; font-weight: 100;}
/*.headlineSidebarMenu::before { content: ""; display: block; width: 15px; height: 20px; background: #ffc87e; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); clip-path: polygon(35% 0%, 100% 0%, 65% 100%, 0% 100%); position: absolute; top: -2px; left: 2px;}*/
.headlineSidebarMenu.bgBlue { background: linear-gradient( to bottom right, #3384b4 50%, #0064a0 50% );}
.headlineSidebarMenu.bgBlue::before { background: #5F90BF;}

.sidebarMenu { margin: 8px 0px 30px 0px;}
.sidebarMenu li a { display: block; background: #fff; color: #555; font-size: 1.6rem; font-weight: 400; margin-bottom: 5px; padding: 5px 0 5px 35px; position: relative; border-radius: 50px;}
.sidebarMenu li a span { font-size: 1.4rem;}
.sidebarMenu li a::before { content: ""; display: block; width: 18px; height: 18px; border-radius: 50px; background: #ff8700; position: absolute; left: 10px; top: 9px;}
.sidebarMenu li a::after { content: ""; display: block; width: 8px; height: 8px; border: solid 1px #ffffff; border-top: none; border-left: none; transform: rotate(-45deg); position: absolute; left: 13px; top: 14px;}
.sidebarMenu.blueMenu li a::before { background-color: #0064a0;}

/*.newsBox { margin-left: 20px; margin-right: 10px;}*/
.newsBox + .newsBox { margin-top: 30px;}
.headlineBackground { width: 80%; font-size: 1.8rem; font-weight: 400; color: #fff; text-align: center; background: linear-gradient( to bottom right, #00a76c 50%, #009044 50% ); padding: 2px 0 4px; border-radius: 15px 15px 0 0;}
.headlineBackground.bgBlue { width: 50%; background: linear-gradient( to bottom right, #3384b4 50%, #0064a0 50% );}
.newsContArea { background: #fff; border-radius: 0 15px 15px 15px; padding: 15px;}

.updateText { margin-top: 20px; font-size: 1.1rem; color: #555; font-weight: 500;}
@media only screen and (max-width:1000px){
 .hamburgerMenu .sidebarWrap { display: block; padding: 10px 0 30px;}
}

/*mainWrap下の共通設定*/
.contentsWrap { /*width: calc(100% - 10px); height: 100%; margin-left: 10px;*/ border-radius: 30px 30px 0 0; background: #fff; /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);*/}
.home .contentsWrap { padding-top: 30px;}

/*cart*/
.cartBox { width: 90px; height: 70px; border-radius: 15px; background: #fff;}
.cartBox a { display: block; width: 100%; height: 100%; background: linear-gradient( to bottom right, #ce627b 50%, #be3858 50% ); border-radius: 15px; color: #fff; font-size: 1.2rem; font-weight: 400; text-align: center; padding: 7px 0;}
.cartBox img[src$=".svg"] { width: 22px; height: auto;}
.cartBox p { font-size: 1.2rem; font-weight: 400;}

.pageCartWrap { position: relative;}
.pageCartWrap .cartBox { position: absolute; top: 60px; right: 25px; z-index: 5;}

@media only screen and (max-width:1000px){
  .pageCartWrap { position: static;}
  .pageCartWrap .cartBox { width: 105px; height: 42px; position: fixed; top: 15px; right: calc(5% + 50px); border-radius: 10px;}
  .pageCartWrap .cartBox a { display: flex; justify-content: center; align-items: center; padding: 5px ; border-radius: 10px;}
  .pageCartWrap .cartBox img { width: 20px; height: auto; margin-right: 5px;}
  .pageCartWrap .cartBox p { font-size: 1.1rem; line-height: 1.2;}
}


/* パンくず */
.breadcrumbs { padding: 20px 30px 20px;}
.breadcrumbs p { font-size: 1.3rem; color: #555; font-weight: 400;}
.breadcrumbs a { font-size: 1.3rem; color: #555; font-weight: 400;}
.breadcrumbs a:hover { text-decoration: underline;}
.breadcrumbs span { font-size: 1.3rem; color: #555; font-weight: 400;}

@media only screen and (max-width:1000px){

}




/***********************/
/******** パーツ *******/
/**********************/
/*margin・padding*/
.mgnS { margin: 20px 0;}
.mgnM { margin: 40px 0;}
.mgnL { margin: 80px 0;}
.mgnBM { margin-bottom: 40px;}
.mLa { margin-left: auto!important;}
.mRa { margin-right: auto!important;}
.mgnNegS { margin: -20px;}
.mgnNegM { margin: -40px;}
.mgnNegL { margin: -80px;}
.pdgS { padding: 20px;}
.pdgM { padding: 40px;}
.pdgL { padding: 80px;}
.pdgBS { padding-bottom: 50px;}
.pdgBM { padding-bottom: 100px;}
.pdgBL { padding-bottom: 150px;}
@media only screen and (max-width:1000px){
  .mgnS { margin: 20px 0;}
  .mgnM { margin: 20px 0;}
  .mgnL { margin: 40px 0;}
  .pdgS { padding: 10px;}
  .pdgM { padding: 20px;}
  .pdgL { padding: 40px;}
  .pdgBS { padding-bottom: 40px;}
  .pdgBM { padding-bottom: 60px;}
  .pdgBL { padding-bottom: 80px;}

}

/*iframe*/
.googleMap iframe { max-width: 100%; }
.youtube iframe { /*aspect-ratio: 10 / 6;*/ max-width: 100%; }
@media only screen and (max-width:1000px){
  .googleMap iframe { max-height: 500px ;}
}

/*font*/
.fsS { font-size: 1.2rem;}
.fsM { font-size: 1.6rem;}
.fsL { font-size: 2.0rem;}
.fcWhite { color: #fff;}
.fcBlack { color: #000;}
.fcRed { color: #DC000C;}

/*indent*/
.indent1 { padding-left: 40px;}
.outdent1 { text-indent: -1em; padding-left: 1em;}
.outdent2 { text-indent: -2em; padding-left: 2em;}
.outdent3 { text-indent: -3.2em; padding-left: 3.2em;}
@media only screen and (max-width:1000px){
  .indent1 { padding-left: 0px;}
}

/*background*/
.bgWhite { background-color: #fff;}
.bgBlack { background-color: #000;}
.bgGray { background-color: #F4F5F4;}
.bgBiDarkBlue { background: linear-gradient( to bottom right, #0088ce 50%, #007ac9 50% ) ;}
.bgBiOrange { background: linear-gradient( to bottom right, #ff9329 50%, #ff8700 50% ) ;}
.bgBiPink { background: linear-gradient( to bottom right, #ec1a90 50%, #e60183 50% ) ;}
.bgBiBlue { background: linear-gradient( to bottom right, #00bff2 50%, #00b7f2 50% ) ;}
.bgBiPurple { background: linear-gradient( to bottom right, #dd32f5 50%, #d617f3 50% ) ;}
@media only screen and (max-width:1000px){
  .bgSlantingBlue:before { height: 100px; top: -99px;}
}

/*フォーム*/
input { border: solid 1px #999; padding: 10px; font-size: 1.6rem; color: #000;}
textarea { border: solid 1px #999; padding: 10px; font-size: 1.6rem; caret-color: #000;}
select { font-size: 1.6rem;}
input[type="submit"] { width: 20%; padding: 10px; margin: 10px; background: #ccc; color: #000; border: none; border-radius: 0; font-size: 1.6rem; cursor: pointer;}
input[type="reset"] { width: 20%; padding: 10px; margin: 10px; background: #ccc; color: #000; border: none; border-radius: 0; font-size: 1.6rem;}
@media only screen and (max-width:1000px){
  /*iphoneだとform関係のfont-sizeを1.6remより小さくすると勝手に拡大させられる*/
  input { font-size: 1.6rem;}
  textarea { font-size: 1.6rem;}
  select { font-size: 1.6rem;}
  input[type="submit"] { width: 60%; font-size: 1.6rem;}
  input[type="reset"] { width: 60%; font-size: 1.6rem;}
}

/*ボタン*/
.btn { display: block; background: #fff; margin: 10px; color: #000;}
.btn a { min-width: 250px; text-align: center;}
.btn a:hover { opacity: 0.5;}
.btnBlack { text-align: center; width: 320px; background: none;}
.btnBlack a { display: block; background: #333333; color: #fff; padding: 10px; font-size: 1.8rem; font-weight: 700; position: relative; border-radius: 0;}
.btnBlack a:after { content: ""; width: 9px; height: 20px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); background-image: url(../images/arrow.svg); background-repeat: no-repeat; background-size: contain;}

.btnWhite { max-width: 300px;}
.btnWhite a { display: block; max-width: 300px; text-align: center; padding: 18px; color: #fff; border: solid 1px #fff; position: relative;}
.btnWhite a::after { content: ""; width: 8px; height: 23px; position: absolute; top: 0; right: 0; background-image: url(../images/arrow-white.svg); background-repeat: no-repeat; background-position: center; top: 50%; right: 25px; transform: translateY(-50%);}
.btnWhite a:hover::before { content: ""; display: block; width: 80%; height: 1px; background: #fff; position: absolute; bottom: 20%; left: 10%;}

.roundBtn { width: 140px; height: 140px; border-radius: 20px; overflow: hidden; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);}
.roundBtn a { /*display: flex; justify-content: center; align-items: center;*/ display: block; width: 100%; height: 100%; border-radius: 20px; color: #fff; font-size: 1.7rem; font-weight: 400; text-align: center; position: relative; padding: 10px 0; line-height: 1.2;}
.roundBtn a span { display: block; width: 100%; font-size: 1.3rem; position: absolute; bottom: 20px;}
.roundBtn a .icon { display: block; width: 100%; height: 31px; font-size: 1.3rem; text-align: center; position: static; margin-bottom: 10px;}
.roundBtn a::after { content: ""; display: block; width: 12px; height: 12px; border: solid 2px #fff; border-top: none; border-left: none; transform: translateX(-50%) rotate(45deg); position: absolute; bottom: 10px; left: 50%;}

.bicolorGreenBtn { max-width: 430px; /*box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);*/ border-radius: 50px;}
.bicolorGreenBtn a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 1.5rem; font-weight: 500; text-align: center; padding: 10px 15px 10px 0; background: linear-gradient( to bottom right, #34b700 50%, #00aa00 50% ); position: relative; border-radius: 50px;}
/*.bicolorGreenBtn a::before { content: ""; display: block; width: 22px; height: 30px; position: absolute; top: -5px; left: 5px; clip-path: polygon( 40% 0%, 100% 0%, 60% 100%, 0% 100%);}
.bicolorGreenBtn.tagBlue a::before { background-color: #35bef0;}
.bicolorGreenBtn.tagOrange a::before { background-color: #DC9A42;}
.bicolorGreenBtn.tagRed a::before { background-color: #B23A48;}
.bicolorGreenBtn.tagGreen a::before { background-color: #78DC13;}*/
.bicolorGreenBtn a::after { content: ""; display: block; width: 12px; height: 12px; border: solid 3px #fff; border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 50%; right: 10px;}

.bicolorGreenBtn.fzSmall a { font-size: 1.4rem;}
.bicolorGreenBtn.round a::before { width: 20px; height: 20px; clip-path: none; border-radius: 10px;}
.bicolorGreenBtn.roundDarkBlue a::before { background: #2087ca;}
.bicolorGreenBtn.roundOrange a::before { background: #f09236;}
.bicolorGreenBtn.roundPink a::before { background: #cb208c;}
.bicolorGreenBtn.roundBlue a::before { background: #35bef0;}
.bicolorGreenBtn.roundPurple a::before { background: #be35f0;}

/*buttonタグ用*/
button.bicolorGreenBtn { max-width: 430px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 1.5rem; font-weight: 500; text-align: center; padding: 10px; background: linear-gradient( to bottom right, #34b700 50%, #00aa00 50% ); position: relative; cursor: pointer;}
button.bicolorGreenBtn:hover { opacity: 0.8;}
button.bicolorGreenBtn::before { content: ""; display: block; width: 22px; height: 30px; position: absolute; top: -5px; left: 5px; clip-path: polygon( 40% 0%, 100% 0%, 60% 100%, 0% 100%);}
button.bicolorGreenBtn::after { content: ""; display: block; width: 12px; height: 12px; border: solid 3px #fff; border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 50%; right: 10px;}
button.bicolorGreenBtn.fzSmall { font-size: 1.4rem;}
/*inputタグ用*/
.contactBtn { max-width: 430px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); margin: 0 auto;}
.bicolorGreenBtn input { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 1.5rem; font-weight: 500; text-align: center; padding: 10px; background: linear-gradient( to bottom right, #34b700 50%, #00aa00 50% ); position: relative; margin: 0; border-radius: 50px;}
.bicolorGreenBtn input:hover { opacity: 0.8;}
div.bicolorGreenBtn::before { content: ""; display: block; width: 22px; height: 30px; position: absolute; top: -5px; left: 5px; clip-path: polygon( 40% 0%, 100% 0%, 60% 100%, 0% 100%);}
div.bicolorGreenBtn::after { content: ""; display: block; width: 12px; height: 12px; border: solid 3px #fff; border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 50%; right: 10px;}
.wpcf7-spinner { display: none!important;}

.bicolorGreenBtn.fzSmall a { font-size: 1.4rem;}
.bicolorGreenBtn.fzSmall input { font-size: 1.4rem;}

.bicolorGreenBtn input::after {}

.bicolorGrayBtn { max-width: 430px; /*box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);*/background: linear-gradient( to bottom right, #f2f2f2 50%, #e7e7e7 50% ); padding: 2px; border-radius: 50px;}
.bicolorGrayBtn a { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; align-content: center; line-height: 1.2; width: 100%; height: 100%; font-size: 1.4rem; font-weight: 500; background: linear-gradient( to bottom right, #f2f2f2 50%, #e7e7e7 50% ); border-radius: 50px; border: solid 1px #CCCCCC; padding: 5px 15px 5px 0; text-align: center; position: relative;}
.bicolorGrayBtn a span { font-size: 1.0rem;}
.bicolorGrayBtn a:hover { opacity: 0.5;}
.bicolorGrayBtn.colorDarkBlue a { color: #0088ce; border-color: #0088ce;}
.bicolorGrayBtn.colorOrange a { color: #ff9329; border-color: #ff9329;}
.bicolorGrayBtn.colorPink a { color: #ec1a90; border-color: #ec1a90;}
.bicolorGrayBtn.colorBlue a { color: #00bff2; border-color: #00bff2;}
.bicolorGrayBtn.colorPurple a { color: #dd32f5; border-color: #dd32f5;}
.bicolorGrayBtn.colorGreen a { color: #707070; border-color: #707070;}
/*.bicolorGrayBtn a::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 10px; position: absolute; top: -7px; left: 3px;}
.bicolorGrayBtn.colorDarkBlue a::before { background-color: #2087ca;}
.bicolorGrayBtn.colorOrange a::before { background-color: #f09236;}
.bicolorGrayBtn.colorPink a::before { background-color: #cb208c;}
.bicolorGrayBtn.colorBlue a::before { background-color: #15C6E6;}
.bicolorGrayBtn.colorPurple a::before { background-color: #B81EEE;}
.bicolorGrayBtn.colorGreen a::before { background-color: #45A843;}*/
.bicolorGrayBtn a::after { content: ""; display: block; width: 10px; height: 10px; border: solid 2px; border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 50%; right: 7px;}
.bicolorGrayBtn.colorDarkBlue a::after { border-color: #2087ca;}
.bicolorGrayBtn.colorOrange a::after { border-color: #f09236;}
.bicolorGrayBtn.colorPink a::after { border-color: #cb208c;}
.bicolorGrayBtn.colorBlue a::after { border-color: #1EB5EE;}
.bicolorGrayBtn.colorPurple a::after { border-color: #B81EEE;}

button.bicolorRedBtn { max-width: 430px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 1.5rem; font-weight: 500; text-align: center; padding: 10px; background: linear-gradient( to bottom right, #b71500 50%, #aa0000 50% ); position: relative; cursor: pointer; border-radius: 50px;}
button.bicolorRedBtn:hover { opacity: 0.8;}
button.bicolorRedBtn::before { content: ""; display: block; width: 22px; height: 30px; position: absolute; top: -5px; left: 5px; clip-path: polygon( 40% 0%, 100% 0%, 60% 100%, 0% 100%);}
button.bicolorRedBtn::after { content: ""; display: block; width: 12px; height: 12px; border: solid 3px #fff; border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 50%; right: 10px;}
button.bicolorRedBtn.fzSmall { font-size: 1.4rem;}


.arrowBtn { max-width: 320px;}
.arrowBtn a { display: block; width: 100%; height: 100%; font-size: 1.5rem; font-weight: 500; color: #2a649d; text-align: center; position: relative;}
.arrowBtn.colorBlue a { background: linear-gradient( to bottom right, #f2f2f2 50%, #e7e7e7 50% ); border-radius: 15px; padding: 5px 10px; text-align: center; padding: 15px 10px 15px 0;}
.arrowBtn a::after { content: ""; display: block; width: 11px; height: 11px; border: solid 3px #2a649d; border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 68%; right: 13px;}
.arrowBtn span { display: block; text-align: center; margin-bottom: 5px;}
.arrowBtn img { width: auto; height: 26px;}

@media only screen and (max-width:1000px){
  .btnBlack { margin: 10px auto; width: 100%; max-width: 300px;}
  .btnBlack a { font-size: 1.6rem;}
  .btnWhite a { padding: 9px 18px;}
  .btnGreen { width: 90%; margin: 40px auto 0;}
  .btnGreen a { max-width: 350px; padding: 9px 26px 9px 18px;}
  .btnGreen a::after {right: 15px;}

  .roundBtn { /*width: 140px; height: 140px;*/ width: 45%;}
  .roundBtn a { font-size: 1.8rem;}
  .roundBtn a span { font-size: 1.4rem; bottom: 22px;}
  .roundBtn .icon img[src$=".svg"] { height: 100%; width: auto;}

  .bicolorGreenBtn a { font-size: 1.8rem; padding-right: 20px; padding-left: 15px;}
  button.bicolorGreenBtn { font-size: 1.8rem;  padding-right: 20px; padding-left: 15px;}
  .bicolorGrayBtn a { padding: 10px 15px 10px 7px; min-height: 50px;}

}

/*text*/
.textN { font-size: 1.6rem; line-height: 1.7;}
.textB { font-size: 1.8rem; line-height: 1.5.3;}
.textS { font-size: 1.4rem; line-height: 1.9;}

/*ブロック左寄せ・右寄せ*/
/*左寄せ*/
.boxAreaLeft { max-width: 1230px; width: 90%; margin-left: auto; margin-right: calc(((100% - 1230px) / 2) + 65px);}
/*右寄せ*/
.boxAreaRight { max-width: 1230px; width: 90%; margin-right: auto; margin-left: calc(((100% - 1230px) / 2) + 65px);}
@media only screen and (max-width:1230px){
  .boxAreaLeft { margin: 0 auto; }
  .boxAreaRight { margin: 0 auto; }
}

/*ハンバーガーメニュー*/
  .hamburger { display: none;}
  .hamburgerMenu { display: none;}
@media only screen and (max-width:1000px){
  .hamburger { display: block; width: 42px; height: 42px; cursor: pointer; text-align: center; z-index:11;  position: fixed; right: 5%; top: 15px; border: solid 3px #008A32; border-radius: 5px; background: #fff;}
  .hamburger span { display: block; position: absolute; width: 24px; height: 3px; right: 6px; background :#008A32; border-radius: 4px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
  .hamburger span:nth-child(1) { top: 7px;}
  .hamburger span:nth-child(2) { top: 16px;}
  .hamburger span:nth-child(3) { top: 25px;}
  .hamburger.active { /*border-color: #fff;*/}
  .hamburger.active span:nth-child(1) { width: 24px; top: 17px; left: 6px;-webkit-transform: rotate(-45deg);-moz-transform : rotate(-45deg);transform: rotate(-45deg); /*background: #fff;*/}
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) { width: 24px; top: 17px; -webkit-transform: rotate (45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); /*background: #fff;*/}
  .hamburgerMenu { display: block; background: #F8F6F1; background-repeat: no-repeat; z-index: 10; position: fixed; left: -100%; top: 0; width: 90%; height: 100%; padding: 30px 15px 0; transition: 0.5s ease-in-out; box-shadow: 0 0 5px #999; overflow: hidden;}
  .hamburgerMenu.active { overflow-y: auto; transition: 0.5s ease-in-out; left: 0;}
}


/*link,linkText*/
/*aタグに何が付いているかで付くものが変わります。contentの中身を変更することで好きな表示に出来ます。*/
.link { margin-top: 20px; margin-bottom: 10px;}
.link[target="_blank"]:after { content: "→"; display: inline-block; padding-left: 0.5em;}
.link[href^="#"]:after { content: "↓"; display: inline-block; padding-left: 0.5em;}
.link[href$=".docx"]:after { content: "Word"; display: inline-block; margin-left: 0.5em; background: #0000ff; padding: 0px 5px; border-radius: 5px; color: #fff;}
.link[href$=".xlsx"]:after { content: "Excel"; display: inline-block; margin-left: 0.5em; background: #008000; padding: 0px 5px; border-radius: 5px; color: #fff;}
.link[href$=".pdf"]:after { content: "PDF"; display: inline-block; margin-left: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.link[href$=".jpg"]:after { content: "画像"; display: inline-block; margin-left: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.4rem;}
.link[href$=".png"]:after { content: "画像"; display: inline-block; margin-left: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.4rem;}
.linkText { border-bottom: solid 1px #999; margin-top: 20px; margin-bottom: 10px;}
.linkText a { font-size: 1.5rem;}
.linkText a[target="_blank"]:before { content: "→"; display: inline-block; padding-right: 0.5em;}
.linkText a[href^="#"]:before { content: "↓"; display: inline-block; padding-right: 0.5em;}
.linkText a[href$=".docx"]:before { content: "Word"; display: inline-block; margin-right: 0.5em; background: #0000ff; padding: 0px 5px; border-radius: 5px; color: #fff;}
.linkText a[href$=".xlsx"]:before { content: "Excel"; display: inline-block; margin-right: 0.5em; background: #008000; padding: 0px 5px; border-radius: 5px; color: #fff;}
.linkText a[href$=".pdf"]:before { content: "PDF"; display: inline-block; margin-right: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.linkText a[href$=".jpg"]:before { content: "画像"; display: inline-block; margin-right: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.linkText a[href$=".png"]:before { content: "画像"; display: inline-block; margin-right: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}

.btnGreen .link[target="_blank"]:after { background: none; position: static; transform: none;}

.toTop {position: fixed; bottom: 5%; right: 5%;}

/*▶系　width・heightの数値をいじると大きさが変わります。*/
.arrowT { position: relative;}
.arrowT:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #000;}
.arrowR { position: relative;}
.arrowR:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 0%,100% 50%, 0% 100% ); background: #000;}
.arrowB { position: relative;}
.arrowB:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); background: #000;}
.arrowL { position: relative;}
.arrowL:before { content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); clip-path: polygon(0% 50%, 100% 0%, 100% 100%); background: #000;}

/*headline*/
.headlineBig { font-size: 2.6rem; font-weight: 700; margin-bottom: 10px;}
.headlineBold { font-size: 3.2rem; font-weight: 700; margin-bottom: 20px;}

.headlineBoldCenter { font-size: 2.2rem; font-weight: 700; text-align: center; margin: 20px 0;}
.headlineBoldLeft { font-size: 2.4rem; font-weight: 400; margin: 40px 0 30px;}

.headlineBicolor { width: calc(100% - 60px); font-size: 2.2rem; color: #fff; font-weight: 400; text-align: center; background: linear-gradient( to bottom right, #ff9329 50%, #ff8700 50% ); margin: 0 auto; padding: 5px 0; border-radius: 50px;}
.headlineBicolor span { padding: 10px 0;}
/*.headlineBicolor::before , .headlineBicolor::after { content: ""; display: block; width: 22px; height: 30px; background: #ffc87e; clip-path: polygon(35% 0%, 100% 0%, 65% 100%, 0% 100%);}
.headlineBicolor::before { align-self: flex-start; margin-top: -2px;}
.headlineBicolor::after { align-self: flex-end; margin-bottom: -2px;}*/
.headlineBicolor.biBlue { background: linear-gradient( to bottom right, #5583b1 50%, #2a649d 50% );}
.headlineBicolor.biBlue::before , .headlineBicolor.biBlue::after { background: #5F90BF;}

.headlineTopLeftBorder { font-size: 2.0rem; font-weight: 700; color: #3B4E32; border-top: solid 2px #56A902; padding: 10px 0 10px 45px; position: relative;}
.headlineTopLeftBorder::before { content: ""; display: block; width: 37px; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient( to bottom right, #6fb628 50%, #56A902 50% ); clip-path: polygon(0% 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);}

.headlineDiskUnderline { display: flex; justify-content: flex-start; gap: 5px; font-size: 2.6rem; color: #007ac9; font-weight: 700; padding-left: 25px; border-bottom: solid 2px #007ac9; position: relative;}
.headlineDiskUnderline::before { content: ""; display: block; width: 20px; height: 20px; background: #007ac9;}

.headlineRoundBiColorCenter { font-size: 2.2rem; font-weight: 700; display: flex; justify-content: center; align-items: flex-start; margin: 50px 0;}
.headlineRoundBiColorCenter span { color: #fff; position: relative; z-index: 0;}
.headlineRoundBiColorCenter span::before { content: ""; display: block; width: 60px; height: 60px; border-radius: 30px; background: linear-gradient( to bottom right, #0088ce 50%, #007ac9 50% ); position: absolute; z-index: -1; right: -1px; top: 50%; transform: translateY(-50%);}
/*カテゴリ別色変更 1・3はブルー*/
.category11 .headlineRoundBiColorCenter span::before { background: linear-gradient( to bottom right, #ff9329 50%, #ff8700 50% );}
.category4 .headlineRoundBiColorCenter span::before { background: linear-gradient( to bottom right, #ec1a90 50%, #e60183 50% );}
.category2 .headlineRoundBiColorCenter span::before { background: linear-gradient( to bottom right, #00bff2 50%, #00b7f2 50% );}
.category5 .headlineRoundBiColorCenter span::before { background: linear-gradient( to bottom right, #dd32f5 50%, #d617f3 50% );}
.category9 .headlineRoundBiColorCenter span::before { background: linear-gradient( to bottom right, #ff9329 50%, #ff8700 50% );}
.category6 .headlineRoundBiColorCenter span::before { background: linear-gradient( to bottom right, #ec1a90 50%, #e60183 50% );}
.category7 .headlineRoundBiColorCenter span::before { background: linear-gradient( to bottom right, #00bff2 50%, #00b7f2 50% );}
.category8 .headlineRoundBiColorCenter span::before { background: linear-gradient( to bottom right, #dd32f5 50%, #d617f3 50% );}

.headlineRoundBiColorLeft { font-size: 1.8rem; font-weight: 700; padding-left: 30px; margin: 30px 0 20px;}
.headlineRoundBiColorLeft span { color: #fff; position: relative; z-index: 0;}
.headlineRoundBiColorLeft span::before { content: ""; display: block; width: 40px; height: 40px; border-radius: 30px; background: linear-gradient( to bottom right, #34b700 50%, #00aa00 50% ); position: absolute; z-index: -1; right: -2px; bottom: -4px;}

.headlineLeftSlanting { font-size: 2.0rem; font-weight: 500; color: #3F3F40; color: #555; padding-left: 30px; margin-bottom: 20px; position: relative;}
.headlineLeftSlanting::before { content: ""; width: 22px; height: 30px; background: #00aa00; clip-path: polygon( 40% 0%, 100% 0%, 60% 100%, 0% 100%); position: absolute; left: 0; top: -2px;}
.headlineLeftSlanting.small { font-size: 1.8rem;}

.headlineUnderline { font-size: 1.8rem; font-weight: 400; text-decoration: underline; text-underline-offset: 10px; text-decoration-color: #00aa00; text-decoration-thickness: 1px; margin-bottom: 20px;}

.headlineBorderBottom { font-size: 1.6rem; font-weight: 700; color: #3B4E32; border-bottom: solid 2px #00aa00; margin-bottom: 10px; padding-bottom: 10px;}

.headlineRound { padding-left: 25px; font-size: 2.4rem; font-weight: 700; border-bottom: solid 2px #007ac9; padding-bottom: 10px; margin-bottom: 10px; position: relative;}
.headlineRound::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 10px; background: #007ac9; position: absolute; left: 0; top: 10px;}
/*カテゴリ別色変更*/
.category11 .headlineRound { border-color: #ff8700;}
.category11 .headlineRound::before { background-color: #ff8700;}
.category4 .headlineRound { border-color: #e60183;}
.category4 .headlineRound::before { background-color: #e60183;}
.category2 .headlineRound { border-color: #00b7f2;}
.category2 .headlineRound::before { background-color: #00b7f2;}
.category5 .headlineRound { border-color: #d617f3;}
.category5 .headlineRound::before { background-color: #d617f3;}
.category9 .headlineRound { border-color: #ff8700;}
.category9 .headlineRound::before { background-color: #ff8700;}
.category6 .headlineRound { border-color: #e60183;}
.category6 .headlineRound::before { background-color: #e60183;}
.category7 .headlineRound { border-color: #00b7f2;}
.category7 .headlineRound::before { background-color: #00b7f2;}
.category8 .headlineRound { border-color: #d617f3;}
.category8 .headlineRound::before { background-color: #d617f3;}

.headlineCenterJaEnTop { text-align: center; line-height: 1.2; margin-bottom: 7px;}
.headlineCenterJaEnTop span { border: solid 1px #258f4b; color: #258f4b; font-size: 1.3rem; font-weight: 300; padding: 0px 5px 2px;}
.headlineCenterJaEn { text-align: center; font-size: 2.0rem; font-weight: 900; color: #258f4b; letter-spacing: 0.18em;}
.headlineCenterJaEn span { display: block; font-size: 1.1rem; font-weight: 700; margin-top: 3px; color: #666666;}

.headlineLeftJaEn { text-align: left; font-size: 2.0rem; font-weight: 900; color: #258f4b; letter-spacing: 0.18em;}
.headlineLeftJaEn span { display: block; font-size: 1.1rem; font-weight: 700; margin-top: 3px; color: #666666;}


@media only screen and (max-width:1000px){
  .headlineBold { font-size: 2.2rem;}
  .headlineLeftSlanting { font-size: 1.8rem;}
  .headlineUnderline { font-size: 1.4rem; text-underline-offset: 8px; line-height: 2;}

  .headlineBicolor { width: 100%; padding: 7px 10px 10px;}
  .headlineRoundBiColorLeft { padding-left: 40px;}

  .headlineCenterJaEn { font-size: 1.8rem; line-height: 1.2;}
  .headlineCenterJaEn span { font-size: 1.2rem;}
}


/*table*/
.tableBgGreen { width: 100%; padding: 7px 10px 10px; line-height: 1.2; font-size: 2.0rem;}
.tableBgGreen th { font-size: 1.4rem; background: #e3ebc7; text-align: center; padding: 10px 5px; font-weight: 500; vertical-align: middle;}
.tableBgGreen td { font-size: 1.4rem; text-align: center; padding: 10px 5px; font-weight: 500; vertical-align: middle;}
.tableBgGreen td.w_print { width: 50px;}
.tableBgGreen td.w_poster { width: 70px;}
.tableBgGreen td.w_code { width: 60px;}
.tableBgGreen td.w_name { text-align: left;}
.tableBgGreen td.w_tanka { text-align: right; min-width: 80px;}
.tableBgGreen td.w_busuu { min-width: 50px;}
.tableBgGreen td.w_kakaku { text-align: right; min-width: 80px;}

@media only screen and (max-width:1000px){
  .tableBgGreen th { font-size: 1.4rem;}
  .tableBgGreen td { font-size: 1.3rem; vertical-align: middle; padding: 10px 0;}
}


/*list*/
.greenRoundList li { padding-left: 25px; position: relative; margin-bottom: 3px;}
.greenRoundList li::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 10px; background: #d4e9be; position: absolute; left: 0; top: 3px;}
.greenRoundList li a { text-decoration: underline;}
.greenRoundList li a:hover { text-decoration: none;}

/*アニメーション系*/
.appear { animation: appear 0.5s ease forwards;}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*ページごとのcss*/

/*商品詳細*/
.itemMainImg { width: 48%; max-height: 500px;}
.itemMainImg img { width: 100%; height: 100%; object-fit: contain;}
.itemMainImg:hover { opacity: 0.8; cursor: pointer;}
.itemDetailBox { width: 50%;}
.itemTagBox { display: flex; justify-content: flex-start; gap: 10px 5px; flex-wrap: wrap; margin-bottom: 20px;}
.itemTag { padding: 5px 10px; border-radius: 20px; color: #fff; font-size: 1.4rem; font-weight: 400;}
.itemTag span { font-size: 1.0rem; margin-left: 0.3em;}
.itemTag.tagDarkBlue { background-color: #3384b4;}
.itemTag.tagOrange { background-color: #ff9329;}
.itemTag.tagPink { background-color: #ec1a90;}
.itemTag.tagBlue { background-color: #00bff2;}
.itemTag.tagPurple { background-color: #dd32f5;}
.itemTag.cat1 { background-color: #3384b4;}
.itemTag.cat11 { background-color: #ff9329;}
.itemTag.cat4 { background-color: #ec1a90;}
.itemTag.cat2 { background-color: #00bff2;}
.itemTag.cat5 { background-color: #dd32f5;}
.itemTag.cat3 { background-color: #3384b4;}
.itemTag.cat9 { background-color: #ff9329;}
.itemTag.cat6 { background-color: #ec1a90;}
.itemTag.cat7 { background-color: #00bff2;}
.itemTag.cat8 { background-color: #ff9329;}
.itemTag.cat10 { background-color: #0064a0;}
.itemCode { display: inline-block; font-size: 1.4rem; padding: 10px 15px; margin-bottom: 20px; border: solid 3px #D8D8D8;}
.itemType { margin-bottom: 20px;}
.itemPrice { margin-bottom: 10px;}
.itemPrice span { display: inline-block; font-size: 2.4rem; font-weight: 700; color: #B23A48; margin: 0 10px;}
.pieceBox { display: flex; justify-content: center; gap: 5px 15px; flex-wrap: wrap; align-items: center; width: 49%; background: #d4e9be; padding: 10px 0;}
.pieceBox p {}
.pieceBox input { width: 40%; padding: 5px 10px;}
.pieceBox .pieceError { width: 100%; color: #FF0000; text-align: center;}
.cartButton { width: 49%;}
.cartButton a { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 1.6rem; font-weight: 700; text-align: center; padding: 10px; background: linear-gradient( to bottom right, #6fb628 50%, #56A902 50% ); padding: 5px 10px; padding: 5px 15px; position: relative; gap: 10px;}
.cartButton a img { width: 29px; height: 30px; }
.cartButton a::after { content: ""; display: block; width: 12px; height: 12px; border: solid 3px rgba(255,255,255,0.5); border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 50%; right: 10px;}
.itemDetailText { margin-top: 50px;}
.cartButton button { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 1.6rem; font-weight: 500; text-align: center; padding: 10px; background: linear-gradient( to bottom right, #6fb628 50%, #56A902 50% ); padding: 5px 10px; padding: 5px 15px; position: relative; gap: 10px; margin: 0; cursor: pointer;}
.cartButton button img { width: 29px; height: 30px; }
.cartButton button::after { content: ""; display: block; width: 12px; height: 12px; border: solid 3px rgba(255,255,255,0.5); border-top: none; border-left: none; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 50%; right: 10px;}
.itemDetailText { margin-top: 50px;}
.itemContentsBox { background: #f9f6ed; border-radius: 20px; padding: 30px 20px; margin-top: 50px;}
.itemContentsBox p + p { margin-top: 10px;}
.itemPhotoBox { display: flex; justify-content: flex-start; gap: 2%; margin: 30px 0;}
.itemPhotoItem { width: calc( 94% / 4); max-height: 200px; background: #999; padding: 10px;}
.itemPhotoItem img { width: 100%; height: 100%; object-fit: contain;}
.itemPhotoItem:hover { opacity: 0.8; cursor: pointer;}
.borderBoldBox { border: solid 10px #E3E1DC; border-radius: 20px; padding: 30px;}
.postageBpx { margin-top: 60px;}
.postageBpx.dvdItem { display: none!important;}
.postageItem { padding: 10px 0px 20px 25px;}
.postageItem + h4 { margin-top: 30px;}

/*商品画像ポップアップ*/
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); animation: fadeIn 0.3s;}
.modalContent { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0; border-radius: 12px;}
.modalImage { display: flex; justify-content: center; align-items: center; background: #fff; padding: 20px;}
.modalImage img { max-width: 90vw; max-height: 90vh; object-fit: contain;}
.close { position: absolute; right: 25px; top: 15px; color: #fff; font-size: 35px; font-weight: bold; cursor: pointer; z-index: 1001; text-shadow: 0 0 10px rgba(0,0,0,0.5); transition: transform 0.2s;}
.close:hover,
.close:focus { color: #fff; transform: scale(1.2);}
@media only screen and (max-width:1300px){
  /*.itemMainImg { width: 55%; min-width: 300px; order: 2;}
  .itemDetailBox { width: 100%; order: 1; margin-bottom: 10px;}*/
  .pieceBox { width: 100%; max-width: 250px;}
  .cartButton { width: 100%; max-width: 250px; margin-top: 20px;}
}
@media only screen and (max-width:1000px){
  .itemMainImg { width: 80%; height: 400px; margin: 0 auto;}
  .itemDetailBox { width: 100%;}
  .borderBoldBox { padding: 30px 15px;}
  .itemType { margin-bottom: 20px;}

  .postageItem {padding: 5px 0 20px 10px;}

  .modalImage img {  max-width: 70vw; max-height: 70vh;}
}

/*買い物カゴ*/
.shoppingWrap { width: 90%; margin: 0 auto;}
.contBox + .shoppingWrap { margin-top: 40px;}
.lastSessionBox { background: #d4e9be; border-radius: 15px; margin: 30px 0; padding: 30px 20px;}
.lastSessionSearchArea { margin-top: 20px; gap: 20px;}
.lastTellBox p { margin-right: 1em;}
.lastTellBox input { width: 135px;}
.lastEmailBox p { margin-right: 1em;}
.lastEmailBox input { width: 260px;}
.lastButton { width: 115px; font-size: 1.6rem; color: #fff; background: #666666;}
.shoppingTopBtnArea { margin: 20px 0;}
.shoppingTopBtnArea p { width: 215px;}
.shoppingTopBtnArea button { width: 215px;}


.shoppingFormWrap { width: 90%; margin: 0 auto 80px; /*padding-left: 35px;*/}
.shoppingFormWrap:last-child { margin-bottom: 40px;}
.shoppingForm dl { display: flex; justify-content: flex-start; gap: 30px; border-bottom: dashed 2px #CCCCCC; padding: 5px 0 ;}
.shoppingForm dl dt { width: 180px; background: #d4e9be; font-size: 1.6rem; font-weight: 700; color: #3B4E32; display: flex; justify-content: center; align-items: center; padding: 5px 0;}
.shoppingForm dl dt .required { color: #B23A48; margin-left: 0.5em;}
.shoppingForm dl dd { width: calc(100% - 210px); font-size: 1.6rem; font-weight: 500;}
.shoppingForm select { padding: 10px; margin: 5px 0;}
.shoppingForm input {/* margin: 5px 0;*/}
.order .shoppingForm dl dd { padding: 5px 0;}

.lastSessionAddBox { padding-left: 30px; margin-bottom: 50px;}
.lastSessionAddBox input { margin-right: 0.5em; width: 20px; height: 20px; margin: 0 10px; vertical-align: bottom;}
.lastSessionAddBox label { font-size: 1.6rem; font-weight: 500;}

.questionnaireBox { background: #F8F6F1; border-radius: 20px; margin: 50px 0 20px; padding: 30px;}
.questionnaireWrap { padding-left: 40px;}
.greenRound { margin: 20px 0 20px 30px; position: relative;}
.greenRound::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 10px; background: #56A902; position: absolute; left: -25px; top: 5px;}
.questionnaireItem { padding-left: 20px; margin-bottom: 40px;}
.questionnaireItem p { margin-bottom: 5px; font-size: 1.7rem;}

.shoppingBtnArea { margin-top: 20px;}
.shoppingBtnArea p { width: 215px;}
.shoppingBtnArea button { width: 215px;}
.shoppingBtnArea div { display: block; width: 215px; position: relative;}
.bicolorGreenBtn.prev a::after { transform: translateY(-50%) rotate(135deg); right: auto; left: 10px;}
button.bicolorGreenBtn.prev::after { transform: translateY(-50%) rotate(135deg); right: auto; left: 10px;}
div.bicolorGreenBtn.prev::after { transform: translateY(-50%) rotate(135deg); right: auto; left: 10px;}

.cartTableArea { width: 80%; margin: 0 auto;}
.cartTableOptionArea { width: 80%; margin: 0 auto;}
.cartTableArea + .cartTableOptionArea { margin-top: 20px;}
.cartTableOptionArea + .cartTableArea { margin-top: 40px;}
.cartTable input { font-size: 1.4rem;}
.cartTable th { vertical-align: middle;}
.cartTable td { vertical-align: middle;}
.cartTable td.w_name { text-align: left;}
.cartTable td.w_busuu  { width: 120px;}

.cartConf .cartTableArea { width: 90%;}
.cartConf .cartTableOptionArea { width: 90%;}
.cartConf .cartTable .w_busuu  { width: auto;}

@media only screen and (max-width:1000px){
  .shoppingWrap { width: 100%;}
  .lastButton { margin: 15px auto; padding: 10px;}
  .shoppingFormWrap { width: 100%; margin-left: 0; padding-left: 0;}
  .shoppingForm dl { flex-wrap: wrap; gap: 10px; margin: 10px 0; padding: 10px 0;}
  .shoppingForm dl dt { width: 100%; padding: 15px 0;}
  .shoppingForm dl dd { width: 100%;}
  .lastSessionAddBox { padding-left: 0;}
  .lastEmailBox input { width: 100%;}

  .questionnaireWrap { padding: 0;}
  
  .cartTableArea { display: block; width: 100%; overflow: scroll;}
  .cartTable { width: 200%;}
  .cartTable th { }
  .cartTable td { padding: 10px;}
  td.cellBottom { padding: 10px;}
}

/*A4カート*/
.cartA4TableArea { width: 90%; margin: 0 auto;}
@media only screen and (max-width:1000px){
  .cartA4TableArea { display: block; width: 100%; overflow: scroll;}
}


/*商品一覧*/
.itemListWrap { padding: 30px 0; position: relative; z-index: 1;}
.itemListWrap::before { content: ""; display: block; width: 95%; height: 100%; background: #f9f6ed; border-radius: 15px; position: absolute; top: 0; right: 0; z-index: -1;}
.itemListWrap + .itemListWrap { margin-top: 50px;}
.itemListTitleArea { width: 25%; min-width: 150px;}
.itemListArea { width: 70%; max-width: calc(100% - 170px);}
.itemListArea li { padding-left: 25px; padding-right: 15px; font-size: 1.6rem; margin-bottom: 10px; position: relative;}
.itemListArea li::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 10px; background: #0088ce; position: absolute; top: 3px; left: 0;}
.itemListArea li a { text-decoration: underline;}
/*カテゴリ別色変更*/
.category11 .itemListArea li::before { background-color: #ff9329;}
.category4 .itemListArea li::before { background-color: #ec1a90 ;}
.category2 .itemListArea li::before { background-color: #00bff2;}
.category5 .itemListArea li::before { background-color: #dd32f5;}
.category9 .itemListArea li::before { background-color: #ff9329;}
.category6 .itemListArea li::before { background-color: #ec1a90 ;}
.category7 .itemListArea li::before { background-color: #00bff2;}
.category8 .itemListArea li::before { background-color: #dd32f5;}

@media only screen and (max-width:1000px){
  .itemListTitleArea { width: 100%;}
  .itemListTitleArea .headlineRound { width: 80%;}
  .itemListTitleArea .bicolorGreenBtn { width: 80%; margin-left: auto;}
  .itemListArea { width: 80%; max-width: none; margin: 20px 5% 0 auto;}

}

/*A4オーダーチラシ*/
.flierContBox { width: 95%; margin: 0 auto 30px;}
.flierImgBox { width: 45%; position: relative;}
.flierImgTextBox { width: 95%; border: solid 5px #ff8800; background: #fff3e3; border-radius: 15px; text-align: center; padding:20px 25px; position: absolute; bottom: 0; left: 3%;}
.flierImgTextBox::before { content: ""; display: block; width: 30px; height: 20px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #ff8800; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);}
.flierTextBox { width: 51%; align-self: flex-end;}
.flierTextBox dt { display: inline-block; font-size: 1.4rem; border: solid 3px #008A32; border-radius: 12px; padding: 3px 13px; font-weight: 700;}
.flierTextBox dd { margin: 10px 0 20px; font-size: 1.8rem; font-weight: 500;}
.flierTextBox p + p { margin-top: 10px;}
.flierOrderBox { width: 80%; margin: 30px auto;}
.flierTextBig { padding: 5px 10px; background: #e3ebc7; margin: 10px 0; border: solid 2px #279b52; font-size: 1.5rem;}


.a4orderLinkArea ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 2%; margin: 20px 0 30px;}
.a4orderLinkArea li { /*width: calc(88% / 7);*/ width: auto;}
.a4orderLinkArea li a { display: block; width: 100%; background: #279b52; color: #fff; font-size: 1.3rem; font-weight: 500; padding: 5px 30px 5px 15px; text-align: center; position: relative;}
.a4orderLinkArea li a::after { content: ""; display: block; width: 10px; height: 10px; border: solid 3px rgba(255, 255, 255, 0.5); border-top: none; border-left: none; transform: translateY(-50%) rotate(45deg); position: absolute; top: 42%; right: 10px;}
.a4orderLinkArea + p { margin-bottom: 30px;}

.flierItem { display: flex; justify-content: center; border: solid 1px #82c8df; margin: 20px 0 20px 40px;}
.flierItemImgArea { width: 130px; padding: 10px 15px 10px;}
.flierItemImgArea .popImg { cursor: pointer;}
.flierItemDataArea { width: calc(100% - 210px); display: flex; flex-wrap: wrap; border: solid 1px #82c8df; border-top: none; border-bottom: none;}
.flierItemDataArea dt { background: #cae8f2; text-align: center; padding: 5px 0;}
.flierItemDataArea dd { border: solid 1px #82c8df; border-left: none; border-right: none; padding: 5px; text-align: center; height: 100%; vertical-align: middle;}
.flierItemDataArea .cord { width: 20%; min-width: 70px;}
.flierItemDataArea .cord dt { border-right: solid 1px #82c8df;}
.flierItemDataArea .cord dd { border-right: solid 1px #82c8df;}
.flierItemDataArea .title { width: 80%; max-width: calc(100% - 70px);}
.flierItemDataArea .cont { width: 100%;}
.flierItemDataArea .cont dd { border-bottom: none; text-align-last: left;}
.flierItemChoiceArea { /*width: calc((100% - 150px) * 0.3 );*/ width: 80px;}
.flierItemChoiceArea p { text-align: center;}
.flierItemChoiceArea input { display: block; margin: 0 auto;}
.flierItemChoiceArea input:hover { background-color: #ddd;}
.flierItemChoiceArea input:disabled { opacity: 0.5; pointer-events: none;}
.flierItemChoiceArea input + p { margin-top: 10px;}

@media only screen and (max-width:1000px){
  .flierImgBox { width: 100%; max-width: 350px; margin: 0 auto 30px; padding-bottom: 50px;}
  .flierImgTextBox { width: 100%; left: 0;}
  .flierTextBox { width: 100%;}

  .flierPlaceArea { width: 100%; overflow-y: auto;}
  .flierPlaceTable { width: 220%;}
  .flierOrderBox { width: 90%;}

  .a4orderLinkArea li { width: calc(94% / 2);}

  .flierItem { flex-wrap: wrap; margin-left: 20px;}
  .flierItemImgArea  { width: 100%; padding: 10px; text-align: center;}
  .flierItemImgArea img { width: 50%; max-width: 300px;}
  .flierItemDataArea  { width: 100%; padding: 10px 0;}
  .flierItemChoiceArea  { width: 100%; padding: 10px 0;}
  .flierItemDataArea { border: none;}
  .flierItemDataArea dt { border: none;}
  .flierItemDataArea dd { border: none; padding: 10px;}
  .flierItemDataArea .cord { width: 100%; border: solid 1px #82c8df; border-left: none; border-right: none;}
  .flierItemDataArea .title { width: 100%; max-width: none; border: none; border-bottom: solid 1px #82c8df;}
  .flierItemDataArea .cont { border: none; border-bottom: solid 1px #82c8df;}
  .flierItemDataArea .cord dt { border: none;}
  .flierItemDataArea .cord dd { border: none;}
  .flierItemDataArea dd { min-height: auto;}
  .flierItemChoiceArea { display: flex; justify-content: center;}
  .flierItemChoiceArea .front { width: 48%;}
  .flierItemChoiceArea .back { width: 48%;}
}

/*A4check*/
.flierCheckImg { width: 35%; align-self: center; text-align: center;}
.flierCheckImg img { box-shadow: 0 6px 6px #999;}
.flierCheckTextBox { width: 60%;}
.flierCheckTextBox th { vertical-align: middle;}
.omote.flierCheckTextBox th { background: #cae8f2;}
.ura.flierCheckTextBox th { background: #efe2eb;}
.flierCheckBtnArea .bicolorGreenBtn { margin: 30px auto 0;}
.flierCheckNext { margin-top: 20px;}
.flierCheckNext .bicolorGreenBtn { margin-left: auto;}
@media only screen and (max-width:1000px){
  .flierCheckImg { width: 80%; margin: 20px auto 50px;}
  .flierCheckTextBox { width: 100%; display: block;}
  .flierCheckTextBox tr { display: block; width: 100%;}
  .flierCheckTextBox th { display: block; width: 100%; border-bottom: none;}
  .flierCheckTextBox tr:nth-child(n + 2) th { border-top: none;}
  .flierCheckTextBox td { display: block; width: 100%;}
  .flierCheckNextBrn { margin-top: 20px;}
}

/*新商品*/
.newItemCont { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 40px 4%;}
.newItem { width: calc(92% / 3); box-shadow: 3px 3px 3px #ccc; padding: 10px;}
.newItem figure { width: 100%; height: 150px;}
.newItem img { width: 100%; height: 100%; object-fit: contain;}
.newItemTitle { font-size: 1.8rem; color: #3B4E32; font-weight: 700; margin: 10px 0;}
.newItemType { font-size: 1.4rem; color: #3B4E32;}
.newItemPlace { font-size: 1.6rem; color: #3B4E32; text-align: right;}
@media only screen and (max-width:1000px){
  .newItem { width: 48%; min-width: 320px; margin: 0 auto;}
}

/*DVD交通安全教材*/
.movieBox { margin-top: 80px;}
.movieBox p { width: 80%; margin: 10px auto;}
.movieBox figure { text-align: center;}
.movieBox .videoBox { text-align: center;}
.movieBox video { max-width: 550px; margin: 20px auto;}
.movieTitle { font-size: 1.4rem; color: #333; font-weight: 700; border-bottom: solid 2px #008A32; text-align: center; padding-top: 20px;}
.movieTitle span { font-size: 2.0rem; color: #3B4E32; margin-left: 0.5em;}
@media only screen and (max-width:1000px){
  .movieBox p { width: 100%;}
  .movieBox video { max-width: 100%; }
  .movieTitle span { display: block;}
}

/*contact*/
.contactItem { display: flex; justify-content: flex-start; gap: 20px; margin-bottom: 20px;}
.contactItem dt { width: 150px;}
.contactItem dd { width: calc(100% - 170px);}
.contactItem dd input { width: 100%;}

/*注文完了ページ*/
.completeText { font-size: 1.6rem; width: 90%; margin-bottom: 10px; font-weight: 500;}
.completeText span { font-size: 2.0rem; padding-right: 5px;}
.completeText + p a { text-decoration: underline;}
.completeText + p a:hover { text-decoration: none;}
.complete .borderBoldBox { margin-bottom: 30px;}

/*追加分*/
.borderBox { border: solid 1px #000; padding: 10px;}
.borderBox + .borderBox { margin-top: 20px;}

.advertBox { width: 80%; margin: 40px auto;}
.advertSelect { margin: 10px auto;}
.advertBtn { margin: 10px auto;}
.advertBtn p { margin: auto;}

@media only screen and (max-width:1000px){
  .tableScroll { display: block; overflow: scroll;}
}