@charset "UTF-8";
/*	reset
-----------------------------------------*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}

*, *::before, *::after {
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  line-height: 1;
}

input:not([type=checkbox]), textarea, button, select {
  margin: 0;
  padding: 0;
  -ms-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

ol, ul {
  list-style: none;
}

main {
  display: block;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

a {
  text-decoration: none;
}

#header #navigation::after, #function .colmun-02::after, #function .function-box-02::after, #function .function-box-02 .dl-01::after, #gallery .gallery-list-01::after, .box-modal-01 .list::after, .box-view-01::after, .colmun-01::after, .disc-01.col2::after {
  content: "";
  clear: both;
  display: block;
}

/*	base
-----------------------------------------*/
@font-face {
  font-family: "Yu Gothic";
  font-weight: normal;
  src: local("Yu Gothic");
}
@font-face {
  font-family: "Yu Gothic";
  font-weight: bold;
  src: local("Yu Gothic");
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
body {
  font-size: 87.5%;
  font-family: "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", Meiryo, "メイリオ", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #000;
  min-width: 1024px;
  width: 100%;
  line-height: 1.5;
}

body img {
  vertical-align: baseline;
}

a, button {
  font-family: "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", Meiryo, "メイリオ", Arial, sans-serif;
  text-decoration: none;
}

sup {
  font-size: .75rem;
  vertical-align: top;
}

sub {
  font-size: .75rem;
  vertical-align: bottom;
}

p {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
}

b {
  font-weight: bold;
}

strong {
  font-weight: bold;
  color: #e60014;
}

#noscript {
  display: none;
}

/*	header
-----------------------------------------*/
#header {
  width: 100%;
  min-height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 88;
  transition: .3s all;
}
#header p {
  margin-top: 0;
}
#header .logo-01 {
  margin-top: 6px;
}
#header .header-inner {
  padding: 6px 12px 0 12px;
  margin: 0 auto;
  width: 1024px;
  position: relative;
}
#header #navigation {
  padding: 3px 88px 32px 35px;
  width: 100%;
}
#header #navigation ul {
  display: table;
}
#header #navigation ul li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0 41px;
}
#header #navigation ul li a {
  font-kerning: normal;
  letter-spacing: -.025em;
  display: inline-block;
  font-weight: bold;
  color: #000;
  border-bottom: #ffcbbf 6px solid;
  padding: 0 2px 2px 2px;
  transition: .3s all;
}
#header #navigation ul li a:hover, #header #navigation ul li a:focus {
  border-color: #fa6a72;
}
#header #navigation ul .current a {
  border-color: #fa6a72;
}
#header #navigation .before {
  padding-right: 128px;
}
#header #navigation .after {
  padding-left: 109px;
}
#header #navigation.navi6column {
  padding: 1px 70px 32px 35px;
}
#header #navigation.navi6column ul li {
  padding: 0 22px;
	vertical-align: bottom;
}
#header #navigation.navi6column ul li:nth-child(n+1):nth-child(-n+3) {
  padding: 0px 45px;
}
#header #navigation.navi6column ul li:last-child {
  padding-right: 0px;
}
#header #navigation.navi6column ul li.after {
  padding-left: 165px;
}
#header #navigation.navi6column ul li a{
  line-height: 1.3;
}
#header .icon {
  position: absolute;
  right: 25px;
  top: 41px;
}
#header .link {
  position: absolute;
  right: 25px;
  top: 12px;
  display: flex;
  align-items: center;
}
#header .link > li + li {
  margin-left: 13px;
}
#header .link > li img {
  width: 23px;
}
#header .logo-02 {
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: -52px;
}
#header.clear {
  box-shadow: 0 5px 3px -3px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.98);
}

/*	main
-----------------------------------------*/
#main {
  padding-top: 100px;
  border-top: #fff 50px solid;
}

