@charset "UTF-8";
#contents { width: 100%; margin: 0 auto; }

#plist { position: relative; z-index: 80; box-shadow: 0 8px 8px rgba(136, 136, 136, 0.1); }

#plist ol { margin-bottom: 0; padding-bottom: 14px; }

#suguuma { min-width: 960px; color: #3b302f; font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif; }

#suguuma html, #suguuma body, #suguuma div, #suguuma span, #suguuma applet, #suguuma object, #suguuma iframe, #suguuma h1, #suguuma h2, #suguuma h3, #suguuma h4, #suguuma h5, #suguuma h6, #suguuma p, #suguuma blockquote, #suguuma pre, #suguuma a, #suguuma abbr, #suguuma acronym, #suguuma address, #suguuma big, #suguuma cite, #suguuma code, #suguuma del, #suguuma dfn, #suguuma em, #suguuma img, #suguuma ins, #suguuma kbd, #suguuma q, #suguuma s, #suguuma samp, #suguuma small, #suguuma strike, #suguuma strong, #suguuma sub, #suguuma sup, #suguuma tt, #suguuma var, #suguuma b, #suguuma u, #suguuma i, #suguuma center, #suguuma dl, #suguuma dt, #suguuma dd, #suguuma ol, #suguuma ul, #suguuma li, #suguuma fieldset, #suguuma form, #suguuma label, #suguuma legend, #suguuma table, #suguuma caption, #suguuma tbody, #suguuma tfoot, #suguuma thead, #suguuma tr, #suguuma th, #suguuma td, #suguuma article, #suguuma aside, #suguuma canvas, #suguuma details, #suguuma embed, #suguuma figure, #suguuma figcaption, #suguuma footer, #suguuma header, #suguuma hgroup, #suguuma menu, #suguuma nav, #suguuma output, #suguuma ruby, #suguuma section, #suguuma summary, #suguuma time, #suguuma mark, #suguuma audio, #suguuma video { margin: 0; padding: 0; box-sizing: border-box; }

#suguuma main { display: block; }

#suguuma section { position: relative; z-index: 700; }

#suguuma img { vertical-align: bottom; }

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

#suguuma a { color: inherit; text-decoration: none; -webkit-transition: .3s; transition: .3s; }

#suguuma a:hover { opacity: .8; }

#suguuma a:hover img { opacity: 1; }

#suguuma .inner { margin: 0 auto; width: 960px; }

#suguuma .gothic { font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; }

#suguuma .mincho { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; }

#suguuma #kvArea { padding-top: 110px; position: relative; width: 100%; height: 665px; background: url(../images/suguuma/kv-bgi.png) repeat-x; background-position: center top; overflow: hidden; }

#suguuma #kvArea .kv_copy { margin-bottom: 37px; }

#suguuma #kvArea .kv_img { margin-top: -40px; margin-left: 8px; position: absolute; top: 0; left: 50%; -webkit-animation: fadeIn 3s .2s both; animation: fadeIn 3s .2s both; }

@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

#suguuma .local_nav { z-index: 801; }

#suguuma .local_nav .inner { margin: 0 auto; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; position: absolute; bottom: -38px; left: 50.5%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

#suguuma .local_nav li { margin: 0 7px; position: relative; }

#suguuma .local_nav li:before { margin-top: 60px; margin-left: 52px; display: block; position: absolute; top: 0; left: 0; padding: 17px; background: url(../images/suguuma/nav-icon-arrow.png) no-repeat center top; background-size: contain; content: ""; }

#suguuma .local_nav a:hover { opacity: 1; }

#suguuma .local_nav .icon_new { position: absolute; left: -30px; bottom: -3px; }

#suguuma .video_area { padding: 80px 0; z-index: 800; background: url(../images/suguuma/movie-bgi.png); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }

#suguuma .video_area .vdeo_wrap { border: solid 10px #fff; position: relative; width: 864px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); -webkit-transition: .3s; transition: .3s; background: url(../images/suguuma/movie-poster.jpg) no-repeat center center; background-size: cover; }

