@import url('./reset.css');
@import url('../js/mediaelement-4.2.16/mediaelementplayer.min.css');

/*==============================*/
/* common */
/*==============================*/
html {
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    scroll-behavior: smooth;
}
body {
    line-height: 2;
    letter-spacing: 1px;
    overflow-x: hidden;
}
p {
    color: #4d4d4d;
}
img {
    width: 100%;
}
.emphasized {
    color: #ffff43;
}

/* responsive */
.pc {
     display: block !important;
}
.sp {
     display: none !important;
}
@media only screen and (max-width: 750px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
}

.for-pc {
	display: contents !important;
}
.for-sp {
     display: none !important;
}
@media only screen and (max-width: 750px) {
    .for-pc {
        display: none !important;
    }
    .for-sp {
    	display: contents !important;
    }
}
/*==============================*/
/* mv */
/*==============================*/
#mv {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("../img/img_pc_hero@2x.jpg") no-repeat bottom;
    background-size: cover !important;
    -ms-box-shadow: 0px -160px 80px -80px #000 inset;
    -moz-box-shadow: 0px -160px 80px -80px #000 inset;
    -webkit-box-shadow: 0px -160px 80px -80px #000 inset;
    -o-box-shadow: 0px -160px 80px -80px #000 inset;
    box-shadow: 0px -160px 80px -80px #000 inset;
}
#mv .logo img {
    position: absolute;
    width: 160px;
    top: 6%;
    left: 10%;
}
#mv .title img {
    position: absolute;
    width: 70%;
    max-width: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#mv .text {
    position: absolute;
    width: 50%;
    bottom: calc(3% + 35px);
    right: 0;
    left: 0;
    margin: 0 auto;
}
#mv .message {
    position: absolute;
    bottom: 3%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
@media screen and (max-width: 750px) {
    #mv .logo img {
        width: 160px;
    }    #mv {
        background: url("../img/img_sp_hero@2x.jpg") no-repeat center;
    }
    #mv .title img {
        width: 90%;
        top: 35%;
    }
    #mv .text {
        width: 80%;
        bottom: calc(5% + 12px);
    }
    #mv .message {
        position: absolute;
        bottom: 12px;
        width: 100%;
        font-size: 12px;
        text-align: center;
    }
}

/*==============================*/
/* intro */
/*==============================*/
#intro {
    max-width: 1280px;
    margin: 0 auto;
}
#intro > div {
    padding: 6% 10%;
}
#intro p {
    font-size: 20px;
    font-weight: bold;
}
@media screen and (max-width: 960px) {
    #intro .pc {
        display: none !important;
    }
    #intro .sp {
        display: block !important;
    }
}
@media screen and (max-width: 750px) {
    #intro > div {
        padding: 40px 5%;
    }
    #intro p {
        font-size: 16px;
    }
}

/*==============================*/
/* main */
/*==============================*/
#main > div:first-child {
    background-color: #e4e4e4;
}
#main > div > div {
    max-width: 1280px;
    margin: 0 auto;
}
#main > div > div > div {
    padding: 6% 18%;
}
#main p {
    font-weight: bold;
    font-size: 18px;
    padding: 0 4px;
}
#main h2 {
    padding: 10px 10px 50px;
    text-align: center;
}
#main h2 img {
    max-width: 600px;
}
#main h3 {
    margin: 40px 0 20px;
    border-bottom: 5px solid #b1b1b1;
}
#main h3 img {
    width: 80%;
    max-width: 800px;
    margin-bottom: 10px;
}
@media screen and (max-width: 960px) {
    #main p.pc {
        display: none !important;
    }
    #main p.sp {
        display: block !important;
    }
}
@media screen and (max-width: 750px) {
    #main > div > div > div {
        padding: 40px 5%;
    }
    #main h2 {
        padding-bottom: 20px;
    }
    #main p {
        font-size: 16px;
    }
}

/*==============================*/
/* speakers */
/*==============================*/
#speakers {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 8% 6%;
    display: flex;
    justify-content: space-between;
}
#speakers > div {
    width: 45%;
    padding: 2%;
    background-color: #4d4d4d;
}
#speakers h5 {
    padding: 2% 0;
    font-size: 18px;
}
#speakers p {
    color: #fff;
}
#speakers h5 small {
    display: block;
    font-size: 1rem;
    font-weight: lighter;
}
#speakers span {
    display: block;
    margin-top: 2rem;
}
@media screen and (max-width: 960px) {
    #speakers .pc {
        display: none !important;
    }
    #speakers .sp {
        display: block !important;
    }
}
@media screen and (max-width: 750px) {
    #speakers {
        display: block;
        padding: 0 5%;
    }
    #speakers > div {
        width: 90%;
        padding: 5%;
        margin-bottom: 5%;
    }
}

/*==============================*/
/* inquiry */
/*==============================*/
#inquiry {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 6%;
    text-align: center;
}
#inquiry img {
    width: 40%;
    max-width: 700px;
}
#inquiry h2 img {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}
#inquiry span {
    display: inline-block;
    margin: 20px 0 30px;
    font-size: 1.45rem;
    font-weight: lighter;
}
@media screen and (max-width: 750px) {
    #inquiry {
        padding: 20px 5% 60px;
    }
    #inquiry img {
        width: 80%;
    }
    #inquiry span {
        margin: 10px 0 30px;
        font-size: 12px;
    }
}

/*==============================*/
/* present */
/*==============================*/
#present {
    background: url("../img/bg_catalog@2x.jpg") no-repeat bottom left;
    background-size: cover;
    padding: 4%;
    text-align: center;
}
#present > div {
    max-width: 1280px;
    margin: 0 auto;
}
#present p {
    margin: 30px 0 40px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
#present img {
    width: 40%;
    max-width: 700px;
}
@media screen and (max-width: 750px) {
    #present {
        padding: 40px 5%;
    }
    #present p {
        font-size: 15px;
        text-align: left;
    }
    #present img {
        width: 80%;
    }
}

/*==============================*/
/* info */
/*==============================*/
#info {
    max-width: 1280px;
    margin: 0 auto;
    padding: 6% 6% 0;
    text-align: center;
}
#info img {
    width: 200px;
}
#info > div:last-child {
    margin: 6% 0 1%;
    font-weight: lighter;
}
@media screen and (max-width: 960px) {
    #info .pc {
        display: none !important;
    }
    #info .sp {
        display: block !important;
    }
}
@media screen and (max-width: 750px) {
    #info {
        padding: 40px 5%;
    }
    #info > div:first-child {
        margin: 50px auto 100px;
    }
    #info img {
        width: 180px;
    }
    #info > div:last-child {
        margin-top: 6%;
    }
}



/*==============================*/
/* header */
/*==============================*/

header{
    position: fixed;
    background-color: white;
    width: 100%;
    z-index: 100;
}
main{
    padding-top: 82px;
}
h1 {
    text-align: center;
    width: 100%;
    position: relative;
    font-size: 18pt;
    margin: 0 auto 25px;
    height: 43px;
    background-color: #efefef;
    left: 0;
    position: absolute;
    margin-bottom: 30px;
    margin-top: -105px;
    padding-top:26px;
    padding-bottom:26px;
/*    margin-left: calc(-50vw + 50%);*/
/*    margin-right: calc(-50vw + 50%);*/
}
h1.login {
	text-align: center;
	width: 100%;
	position: relative;
	font-size: 18pt;
	max-width: 400px;
	margin: 0 auto 25px;
	background-color: unset;
	height: auto;
	padding-top: 10px;
    padding-bottom: 0px;
}
h1.login:before {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 5px #3e9e3a;
	bottom: -5px;
	width: 45%;
	left: 25%;
}
h1.login:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 5px #999;
	bottom: -5px;
	width: 15%;
	left: 60%;
}

header .header-line{
    width: 100%;
    height:10px;
    border-width: 0;
	background-color: #bfd9cc;
	background-size: 100% 10px;
}
#pageTopTitle{
	height:95px;
	width: 100%;
}
.pagelogin_TopTitle{
	height:auto;
	width: 100%;
}
.pagelogin_TopTitle h1 {
	background-color: #f1f2f3;
    line-height: 1.6em;
}