#design,
#function,
#spec,
#cartridge,
#gallery,
#info{
  margin-top: -100px;
  padding-top: 100px;
}
#design p,
#function p,
#spec p,
#cartridge p,
#gallery p {
  text-align: center;
}

#visual {
  margin-top: -100px;
  border-top: #e3e5e6 50px solid;
  background: #e3e5e6;
}
#visual .inner {
  width: 1024px;
}
#visual .visual-box-01 {
  height: 605px;
  position: relative;
}
#visual .visual-box-01 .hdg-01 {
  position: absolute;
  bottom: 28px;
  left: 50%;
  margin-left: -75.5px;
}
#visual .visual-box-01 .txt-01 {
  position: absolute;
  right: 16px;
  bottom: 14px;
  min-width: auto;
}
#visual .visual-box-01 .txt-02 {
  position: absolute;
  bottom: 5px;
}
#visual .visual-box-01-img-bg-box {
  background:linear-gradient(90deg,#b6c8d7 0%,#b6c8d7 50%,#e5e2e3 50%,#e5e2e3 100%);
  line-height: 0px;
}
#visual p {
  text-align: center;
  margin-top: 0;
  min-width: 1024px;
}
#visual .lead-01 {
  padding: 44px 0 41px 0;
  background: #fff;
}

/*	bg
-----------------------------------------*/
#bg {
  background: url(/sp/girly_tepra_SR-GL2/images/bg-01.jpg) no-repeat center 100px;
}

/*	design
-----------------------------------------*/
#design {
  padding-bottom: 55px;
}
#design .hdg-02 {
  margin-top: 36px;
}
#design .hdg-03 {
  margin-top: 41px;
}

/*	function
-----------------------------------------*/
#function {
  padding-bottom: 30px;
}
#function .hdg-02 {
  margin-top: 45px;
}
#function .function-box-01 {
  position: relative;
  padding-top: 30px;
  border: #ffcbbf 2px solid;
  border-radius: 5px;
  margin-top: 57px;
}
#function .function-box-01 .hdg-03 {
  position: absolute;
  top: -27px;
  margin: auto;
  right: 0;
  left: 0;
}
#function .function-box-01 .hdg-03.large {
  top: -34px;
}
#function .function-box-01 .txt-01 {
  padding-left: 30px;
  text-align: left;
}
#function .function-box-01 .note-01 {
  margin-left: 30px;
  text-align: left;
}
#function .function-box-01 .note-02 {
  text-align: left;
}
#function .colmun-02 .col {
  float: left;
  width: 470px;
}
#function .colmun-02 .col + .col {
  width: 375px;
  margin-left: 15px;
}
#function .lay-01 {
  padding: 0 34px;
  display: table;
  width: 100%;
}
#function .lay-01 .txt {
  display: table-cell;
  padding: 0 20px;
  width: 455px;
  vertical-align: middle;
}
#function .lay-01 .txt p {
  text-align: left;
  padding-left: 0;
}
#function .lay-01 .img {
  display: table-cell;
  vertical-align: middle;
}
#function .function-box-02 {
  margin-top: 20px;
}
#function .function-box-02 .col-left {
  padding-left: 50px;
  width: 400px;
  float: left;
}
#function .function-box-02 .col-right {
  padding: 0 10px;
  float: right;
  width: 455px;
}
#function .function-box-02 .dl-01 {
  font-size: 0.75rem;
  line-height: 1.75;
  margin-left: 5px;
}
#function .function-box-02 .dl-01 dt {
  clear: left;
  float: left;
  padding: 2px 14px 0 14px;
  background: #cfd0d0;
  border-radius: 50px;
  margin-right: 11px;
}
#function .function-box-02 .dl-01 dd {
  text-align: left;
}
#function .function-box-02 .tool-01 {
  width: 100%;
}
#function .function-box-02 .tool-01 .line {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: #9f9f9f dotted 2px;
  font-size: 0.75rem;
  line-height: 1.75;
}
#function .function-box-02 .tool-01 .line img {
  vertical-align: middle;
}
#function .function-box-02 .tool-01 .col {
  float: left;
  width: 50%;
  padding: 10px 20px 10px 10px;
  text-align: center;
}
#function .function-box-02 .tool-01 .col + .col {
  padding: 10px 10px 10px 20px;
  border-left: #9f9f9f dotted 2px;
}
#function .function-box-02 .tool-01 .col + .line {
  clear: both;
}
#function .function-box-02 .tool-01 .col img {
  margin-top: 5px;
}
#function .function-box-02 .tool-01 .col b {
  display: block;
  font-size: 1rem;
  line-height: 1.3125;
  font-weight: bold;
  margin-top: 10px;
}
#function .function-box-02 .tool-01 .col b small {
  font-size: 0.75rem;
  line-height: 1.75;
  font-weight: bold;
  display: block;
}
#function .function-box-02 .tool-01 .col .txt {
  display: block;
}
#function .function-box-02 .tool-01 .col .txt span {
  font-size: 0.75rem;
  line-height: 1.75;
}
#function .function-box-02 .tool-01 .col .txt .num {
  font-size: 0.9375rem;
  line-height: 1.4;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-left: 10px;
}
#function .function-box-02 .tool-01 .col .btn {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
#function .function-box-02 .tool-01 .col .btn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 38px;
  background-color: #333;
  border: 1px solid #333;
  border-radius: 9999px;
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: .3s all;
}
#function .function-box-02 .tool-01 .col .btn > a:hover {
  background-color: #fff;
  color: #333 !important;
}