#suguuma .video_area .vdeo_wrap:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: url(../images/suguuma/movie-arrow.png) no-repeat center center; -webkit-transition: .3s; transition: .3s; pointer-events: none; }

#suguuma .video_area .vdeo_wrap:hover { opacity: .8; }

#suguuma .video_area .vdeo_wrap.play:before { opacity: 0; }

#suguuma .video_area video { width: 100%; height: auto; vertical-align: bottom; cursor: pointer; }

#suguuma .bnr-shizimi a { margin: -8px auto 40px; display: block; position: relative; width: 796px; }

#suguuma .bnr-shizimi a:hover { opacity: .6; }

#suguuma .bnr-shizimi .btn-detail { position: absolute; top: 115px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

#suguuma .cm_box { margin: 0 auto; padding: 14px; width: 960px; background: #fff; color: #3b302f; }

#suguuma .cm_box .inner_wrap { padding: 37px 0 75px; background: #fdfbf3; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; }

#suguuma .cm_box .mincho { line-height: 1; font-size: 32px; text-align: center; letter-spacing: -.05em; text-indent: .5em; }

#suguuma .cm_box .ls0 { letter-spacing: 0; }

#suguuma .cm_box .youtube_list { margin-top: 30px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; }

#suguuma .cm_box .youtube_list li { text-align: center; }

#suguuma .cm_box .youtube_list li:nth-child(1) { margin-right: 12px; }

#suguuma .cm_box .youtube_list li:nth-child(2) { margin-left: 12px; }

#suguuma .cm_box .youtube_list a { display: block; }

#suguuma .cm_box .youtube_list p { margin-top: 14px; padding-left: 20px; display: inline-block; background: url("../images/suguuma/cm-arrow.svg") no-repeat 2% center; font-size: 17px; font-weight: bold; text-align: center; letter-spacing: .075em; }

#suguuma .cm_box .lead { margin: 36px auto 0; padding: 19px 58px; width: 796px; background: url("../images/suguuma/cm-bracket.svg") no-repeat left top, url("../images/suguuma/cm-bracket-r.svg") no-repeat right bottom; line-height: 1.75; font-size: 15px; letter-spacing: .025em; }

#suguuma .cm_box .prof_area { margin: 54px auto 0; width: 796px; }

#suguuma .cm_box .headline_obi { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; height: 37px; background: #f3f0e3; }

#suguuma .cm_box .prof_list { margin-top: 26px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; color: #625251; }

#suguuma .cm_box .prof_list dl { width: 356px; }

#suguuma .cm_box .prof_list dl:nth-child(1) { margin-right: 26px; }

#suguuma .cm_box .prof_list dl:nth-child(2) { margin-left: 26px; }

#suguuma .cm_box .prof_list dl:nth-child(2) .name { background: url("../images/suguuma/cm-name-bgi-2.png") no-repeat left bottom; }

#suguuma .cm_box .prof_list .name { padding-left: 162px; padding-bottom: 4px; background: url("../images/suguuma/cm-name-bgi-1.png") no-repeat left bottom; font-size: 17px; font-weight: bold; }

#suguuma .cm_box .prof_list .name small { font-size: 14px; }

#suguuma .cm_box .prof_list dd { margin-top: 20px; display: -webkit-box; display: flex; -webkit-box-align: start; align-items: flex-start; font-size: 14px; line-height: 1.5; }

#suguuma .cm_box .prof_list dd img { width: 130px; height: 130px; }

#suguuma .cm_box .prof_list dd .prof_txt { padding-left: 30px; width: 226px; }

#suguuma .cm_box + .vdeo_wrap { margin-top: 60px; }

#suguuma .feature { padding: 90px 0 135px; background: url(../images/suguuma/kv-bgi.png) center top; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* animationの設定 */ /* animationの設定 */ }

