@charset "utf-8";
/*
	Site Name: 
	Description: レイアウト
	Version: 
	Author: 
*/
/*
====================================================
■ Function
====================================================
*/
/*
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
	text-shadow: @string;
}
.box-shadow (@string) {
	-webkit-box-shadow: @string;
	-moz-box-shadow:    @string;
	box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius:    @radius;
	border-radius:         @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
	-webkit-border-top-right-radius:    @topright;
	-webkit-border-bottom-right-radius: @bottomright;
	-webkit-border-bottom-left-radius:  @bottomleft;
	-webkit-border-top-left-radius:     @topleft;

	-moz-border-radius-topright:        @topright;
	-moz-border-radius-bottomright:     @bottomright;
	-moz-border-radius-bottomleft:      @bottomleft;
	-moz-border-radius-topleft:         @topleft;

	border-top-right-radius:            @topright;
	border-bottom-right-radius:         @bottomright;
	border-bottom-left-radius:          @bottomleft;
	border-top-left-radius:             @topleft;

	-moz-background-clip:    padding; 
	-webkit-background-clip: padding-box; 
	background-clip:         padding-box; 
}

.opacity (@opacity: 0.5) {
	-webkit-opacity: 	@opacity;
	-moz-opacity: 		@opacity;
	opacity: 		@opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
 	background-color: @startColor;
	background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(left, @startColor, @endColor);
	background-image: -moz-linear-gradient(left, @startColor, @endColor);
	background-image: -ms-linear-gradient(left, @startColor, @endColor);
	background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
	-webkit-animation: @name @duration @delay @ease;
	-moz-animation:    @name @duration @delay @ease;
	-ms-animation:     @name @duration @delay @ease;
}

.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;  
}
.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
}
.scale (@factor) {
	-webkit-transform: scale(@factor);
	-moz-transform: 	 scale(@factor);
	-ms-transform: 		 scale(@factor);
	-o-transform: 		 scale(@factor);
}
.rotate (@deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: 	 rotate(@deg);
	-ms-transform: 		 rotate(@deg);
	-o-transform: 		 rotate(@deg);
}
.skew (@deg, @deg2) {
	-webkit-transform:       skew(@deg, @deg2);
	-moz-transform: 	 skew(@deg, @deg2);
	-ms-transform: 		 skew(@deg, @deg2);
	-o-transform: 		 skew(@deg, @deg2);
}
.translate (@x, @y:0) {
	-webkit-transform:       translate(@x, @y);
	-moz-transform: 	 translate(@x, @y);
	-ms-transform: 		 translate(@x, @y);
	-o-transform: 		 translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
	-webkit-transform:       translate3d(@x, @y, @z);
	-moz-transform: 	 translate3d(@x, @y, @z);
	-ms-transform: 		 translate3d(@x, @y, @z);
	-o-transform: 		 translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
	-webkit-perspective: 	@value;
	-moz-perspective: 	@value;
	-ms-perspective: 	@value;
	perspective: 		@value;
}
.transform-origin (@x:center, @y:center) {
	-webkit-transform-origin: @x @y;
	-moz-transform-origin:    @x @y;
	-ms-transform-origin:     @x @y;
	-o-transform-origin:      @x @y;
}

*/
/*
====================================================
■ BASE
====================================================
*/
/*
===== reset ===========================
*/
* {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
img {
  vertical-align: top;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before,
q:after {
  content: '';
}
abbr,
acronym {
  border: 0;
}
iframe {
  border: none;
}
/*
===== base ===========================
*/
body.fontS {
  font-size: 13px;
}
body.fontM {
  font-size: 15px;
}
body.fontL {
  font-size: 19px;
  line-height: 135%;
}
body.fontL .text {
  line-height: 175%;
}
/* base.css, part of YUI's CSS Foundation */
h1 {
  /*18px via YUI Fonts CSS foundation*/
  font-size: 138.5%;
}
h2 {
  /*16px via YUI Fonts CSS foundation*/
  font-size: 123.1%;
}
h3 {
  /*14px via YUI Fonts CSS foundation*/
  font-size: 108%;
}
h1,
h2,
h3 {
  /* top & bottom margin based on font size */
  margin: 0 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  /*bringing boldness back to headers and the strong element*/
  font-weight: bold;
}
abbr,
acronym {
  /*indicating to users that more info is available */
  border-bottom: 1px dotted #000;
  cursor: help;
}
em {
  /*bringing italics back to the em element*/
  font-style: italic;
}
blockquote,
ul,
ol,
dl {
  /*giving blockquotes and lists room to breath*/
  margin: 0;
}
ol,
ul,
dl {
  /*bringing lists on to the page with breathing room */
  margin: 0;
}
ol li {
  /*giving OL's LIs generated numbers*/
  list-style: none;
}
ul li {
  /*giving UL's LIs generated disc markers*/
  list-style: none;
}
dl dd {
  /*giving UL's LIs generated numbers*/
  margin: 0;
}
th,
td {
  /*borders and padding to make the table readable*/
  padding: 0;
}
th {
  /*distinguishing table headers from data cells*/
  font-weight: bold;
  text-align: center;
}
caption {
  /*coordinated marking to match cell's padding*/
  margin-bottom: .5em;
  /*centered so it doesn't blend in to other content*/
  text-align: center;
}
p,
fieldset,
table {
  /*so things don't run into each other*/
  margin: 0;
}
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
[hidden] {
  display: none;
}
/*
===== link setting ===========================
*/
a {
  color: #111111;
  text-decoration: underline;
}
a:visited {
  color: #000;
  text-decoration: underline;
}
a:hover {
  color: #000;
  text-decoration: none;
}
a:active {
  color: #000;
  text-decoration: underline;
}
/* memo  */
/*#demo1 {font-size:85%;}*/
/*renders 11px */
/*#demo2 {font-size:100%;}*/
/*renders 13px */
/*#demo3 {font-size:108%;}*/
/*renders 14px */
/*#demo4 {font-size:123.1%;}*/
/*renders 16px */
/*#demo5 {font-size:138.5%;}*/
/*renders 18px */
/*
===== CLEARFIX ==========================================
*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*¥*/
  /*/
  height: auto;
  overflow: hidden;
  /**/
}
li,
p,
td {
  background-image: url(../img/parts/pixel_for_android.png);
}
/*
===== module ==========================================
*/
img.preload {
  display: none;
}
.num_l {
  font-family: 'Roboto';
  font-weight: 700;
}
.num_m {
  font-family: 'Roboto';
  font-weight: 500;
}
.num_n {
  font-family: 'Roboto';
  font-weight: 400;
}
.titlebox {
  height: 65px;
  position: relative;
}
.titlebox .jp {
  font-size: 13px;
  display: block;
  text-align: center;
  letter-spacing: 3px;
}
.titlebox .en {
  font-size: 27px;
  display: block;
  text-align: center;
  letter-spacing: 3px;
  margin-top: 0px;
}
.titlebox .line {
  display: block;
  width: 27px;
  height: 2px;
  position: absolute;
  left: 50%;
  margin-left: -13px;
  bottom: 0;
  background: #000;
}
.btn_type1 {
  display: block;
  border: 2px solid #333333;
  width: 188px;
  height: 45px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn_type1 .txt {
  text-align: center;
  line-height: 45px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  font-size: 18px;
  color: #333333;
  letter-spacing: 1.5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.btn_type1 .black {
  background: #333333;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
/*
====================================================
■ all
====================================================
*/
html,
body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  color: #222222;
  font-size: 14px;
  font-family: 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  background: #FFF;
  letter-spacing: 2px;
  line-height: 175%;
}
#bodywrapper {
  width: 100%;
  height: auto;
  position: relative;
}
/*
====================================================
■ main_block
====================================================
*/
/*
====================================================
■ contents_block
====================================================
*/
/*
====================================================
■ header
====================================================
*/
#header h1 {
  padding-top: 28px;
  padding-left: 14px;
}
#header h1 a {
  display: block;
  background: url(../img/header/logo_s.png) no-repeat;
  width: 195px;
  height: 14px;
  background-size: contain;
  text-indent: -9999px;
}
/*
====================================================
■ gnavi
====================================================
*/
#btn_menu {
  display: block;
  background: url(../img/menu/btn_menu.png) no-repeat;
  width: 38px;
  height: 38px;
  background-size: 76px 38px;
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 1001;
}
#btn_menu.open {
  background-position: -38px 0;
}
#gnavi {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: none;
}
#gnavi .naviblock {
  background: rgba(51, 51, 51, 0.9);
  width: 100%;
  height: 120%;
  position: relative;
  z-index: 1;
}
#gnavi .naviblock .naviinner {
  background: #FFF;
  position: absolute;
  top: 53px;
  width: 100%;
}
#gnavi .naviblock .naviinner .navi li a {
  position: relative;
  display: block;
  background: url(../img/parts/line_dot.png) repeat-x left bottom;
  background-size: 2px 1px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
}
#gnavi .naviblock .naviinner .navi li a .title {
  padding-left: 14px;
}
#gnavi .naviblock .naviinner .navi li a .arrow {
  display: block;
  background: url(../img/menu/arrow.png) no-repeat;
  width: 12px;
  height: 21px;
  background-size: contain;
  position: absolute;
  right: 14px;
  top: 13px;
}
#gnavi .naviblock .naviinner .navi2 {
  padding-top: 22px;
  padding-bottom: 25px;
}
#gnavi .naviblock .naviinner .navi2 li.site,
#gnavi .naviblock .naviinner .navi2 li.privacy,
#gnavi .naviblock .naviinner .navi2 li.dei {
  float: left;
  margin-left: 14px;
  margin-top: 4px;
}
#gnavi .naviblock .naviinner .navi2 li.site a,
#gnavi .naviblock .naviinner .navi2 li.privacy a,
#gnavi .naviblock .naviinner .navi2 li.dei a {
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0;
}
#gnavi .naviblock .naviinner .navi2 li.fb {
  float: right;
  margin-right: 15px;
}
#gnavi .naviblock .naviinner .navi2 li.fb a {
  text-indent: -9999px;
  display: block;
  background: url(../img/menu/fb.png) no-repeat;
  width: 38px;
  height: 37px;
  background-size: contain;
}
/*
====================================================
■ footer
====================================================
*/
#footer {
  margin-top: 100px;
  padding-bottom: 10px;
}
#footer .logo {
  display: block;
  background: url(../img/footer/logo.png) no-repeat;
  width: 88px;
  height: 27px;
  background-size: contain;
  margin: 0 auto;
  text-indent: -9999px;
}
#footer .copyright {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-top: 3px;
}
#footer.top {
  margin-top: 20px;
}
/*
====================================================
■ bottom_block
====================================================
*/
#bottom_block {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  display: none;
}
#bottom_block .bg {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
#bottom_block .inner {
  height: 100vh;
  position: relative;
  background: #f0f0f0;
  padding-bottom: 30px;
  z-index: 2;
  overflow: auto;
}
#bottom_block .btn_close {
  display: block;
  background: url(../img/parts/btn_close.png) no-repeat;
  width: 38px;
  height: 38px;
  background-size: contain;
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 3;
}
/*
====================================================
■ sitepolicy
====================================================
*/
#sitepolicy {
  font-size: 13px;
  width: 100%;
  margin: 0 auto;
  padding-top: 80px;
}
#sitepolicy h3 {
  font-weight: normal;
  letter-spacing: 2.2px;
  width: 92%;
  margin: 0 auto;
  margin-top: 25px;
  line-height: 185%;
}
#sitepolicy .txt {
  letter-spacing: 2.2px;
  width: 92%;
  margin: 0 auto;
  margin-top: 0px;
  line-height: 185%;
}
#sitepolicy .txt.top {
  margin-top: 35px;
}
/*
====================================================
■ privacypolicy
====================================================
*/
#privacypolicy {
  font-size: 13px;
  width: 100%;
  margin: 0 auto;
  padding-top: 80px;
}
#privacypolicy h3 {
  font-weight: 700;
  letter-spacing: 2.2px;
  width: 92%;
  margin: 0 auto;
  margin-top: 45px;
  line-height: 185%;
}
#privacypolicy h4{
  width: 92%;
  margin: 0 auto;
  padding-top: 25px;
  line-height: 185%;
}
#privacypolicy .tablewrap {
  border-bottom: 1px solid #dfdfdf;
}
#privacypolicy .tablewrap h4{
  padding: 10px 4%;
  background: #d5d5d5;
}
#privacypolicy .tabletit{
  margin-top: 25px;
  padding: 10px 4%;
  color: #FFF;
  background: #838383;
  font-weight: 700;
}
#privacypolicy .txt {
  letter-spacing: 2.2px;
  margin: 0 auto;
  margin-top: 25px;
  line-height: 185%;
  width: 92%;
  font-weight: 500;
  word-break: break-all;
}
#privacypolicy ol {
  letter-spacing: 2.2px;
  width: 92%;
  margin: 0 auto;
  margin-top: 25px;
  line-height: 185%;
}
#privacypolicy ol li {
  margin: 0.6em 0;
}
#privacypolicy ol > li > h5{
  padding: 10px;
  font-weight: 500;
  text-indent: -3em;
  margin-left: 3em;
}
#privacypolicy ol > li > ul{
  padding-top: 1em;
}
#privacypolicy ol > li ul > li{
  list-style: disc;
  list-style-position: inside;
}
#privacypolicy ol.multilist{
  width: 100%;
  margin: 0;
  background: #e5e5e5;
}
#privacypolicy ol.multilist > li{
  margin: 0;
}
#privacypolicy ol.multilist > li > ul{
  background: #f0f0f0;
  padding: 15px 4% 15px 2em;
}