#breadTxt{
	height:30px;
	width: 100%;
}

.menu-btn {
    position: fixed;
    top: 40px;
    right: 40px;
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    z-index: 900;
    background-color: #e8e8e8;
    border-radius: 50%;
    padding: 0;
}

.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 10px;
    border-radius: 3px;
    background-color: #000000;
    position: absolute;
    left: 10px;
}
.menu-btn span:before {
    top: 13px;
}
.menu-btn span:after {
    top: 17px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 13px;
    transform: rotate(-45deg);
}
#menu-btn-check, #menu-src-check {
    display: none;
}
.menu-content, .menu-search {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 80px;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 800;
    background-color: #fff;
    transition: all 0.5s;/*アニメーション設定*/
    height: 100vh;
}
.menu-content ul, .menu-search ul {
    padding: 0px 10px 0;
    background-color: #FFF;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.menu-content ul li, .menu-search ul li {
    list-style: none;
    width: 90%;
    max-width: 450px;
    margin: 0 auto;
}
.menu-content ul li a, .menu-search ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#3f3f3f;
    text-decoration: none;
    padding: 2px 15px 2px 55px;
    position: relative;
}
#menu-btn-check:checked ~ .menu-content, #menu-src-check:checked ~ .menu-search {
    left: 0;/*メニューを画面内へ*/
    top:80px;
}
.menu-content h1, .menu-search h1{
    position: relative;
    padding: 26px;
    line-height: 3rem;
    height: 20px;
   margin-top: 0; 
   margin-bottom: 15px;
}
.menu-content h1 span, .menu-search h1 span{
    left: 0;
    top: 5px;
    position: absolute;
    font-size: 10pt;
    right: 0;
}
.searchForm {
    /* list-style: none; */
    margin: 0 auto;
    height: 50px;
   	position:relative;
    width: 90%;
    max-width: 450px;
}
#form4{
    margin: 20px auto;
	margin-bottom: 0px;
}
#sbox4{
	height:40px;
	padding:0 10px;
	position:absolute;
	right:0;
	left:0;
	top:0;
	border-radius:25px;
	outline:0;
	background:#eee;
}
#sbtn4{
    height: 41px;
    width: 50px;
    position: absolute;
    right: 1px;
    top: 1px;
    background: #3e9e3a;
    color: #fff;
    border: none;
    border-radius: 0 25px 25px 0;
}
#sbtn4 .fa-search{
font-size:20px;
position:absolute;
top:30%;
left:30%;
}
#sbtn4:hover{
color:#888;
}

.header-logo {
    font-size: 2.2em;
    font-weight: 700;
    line-height: 1;
}
.header-logo img{
    max-width: 150px;
   /* width: 50%; */
    padding-left: 5%;
}
.header-mypage {
	height: 70px;
    width: 70px;
}
.header-mypage a {
	text-decoration: none;
    line-height: 0.5em;
}
.header-mypage img{
	height: 50px;
    width: 50px;
    margin: 0 auto;
}
.header-mypage span{
	display:block;
	font-size: 11px;
	margin-top: -5px;
}
.header-content-div {
    width: 150px;
    position: relative;
}
/*==============================*/
/* パンくず */
/*==============================*/

.breadcrumb {
    width: 90%;
    max-width: 1000px;
    color: rgb(0, 0, 0);
    margin: 5px auto;
  }
  .breadcrumb a {
    text-decoration: none;
    color: #9c9c9c;
  }
  .breadcrumb .breadcrumbs {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }
  .breadcrumb li {
    display: inline-block;
    position: relative;
    padding-right: calc(16px + 8px);
    margin-right: 8px;
    color: #7986CB;
  }
  .breadcrumb li::before {
    content: '›';
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
    font-size: 1em;
    color: inherit;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .breadcrumb li:last-child {
    margin-right: 0;
    padding-right: 0;
    color: #000000;
  }
  .breadcrumb li:last-child::before {
    content: normal;
  }
/*==============================*/
/* main content */
/*==============================*/
main{
    display: block;
}
.content1{
    width:90%;
    max-width: 1000px;
    margin: 20px auto;
}
.pageLogin_content1{
	width: 90%;
    max-width: 1000px;
    margin: -10px auto -15px;
    padding-bottom: 30px;
}
.main_content1{
	width: 90%;
    max-width: 1000px;
    margin: 10px auto -15px;
    padding-bottom: 30px;
    background-image: url(../img/pic_back_line.png);
    background-repeat-y: repeat;
    background-size: contain;
}
.lessonPanel {
	display: flex;
	flex-wrap: wrap;
    max-width: 1000px;
    margin: 10px auto;
}
/* 子要素(アイテム) */
.lessonPanel a {
	color: #fff;
    padding: 0px 5px 30px;
    font-size: 30pt;
    line-height: 35pt;
    text-decoration: none;
    margin: 0 auto;
}
.lessonTxt{
    height: 50px;
    margin-top: -7px;
    padding-left: 47%;
    position: relative;
}
.lessonTxt::before{
    content: url(../img/lesson_hyoka.png);
    position:absolute;
    top:3px;
    left:5px;
}
.lessonTxt::after {
    content: url(../img/icon_arrow.png);
    position:absolute;
    top: -5px;
    right: 12px;
  }
.barRed{
    background-color: #d7002e;
}
.barBlue{
    background-color: #00859b;
}
.barGreen{
    background-color: #009c6b;
}
.barYellow{
    background-color: #f7bd00;
}
.barSky{
    background-color: #3CC2B6;
}
.barRed02{
    background-color: #E72E26;
}
.barPurple{
    background-color: #7F539F;
}
.barSkin{
    background-color: #FBC092;
}
.barLime{
    background-color: #B3D453;
}
.barOrange{
    background-color: #F26E35;
}
.barGray{
    background-color: #666666;
}

/*==============================*/
/* 自己評価 */
/*==============================*/
.evaluationBox {
    max-width: 110px;
    width: 90%;
    border: 1px solid #cdcdcd;
    font-size: 18pt;
    margin: 25px auto 35px;
    padding: 10px 90px 10px 30px;
    font-weight: 700;
    border-radius: 5px;
    position: relative;
}
.evaluationCircle{
    position: absolute;
    right:20px;
    top: 8px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f6bdc0;
    text-align: center;
}
.evaluationTxt {
    width: 90%;
    max-width: 500px;
    margin: 5px auto;
}
.evaluationInput {
    padding: 12px 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    max-width: 500px;
    margin: 5px auto;
    border: 1px solid #666666;
  }
  #evaluationInputA, #evaluationInputA, #evaluationInputA {
      background-color: #FFFFFF;
  }
  .evaluationInput-Input {
    margin: 0;
    width: 0;
    opacity: 0;
  }

  .evaluationInput:hover{
    background: rgba(0,0,0,.05) !important;
  }

  .evaluationInput-Input:focus + .evaluationInput-DummyInput{
    border: dashed 2px #333333;
  }
  .evaluationInput-Input:checked + .evaluationInput-DummyInput {
    background: #333333;
  }
    .evaluationInput-Input:checked + .evaluationInput {
    background: #8a4545;
  }
  .evaluationInput-Input:checked + .evaluationInput-DummyInput::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: 4px;
    border-radius: 2px;
    transform: translate(-6px, 5px) rotateZ(-135deg);
    transform-origin: 2px 2px;
    background: #FFFFFF;
  }
  .evaluationInput-Input:checked + .evaluationInput-DummyInput::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76%;
    height: 4px;
    border-radius: 2px;
    transform: translate(-6px, 5px) rotateZ(-45deg);
    transform-origin: 2px 2px;
    background: #FFFFFF;
  }
  .evaluationInput-DummyInput {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 32px;
    height: 30px;
    border: solid 1px #000;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }
  .evaluationInput-LabelText {
    margin-left: 12px;
    display: block;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3em;
    padding-left: 2em;
    text-indent: -1.9em;
  }
/*==============================*/
/* footer */
/*==============================*/
footer {
    text-align: center;
    background: #a4c868;
    color: #333;
    padding: 30px;
    letter-spacing: 0;
}
.footerMenu {
    max-width: 1000px;
    margin: 10px auto;
    text-align: left;
    position: relative;
}
.footerMenu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  width: 80%;
  max-width: 410px;
  margin: auto;
  font-size: 27px;
  line-height: 1.5em;
}
.footerMenu ul li {
    padding: 2px 15px 2px 5px;
}
.footerMenu ul li a{
    color: rgb(63, 63, 63);
    padding: 0px 5px 30px;
    line-height: 10pt;
    text-decoration: underline;
    position: relative;
    font-size: 16px;
}
.footerMenu ul li a::after{
    content: "";
    background-image: url(../img/icon_link_b.png);
    width:22px;
    height:22px;
	background-size: contain;
	vertical-align: middle;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 5px;
}
#page_top{
    width: 70px;
    height: 70px;
    position: absolute;
    right: 0;
    top: -70px;
    background: #333;
    border-radius: 50%;
    border: 1px solid #333;
    cursor: pointer;
}
	#page_top #btn_top{
	  position: relative;
	  display: block;
	  width: 50px;
	  height: 50px;
	  text-decoration: none;
	}