/*	spec
-----------------------------------------*/
#spec {
  padding-bottom: 62px;
}
#spec .hdg-02 {
  margin-top: 35px;
}
#spec .hdg-03 {
  margin-top: 65px;
}
#spec .spec-box-01 {
  margin-top: 32px;
  background: #e3e5e6;
}
#spec .spec-box-01 p {
  margin-top: 0;
}
#spec .spec-box-02 {
  margin-top: 32px;
  background: #e3e5e6;
}
#spec .spec-box-02 .inner {
  position: relative;
  width: 860px;
  height: 390px;
  margin: 0 auto;
}
#spec .spec-box-02 .img {
  line-height: 0;
}
#spec .spec-box-02 .btn {
  position: absolute;
  bottom: 10px;
  left: 64px;
}
#spec .spec-box-02 .btn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 38px;
  background-color: #333;
  border: 1px solid #333;
  border-radius: 9999px;
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: .3s all;
}
#spec .spec-box-02 .btn > a:hover {
  background-color: #fff;
  color: #333 !important;
}
#spec .box-movie-01 {
  max-width: 860px;
  margin: 20px auto 0 auto;
  text-align: center;
}
#spec .box-movie-01 iframe {
  border: 0;
}

/*	cartridge
-----------------------------------------*/
#cartridge {
  padding-bottom: 25px;
}
#cartridge .hdg-02 {
  margin-top: 26px;
}
#cartridge .hdg-03 {
  margin-top: 26px;
}
#cartridge .btn-01 {
  margin-top: 20px;
}
#cartridge .cartridge-box-01 {
  margin-top: 55px;
}
#cartridge .cartridge-box-01 .cartridge-box-img {
  background: url(/sp/girly_tepra_SR-GL2/images/bg-02.gif) repeat-x top center;
}
#cartridge .data-01 {
  border-spacing: 0;
  border-collapse: separate;
  word-break: break-all;
  width: 100%;
  margin: 25px auto 25px auto;
  width: 350px;
}
#cartridge .data-01.large {
  width: 600px;
}
#cartridge .data-01 .w40 {
  width: 40%;
}
#cartridge .data-01 .w60 {
  width: 60%;
}
#cartridge .data-01 .w30 {
  width: 30%;
}
#cartridge .data-01 .w70 {
  width: 70%;
}
#cartridge .data-01 td {
  font-size: 1rem;
  line-height: 1.3125;
  font-weight: bold;
  font-family: Arial, Helvetica, "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", Meiryo, "メイリオ", sans-serif;
}
#cartridge .data-01 td span {
  font-size: 0.6875rem;
  line-height: 1.90909;
  font-weight: normal;
  vertical-align: middle;
  padding-left: 10px;
}
#cartridge .data-01 .indent {
  padding-left: .6em;
}
#cartridge .data-01 .tape span {
  background: #cfd0d0;
  border-radius: 30px;
  padding: 0 12px;
}
#cartridge .data-01 + .btn-02 {
  margin-top: -15px;
}

/*	gallery
-----------------------------------------*/
#gallery {
  padding-bottom: 62px;
}
#gallery .hdg-02 {
  margin-top: 25px;
}
#gallery .hdg-03 {
  margin-top: 60px;
}
#gallery .gallery-list-01 {
  margin-top: 50px;
  padding: 0 20px 47px 20px;
  border-bottom: #5f5f5f 1px solid;
}
#gallery .gallery-list-01 li {
  float: left;
  padding: 0 25px;
  text-align: center;
  width: 33.33333%;
}
#gallery .gallery-list-01 li p {
  font-size: 0.8125rem;
  line-height: 1.61538;
}
#gallery .gallery-list-01 li p b {
  color: #fa6a72;
  font-weight: bold;
}

#gallery .gallery-list-type-2column li{
  width: 50%;
}
#gallery .gallery-list-type-2column li:nth-child(odd){
  padding-left: 80px;
}
#gallery .gallery-list-type-2column li:nth-child(even){
  padding-right: 80px;
}  
#gallery .gallery-list-type-2column li:nth-child(n + 3) {
  margin-top: 50px;
}

/*	footer
-----------------------------------------*/
#footer {
  background: #e3e5e6;
  padding: 38px 0 66px 0;
}
#footer .list-01 {
  display: table;
  width: 100%;
  margin-top: 40px;
}
#footer .list-01 li {
  display: table-cell;
  vertical-align: middle;
}
#footer .list-01 li:nth-child(odd) {
  text-align: right;
  padding-right: 20px;
}
#footer .list-01 li:nth-child(even) {
  text-align: left;
  padding-left: 21px;
  border-left: #b3b2b2 1px solid;
}
#footer .list-01 li a {
  display: block;
  transition: .3s all;
}
#footer .list-01 li a:hover, #footer .list-01 li a:focus {
  opacity: .8;
}

/*	module
-----------------------------------------*/
.inner {
  margin: 0 auto;
  width: 860px;
}

.hdg-02,
.hdg-03 {
  text-align: center;
}

.box-modal-01 {
  margin-top: 10px;
}
.box-modal-01 .list {
  margin: 0 -5px;
}
.box-modal-01 .list li {
  text-align: center;
  float: left;
  margin: 10px 7px 0 7px;
}
.box-modal-01 .list li a {
  display: inline-block;
  overflow: hidden;
  height: 276px;
}
.box-modal-01 .list li a img {
  line-height: 1;
}

.box-view-01 {
  margin-top: 20px;
}
.box-view-01 .view {
  float: left;
}
.box-view-01.start .view {
  height: 444px;
  position: relative;
}
.box-view-01.start .view li {
  opacity: 0;
  transition: .5s all;
  position: absolute;
  top: 0;
  left: 0;
}
.box-view-01.start .view .current {
  opacity: 1;
  z-index: 2;
}
.box-view-01.start .list {
  float: right;
  width: 125px;
}
.box-view-01.start .list li {
  transition: .3s all;
  margin-bottom: 7px;
}
.box-view-01.start .list button {
  position: relative;
  background: #000;
}
.box-view-01.start .list button:hover img, .box-view-01.start .list button:focus img {
  opacity: 1;
}
.box-view-01.start .list img {
  transition: .3s all;
  width: 125px;
  opacity: .8;
  display: block;
}
.box-view-01.start .list .current img {
  opacity: 1;
}