#suguuma .feature #feature_step { position: relative; width: 100%; height: 265px; background: #fbf8f5; }

#suguuma .feature #feature_step:before { border: solid 2px #f2eadb; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% - 10px); height: calc(100% - 10px); content: ""; }

#suguuma .feature #feature_step dt { margin-top: -38px; margin-left: 7px; position: absolute; top: 0; left: 0; }

#suguuma .feature #feature_step dd { margin-top: 38px; margin-right: 50px; position: absolute; top: 0; right: 0; }

#suguuma .feature .sugu_umai_list { margin-top: 150px; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: start; align-items: flex-start; }

#suguuma .feature .sugu_umai_list > li { padding: 10px 10px 60px; position: relative; width: 470px; background: #fff; box-shadow: 0 0 1em rgba(234, 230, 222, 0.6); }

#suguuma .feature .sugu_umai_list > li + li { margin-top: 100px; }

#suguuma .feature .sugu_umai_list dt { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

#suguuma .feature .sugu_umai_list dd { line-height: 1.6666666667; font-size: 18px; }

#suguuma .feature .sugu_umai_list dd li { margin-top: 2em; display: table; }

#suguuma .feature .sugu_umai_list dd li:before { display: table-cell; width: 2em; text-align: center; content: "・"; }

#suguuma .feature .sugu_umai_list dd li + li { margin-top: .5em; }

#suguuma .feature #step { width: 371px; height: 189px; background: url("../images/suguuma/step.png") no-repeat right center; }

#suguuma .feature .walk { -webkit-animation: walking 3s steps(30); animation: walking 3s steps(30); }

@-webkit-keyframes walking { from { background-position: 0px 0; }
  to { background-position: -11130px; } }

@keyframes walking { from { background-position: 0px 0; }
  to { background-position: -11130px; } }

#suguuma .feature #sugu { width: 466px; height: 167px; background: url("../images/suguuma/sugu.png") no-repeat right center; }

#suguuma .feature .sugWalk { -webkit-animation: walking2 1.5s steps(30); animation: walking2 1.5s steps(30); }

@-webkit-keyframes walking2 { from { background-position: 0px 0; }
  to { background-position: -13980px; } }

@keyframes walking2 { from { background-position: 0px 0; }
  to { background-position: -13980px; } }

#suguuma .feature #umai { width: 466px; height: 161px; background: url("../images/suguuma/umai.png") no-repeat right center; }

#suguuma .feature .umaiWalk { -webkit-animation: walking3 1.5s steps(30); animation: walking3 1.5s steps(30); }

@-webkit-keyframes walking3 { from { background-position: 0 center; }
  to { background-position: -13980px center; } }

@keyframes walking3 { from { background-position: 0 center; }
  to { background-position: -13980px center; } }

#suguuma #productWrap { padding: 80px 0 215px; background: #fbf8f5; }

#suguuma #productWrap h2 { line-height: 70px; background: #554442; color: #fff; font-size: 40px; font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Meiryo, serif; text-align: center; }

#suguuma #productWrap .product_list li { padding: 60px 0 55px; display: -webkit-box; display: flex; -webkit-box-align: start; align-items: flex-start; -webkit-box-pack: justify; justify-content: space-between; position: relative; }

#suguuma #productWrap .product_list li.with_bnr { padding-bottom: 75px; }

#suguuma #productWrap .product_list dl { padding: 46px 40px; position: relative; z-index: 800; float: left; width: 328px; height: 300px; }

#suguuma #productWrap .product_list dt { margin-left: 2px; }

#suguuma #productWrap .product_list dd { margin-top: 30px; padding: 8px 0 10px; display: -webkit-box; display: flex; -webkit-box-align: start; align-items: flex-start; line-height: 1.375; background: url(../images/suguuma/product-border.png) no-repeat center top, url(../images/suguuma/product-border.png) no-repeat center bottom; color: #6b4f1d; font-size: 16px; font-weight: bold; }

