/*!
 * common.css
 */

/*  =================================================================
   # ベース
   ================================================================= */
html {
	font-size: 62.5%;
}

body {
	margin:0;
	color: #444;
	font-size: 1.6rem;
	font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;	
	word-wrap: break-word;
	line-height:1.6;  /*全体の行間は1.6に設定*/
}

a,
button {
	color: #388388;  /*クライアントカスタマイズ*/
	text-decoration: none;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

a:hover,
button:hover {
	color: #000; /*クライアントカスタマイズ*/
}

a:hover.opt06,
button:hover.opt06 {
	opacity: 0.6;
}

img {
	border: 0;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

ul li {
	list-style-type: none;
}

table {
	display: table;
	table-layout: fixed;
	width: 100%;
}
/*  =================================================================
   # 文字サイズ
   ================================================================= */

p{
  font-size: 1.6rem;
  line-height: 1.6;
}

h1{
  font-size: 2.8rem;
  line-height: 1;
}
h2 {
  font-size: 2.8rem;
  line-height: 1;
}
h3 {
  font-size: 2.4rem;
  line-height: 1;
}
h4 {
  font-size: 2.0rem;
  line-height: 1;
}
h5 {
  font-size: 1.8rem;
  line-height: 1;
}
h6{
  font-size:1.6rem;
  line-height: 1;
}

@media only screen and (max-width: 767px) {
body{font-size: 1.5rem;}
p{font-size: 1.5rem;}
h1{font-size: 2.2rem}
h2{font-size: 2.2rem}
h3{font-size: 2.0rem;}
h4{font-size: 1.8rem;}
h5{font-size: 1.7rem;}
h6{font-size: 1.6rem;}
}


/* # =================================================================
#	レイアウト
# ================================================================= */


/* コンテナ
------------------------- */
.container_white,
.container_light,
.container_medium,
.container_dark{
width:100%;
}

.container_white{background:#fff;}
.container_light{background:#f0f0f0;}
.container_medium{background:#ccc;}
.container_dark{background:#999;}

@media only screen and (max-width: 1030px) {
.container_white,
.container_light,
.container_medium,
.container_dark{
width:1030px;
}

}

@media only screen and (max-width: 767px) {

.container_white,
.container_light,
.container_medium,
.container_dark{
width:100%;
}
.sp_container_white{background:#fff;}
}

/* 基本のレイアウト幅
------------------------- */

.c-l-column {
	margin: 0 auto;
	padding: 0 15px;
	width: 1030px;
}

.c-l-column_full {
	margin: 0 auto;
	padding: 0 ;
	width: 1030px;
}


@media only screen and (max-width: 1030px) {
.c-l-column{width: 100%;}
.c-l-column_full{width: 100%;}
}

@media only screen and (max-width: 767px) {

}

/* flex box 
------------------------- */
    .flex-box {
    width:100%;
    display: flex;              /* フレックスボックスにする */
    align-items:stretch;        /* 縦の位置指定 */
    justify-content:center;       /* 横の位置指定 */
    flex-wrap: wrap;            /* 折り返し指定 */
    align-content:stretch;      /* 折り返し時の配置指定 */
    }




/* # =================================================================
#	汎用
# ================================================================= */

/* クリア
------------------------- */

.clearfix::after {
	clear: both;
	content: '';
	display: block;
	height: 0;
	visibility: hidden;
}

/* PC SP　表示非表示
------------------------- */
@media only screen and (min-width: 768px) {
.for-sp,.only_sp {display: none;}
}

@media only screen and (max-width: 767px) {
.for-pc,.only_pc{display: none;}
}