.colmun-01 .col {
  float: left;
  width: 50%;
  margin-top: 15px;
}
.colmun-01 .col:nth-child(odd) {
  padding-right: 11px;
}
.colmun-01 .col:nth-child(even) {
  padding-left: 11px;
}

.center {
  text-align: center !important;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

.note-01 {
  font-size: 0.6875rem;
  line-height: 1.36364;
  color: #727171;
  margin-top: 25px;
  padding-left: 1.2em;
  padding-right: 30px;
  position: relative;
}
.note-01 span {
  position: absolute;
  top: 0;
  left: 0;
}
.note-01 + .note-01 {
  margin-top: 0;
}

.note-02 {
  font-size: 0.6875rem;
  line-height: 1.36364;
  margin-top: 25px;
}
.note-02 + .note-02 {
  margin-top: 5px;
}

.btn-01 a {
  text-align: center;
  display: inline-block;
  background: #fa6a72;
  color: #fff;
  font-weight: bold;
  border-radius: 50px;
  padding: 7px 28px 6px 28px;
  border: #fa6a72 2px solid;
  transition: .3s all;
}
.btn-01 a:hover, .btn-01 a:focus {
  background: #fff;
  color: #fa6a72;
}

.btn-02 {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.btn-02 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 38px;
  background-color: #333;
  border: 1px solid #333;
  border-radius: 9999px;
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: .3s all;
}
.btn-02 > a:hover {
  background-color: #fff;
  color: #333 !important;
}

.disc-01 {
  margin-top: 50px;
  font-size: 0.6875rem;
  line-height: 1.45455;
  color: #727171;
}
.disc-01 li {
  padding-left: 12px;
  position: relative;
}
.disc-01 li::before {
  content: "";
  display: block;
  background: #727171;
  border-radius: 24px;
  position: absolute;
  left: 0;
  top: 3px;
  height: 10px;
  width: 10px;
}
.disc-01 li p {
  margin-top: 0;
  padding: 0;
  text-align: left !important;
}
.disc-01.col2 {
  width: 100%;
}
.disc-01.col2 li {
  float: left;
  width: 50%;
}

.bnr-01 {
  margin-top: 30px;
}
.bnr-01 a {
  display: block;
  transition: .3s all;
}
.bnr-01 a:hover, .bnr-01 a:focus {
  opacity: .8;
}

.dl-02 {
  margin-top: 20px;
  color: #727171;
}
.dl-02 dt, .dl-02 dd {
  font-size: 0.6875rem;
  line-height: 1.90909;
}
.dl-02 dd > ul {
  margin-top: 0;
}

.column-01 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.column-01 > .item + .item {
  margin-left: 30px;
}
.column-01 > .item > *:first-child {
  margin-top: 0 !important;
}

.modal-scroll {
  position: fixed;
  width: 100%;
  z-index: -1;
}
.modal-scroll #header {
  box-shadow: 0 5px 3px -3px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.98);
}

.modal-pager.none {
  display: none;
}

.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.pt0 {
  padding-top: 0px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.pl0 {
  padding-left: 0px !important;
}

.pr0 {
  padding-right: 0px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.pt5 {
  padding-top: 5px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.pl5 {
  padding-left: 5px !important;
}

.pr5 {
  padding-right: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pb35 {
  padding-bottom: 35px !important;
}

.pl35 {
  padding-left: 35px !important;
}

.pr35 {
  padding-right: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pb45 {
  padding-bottom: 45px !important;
}

.pl45 {
  padding-left: 45px !important;
}

.pr45 {
  padding-right: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pl50 {
  padding-left: 50px !important;
}

.pr50 {
  padding-right: 50px !important;
}