#page_top #btn_top::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f077';
    font-size: 30px;
    color: #FFF;
    position: absolute;
    width: 30px;
    height: 30px;
    top: -15px;
    bottom: 0;
    right: 0;
    left: 18px;
    margin: auto;
    text-align: center;
}

.l-inner {
    background-color: #4e5346;
    color: #FFF;
    text-align: center;
    height: 100px;
}
.p-copy{
	padding-top: 40px;
}
h2{
    padding: 0.2rem 1rem;
    /*border-left: 5px solid #3e9e3a;*/
    margin: 10px 0;
    position: relative;
    font-size:18px;
}
h2:before {
    position: absolute;
	top: 15%;
    left: 3px;
    width: 6px;
    height: 65%;
    content: '';
    -ms-filter: "alpha(opacity=20)";
    border-radius: 3px;
    background: #3e9e3a;
}
.centerBlock{
    margin: 15px auto;
    text-align: center;
}
#sublitButton, .submitBtn {
    background-color: #333333;
    border: solid 1px #333333;
    border-radius: 30px;
    color: #FFF;
    margin: 10px auto;
    max-width: 400px;
    padding: 10px 30px;
    cursor: pointer;
    font-size: 18px;
    width: 90%;
    text-decoration: none;
}
#sublitLinkBtn, .linkBtn {
	background-color: #333333;
    border: solid 1px #333333;
    border-radius: 30px;
    color: #FFF;
    width: 90%;
    max-width: 400px;
    padding: 5px;
    cursor: pointer;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
}
#buyButton {
	background-color: #333333;
    border: solid 1px #333333;
    border-radius: 30px;
    color: #FFF;
    width: 60%;
    max-width: 400px;
    padding: 10px 10px;
    cursor: pointer;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
}
#buyButton:hover {
	cursor: pointer;
}

#buyButton:before {
    content: '';
    background-image: url(../img/icon_cart.png);
    width: 20px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-flex;
    margin-right: 10px;
    margin-top: 0px;
}
#registButton, .greenBtn{
    background-color: #d8f1c7;
    border: solid 1px #d8f1c7;
    border-radius: 30px;
    color: #FFF;
    margin: 10px auto;
    max-width: 400px;
    padding: 10px 30px;
    cursor: pointer;
    font-size: 18px;
    display: block;
    text-decoration: unset;
    font-size: 18px;
    white-space: nowrap;
}
#registButton{
    background-color: #d8f1c7;
    border: solid 1px #d8f1c7;
    border-radius: 30px;
    color: #FFF;
    margin: 10px auto;
    width: 60%;
    max-width: 200px;
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
	display: block;
    text-decoration: unset;
    font-size: 18px;
    white-space: nowrap;
}
.grayButton {
	background-color: #999999;
    border: solid 1px #999999;
    border-radius: 30px;
    color: #FFF;
    width: 90%;
    max-width: 400px;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
}
.greenBtnMini, .btnDarkgrayMini{
	padding: 5px 15px;
    border-radius: 10px;
    color: #FFF;
    text-decoration: none;
}
.greenBtnMini{
    background-color: #d8f1c7;
}
.btnDarkgrayMini{
	background-color: #666666;
}
.usebtn{
	flex-basis: 20%;
    display: flex;
    justify-content: center;
}
#sublitButton:hover, #registButton:hover, #sublitLinkBtn:hover, .bkButton:hover, .linkBtn:hover, .btnDarkgrayMini:hover, .grayButton:hover {
	opacity: 0.7;
}

#forgetLink {
    position:relative;
    display:block;
    padding-left:17px;
    color: #333333;
    width: 220px;
    margin: 5px auto;
    text-decoration: underline;
}
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 18px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
#forgetLink::before{
    width: 20px;
    height: 20px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #333333;
}
#forgetLink::after{
        left: 7px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 5px solid transparent;
    border-left: 7px solid #fff;
}

.buttonBlock {
    margin: 40px auto;
    height: 50px;
    text-align: center;

}
#backButton{
    background-color: #333333;
    border: solid 1px #333333;
    border-radius: 3px;
    color: #FFF;
    margin: 10px auto;
    width: 60%;
    max-width: 200px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 50px;
    padding-left: 50px;
    cursor: pointer;
    text-decoration: none;
}
#loginid, #password{
	width: 88%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #a2a2a2;
}
#l_loginid, #l_password{
    width: 100%;
    float: left;
}
.pageLogin_content1 .group{
	padding: 10px 0 20px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.main_content1 .group{
	padding: 10px 0 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.main_content1 .search{
	padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.pageLogin_content1 .errorAlert, .main_content1 .errorAlert{
	color: #FF0000;
	padding: 5px 0 2px;
    margin: 0 auto;
}
.pageLogin_content1 .msgAlert, .main_content1 .msgAlert{
	color: #2f8459;
	padding: 5px 0 2px;
    margin: 0 auto;
}
/*==============================*/
/* header */
/*==============================*/
.search-menu {
	width: 50px;
}
.header-bar {
    width: 90%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}
.hamburger-menu{
    width: 140px;
    height: 60px;
    position: relative;
}
.header-txt{
	position: absolute;
    bottom: 91px;
    background-color: #d8f1c7ad;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    right: 30px;
    padding: 40px;
    text-align: center;
    font-size: 25px;
    font-weight: 800;
    color: #FFF;
}
.header-image{
    position: relative;
    margin: -10px auto 0;
    max-height: 300px;
}
.header-image .header-image-mask{
    width: 100%;
    position: absolute;
    bottom: -15px;
    left: 0;
}
.search-menu {
    transition: 0.3s;
    position: absolute;
    right: 162px;
    top: 0px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 300;
}
.cart-menu {
    transition: 0.3s;
    position: absolute;
    right: 85px;
    top: 0px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 300;
}
.menu__chip {
  position: absolute;
  top: 2px;
  right: -10px;
  width: 24px;
  height: 24px;
  background-color: #C65162;
  border-radius: 50px;
  font-weight: bold;
  color: white;
  border: 1px white solid;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hamburger {
    transition: 0.3s;
    position: absolute;
    right: 0;
    top: 0px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 300;
    background-color: #3e9e3a;
    border-radius: 5px;
}

.hamburger__line {
    position: absolute;
    left: 17px;
    width: 27px;
    height: 2px;
    background-color: #FFF;
    transition: all 1s;
}
.hamburger__line--1 {
    top: 21px;
}
.hamburger__line--2 {
    top: 30px;
}
.hamburger__line--3 {
    top: 39px;
}
#menu-btn-check:checked ~ .hamburger .hamburger__line--1 {
    transform: rotate(45deg);
    width: 50px;
    position: absolute;
    left: 5px;
    top: 30px;
}
#menu-btn-check:checked ~ .hamburger .hamburger__line--2 {
	width: 0;
    left: 50%;
}
#menu-btn-check:checked ~ .hamburger .hamburger__line--3 {
	transform: rotate(-45deg);
    width: 50px;
    position: absolute;
    left: 5px;
    top: 30px;
}
h2.menuH2, .menuP {
    list-style: none;
    width: 90%;
    max-width: 450px;
    margin: 0 auto;
}
p.menuPR {
    list-style: none;
    width: 90%;
    max-width: 450px;
    margin: 0 auto;
    text-align:right;
}
.txtGray{
	color: silver;
}
/**** 絞り込み検索枠 ***/
.seachTxt {
	text-decoration: underline;
    cursor: pointer;
}
.searchTxt{
    margin-left: 30px;
    font-size: 1.2em;
}
.sectionSearchBox {
    width: 90%;
    max-width: 450px;
    margin: 0 auto;
}
#search-box-check {
    display: none;
}

#searchBox {
    list-style: none;
    width: 95%;
    max-width: 500px;
    margin: 0 auto;
    position: fixed;
    top: 80px;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
	background-color: #FFF;
	z-index: 90;
}
#search-box-check:checked ~ #searchBox {
    left: 0;/*メニューを画面内へ*/
    right: 0;/*メニューを画面内へ*/
    top:310px;
}


.cp_ipselect {
  overflow: hidden;
  width: 90%;
  margin: 2px auto;
  text-align: center;
}
.cp_ipselect select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
  position: relative;
  border-radius: 2px;
  border: 2px solid #3e9e3a;
  border-radius: 50px;
  background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
  position: absolute;
  top: 1.2em;
  right: 0.8em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #3e9e3a;
}
.cp_ipselect.cp_sl01 select {
  padding: 15px 38px 15px 8px;
  color: black;
}
.cp_ipselect.cp_sl01 select option{
	height: 3em;
}
@media screen and (max-width: 750px) {
    header{
        height: 80px;
    }
	.header-logo {
	    height: 80px;
	}
    .header-logo img {
		max-width: 180px;
		width: 85%;
		padding-left: 2%;
		padding-top: 11%;
    }
    header .header-line{
        width: 100%;
        height:5px;
        border-width: 0;
        background-color #bfd9cc;
        background-size: 100% 5px;
    }
	.search-menu{
	    top: 20px;
	    width: 40px;
	    right: 150px;
	}
	.cart-menu {
	    top: 20px;
	    width: 40px;
	    right: 100px;
	}
    .evaluationInput-LabelText {
        margin-left: 12px;
        display: block;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5em;
    }
    .menu-btn {
        top: 20px;
        right: 20px;
    }
    main {
        padding-top: 90px;
    }

    .menu-content, .menu-search {
        font-size: 20pt;
	    top: 80px;
    }
    .menu-content h1, menu-search h1{
		width: calc(100% - 52px);
		height: 40px;
		padding: 26px;
		top: 0;
    }
    .menu-content h1, menu-search h1{
		width: calc(100% - 52px);
		height: 30px;
		padding: 20px;
		top: 0;
    }
    #menu-btn-check:checked ~ .menu-content, #menu-src-check:checked ~ .menu-search {
	    font-size: 20pt;
	    top: 80px;
    }
    #menu-btn-check:checked ~ .menu-content h1 span, #menu-src-check:checked ~ .menu-search h1 span{
        left: 0;/*メニューを画面内へ*/
        top:0;
        position: absolute;
    }

    #menu-src-check:checked ~ .menu-search {
	    font-size: 20pt;
	    top: 80px;
    }
    #menu-src-check:checked ~ .menu-search h1 span{
        left: 0;/*メニューを画面内へ*/
        top:0;
        position: absolute;
    }
	#page_top {
	    bottom: 25px;
	}
	.hamburger-menu {
	    width: 150px;
	    height: 80px;
	}
	.header-bar {
	    width: 100%;
	}
	.hamburger {
	    right: 0;
	    top: 0px;
	    width: 80px;
	    height: 80px;
	    border-radius: 0px;
	}
	.hamburger__line {
	    left: 25px;
	    width: 27px;
	}
	.hamburger__line--1 {
	    top: 30px;
	}
	.hamburger__line--2 {
	    top: 39px;
	}
	.hamburger__line--3 {
	    top: 48px;
	}
	#menu-btn-check:checked ~ .hamburger .hamburger__line--1 {
	    left: 15px;
	    top: 30px;
	}
	#menu-btn-check:checked ~ .hamburger .hamburger__line--3 {
	    left: 15px;
	    top: 30px;
	}
	.header-txt {
	    position: absolute;
	    bottom: 60px;
	    background-color: #d8f1c7ad;
	    width: 150px;
	    height: 150px;
	    border-radius: 50%;
	    right: 30px;
	    padding: 25px;
	    text-align: center;
	    font-size: 21px;
	    font-weight: 800;
	    color: #FFF;
	}
}

.content1 iframe{
    width: 100%;
    height: 50vw;
    max-height: 560px;
}
@media screen and (max-width: 499px) {
	.lessonPanel a {
	    width: 45%;
	}
	.lessonBox {
	    width: 45%;
	}
	.header-txt {
	    position: absolute;
	    bottom: 49px;
	    background-color: #d8f1c7ad;
	    width: 100px;
	    height: 100px;
	    border-radius: 50%;
	    right: 30px;
	    padding: 21px;
	    text-align: center;
	    font-size: 15px;
	    font-weight: 800;
	    color: #FFF;
	}
}
/**********************************************/
/*       会員登録ページ                       */
/**********************************************/

.kiyaku {
	overflow:auto;
	width:calc( 100% - 10px);
	height:150px;
	padding:5px;
	border:2px solid #eee;
	line-height:1.5em;
}
.label_btn span {
	background-color: #FFF;
	border-radius: 4px;
	border: 1px solid #333;
	font-weight: 700;
	color: #333;
	letter-spacing: 4px;
	text-decoration: none;
	text-align: center;
	width: 260px;
	padding: 11px 20px;
	cursor: pointer;
	/* display: block; */
	margin: 0 auto;
	transition: background-color 150ms ease-in;
	font-size: 18px;
}
.label_btn span:before {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
	width: 20px;/*画像の幅*/
	height: 20px;/*画像の高さ*/
	background-image: url(../img/check_off.png);
	background-size: contain;
	vertical-align: middle;
    padding-right: 10px;
    background-repeat: no-repeat;
}
.label_btn input[type=checkbox] {
  display: none;
}

.label_btn input[type=checkbox]:checked + span {
	background-size: 15px 13px;
	background-color: #d8f1c7;
	color: #FFF;
	border: 1px solid #d8f1c7;
}
.label_btn input[type=checkbox]:checked + span:before {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
	width: 20px;/*画像の幅*/
	height: 20px;/*画像の高さ*/
	background-image: url(../img/check_on.png);
	background-size: contain;
	vertical-align: middle;
}

.group input[type="text"] {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 100%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}

.group input[type="text"]#email {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 100%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}
.group .rowLine input[type="text"] {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 45%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}
.group .rowLine3 input[type="text"] {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 33%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}

.group textarea {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 100%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}

.search input[type="text"] {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 100%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}

.search input[type="text"]#email {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 100%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}
.search .rowLine input[type="text"] {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 45%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}
.search .rowLine3 input[type="text"] {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 33%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}

.search textarea {
  font: 15px/24px sans-serif;
      box-sizing: border-box;
      width: 100%;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 5px;
      border: 1px solid #a2a2a2;
}
.label_btn {
    padding: 10px 15px;
}
#attachment label {
 /* ボタン部分の見た目（任意） */
 display: inline-block;
 position: relative;
 background: #666;
 color:#fff;
 font-size: 16px;
 padding: 10px 18px;
 border-radius: 4px;
 transition: all 0.3s;
}
#attachment label:hover {
 background: #888;
 transition: all 0.4s;
}
#attachment label input {
 /* 今回のポイント */
 position: absolute;
 left:0;
 top:0;
 opacity: 0;
 width: 100%;
 height: 100%;
}
#attachment .filename {
 font-weight: 16px;
 margin:0 0 0 10px;
}
.main_inn {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 90px;
    padding-top:10px;
}
.login_inn {
    margin-top: 0px;
    padding-top: 25px
}

.hissu{
    width: auto;
    background: #ff6600;
    color: #FFF;
    padding: 3px 5px;
    margin-left: 5px;
    display: unset;
    font-size: 0.7em;
}
.frm12{
	width: 100%;
}
.cp_iptxt {
	position: relative;
	margin: 5px 3%;
}
.cp_iptxt2 {
	position: relative;
	margin: 5px 0;
        margin-right: 15px;
}
.cp_iptxt input[type='text'], .cp_iptxt input[type='password'], .cp_iptxt input[type='tel'], .cp_iptxt select {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	letter-spacing: 1px;
	padding: 10px;
    border-radius: 5px;
    border: 1px solid #a2a2a2;
}
.cp_iptxt input[type='text']:focus, .cp_iptxt input[type='password']:focus, .cp_iptxt select:focus {
	outline: none;
}
.ef {
	position: relative;
	padding: 7px 15px;
	border: 0;
	border: 1px solid #b9b9b9;
	background: transparent;
	border-radius: 5px;
}
.ef ~ .focus_bg {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transition: 0.4s;
	background-color: transparent;
}
.ef:focus {
	border: 1px solid #fabebe;
}
.ef:focus ~ .focus_bg, .cp_iptxt.ef ~ .focus_bg {
	width: 100%;
	transition: 0.4s;
	background-color: rgba(255,164,164,.3);
}
.input_group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.main_inn label{
    font-weight: 700;
}
#dropbox{
    width: 100%;
    height: 220px;
    background-color: #bbb;
}
.notChange, .notChange2{
    width: 90%;
    background-color: #EDEDED;
    padding: 5px 10px;
    margin: 2px auto;
    display: flex;
}
.rightBlock{
    width: 100%;
    text-align: right;
}
a.linkNews {
    font-size: 0.8em;
    /* text-decoration: none; */
    color: #525252;
}
.bkButton {
    background-color: #3e3e3e;
    padding: 10px 10px;
    border-radius: 25px;
    color: #FFF;
    text-decoration: none;
    width: 80%;
    display: block;
    margin: 20px auto;
    font-size: 100%;
}
.btnMini {
    padding: 0px 5px;
    width: 50px;
    text-align: center;
    display: initial;
    font-size:14px;
}
.btnMid {
    padding: 5px 15px;
    text-align: center;
    display: initial;
    font-size:14px;
}

.btnBlue{
    background-color: #28a3cc;
}
.btnBlue2{
    background-color: #70c6e2;
}
.btnPink{
    background-color: #d53467;
}
.btnGreen{
    background-color: #3e9e3a;
}
.btngray{
    background-color: #e1e1e1;
}
.btnBlack{
    background-color: #333333;
}
/**** top（マイページ）****/
a.newsDetail {
    text-decoration: none;
}
.newsList {
    border: solid 2px #3e9e3a;
    border-radius: 10px;
    padding: 5px 10px;
}
.newsTitle{
    color: #4a4a4a;
}
.newsTitle span {
    font-size: 0.7em;
    text-decoration: none;
}
.newsListData {
    border-bottom: 1px dotted #333;
    margin-bottom: 5px;
    padding-bottom: 3px;
}
.proId {
	line-height: 2em;
	margin: auto;
}
.proName{
	flex-basis: 60%;
	padding: 5px 5px 5px 10px;
	color: #3e9e3a;
}
.proId a{
    text-decoration: none;
}
.btn_item {
	border: solid 1px #cb6c03;
    background-color: #f3e921;
    margin: 0 auto 0 3px;
    border-radius: 5px;
    padding: 1px 3px;
    color: #cb6c03;
    font-size: 0.4em;
        line-height: 1.2rem;
}

.proName span{
	color: #000000;
}
a.proDetail{
	flex-basis: 20%;
    align-items: center;
    justify-content: space-evenly;
    color: #3e9e3a;
    text-decoration: none;
}
.productListData{
	display: flex;
	background-color: #EDEDED;
	margin-bottom: 10px;
}
.productListData:nth-child(even){
	background-color: #dcdcdc;
}
.nohinListData{
    display: flex;
    background-color: #EDEDED;
    margin-bottom: 10px;
    justify-content: space-between;
    padding: 5px 10px;
    word-break: break-all;
}
.nohinListData:nth-child(even){
	background-color: #dcdcdc;
}
.catName {
    color: #3e9e3a;
}
.productName{
    font-size: 1.4em;
    font-weight: 600;
}
.favorite_button {
    display: block;
    text-align: center;
    position: relative;
}
button.favorite_button_in {
    display: inline-block;
    cursor: pointer;
    border-color: rgb(80,80,80,0.1);
    font-size: 0.95rem;
    transition: 0.2s ease-in-out;
    background: #fcfcfc;
    font-weight: 200;
    padding: 10px 10px;
    border-radius: 25px;
    color: #FFF;
    text-decoration: none;
    width: 250px;
    display: block;
    margin: 20px auto;
}
button.favorite_button_in i {
    color: #6bb6ff;
    font-size: 1.3rem;
    vertical-align: -1px;
    margin-right: 8px;
    opacity: 0.3;
}
button.favorite_button_in2 {
    display: inline-block;
    cursor: pointer;
    border-color: rgb(80,80,80,0.1);
    font-size: 0.95rem;
    transition: 0.2s ease-in-out;
    background: #fcfcfc;
    font-weight: 200;
    padding: 10px 10px;
    border-radius: 25px;
    color: #FFF;
    text-decoration: none;
    width: 60px;
    display: block;
    margin: 20px auto;
}
button.favorite_button_in2 i {
    color: #6bb6ff;
    font-size: 1.3rem;
    vertical-align: -1px;
    margin-right: 0px;
    opacity: 0.3;
}
button.favorite_button_in3 {
    display: inline-block;
    cursor: pointer;
    border-color: rgb(80,80,80,0.1);
    font-size: 0.95rem;
    transition: 0.2s ease-in-out;
    background: #fcfcfc;
    font-weight: 200;
    padding: 10px 10px;
    border-radius: 25px;
    color: #FFF;
    text-decoration: none;
    width: 100%;
    min-width: 104px;
    max-width: 160px;
    display: block;
    margin: 20px auto;
}
button.favorite_button_in3 i {
    color: #6bb6ff;
    font-size: 1.3rem;
    vertical-align: -1px;
    margin-right: 0px;
    opacity: 0.3;
}

.fa-star:before {
    content: "\f005";
}
button.favorite_button_in p {
    display: inline-block;
    margin: 0;
    font-size: 0.95em;
}
.is-choosen .favorite_button_in,.is-choosen .favorite_button_in2 {
    background: #6bb6ff;
}
.is-choosen .favorite_button_in i, .is-choosen .favorite_button_in2 i {
    opacity: 1;
    color: #FFFF00;
}
.is-choosen .favorite_button_in p, .is-choosen .favorite_button_in2 p {
    color: #FFFF00;
    font-weight: 600;
}
.is-choosen .favorite_button_in,.is-choosen .favorite_button_in3 {
    background: #6bb6ff;
}
.is-choosen .favorite_button_in i, .is-choosen .favorite_button_in3 i {
    opacity: 1;
    color: #FFFF00;
}
.is-choosen .favorite_button_in p, .is-choosen .favorite_button_in3 p {
    color: #FFFF00;
    font-weight: 600;
}
a.productListSaw{
    display: flex;
    justify-content: space-between;
    /* background-color: #e3e3e3; */
    border: 1px solid #e3e3e3;
    border-radius: 30px;
    padding: 5px 10px;
    margin-bottom:5px;
    text-decoration: none;
	background-color: #bfe6f3;
}
a.productListSaw:nth-child(even){
	background-color: #edf4fa;
}

.proNameSaw{
	flex-basis: 60%;
	padding: 5px 5px 5px 10px;
	color: #000000;
}
.proNameSaw span{
	color: #000000;
}
.proCate{
	flex-basis: 35%;
	padding: 5px 5px 5px 10px;
	font-size: 90%;
	text-align: left;
	color: #3696b7;
}
.proCate2{
	flex-basis: 25%;
	padding: 5px 5px 5px 0px;
	font-size: 90%;
	text-align: left;
	color: #3696b7;
}
a.productListLike{
    display: flex;
    justify-content: space-between;
    /* background-color: #e3e3e3; */
    border: 1px solid #e3e3e3;
    border-radius: 30px;
    padding: 5px 10px;
    margin-bottom:5px;
    text-decoration: none;
	background-color: #e9d4dd;
}
a.productListLike:nth-child(even){
	background-color: #f9e6ec;
}

.proNameLike{
	flex-basis: 70%;
	padding: 5px 5px 5px 10px;
	color: #000000;
}
.proNameSaw span{
	color: #000000;
}

.dodLine{
    border-top: 1px dotted #ccc;
}
.productList_new{
    display: flex;
    justify-content: space-between;
    /* background-color: #e3e3e3; */
    border: 1px solid #e3e3e3;
    border-radius: 30px;
    padding: 5px 10px;
}
/************************/
/*** お知らせ用 *****/
/********************/
/*==================================================
アコーディオンのためのcss
===================================*/

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
  border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}
.title span {
	display: block;
	font-size:0.8rem;
}
.title span.labelBox {
	display: inline-block;
    margin-right: 10px;
}
.type1 {
    border: 1px solid #2271e7;
    background-color: #b2cdef;
}
.type2 {
    border: 1px solid #f36c6c;
    background-color: #efdadb;
}
.type3 {
    border: 1px solid #4835e3;
    background-color: #bcb9ed;
}
.type4 {
    border: 1px solid #138b17;
    background-color: #9fe588;
}
.type5 {
    border: 1px solid #df6c09;
    background-color: #e7bb95;
}
.newsCheck {
    font-size: 0.8em;
    border: 1px solid #3e9e3a;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #d0efcf;
    text-decoration: none;
    color: #145e11;
}
.newsAlert {
    font-size: 0.8em;
    border: 1px solid #F36C6C;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #EFDADB;
    text-decoration: none;
    color: #fe0000;
}
/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;

}
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);

}
.title::after{
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(0deg);
}

.title.close::after{
  transform: rotate(0deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
  margin:0 3% 3% 3%;
    padding: 3%;
}

/********************/

.radioCardSeq{
	display: none;
}
.cardRow{
	display: flex;
	align-items: center;
    background-color: #efefef;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid #8aba2b;
    margin: 10px auto;
}
.cardSet2{
	display: flex;
	align-items: center;

}
.cardRow2{
	flex-basis: 55%;
    display: flex;
    background-color: #efefef;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #999999;
    margin: 10px auto;
    justify-content: space-around;
    align-items: center;
}
.cardRow2:hover{
	cursor: pointer;
	opacity: 0.7;
}


a.btnDarkgray{
    background-color: #666666;
    padding: 5px 25px;
    border-radius: 20px;
    color: #FFF;
    text-decoration: none;
}
.radioCardSeq:checked ~ .cardRow, .radioCardSeq:checked ~ .cardRow2 {
    background-color: #a1a1a1;
}

.card01{
	flex-basis: 42%;
}
.card02{
	flex-basis: 53%;
    text-align: center;
}
.card02_left{
        flex-basis: 53%;
    text-align: left;
}
.cardRow2 .card02{
	flex-basis: 70%;
    text-align: center;
}
.card03{
	flex-basis: 10%;
	    display: flex;
}
.msgRow{
    display: flex;
    align-items: center;
}
.cartList{
	display: flex;
	align-items: center;
    border: 1px solid #b7b7b7;
}
.cartList .proTitle{
    padding: 5px 5px 5px 10px;
	flex-basis: 30%;
    background-color: #ceeede;
}
.cartList:nth-child(even) .proTitle{
	background-color: #fffff0;
}

.cartList .proData{
    padding: 5px 10px 5px 5px ;
	flex-basis: 40%;
}
.msgBoxG{
    background-color: #ceeede;
    width: AUTO;
    padding: 10px 20px;
}
.orderData{
	margin:5px auto 20px;
}
.productListData2{
	display: flex;
    background-color: #ceeede;
    margin-top: 20px;
    border: 1px solid #ceeede;
}
.productListData2_del{
	display: flex;
    background-color: #e4e4e4;
    margin-top: 20px;
    border: 1px solid #e4e4e4;
}
.productListData2_row {
	display: flex;
    justify-content: space-between;
}
.productListData2_row div{
    flex-basis: 60%;
    border: 1px solid #e6e6e6;
    padding: 5px 5px 5px 10px;
}
.productListData2_row div.sday {
    background-color: #fffff0;
    flex-basis: 40%;
    border: 1px solid #e6e6e6;
}
.productListData2_row div.pday {
    background-color: #ceeede;
    flex-basis: 40%;
    border: 1px solid #e6e6e6;
}
.productListData2_row div.sday_del {
    background-color: #efefef;
    flex-basis: 40%;
    border: 1px solid #e6e6e6;
}
.productListData2_row div.pday_del {
    background-color: #e4e4e4;
    flex-basis: 40%;
    border: 1px solid #e4e4e4;
}

.stop_btn {
	padding: 0;
}
.stop_btn span {
    background-color: #FFF;
    border: 1px solid #e6e6e6;
    color: #333;
    text-decoration: none;
    text-align: center;
    width: 100%;
    padding: 5px 0;
    cursor: pointer;
    margin: 0 auto;
    transition: background-color 150ms ease-in;
    font-size: 12px;
    line-height: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stop_btn span:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/check_off.png);
    background-size: contain;
    vertical-align: middle;
    padding-right: 10px;
    background-repeat: no-repeat;
}
.stop_btn input[type=checkbox] {
  display: none;
}

.stop_btn input[type=checkbox]:checked + span {
	background-size: 15px 13px;
	background-color: #ffcccc;
	border: 1px solid #ffcccc;
}
.stop_btn input[type=checkbox]:checked + span:before {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
	width: 20px;/*画像の幅*/
	height: 20px;/*画像の高さ*/
	background-image: url(../img/check_on_r.png);
	background-size: contain;
	vertical-align: middle;
}
.stop_btn_gray span {
    background-color: #FFF;
    border: 1px solid #e6e6e6;
    color: #b3b3b3;
    text-decoration: none;
    text-align: center;
    width: 100%;
    padding: 5px 0;
    cursor: pointer;
    margin: 0 auto;
    transition: background-color 150ms ease-in;
    font-size: 12px;
    line-height: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stop_btn_gray:hover {
	cursor: none;
}
.stop_btn_gray span:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/check_off.png);
    background-size: contain;
    vertical-align: middle;
    padding-right: 10px;
    background-repeat: no-repeat;
}

.errorTxt{
    display: block;
    color: #EF0000;
    font-weight: normal;
}
.footerTop {
	display: none;
}
@media only screen and (max-width: 750px) {
	.proPrice {
		flex-basis: 20%;
		padding: 5px 5px 5px 10px;
		font-size: 80%;
		text-align: right;
	}
	.header-image {
		width: 100%;
	}
	.pageLogin_content1, .main_content1{
		width: 100%;
		max-width: 1000px;
		margin: -10px auto -15px;
		padding-bottom: 30px;
	}
	footer {
		padding: 0;
	    font-size: 12px;
	    background-color: #4e5346;
	    border-top: none;
	    padding-bottom: 30px;
	}
	.footerTop {
		display: block;
	}
	#page_top {
		display: none;
	}
	.footerMenu ul li a {
	    color: rgb(255 255 255);
	}
	.footerMenu ul li a::after {
	    background-image: url(../img/icon_link_w.png);
	}
	h1 {
		text-align: center;
		width: 100%;
		position: relative;
		font-size: 18pt;
		max-width: 400px;
		margin: 0 auto 25px;
		background-color: unset;
		height: auto;
		padding-top: 10px;
	    padding-bottom: 0px;
	}
	h1:before {
		position: absolute;
		content: " ";
		display: block;
		border-bottom: solid 5px #3e9e3a;
		bottom: -5px;
		width: 45%;
		left: 25%;
	}
	h1:after {
		position: absolute;
		content: " ";
		display: block;
		border-bottom: solid 5px #999;
		bottom: -5px;
		width: 15%;
		left: 60%;
	}
	.main_inn {
	    margin-top: -15px;
	    width: 90%;
	    max-width: 500px;
	}
	.header-mypage {
	    height: 80px;
	    width: 70px;
	    padding-top: 10px;
	}
}
/* トップビジュアルスライド */
.slide {
/*  position: relative; */
  width: 100%;
  padding-top: 20%;
/*  overflow: hidden;*/
}

@keyframes slideshow {
   0% { opacity: 0 }
   3% { opacity: 1 }
  50% { opacity: 1 }
  55% { opacity: 0 }
 100% { opacity: 0 }
}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation: slideshow 10s linear infinite;
      object-fit: cover;
    max-height: 300px;
}

.slide img:nth-of-type(1) {
  animation-delay: 0s;
}

.slide img:nth-of-type(2) {
  animation-delay: 5s;
}
/* トップビジュアルスクロール 終了 */

/***　ラジオボタン　***/
.cp_ipradio {
	width: 90%;
	margin: 2em auto;
	text-align: left;
}
@keyframes click-wave {
	0% {
		position: relative;
		width: 30px;
		height: 30px;
		opacity: 0.35;
	}
	100% {
		width: 200px;
		height: 200px;
		margin-top: -80px;
		margin-left: -80px;
		opacity: 0;
	}
}
.cp_ipradio .option-input {
	position: relative;
	position: relative;
	top: -4px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 30px;
	margin-right: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease-out 0s;
	color: #ffffff;
	border: none;
	outline: none;
	background: #d7cbcb;
	-webkit-appearance: none;
	        appearance: none;
}
.cp_ipradio .option-input:hover {
	background: #d6a9a9;
}
.cp_ipradio .option-input:checked {
	background: #da3c41;
}
.cp_ipradio .option-input:checked::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✔';
	text-align: center;
}
.cp_ipradio .option-input:checked::after {
	position: relative;
	display: block;
	content: '';
	-webkit-animation: click-wave 0.65s;
	        animation: click-wave 0.65s;
	background: #da3c41;
}
.cp_ipradio .option-input.radio {
	border-radius: 50%;
}
.cp_ipradio .option-input.radio::after {
	border-radius: 50%;
}
.cp_ipradio label {
	line-height: 40px;
	display: block;
}
.cp_ipradio .option-input:disabled {
	cursor: not-allowed;
	background: #b8b7b7;
}
.cp_ipradio .option-input:disabled::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✖︎';
	text-align: center;
}
.cp_ipradio .disabled {
	color: #9e9e9e;
}

.animalBlock{
    border: 1px solid #333;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
#animalNew:checked + .animalBlock{
    height: auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

.saisou_btn {
 background-color:#696969 !important;
 border: solid 1px #696969 !important;
}
.opthion_select_h1 {
 line-height:2rem;
}
/**** settings（各種設定）****/
.set-box {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.settingsALL {
    background-color: #fff;
    border: #3E9E3A solid 2px;
    border-radius: 10px;
    flex: 1;
    text-align: center;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000000;
    transition: background-color 1s;
    line-height: 20px;
}
.settingsALL:hover {
    background-color: #c9c9c9;
}

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

}
/**** user-info（ユーザー情報・設定）****/
.user-frame {
    border: solid 1px #333;
    padding: 5px 10px;
    border-radius: 10px;
    height: 30px;
}
.user-frameBikou {
    /* width: 100%; */
    height: auto;
    border: solid 1px #333;
    border-radius: 10px;
    padding: 10px;
}
.bkgray {
    background-color: #c9c9c9;
}
/**** delivery-list（お届け先一覧）****/
.editButtonDelivery {
    background-color: #3E9E3A;
    padding: 10px 10px;
    border-radius: 25px;
    color: #FFF;
    text-decoration: none;
    width: 200px;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: 0;
}
.delivery-box {
    margin-top: 50px;
    width: 90%;
    height: 400px;
    border: #3E9E3A solid 2px;
    border-radius: 5px;
}
/*==============================*/
/* table */
/*==============================*/
table.tableType02, table.tableType03 {
  width: 100%;
  margin: 20px auto;
}
.tableType02 th {
  background: #3e9e3a;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
  width: 150px;
}
.tableType02 td {
  border: solid 1px #ccc;
  padding: 10px;
}
.greenTable2 th {
  background: #69c664;
}
.blueTable2 th {
  background: #70c6e2;
}
.tableType03 th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.tableType03 td {
  border: solid 1px #ccc;
  padding: 10px;
}

@media screen and (max-width: 750px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tableType02, .tableType03 {
    width: 95%;
    margin: 45px auto 20px;
  }
  .tableType02 th {
    border-bottom: none;
    display: block;
  }
  .tableType02 td {
    /* border-bottom: none; */
    display: block;
  }
  .tableType03 .thead {
    display: none;
  }
  .tableType03 tr,
  .tableType03 td{
    display: block;
    position: relative;
  }
  .tableType03 td:first-child {
    background: #e9727e;
    color: #fff;
    font-weight: bold;
  }
  .tableType03 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
  .tableType03 tr {
    margin-bottom: 10px;
  }
}
/*==============================*/
/* modal */
/*==============================*/
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999999;
}
.modalConnect{
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999999;
}
.close-btn{
text-align: right;
text-decoration: none;
font-size: 1.8rem;
color: #666;
}
.modal-bg{
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modal-box{
background: #fff;
left: 50%;
padding: 16px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 65%;
}
/*==============================*/
/* pager */
/*==============================*/

.pager .pagination {
  text-align: center;
}

.pager .pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
  border-radius: 50px;
}

.pager .pagination li.pre,
.pager .pagination li.next{
  background: #3e9e3a;
  color: #fff;
}

.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}

.pager .pagination li.pre a,
.pager .pagination li.next a{
  color: #fff;
}

.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: #000;
  background: #d5ecaf;
  border-radius: 10px;
  border-radius: 50px;
  animation: animScale 0.4s ease-out;
  transform-origin: 50% 50%;
  -webkit-animation: animScale 0.4s ease-out;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animScale 0.4s ease-out;
  -moz-transform-origin: 50% 50%;
}
@keyframes animScale {
  0% { transform: scale(0.8, 0.8); }
  40% { transform: scale(1.2, 1.2); }
  60% { transform: scale(1, 1); }
  80% { transform: scale(1.1, 1.1); }
  100% { transform: scale(1, 1); }
}
@-webkit-keyframes animScale {
  0% { -webkit-transform: scale(0.8, 0.8); }
  40% { -webkit-transform: scale(1.2, 1.2); }
  60% { -webkit-transform: scale(1, 1); }
  80% { -webkit-transform: scale(1.1, 1.1); }
  100% { -webkit-transform: scale(1, 1); }
}
@-moz-keyframes animScale {
  0% { -moz-transform: scale(0.8, 0.8); }
  40% { -moz-transform: scale(1.2, 1.2); }
  60% { -moz-transform: scale(1, 1); }
  80% { -moz-transform: scale(1.1, 1.1); }
  100% { -moz-transform: scale(1, 1); }
}


@media only screen and (max-width: 767px){
  .pager .pagination li{
/*    display: none; */
	  width: 35px;
	  height: 35px;
  }

  .pager .pagination li.pre,
  .pager .pagination li.next{
  /*
    display: inline-block;
    width: 40%;
    height: 50px;
    text-align: center;
    */
  }

  .pager .pagination li.pre a,
  .pager .pagination li.next a{
    width: 100%;
    text-align: center;
  }

  .pager .pagination li.pre span::after{
/*    content: "　前の10件へ"; */
  }

  .pager .pagination li.next span::before{
/*    content: "次の10件へ　"; */
  }

}

/*==============================*/
/* spinner */
/*==============================*/

.btnspinner{
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.spinner_area, .spinner_area_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
}
.spinner_area_detail {
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
}
.spinner_area input, .spinner_area_row input, .spinner_area_detail input{
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width: auto;
    vertical-align: middle;
    /* デフォルトのスピナーを消す */
    -webkit-appearance: none;
    -moz-appearance:textfield;
}