#suguuma #productWrap .product_list dd:not(.product_img) > img { width: 40px; height: auto; }

#suguuma #productWrap .product_list dd p { padding: 10px 0 10px 6px; }

#suguuma #productWrap .product_list .label_new { margin: 0; padding: 0; position: absolute; top: 0; left: 0; background: none; }

#suguuma #productWrap .product_list .product_img { margin: 120px 0 0 215px; padding: 0; position: absolute; top: 0; left: 80px; background: none; }

#suguuma #productWrap .product_list .icon_new { position: absolute; bottom: 0; left: -20px; }

#suguuma #productWrap .right_area { position: relative; z-index: 700; }

#suguuma #productWrap .product_table { margin-top: 54px; float: right; width: 490px; }

#suguuma #productWrap .product_table th, #suguuma #productWrap .product_table td { padding: 14px 0; line-height: 1.5714285714; font-size: 14px; background: url(../images/suguuma/product-border-dotted.png) repeat-x center top #fff; vertical-align: top; }

#suguuma #productWrap .product_table tr:last-child th, #suguuma #productWrap .product_table tr:last-child td { background: url(../images/suguuma/product-border-dotted.png) repeat-x center top, url(../images/suguuma/product-border-dotted.png) repeat-x center bottom #fff; }

#suguuma #productWrap .product_table th { padding-left: 20px; position: relative; width: 125px; }

#suguuma #productWrap .product_table th small { margin-top: .25em; display: block; position: relative; line-height: 1; font-size: 11px; letter-spacing: -.075em; text-indent: .25em; }

#suguuma #productWrap .product_table td { padding-right: 20px; width: 365px; text-align: justify; letter-spacing: -.015em; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; }

#suguuma #productWrap #shizimi dl { background: url(../images/suguuma/product-bgi-shizimi.png) no-repeat; }

#suguuma #productWrap #irodori dl { background: url(../images/suguuma/product-bgi-irodori.png) no-repeat; }

#suguuma #productWrap #kinoko dl { background: url(../images/suguuma/product-bgi-kinoko.png) no-repeat; }

#suguuma #productWrap #hourensou dl { background: url(../images/suguuma/product-bgi-hourensou.png) no-repeat; }

#suguuma #productWrap #negi dl { background: url(../images/suguuma/product-bgi-negi.png) no-repeat; }

#suguuma #productWrap #nasu dl { background: url(../images/suguuma/product-bgi-nasu.png) no-repeat; }

#suguuma #productWrap #aosa dl { background: url(../images/suguuma/product-bgi-aosa.png) no-repeat; }

#suguuma #productWrap #kabocha dl { background: url(../images/suguuma/product-bgi-kabocha.png) no-repeat; }

#suguuma #productWrap #tororo dl { background: url(../images/suguuma/product-bgi-tororo.png) no-repeat; }

#suguuma #productWrap .amazonBnr, #suguuma #productWrap .karadaBnr { margin-bottom: -20px; padding-top: .25em; padding-left: 60px; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; position: absolute; right: 0; bottom: 0; width: 372px; height: 66px; line-height: 1; -webkit-transform: translateY(100%); transform: translateY(100%); background: url(../images/suguuma/amazon-bnr-bgi.png) no-repeat; color: #2c201f; font-size: 14px; font-weight: bold; letter-spacing: -.015em; }

#suguuma #productWrap .amazonBnr:hover, #suguuma #productWrap .karadaBnr:hover { color: #eb9b00; }

#suguuma #productWrap .karadaBnr { padding-left: 0; background: none; }

#suguuma #pageTop { margin-top: 120px; float: right; }

#suguuma #pageTop a { display: block; }

#suguuma #pageTop a:hover img { -webkit-filter: saturate(150%); filter: saturate(150%); }

#suguuma.ieStyle #productWrap h2 { font-family: serif; }

@-webkit-keyframes zoomIn { from { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }

@keyframes zoomIn { from { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }

.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }