@charset "UTF-8";
/*　 base --------------------------------------------------*/
/*----datail----*/
h2 { font-size: 150%; }

h3 { font-size: 130%; }

@media screen and (max-width: 767px) { .mainarea img { width: 100%; height: auto; } }

/*　 layout --------------------------------------------------*/
@media screen and (min-width: 768px) { .mainarea { background: #efecf4; }
  .hero-movie { width: 100%; }
  .introduction { width: 100%; }
  .introinner { margin: 0 auto; width: 960px; }
  .episode-section { width: 100%; }
  .episode-section_1, .episode-section_2 { margin: 0 auto; width: 960px; }
  .product { width: 100%; }
  .product__item { margin: 0 auto; width: 960px; } }

@media screen and (max-width: 767px) { .wrapper { background: #efecf4; padding: 5%; }
  .introduction { padding: 5%; }
  .episode-section { padding: 5%; }
  .product { padding: 5%; }
  .detailSection { padding: 5%; }
  .sp_subNav { padding: 5%; } }

/*　 datail --------------------------------------------------*/
@media screen and (min-width: 768px) { .mainlogo { margin: 40px auto; text-align: center; }
  .mainlogo img { width: 250px; }
  #contents .headSection .leftArea { width: 960px; }
  #contents .headSection .aside { padding-top: 0; width: 117px; }
  #contents .headSection .ttl { width: 960px; }
  #contents .headSection .ttl h1 { font-size: 20px; }
  #contents .headSection .ttl p { padding-bottom: 5px; } }

@media screen and (max-width: 767px) { .mainlogo { margin: 16px auto; text-align: center; }
  .mainlogo img { width: 60%; }
  #contents { padding: 0; /* ------ headSection ------ */ }
  #contents .headSection { margin: 0 10px; }
  #contents .headSection .innerBlock { display: table; width: 100%; margin: 0; }
  #contents .headSection .ttl { display: table-cell; width: 60%; }
  #contents .headSection .ttl p a { display: block; }
  #contents .headSection .ttl p { display: inline-block; width: 30%; vertical-align: bottom; padding-right: 7px; }
  #contents .headSection .ttl h1 { display: inline-block; vertical-align: bottom; padding-left: 7px; background: url(/s/common/images/bg_dline_01.gif) repeat-y left top; }
  #contents .headSection .ttl img { width: 100%; height: auto; vertical-align: bottom; }
  #contents .headSection .aside { display: table-cell; width: 40%; text-align: right; }
  #contents .headSection .aside img { width: 100%; height: auto; vertical-align: bottom; }
  #contents .headSection .aside .sns li { display: inline-block; padding-left: 7px; vertical-align: bottom; }
  #contents .detailSection { width: 90%; }
  #contents .headSection .leftArea .title { width: 58%; }
  #contents .headSection .leftArea { float: left; width: 100%; } }

/*---- hero-movie ----*/
.hero-movie { background: #000; width: 100%; height: 400px; overflow: hidden; position: relative; }

.hero-movie__image { width: 100%; z-index: 10; }

.hero-movie__image img { width: 100%; }

.visualSection { width: 100%; min-width: 768px; height: 400px; position: absolute; z-index: 20; }

.youtubeVideo { width: 100%; margin: 0 auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.youtubeVideo iframe { width: 100%; height: 100%; }

.ov { background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 30; }

.hero-movie__catch { position: absolute; top: 50%; left: 50%; margin: 0; padding: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 40; }

.hero-movie__catch h2 { text-align: center; }

.hero-movie__catch img { width: 450px; }

.hero-movie__note { margin: 0 auto; width: 960px; position: absolute; top: 50%; left: 50%; margin: 0; padding: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 50; }

.hero-movie__note img { width: 200px; }

.hero-movie__note p { color: #fff; }

@media screen and (min-width: 768px) { .hero-movie__image { display: none; } }

@media screen and (max-width: 767px) { .hero-movie { height: auto; }
  .hero-movie__image { width: 100%; }
  .hero-movie__image img { width: 100%; height: 100%; }
  .hero-movie__catch { width: 100%; }
  .hero-movie__catch img { width: 80%; }
  .visualSection { display: none; }
  .ov { background: rgba(0, 0, 0, 0.72); }
  .hero-movie__note { display: none; } }

/*---- introduction ----*/
.intro-guide { display: -webkit-box; display: -ms-flexbox; display: flex; }

@media screen and (min-width: 768px) { .introinner { background: #fff; outline: 1px solid #694396; outline-offset: -4px; margin: 24px auto; overflow: hidden; }
  .intro-guide { padding: 32px; }
  .intro-guide__title { margin-bottom: 1em; }
  .intro-guide__photo img { width: 180px; margin-right: 16px; }
  .introduction__note { width: 740px; }
  .intro-mama { background: #fff; border-radius: 8px; -webkit-box-shadow: 0 0 8px gray; box-shadow: 0 0 8px gray; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto 40px; padding: 16px; width: 840px; }
  .intro-mama__note { display: inline; text-align: center; width: 420px; }
  .intro-mama__note h3 { margin-top: 80px; margin-bottom: 1em; }
  .intro-mama__note table { font-size: 12px; width: 100%; }
  .intro-mama__note table td { text-align: center; width: 30%; }
  .intro-mama__photo img { margin: 8px; width: 380px; } }

@media screen and (max-width: 767px) { .introduction { margin: 20px 0; }
  .intro-guide__photo img { width: 120px; margin-right: 10px; }
  .introduction__note { font-size: 80%; margin-bottom: 2em; }
  .intro-mama { width: 90%; margin: 0 auto; }
  .intro-mama__photo img { width: 100%; margin-bottom: 1em; }
  .intro-mama__note { font-size: 80%; text-align: center; }
  .intro-mama__note h3 { margin-bottom: .8em; }
  .intro-mama__note table { margin: 0 auto; } }

/*---- episode-section ----*/
.episode-section { text-align: center; padding: 30px 0; }

.episode-section_2 { margin-top: 4em; }

.episode-section__title { color: #694396; margin-bottom: 2em; position: relative; }

.episode-section__title:before { background: #694396; border-radius: 50%; color: #fff; display: inline-block; width: 40px; height: 40px; margin-right: 0.25em; line-height: 40px; position: relative; }

.episode-section__title:after { content: " "; position: absolute; bottom: -.5em; width: 15%; height: 2px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: #694396; border-radius: 2px; text-align: center; }

.episode-section__title_1:before { content: "1"; }

.episode-section__title_2:before { content: "2"; }

.episode__box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.episode__number { background: #694396; border-radius: 8px; color: #fff; display: inline; font-size: 11px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; padding: 2px; margin: -2px auto 0; width: 6em; z-index: 6; }

.f__movie { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-top: -1em; }

.f__movie img { width: 90%; }

.episode__icon { margin: -16px 0 0 -6px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; text-align: left; z-index: 5; }

.episode__icon img { border-radius: 50%; margin: 0 0 0 24px; width: 64px; }

.episode__comment { background: #efecf4; border-radius: 4px; display: inline-block; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; margin: -58px 0 0 64px; padding: 20px 16px 16px; width: 200px; z-index: 4; }

@media screen and (min-width: 768px) { .episode-section_1, .episode-section_2 { margin-bottom: 64px; position: relative; z-index: 1; }
  .episode-section_1:before, .episode-section_2:before { content: " "; background: url(/products/scanner/special/ff680w/interview/images/cnt_ttl_bg.png); width: 960px; height: 100%; margin: 0 auto; position: absolute; left: 30px; top: 30px; z-index: -1; }
  .episode-section_inner { padding: 24px 0; background: #fff; }
  .episode__block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 2em 0 40px; }
  .episode__datail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 24px; text-align: left; border-top: 2px solid; border-image-source: url(/products/scanner/special/ff680w/interview/images/cnt_ttl_bg.png); }
  .episode__datail_1 { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .episode__image { width: 360px; }
  .episode__image img { width: 360px; }
  .episode__note { width: 520px; }
  .episode-datail__title { color: #694396; margin-bottom: .5em; } }

@media screen and (max-width: 767px) { .episode-section { background: #efecf4; padding: 3%; }
  .episode-section__title { margin-top: 1em; }
  .episode-section__lead { text-align: left; }
  .episode__box { margin-bottom: 1em; }
  .episode__number { margin: 8px 0 0 100px; }
  .episode__comment { background: #fff; margin: -64px 0 0 96px; padding: 20px; position: relative; text-align: center; display: inline-block; width: auto; padding: 20px 2px; }
  .episode__comment:before { border-right: 12px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; content: ''; display: block; position: absolute; width: 0; height: 0; left: -8px; top: 20px; }
  .episode__icon { margin-top: -16px; }
  .episode__movie { margin-top: 1em; }
  .episode__movie img { width: 100%; }
  .episode__datail { display: flax; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: left; margin: 2em auto; }
  .episode__image { width: 100%; margin: 1em auto; }
  .episode__image img { width: 100%; }
  .episode-datail__title { margin-bottom: .5em; }
  .episode-datail__title:before { color: #694396; content: "●"; display: inline-block; font-size: .8; } }

/*----produt__box----*/
/* product --*/
@media screen and (min-width: 768px) { .product { padding: 75px 0 115px 0; background: #efecf4; }
  .product__others { display: table; margin: 0 auto 80px; }
  .product__others li { display: table-cell; vertical-align: top; width: 141px; padding: 0 17px; text-align: center; line-height: 1.25; font-size: 16px; font-weight: bold; }
  .product__others li img { display: block; margin-bottom: 10px; }
  .product__item { position: relative; }
  .product__item__bg { position: absolute; width: 100%; height: 100%; background: url(/products/scanner/special/ff680w/images/cnt_ttl_bg.png); left: 30px; top: 30px; }
  .product__item__main { position: relative; padding: 64px 48px 53px; background: #fff; }
  .product__item__title { position: absolute; left: 0; top: -29px; width: 100%; text-align: center; }
  .product__item__title span { display: inline-block; border: solid 3px #664796; background: #fff; width: 244px; height: 52px; line-height: 52px; color: #664796; font-size: 26px; font-weight: bold; }
  .product__item__grid { display: table; margin-bottom: 40px; }
  .product__item__grid > div, .product__item__grid dl { display: table-cell; vertical-align: middle; }
  .product__item__text { padding-left: 56px; }
  .product__item__text dt { margin-bottom: 15px; font-weight: bold; font-size: 30px; }
  .product__item__text dt em { font-size: 16px; }
  .product__item__text dt span { display: inline-block; padding: 5px 8px 2px; background: #e30920; line-height: 1; font-size: 18px; vertical-align: 0.3em; color: #fff; }
  .product__item__text dd { line-height: 1.44; font-size: 20px; }
  .product__item__links { overflow: hidden; }
  .product__item__links li { float: left; width: 280px; }
  .product__item__links li + li { margin-left: 12px; }
  .product__item__links a { -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; display: block; height: 54px; line-height: 54px; border-radius: 27px; background: #664796 url(/products/scanner/special/ff680w/images/product_icn_btn.png) no-repeat right 20px center; color: #fff; font-weight: bold; text-align: center; text-decoration: none; }
  .product__item__links a:hover { opacity: 0.75; } }

@media screen and (max-width: 767px) { .product { padding: 30px 0 50px 0; background: #efecf4; }
  .product__others { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; margin: 0 -9px 30px; }
  .product__others li { margin: 0 9px 1.5em; width: calc(1 / 3 * 100% - 18px); text-align: center; line-height: 1.25; font-size: 22px; font-size: 3.4375vw; font-weight: bold; }
  .product__others li img { display: block; margin-bottom: 10px; }
  .product__item { position: relative; margin: 0 10px 0 0; }
  .product__item__bg { position: absolute; width: 100%; height: 100%; background: url(/s/products/scanner/special/ff680w/images/cnt_ttl_bg.png); background-size: 10px 10px; left: 10px; top: 10px; }
  .product__item__main { position: relative; padding: 50px 20px 40px; background: #fff; }
  .product__item__title { position: absolute; left: 0; top: 0; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; }
  .product__item__title span { display: inline-block; padding: 0.5em 2em; border: solid 2px #664796; background: #fff; line-height: 1; color: #664796; font-size: 32px; font-size: 5vw; font-weight: bold; }
  .product__item__image { margin-bottom: 15px; width: 100%; }
  .product__item__image img { width: 100%; height: auto; }
  .product__item__text { margin-bottom: 20px; }
  .product__item__text dt { margin-bottom: 12px; font-weight: bold; font-size: 40px; font-size: 6.25vw; line-height: 1.3; }
  .product__item__text dt em { font-size: 22px; font-size: 3.4375vw; font-weight: bold; }
  .product__item__text dt span { display: inline-block; padding: 4px 8px 3px; background: #e30920; line-height: 1; font-size: 18px; vertical-align: 0.15em; color: #fff; font-size: 24px; font-size: 3.75vw; font-weight: bold; }
  .product__item__text dd { line-height: 1.44; font-size: 24px; font-size: 3.75vw; }
  .product__item__links { overflow: hidden; }
  .product__item__links li + li { margin-top: 15px; }
  .product__item__links a { -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; display: block; height: 54px; line-height: 54px; border-radius: 27px; background: #664796 url(/s/products/scanner/special/ff680w/images/product_icn_btn.png) no-repeat right 15px center; background-size: 7px 10px; color: #fff; font-size: 26px; font-size: 4.0625vw; font-weight: bold; text-align: center; text-decoration: none; } }

/* ----snsArea---- */
@media screen and (min-width: 768px) { .snsArea .share_title { font-size: 30px; text-align: center; }
  .snsArea .share_list { margin: 25px auto 0; }
  .snsArea .share_list ul { text-align: center; }
  .snsArea .share_list ul li { vertical-align: top; display: inline-block; position: relative; margin: 0 15px; } }

@media screen and (max-width: 767px) { /* snsArea */
  .snsArea .share_title { font-size: 30px; font-size: 4.0vw; text-align: center; }
  .snsArea .share_list { margin: 25px auto 0; margin: 3.3vw auto 0; }
  .snsArea .share_list ul { text-align: center; }
  .snsArea .share_list ul li { vertical-align: top; display: inline-block; position: relative; margin: 0 15px; margin: 0 2.0vw; } }

/*----subNav----*/
@media screen and (min-width: 768px) { .sp_subNav { display: none; } }

@media screen and (max-width: 767px) { .subSection { display: none; } }