@charset "utf-8";

/*------------------------------------------------------------
  Whitening
------------------------------------------------------------*/

#motto-box { display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; height:64.1vw; background:url(../img/whitening/photo03.webp) center center/cover no-repeat; margin:0 -5.13vw 10.25vw; padding:5.13vw; }
#motto-box dt {}
#motto-box dt strong { display:flex; justify-content:center; align-items:center; height:9.23vw; background:#fff; text-align:center; margin:0 0 5.13vw; padding:0 1.54vw; font-size:7.18vw; color:#464646; font-weight:600; }
#motto-box dt span { display:block; text-align:center; margin:0 0 3.59vw; font-size:5.89vw; font-weight:600; }
#motto-box dd { width:100%; background:rgba(255,255,255,0.5); border:1.28vw #fff solid; text-align:center; padding:2.56vw 0; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
#motto-box dd mark { display:flex; justify-content:center; align-items:center; width:73.33vw; height:7.18vw; line-height:1.5; background:#000; margin:0 auto 2.05vw; font-size:4.1vw; color:#fff; font-weight:600; }
#motto-box dd span { display:block; font-size:7.18vw; }
#motto-box dd span strong { font-size:16.66vw; font-weight:400; }

@media screen and (min-width:900px){
#motto-box { align-items:end; height:23.55vw; margin:0 0 2.9vw; padding:1.45vw; }
#motto-box dt {}
#motto-box dt strong { height:3.26vw; margin:0 0 1.45vw; padding:0 0.43vw; font-size:2.53vw; }
#motto-box dt span { margin:0 0 1.01vw; font-size:2.1vw; }
#motto-box dd { width:31.44vw; border:0.43vw #fff solid; padding:1.45vw 0; }
#motto-box dd mark { width:23.76vw; height:2.17vw; margin:0 auto 1.09vw; font-size:1.3vw; }
#motto-box dd span { font-size:2.03vw; }
#motto-box dd span strong { font-size:4.71vw; }
}
@media screen and (min-width:1380px){
#motto-box { height:325px; margin:0 0 40px; padding:20px; }
#motto-box dt {}
#motto-box dt strong { height:45px; margin:0 0 20px; padding:0 6px; font-size:35px; }
#motto-box dt span { margin:0 0 14px; font-size:29px; }
#motto-box dd { width:434px; border:6px #fff solid; padding:20px 0; }
#motto-box dd mark { width:328px; height:30px; margin:0 auto 15px; font-size:18px; }
#motto-box dd span { font-size:28px; }
#motto-box dd span strong { font-size:65px; }
}




#whitening-start-box { display:flex; flex-flow:column nowrap; justify-content:start; align-items:center; height:142vw; background:url(../img/whitening/sp_photo05.webp) center top/100% auto no-repeat; margin:0 -5.13vw 10.25vw; padding:57.69vw 5.13vw 5.13vw; }
#whitening-start-box dt { padding:0 0 6.15vw; }
#whitening-start-box dt span { display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; height:9.23vw; background:#fff; text-align:center; margin:0 0 5.13vw; padding:0 2.56vw; font-size:7.18vw; color:#464646; font-weight:600; }
#whitening-start-box dd { width:100%; background:rgba(216,230,239,0.6); border:1.28vw #fff solid; text-align:center; padding:3.07vw 5.13vw; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
#whitening-start-box dd p { margin:0 auto 2.05vw; }
#whitening-start-box dd p mark { display:flex; justify-content:center; align-items:center; height:7.18vw; line-height:1.5; background:#fff; margin:0 0 2.05vw; font-size:4.1vw; color:#464646; font-weight:600; }
#whitening-start-box dd span { display:block; font-size:7.18vw; }
#whitening-start-box dd span strong { font-size:16.66vw; font-weight:400; }

@media screen and (min-width:900px){
#whitening-start-box { align-items:end; height:23.55vw; background:url(../img/whitening/photo05.webp) center top/100% auto no-repeat; margin:0 0 2.9vw; padding:1.16vw 1.45vw; }
#whitening-start-box dt { padding:0; }
#whitening-start-box dt span { height:3.26vw; margin:0 0 0.87vw; padding:0 0.43vw; font-size:2.53vw; }
#whitening-start-box dd { width:28.55vw; border:0.43vw #fff solid; padding:0.87vw 1.45vw; }
#whitening-start-box dd p { margin:0 auto 0.72vw; }
#whitening-start-box dd p mark { height:2.17vw; margin:0 auto 0.77vw; font-size:1.3vw; }
#whitening-start-box dd span { font-size:2.03vw; }
#whitening-start-box dd span strong { font-size:4.71vw; }
}
@media screen and (min-width:1380px){
#whitening-start-box { height:325px; margin:0 0 40px; padding:16px 20px; }
#whitening-start-box dt {}
#whitening-start-box dt span { height:45px; margin:0 0 12px; padding:0 6px; font-size:35px; }
#whitening-start-box dd { width:394px; border:6px #fff solid; padding:12px 20px; }
#whitening-start-box dd p { margin:0 auto 10px; }
#whitening-start-box dd p mark { height:30px; margin:0 auto 3px; font-size:18px; }
#whitening-start-box dd span { font-size:28px; }
#whitening-start-box dd span strong { font-size:65px; }
}