@charset "utf-8";
/*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: #333; }

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

p { font-size: 1.6rem; line-height: 1.5; font-weight: 400;}

ol, ul{ list-style-type:none; }
li { font-size: 1.6rem; line-height: 1.5;}

a:hover { /*opacity: 0.5; transition: all .5s cubic-bezier(.165,.84,.44,1);*/}
a {text-decoration: none; color: #333; font-size: 1.6rem;  line-height: 1.5;}

table { border-collapse: collapse; }
th { font-size: 1.6rem; line-height: 1.5; font-weight: normal; text-align: center; padding: 10px; border: solid 1px #000;}
td { font-size: 1.6rem; line-height: 1.5; padding: 10px; border: solid 1px #000;}

dt { font-size: 1.6rem; line-height: 1.5;}
dd { font-size: 1.6rem; line-height: 1.5;}

img[src$=".svg"] { max-width: 100%; }

.contentsBox { margin-top: 3%;}

.inner { width: 90%; max-width: 1000px; margin: 0 auto;}
@media only screen and (max-width:768px){
  .inner { width: 90%; min-width: auto;}
}

/*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:768px){
  .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%; }

/*font*/
.fsS { font-size: 1.2rem;}
.fsM { font-size: 1.6rem;}
.fsL { font-size: 2.0rem;}
.fcWhite { color: #fff;}
.fcBlack { color: #000;}
.fcRed { color: #970000;}
.fcBlue { color: #00009b;}
.fcPink { color: #8ab550;}

/*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:768px){
  .indent1 { padding-left: 0px;}
}

/*background*/
.bgWhite { background-color: #fff;}
.bgBlack { background-color: #000;}
.bgGray { background-color: #F4F5F4;}
.backRightUp { padding: 200px 0; position: relative;}
.backRightUp::before { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(90deg,rgba(160, 195, 50, 1) 0%, rgba(245, 242, 225, 1) 50%, rgba(160, 195, 50, 1) 100%); position: absolute; top: 0; clip-path: polygon(0 calc(0% + 210px), 100% 0%, 100% calc(100% - 210px), 0% 100%); opacity: 0.2; mix-blend-mode: multiply; z-index: -1;}
.backRightDown { padding: 200px 0; position: relative; margin: -135px 0;}
.backRightDown::before { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(90deg,rgba(160, 195, 50, 1) 0%, rgba(245, 242, 225, 1) 50%, rgba(160, 195, 50, 1) 100%); position: absolute; top: 0; clip-path: polygon(0 0, 100% calc(0% + 210px), 100% 100%, 0 calc(100% - 210px)); opacity: 0.1; mix-blend-mode: multiply; z-index: -1;}
@media only screen and (max-width:768px){
  .backRightUp { padding: 50px 0;}
  .backRightUp::before { clip-path: polygon(0 calc(0% + 60px), 100% 0%, 100% calc(100% - 60px), 0% 100%);}
  .backRightDown { padding: 50px 0 100px; margin: -40px 0 30px;}
  .backRightDown::before { clip-path: polygon(0 0, 100% calc(0% + 60px), 100% 100%, 0 calc(100% - 60px));}
}

/*フォーム*/
input { border: solid 1px #999; padding: 10px; font-size: 1.6rem;}
textarea { border: solid 1px #999; padding: 10px; font-size: 1.6rem;}
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:768px){
  /*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;}
}

/*parts*/
.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;}

.btnPink { max-width: 400px; margin: 20px auto;}
.btnPink a { display: block; width: 100%; padding: 20px 60px 20px 40px; color: #fff; font-weight: 700; font-size: 2.2rem; text-align: center; background: #8ab550; border-radius: 50px; box-shadow: 0 0 3px #999; position: relative;}
.btnPink a::after { content: ""; display: block; width: 23px; height: 23px; background-image: url(../images/arrow-green.svg); background-color: #fff; background-repeat: no-repeat; background-position: center; border-radius: 20px; background-size: 9px; position: absolute; top: 50%; right: 25px; transform: translateY(-50%);}
.btnGreen { max-width: 400px; margin: 20px auto;}
.btnGreen a { display: block; width: 100%; padding: 20px 60px 20px 40px; color: #fff; font-weight: 700; font-size: 2.2rem; text-align: center; background: #8ab550; border-radius: 50px; box-shadow: 0 0 3px #999; position: relative;}
.btnGreen a::after { content: ""; display: block; width: 23px; height: 23px; background-image: url(../images/arrow-green.svg); background-color: #fff; background-repeat: no-repeat; background-position: center; border-radius: 20px; background-size: 9px; position: absolute; top: 50%; right: 25px; transform: translateY(-50%);}

.btnBlue { max-width: 400px; margin: 20px auto;}
.btnBlue a { display: block; width: 100%; padding: 20px 60px 20px 40px; color: #fff; font-weight: 700; font-size: 2.2rem; text-align: center; background: #0071aa; border-radius: 50px; box-shadow: 0 0 3px #999; position: relative;}
.btnBlue a::after { content: ""; display: block; width: 23px; height: 23px; background-image: url(../images/arrow-blue.svg); background-color: #fff; background-repeat: no-repeat; background-position: center; border-radius: 20px; background-size: 9px; position: absolute; top: 50%; right: 25px; transform: translateY(-50%);}

.btnWhite { max-width: 180px; margin: 20px 0;}
.btnWhite a { display: block; width: 100%; padding: 5px 20px 5px 10px; color: #0071aa; font-weight: 700; font-size: 1.7rem; text-align: center; background: #fff; border-radius: 50px; position: relative;}
.btnWhite a::after { content: ""; display: block; width: 17px; height: 17px; background-image: url(../images/arrow-white.svg); background-color: #0071aa; background-repeat: no-repeat; background-position: center; border-radius: 20px; background-size: 6px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}


@media only screen and (max-width:768px){
  .btnBlack { margin: 10px auto; width: 100%; max-width: 300px;}
  .btnBlack a { font-size: 1.6rem;}
  .btnWhite a { padding: 9px 18px;}

  .btnPink a { font-size: 1.8rem; padding-left: 30px;}
}

/*text*/
.textBig { font-size: 2.2rem; line-height: 2;}
@media only screen and (max-width:768px){
  .textBig { font-size: 1.8rem; line-height: 1.7;}
}

/*ハンバーガーメニュー*/
.hamburger { display: block; width: 50px; height: 38px; cursor: pointer; text-align: center; z-index:12; position: relative; position: fixed; right: 50px; top: 40px; transition: 0.5s;}
.hamburger span { display: block; position: absolute; width: 100%; height: 3px; right: 0; background :#0071aa; 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: 0px;}
.hamburger span:nth-child(2) { top: 17px;}
.hamburger span:nth-child(3) { top: 35px;}
.hamburger.active { border-color: #fff;}
.hamburger.active span:nth-child(1) { top: 17px; left: 0px;-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) { top: 17px; -webkit-transform: rotate (45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); background: #fff;}
.hamburgerMenu { background: #0071aa; background-repeat: no-repeat; z-index: 11; position: fixed; top: -100%; left: 0; width: 100%; height: 100%; padding: 0; transition: 0.5s ease-in-out; box-shadow: 0 0 5px #999; overflow: hidden;}
.hamburgerMenu.active { display: block; overflow-y: auto; padding: 5%; transition: 0.5s ease-in-out; top: 0;}
.hamburgerListArea { padding: 10px 0 30px 2em;}
.hamburgerListTitle { font-size: 2.0rem; color: #13AAE3; font-weight: 700; background: #fff; padding: 5px 10px;}
.hamburgerList li { margin-bottom: 10px;}
.hamburgerList a { color: #fff; text-decoration: underline;}
.hamburgerList a:hover { text-decoration: none;}
.sub-menu { padding-left: 1em;}
/*headerが小さくなった後*/
.headerNavArea.small + .hamburger { top: 20px; transition: 0.5s;}
@media only screen and (max-width:768px){
  .hamburger { top: auto; bottom: 5px; right: 7px; width: 45px; height: 30px;}
  .hamburger span:nth-child(1) { top: 0px;}
  .hamburger span:nth-child(2) { top: 12px;}
  .hamburger span:nth-child(3) { top: 24px;}
  .headerNavArea.small + .hamburger { top: auto; transition: none;}
}


/*link*/
/*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"]:after { content: "→"; display: inline-block; padding-right: 0.5em;}
.linkText a[href^="#"]:after { content: "↓"; display: inline-block; padding-right: 0.5em;}
.linkText a[href$=".docx"]:after { content: "Word"; display: inline-block; margin-left: 0.5em; background: #0000ff; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.linkText a[href$=".xlsx"]:after { content: "Excel"; display: inline-block; margin-left: 0.5em; background: #008000; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.linkText a[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;}
.linkText a[href$=".jpg"]:after { content: "画像"; display: inline-block; margin-left: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}
.linkText a[href$=".png"]:after { content: "画像"; display: inline-block; margin-left: 0.5em; background: #00893A; padding: 0px 5px; border-radius: 5px; color: #fff; font-size: 1.2rem;}

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

.linkArrow a { display: flex; align-items: center; gap: 10px; font-size: 2.1rem; letter-spacing: 0.2em; font-weight: 500; color: #8ab550;}
.linkArrow a::after { content: ""; display: block; width: 23px; height: 23px; background-image: url(../images/arrow-white.svg); background-size: 5px; background-color: #fff; background-size: 9px; background-color: #fff; background-repeat: no-repeat; background-position: center left 8px; border-radius: 15px;}
.linkArrow.arrowPink a::after { background-color: #8ab550;}

/*▶系　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;}

/*box*/
.borderBottom2color { border-bottom: solid 4px #d1d1d3; position: relative; padding-bottom: 20px; position: relative;}
.borderBottom2color::after { content: ""; display: block; width: 125px; height: 4px; background: #8ab550; position: absolute; bottom: -4px; left: 0;}

/*headline*/
.headlineBold { font-size: 3.2rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.5rem;}

.headlineColJaEn {display: flex; justify-content: flex-start; align-items: center; gap: 20px;}
.headlineColJaEn .ja { font-size: 3.8rem; font-weight: 700; color: #8ab550;}
.headlineColJaEn .en { font-size: 1.8rem; padding: 0 10px; border: solid 1px #000; border-top: none; border-bottom: none; line-height: 1.0;}

.headlineToothbrush { text-align: center; padding: 50px 0 40px;}
.headlineToothbrush .en { display: inline-block; font-size: 2.1rem; line-height: 1; padding: 0 1em; border: solid 1px #000; border-top: none; border-bottom: none;}
.headlineToothbrush .ja { display: flex; justify-content: center; align-items: flex-end; gap: 20px; font-size: 5.4rem; font-weight: 700; color: #8ab550;}
.headlineToothbrush .ja::before { content: ""; display: block; width: 90px; height: 48px; background: url(../images/whisk-left.svg); background-repeat: no-repeat; background-size: contain; background-position: bottom center; margin-bottom: 15px;}
.headlineToothbrush .ja::after { content: ""; display: block; width: 90px; height: 48px; background: url(../images/whisk-right.svg); background-repeat: no-repeat; background-size: contain; background-position: bottom center; margin-bottom: 15px;}

.headlineFukidashi { text-align: center; font-size: 2.6rem; position: relative;}
.headlineFukidashi::after { content: ""; display: block; width: 235px; height: 15px; background: url(../images/icon-fukidashi.svg); background-repeat: no-repeat; background-size: contain; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%);}
.headlineFukidashi .fcPink { color: #8ab550; font-weight: 700;}
.headlineFukidashi .fzbig { font-size: 3.8rem; font-weight: 700;}

.headlineRowEnJa { text-align: center; margin-bottom: 20px;}
.headlineRowEnJa .en { display: inline-block; font-size: 1.8rem; color: #616161; line-height: 1; border: solid 1px #616161; border-top: none; border-bottom: none; padding: 0 1em;}
.headlineRowEnJa .ja { display: block; font-size: 3.8rem; font-weight: 700;}

.headlineRightUp { position: relative; padding: 225px 0; text-align: center; overflow: hidden;}
.headlineRightUp::before { content: ""; display: block; width: 1920px; height: 100%; background: linear-gradient(90deg,rgba(249, 234, 228, 1) 0%, rgba(253, 249, 251, 1) 50%, rgba(249, 234, 228, 1) 100%); position: absolute; top: 0; left: 50%; transform: translateX(-50%); clip-path: polygon(0 calc(0% + 285px), 100% 0%, 100% calc(100% - 285px), 0% 100%); mix-blend-mode: multiply;}
.headlineRightUp .title { font-size: 5.4rem; color: #8ab550; font-weight: 700; display: flex; justify-content: center; align-items: center;}
.headlineRightUp .num { font-size: 4.0rem; color: #fff; background: #8ab550; width: 50px; display: block; height: 50px; padding: 3px 10px 10px; line-height: 1; margin-top: 6px; margin-right: 10px; border-radius: 5px;}
.kazariLeft { position: absolute; width: 795px; right: 45%; top: 40px; z-index: 1;}
.kazariRight { position: absolute; width: 795px; left: 60%; bottom: 145px; z-index: 1; transform: rotate(-10deg);}
.number { width: 155px; height: 254px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;}
.season { position: absolute; width: 373px; height: 88px; left: calc( (100% - 1100px) / 2); bottom: 65px; z-index: -1;}

.headlineRightUpSmall { position: relative; padding: 90px 0; text-align: center; color: #8ab550; font-size: 4.7rem; font-weight: 700; overflow: hidden;}
.headlineRightUpSmall::before { content: ""; display: block; width: 1920px; height: 100%; background: linear-gradient(90deg,rgba(137, 186, 57, 0.3) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 60%, rgba(137, 186, 57, 0.3) 100%); position: absolute; top: 0; left: 50%; transform: translateX(-50%); clip-path: polygon(0 80%, 100% 0%, 100% 20%, 0% 100%); mix-blend-mode: multiply;}
.headlineRightUpSmall span { display: block; font-size: 2.2rem;}

.headlineRightUpBold { position: relative; padding: 90px 0; text-align: center; color: #8ab550; font-size: 4.7rem; font-weight: 700; overflow: hidden;}
.headlineRightUpBold::before { content: ""; display: block; width: 1920px; height: 100%; background: linear-gradient(90deg,rgba(137, 186, 57, 0.5) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 60%, rgba(137, 186, 57, 0.5) 100%); position: absolute; top: 0; left: 50%; transform: translateX(-50%); clip-path: polygon(0 70%, 100% 0%, 100% 30%, 0% 100%); mix-blend-mode: multiply;}

@media only screen and (max-width:768px){
  .headlineBold { font-size: 2.2rem; letter-spacing: 0.3rem;}

  .headlineColJaEn .ja { font-size: 3.0rem;}
  .headlineColJaEn .en { font-size: 1.6rem;}

  .linkArrow a { font-size: 1.8rem;}

  .headlineToothbrush .en { font-size: 1.8rem;}
  .headlineToothbrush .ja { font-size: 2.6rem;}
  .headlineToothbrush .ja::before { width: 25px; background-size: 65px; background-position: left bottom; margin-bottom: 5px;}
  .headlineToothbrush .ja::after { width: 25px; background-size: 65px; background-position: right bottom; margin-bottom: 5px;}

  .headlineRowEnJa .ja { font-size: 3.0rem;}

  .headlineRightUp { padding: 150px 0; margin: 50px 0;}
  .headlineRightUp::before { width: 100%; clip-path: polygon(0 calc(10% + 85px), 100% 10%, 100% calc(90% - 85px), 0% 90%);}
  .headlineRightUp .title { font-size: 2.6rem; margin-bottom: 10px;}
  .headlineRightUp .num { font-size: 2.2rem; width: 30px; height: 30px;}
  .kazariLeft { width: 395px; right: 10%; top: 35px;}
  .kazariRight { width: 395px; left: 10%; bottom: 50px;}
  .number { width: 100%; height: 160px;}
  .number img[src$=".svg"] { width: 100%; height: 100%; object-fit: contain;}
  .season { width: 210px; height: 50px; left: 0; bottom: 46px; transform: rotate(-4deg);}

  .headlineFukidashi { font-size: 2.0rem;}
  .headlineFukidashi .fzbig { font-size: 2.8rem;}

  .headlineRightUpSmall { font-size: 2.6rem; line-height: 1.3;}
  .headlineRightUpSmall::before { width: 100%; clip-path: polygon(0 60%, 100% 25%, 100% 40%, 0% 75%);}
  .headlineRightUpSmall span { margin-top: 10px;}

  .headlineRightUpBold { font-size: 3.0rem; padding: 60px 0; margin: 30px 0;}
  .headlineRightUpBold::before { width: 100%; clip-path: polygon(0 25%, 100% 5%, 100% 75%, 0% 95%); background: linear-gradient(90deg, rgba(220, 126, 142, 0.5) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(220, 126, 142, 0.5) 100%);}
}


/*table*/
.tableBlue { border-collapse: collapse;}
.tableBlue th { background: #6DA2D7; color: #fff; font-size: 1.6rem; padding: 10px; border: solid 1px #fff; border-right: none;}
.tableBlue td { font-size: 1.6rem; padding: 10px;border: solid 1px #6DA2D7;}

.wp-block-table.tableWhite { background: #fff; max-width: 780px; margin: 0 auto; padding: 30px;}
.wp-block-table.tableWhite table { max-width: 500px; margin: 0 auto;}
.wp-block-table.tableWhite td { border: none; border-bottom: solid 1px #C6C6C6; padding: 10px;}
.wp-block-table.tableWhite td:nth-of-type(1) { text-align: right; font-weight: bold; color: #0886B5;}
@media only screen and (max-width:768px){
  .wp-block-table.tableWhite td { border: none; padding-left: 1em;}
  .wp-block-table.tableWhite td:nth-of-type(1) { padding: 0; text-align-last: left;}
}

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