/**********************************************************************/
/* base.css */
/**********************************************************************/


/* SmartPhone setup -------------------------------------- */
html{-webkit-text-size-adjust: none;}
img,
video { max-width :100%; } 


/* BaseLayout -------------------------------------- */
body {
color: #2A2A2A;
background-color: #fff;
overflow-x:hidden;
overflow-y:auto;
}

#container {
margin: 0 auto;
padding: 0;
}

.col-fluid{
margin: 0 auto;
padding: 0;
clear:both;
display: -webkit-flex;
display: flex;
 -webkit-flex-wrap:nowrap;
flex-wrap: wrap;
}

.col{
width: 80rem;/* 1280px */
margin: 0 auto;
padding: 0 1rem 0 1rem;
clear:both;
display: -webkit-flex;
display: flex;
 -webkit-flex-wrap:nowrap;
flex-wrap: wrap;
}

.clearfix:after {
content: "";
display: block;
clear: both;
}


/**********************************************************************/
/* CONTENTS */
/**********************************************************************/

/* Header ------------------------------------------------ */
#header {
width: 100%;
position: fixed;
z-index: 10;
margin:0 auto;
padding: 0 0 0 0;
height: 5rem;
top: 0;
background-color: #FFFFFF;
}

#header .col {
width: 96%;
}

#header-left {
float: left;
margin:0;
padding: 1rem 0;
width: 86px;
}

#header-right {
float: right;
margin:0;
padding: 1rem 0;
text-align:right;
width: calc(100% - 86px);
}

/* Main -- 1 column  --------------------------------- */
.one-col-01 {
width: 100%;
}

/* Main -- 2 column  --------------------------------- */
.two-col-01 {
float: left;
width: 50%;
margin:0;
padding:0 1rem 0 0;
}

.two-col-02 {
float: right;
width: 50%;
margin:0;
padding:0 0 0 1rem;
}

/* Main -- 3 column  --------------------------------- */
.three-col-01 {
float: left;
width: 33.3%;
padding: 0 0 0 1rem;
margin: 0 0.5em 0 -1rem;
}

.three-col-02 {
float: left;
width: 33.3%;
padding: 0 0 0 1rem;
margin: 0 0.5em 0 0;
}

.three-col-03 {
float: right;
width: 33.4%;
padding:0 0 0 1rem;
}

/* Main -- COMMON STYLE  ----------------------------- */
.pb01 {
padding-bottom: 1rem;
}

.pb02 {
padding-bottom: 2rem;
}

.pb03 {
padding-bottom: 3rem;
}

.mb01 {
margin-bottom: 1rem;
}

.mb02 {
/*margin-bottom: 2rem;*/
}

.mb03 {
margin-bottom: 3rem;
}

.mt01 {
margin-top: 1rem;
}

.mt02 {
margin-top: 2rem;
}

.mt03 {
margin-top: 3rem;
}


/* footer ---------------------------------------- */
footer {
}

#totop {
text-align:right;
margin: 0 0 0 0;
padding: 2rem 1rem 2rem 1rem;
}

#copyright {
display: block;
text-align: center;
}

/**********************************************************************/
/* LINK */
/**********************************************************************/

/* Link ------------------------------------------------ */
a {
text-decoration:underline;
outline: none;
}

a:link {
color: #000;
}

a:visited {
color:#000;
}

a:hover {
color:#666;
}

a:active {
color:#666;
}

/* Link - header ------------------------------------------------ */
#header a,
#gnav a{
text-decoration:none;
}


/**********************************************************************/
/* max-width : 1280px ***** FOR TL or PC */
/**********************************************************************/
@media screen and (max-width : 1280px){
.col {
width: 96%;
padding: 0;
}
}

/**********************************************************************/
/* max-width : 768px ***** FOR SP */
/**********************************************************************/
@media screen and (max-width : 768px){
.col {
width: 90%;
}

#header {
height: 4.3rem;
}

#header-left {
width: 30%;
float: left;
}

#header-left img {
width: 100%;
}

#header-right {
float: right;
width: 70%;
margin: 0 0 0 0;
padding-left: 1rem;
text-align:right;
}

#header-right-bt-contact a {
padding: 0.2rem 1rem 0.2rem 1rem;
font-size: 0.8rem;
}

.two-col-01,
.three-col-01,
.three-col-02 {
float: left;
width: 100%;
padding: 0 0 1rem 0;
margin: 0;
}

.two-col-02,
.three-col-03 {
float: left;
width: 100%;
padding: 0;
margin: 0;
}
}