.spinner_area input[type="button"], .spinner_area_row input[type="button"], .spinner_area_detail input[type="button"]{
    cursor: pointer;
}
.spinner_area input[type="number"], .spinner_area_row input[type="number"], .spinner_area_detail input[type="number"]{
    width: 50px;
}
.proQty{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.rowDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
}
@media only screen and (max-width: 750px) {
	.proQty{
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	}
	.spinner_area{
	    display: flex;
	    flex-direction: column-reverse;
	}
}

.proNo {
    display: block;
    font-size: 85%;
    color: #656565;
}

/*==============================*/
/* ラジオボタン */
/*==============================*/

ul.selectRadio{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

ul.selectRadio li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  border-bottom: 1px solid #333;
}

ul.selectRadio li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul.selectRadio li label{
  display: block;
  position: relative;
  font-weight: 300;
  padding: 15px 15px 15px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul.selectRadio li:hover label{
  color: #666666;
}

ul.selectRadio li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

ul.selectRadio li:hover .check {
  border: 5px solid #666666;
}

ul.selectRadio li .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
  left: 5px;
  margin: auto;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}

ul.selectRadio li input[type=radio]:checked ~ .check {
  border: 5px solid #3e9e3a;
}

ul.selectRadio li input[type=radio]:checked ~ .check::before{
  background: #3e9e3a;
}

ul.selectRadio li input[type=radio]:checked ~ label{
  color: #3e9e3a;
}



/* Styles for alert...
by the way it is so weird when you look at your code a couple of years after you wrote it XD */

.alert {
  box-sizing: border-box;
  background-color: #BDFFE1;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 300;
  padding: 20px 40px;
  color: #333;
}

.alert h2 {
  font-size: 22px;
  color: #232323;
  margin-top: 0;
}

.alert p {
  line-height: 1.6em;
  font-size:18px;
}

.alert a {
  color: #232323;
  font-weight: bold;
}



.selectBox {
    padding: 5px 10px;
    border: 1px solid #999;
    margin: 20px auto;
}
.selectBoxFlex {
    padding: 5px 10px;
    border: 1px solid #999;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}
.titTxt {
    font-weight: 600;
    background: #3e9e3a;
    padding: 2px 5px;
    color: #FFF;
}
.titTxt2 {
    font-weight: 600;
    padding: 2px 5px;
    width: 60%;
    max-width: 60%;
    word-break: break-word;
}
.titTxt3 {
    font-weight: 600;
    padding: 2px 5px;
    width: 90%;
    max-width: 90%;
    word-break: break-word;
}
.dateTxt {
    font-size: 0.8em;
}
.selectTit {
    color: #3e9e3a;
    font-weight: 600;
}
.txtRight {
    margin: -20px 0 0 auto;
    text-align: right;
}
.txtCenter {
	text-align: center;
}

/*==============================*/
/* プルダウン */
/*==============================*/

.cp_ipselect {
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.cp_ipselect select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
  position: relative;
  border: 1px solid #888;
  border-radius: 10px;
  background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #888;
}
.cp_ipselect.cp_sl01 select {
  padding: 8px 38px 8px 8px;
  color: black;
}

/* チェックボックス全体 */
.checknox-wrap {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

/* デフォルトチェックボックス非表示 */
.checknox-wrap input {
  display: none;
}

/* チェックボックスのスタイル */
.checknox-wrap .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 2px solid #999999;
  box-sizing: border-box;
  border-radius: 4px;
}

/* チェックマーク作成 */
.checknox-wrap .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: 2px solid #FFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* チェック時のスタイル */
.checknox-wrap input:checked + .checkmark {
  background-color: #0070bd;
  border: 2px solid #0070bd;
}

/* チェック時 チェックマーク表示 */
.checknox-wrap input:checked + .checkmark:after {
  display: block;
}
/*==============================*/
/* カート投入ボタン */
/*==============================*/
@media screen and (min-width: 768px) {
  .cartButtonContainer {
	text-align: center;
    letter-spacing: 0;
	}

  #cartButton {
    max-width: 1000px;
    margin: 10px auto;
    text-align: left;
    position: fixed;
     }
  #cartButton .disable {
    pointer-events: none;
    color: #c3c3c3; }
  #cartButton .footer_nav {
    position: absolute;
    right: 0;
    top: -70px;
    }
   .bottom-fixed-button .btn_cart {
     width: 100px;
     height: 100px;
  	background: #d53467;
     position: fixed;
     bottom: 75%;
     right: 75px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     flex-direction: row;
     pointer-events: auto;
     border-radius: 50%;


  display: block;
  text-decoration: none;
  }

   .bottom-fixed-button .btn_cart span {
     font-size: 17px;
     color: #fff;
     letter-spacing: 0.05em;
     font-weight: 700;
     display: inline-block;
     transform: rotate(0.05deg);


     font-family: 'Font Awesome 5 Free';
     content: '\f077';
     color: #FFF;
     position: absolute;
     width: 100px;
     height: 100px;
     top: 71px;
     bottom: 0;
     right: 0;
     margin: auto;
     text-align: center;
   }

}
@media screen and (max-width: 767px) {
       .cartButtonContainer {
     	display: flex;
         flex-flow: column;
     	bottom: 0;
     	width: 100%;
     	background: #fff;}
       .bottom-fixed-button {
         position: fixed;
         bottom: 0;
         width: 15vw;
         height: 15vw;
         text-align: center;
         z-index: 99999999;}

       .bottom-fixed-button .btn_cart {
         width: 15vw;
         height: 15vw;
         background: #d53467;
         position: fixed;
         bottom: 80%;
         right: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: hidden;
         flex-direction: row;
         pointer-events: auto;
         border-radius: 50%;}

       .bottom-fixed-button .btn_cart i {
             display: block;
             width: 3.7vw;
             height: 3.8vw;
             background: url(/images/user/common/icon_login.png) no-repeat center center/contain;
             margin: 0 auto 1vw;
             z-index: 50;
             position: relative;}

       .bottom-fixed-button .btn_cart span {
         letter-spacing: 0.05em;
         display: inline-block;
         transform: rotate(0.05deg);

         font-family: 'Font Awesome 5 Free';
	     font-weight: 900;
	     content: '\f077';
	     font-size: 0.7rem;
	     color: #FFF;
	     position: absolute;
	     width: 100px;
	     height: 100px;
	     top: 62px;
	     bottom: -20px;
	     right: -21px;
	     margin: auto;
	     text-align: center;
         }

}
/*==============================*/
/* 下へ移動 */
/*==============================*/
#page_bottom{
    width: 70px;
    height: 70px;
    position: absolute;
    background: #333;
    border-radius: 50%;
    border: 1px solid #333;
    cursor: pointer;
    transform: translate(520px);
    z-index: 50;
}
	#page_bottom #btn_bottom{
	  position: relative;
	  display: block;
	  width: 50px;
	  height: 50px;
	  text-decoration: none;
	}
#page_bottom #btn_bottom::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f078';
    font-size: 30px;
    color: #FFF;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 18px;
    margin: auto;
    text-align: center;
}
@media screen and (max-width: 750px) {
		#page_bottom{
	    width: 50px;
	    height: 50px;
	    position: absolute;
	    right: 0;
	    background: #333;
	    border-radius: 50%;
	    border: 1px solid #333;
	    cursor: pointer;
	    transform: translate(-17px);
	}
	#page_bottom #btn_bottom{
	  position: relative;
	  display: block;
	  width: 50px;
	  height: 50px;
	  text-decoration: none;
	}
	#page_bottom #btn_bottom::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f078';
    font-size: 30px;
    color: #FFF;
    position: absolute;
    width: 30px;
    height: 30px;
    top: -20px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
}
/* モーダル画像 */
.noticeImageModal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s;
}

.noticeImageModal img {
  max-width: 90%;  /* 画像の最大幅を親要素(modal)の90%に制限し、画面内に収まるようにする */
  max-height: 100vh;  /* 画像の最大高さをビューポートの高さ(100vh)に制限し、画面内に収まるようにする  */
  object-fit: contain;  /* 画像の比率を保持しつつ、指定された高さと幅に収める */
}

.noticeImageModal img:hover {
  cursor: zoom-out;  /* モーダル内の画像にホバー時にカーソルをズームアウトのアイコンに変更 */
}

@keyframes noticeImageModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes noticeImageModalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}