#privacypolicy ol.multilist > li > ul > li{
  text-indent: -1.5em;
  padding-left: 1.5em;
}

#privacypolicy ol.singlelist > li{
  text-indent: -1em;
  margin-left: 1em;
}

#privacypolicy .date{
  width: 92%;
  margin: 0 auto;
  padding: 40px 0;
  font-weight: 500;
}
/*
====================================================
■ DE&Ipolicy
====================================================
*/
#deipolicy {
  font-size: 13px;
  width: 100%;
  margin: 0 auto;
  padding-top: 80px;
}
#deipolicy .titlebox{
  /* height: 120px; */
}
#deipolicy .titlebox .num_l{
  font-size: 27px;
}
#deipolicy h3 {
  font-weight: 700;
  letter-spacing: 2.2px;
  width: 92%;
  margin: 0 auto;
  margin-top: 45px;
  line-height: 185%;
}
#deipolicy h4{
  width: 92%;
  margin: 0 auto;
  padding-top: 25px;
  line-height: 185%;
}
#deipolicy .tablewrap {
  border-bottom: 1px solid #dfdfdf;
}
#deipolicy .tablewrap h4{
  padding: 10px 4%;
  background: #d5d5d5;
}
#deipolicy .txt {
  letter-spacing: 2.2px;
  margin: 0 auto;
  margin-top: 25px;
  line-height: 185%;
  width: 92%;
  font-weight: 500;
  word-break: break-all;
}
#deipolicy ol li {
  margin: 0.6em 0;
}
#deipolicy ul{
  padding: 1em 4% 15px 2em;
}
#deipolicy ul > li{
  list-style: disc;
  list-style-position: inside;
}
#deipolicy .singlelist > li{
  text-indent: -1.5em;
  margin-left: 1.5em;
}
#deipolicy .date{
  width: 92%;
  margin: 0 auto;
  padding: 40px 0;
  font-weight: 500;
}