@charset "UTF-8";



/********************************************************************

基本設定・イニシャライズ

*********************************************************************/

* { margin: 0; padding: 0; box-sizing: border-box;}

html { height: 100%; font-size: 62.5%;}
html, body { height: 100%;}

body { margin: 0; padding: 0; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 500; font-size: 1.6rem; line-height: 1.8em; font-feature-settings: "palt"; color: #333; overflow-x: hidden;}

a:link { color: #333; text-decoration: none;}
a:visited { color: #333;}
a:hover { color: #e91805;}
a:active { color: #e91805;}

/* アンダーラインアニメーション */
a.under_line { display: inline-block; position: relative; text-decoration: none;}
a.under_line::after { position: absolute; content: ''; bottom: 0; left: 0; width: 0; height: 1px; background: #fff; transition: all 0.5s ease 0s;}
a.under_line:hover::after { width: 100%;}


@media (min-width: 1200px) {
  .container { width: 1170px !important;}
}

img { vertical-align: top;}
img.img-responsive { width: 100% !important; height: auto !important;}


/********************************************************************

見出し・テキスト

*********************************************************************/

/* 見出し */
h2 { font-size: 3.2rem; color: #3497d8; line-height: 1.2em; font-weight: bold; text-align: center; margin: 0 0 30px 0; padding: 0;}
h3 { font-size: 2.0rem; font-weight: bold; color: #3497d8; line-height: 1.0em; text-align: center; margin: 0 0 20px 0; padding: 10px 0; background: rgba(255,255,255,0.6); border: 1px solid #3497d8; border-radius: 30px;}
h4 { font-size: 1.8rem; font-weight: bold; color: #3497d8; line-height: 1.6em; text-align: center; margin: 0 0 20px 0;}

/* 段落 */
p { font-size: 1.6rem; line-height: 1.8em; letter-spacing: 0.06em; text-align: center;}

@media screen and (max-width: 767px) {
 h2 { font-size: 2.4rem; text-align: center;}
	h2 span { text-align: center; left: 0; right: 0; margin-left: auto; margin-right: auto;}
	h3 { font-size: 1.8rem;}
	p { font-size: 1.4rem;}
}



/********************************************************************

クリアランス・表示切り替え

*********************************************************************/

/* PCスマホ要素切り替え */
.pc_parts { display: block;}
.smp_parts { display: none;}

/* smp版改行 */
br.smp_break { display: none !important; width: 0 !important; height: 0 !important; visibility: hidden !important; content: ""; font-size:0;}

@media screen and (max-width: 767px) {
.pc_parts { display: none;}
.smp_parts { display: block;}
 br.smp_break { display: block !important;}	
}

/* pc版クリアランス */
.cl_pc200 { margin-bottom: 200px !important;}
.cl_pc160 { margin-bottom: 160px !important;}
.cl_pc120 { margin-bottom: 120px !important;}
.cl_pc100 { margin-bottom: 100px !important;}
.cl_pc80 { margin-bottom: 80px !important;}
.cl_pc70 { margin-bottom: 70px !important;}
.cl_pc50 { margin-bottom: 50px !important;}
.cl_pc30 { margin-bottom: 30px !important;}

@media screen and (max-width: 767px) {
 .cl_pc200 { margin-bottom: 100px !important;}
 .cl_pc160 { margin-bottom: 80px !important;}
	.cl_pc120 { margin-bottom: 60px !important;}
 .cl_pc100 { margin-bottom: 50px !important;}
	.cl_pc80 { margin-bottom: 40px !important;}
 .cl_pc70 { margin-bottom: 35px !important;}
	.cl_pc50 { margin-bottom: 25px !important;}
	.cl_pc30 { margin-bottom: 15px !important;}
}

/* smp版クリアランス */
.cl_sm20 { margin-bottom: 0 !important;}
.cl_sm40 { margin-bottom: 0 !important;}

@media screen and (max-width: 767px) {
.cl_sm20 { margin-bottom: 20px !important;}	
.cl_sm40 { margin-bottom: 40px !important;}
 .cl_sm60 { margin-bottom: 60px !important;}
}



/********************************************************************

共通パーツ

*********************************************************************/

/* 共通クリアランス */
.cl_10 { margin-bottom: 10px !important;}
.cl_30 { margin-bottom: 30px !important;}
.cl_50 { margin-bottom: 50px !important;}
.cl_100 { margin-bottom: 100px !important;}


/* ページ先頭に戻るボタン */
#btnTop { display: table; width: 60px; height: 60px; background-color: rgba(211,53,34,0.7); text-align: center; color: #fff; border-radius: 30px; position: fixed; bottom: -70px; right: 20px; z-index: 6; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;}

a#btnTop:link { text-decoration: none;}
a#btnTop:hover { background-color: rgba(211,53,34,0.4);}
#btnTop i { display: table-cell; vertical-align: middle; font-size: 2.2rem;}
#btnTop.disp { bottom: 20px; z-index: 7;}

/* 定義リスト */
dl.common_dl_list { display: flex; flex-wrap: wrap; margin: 0; padding: 0;}
dl.common_dl_list dt { font-weight: normal; width: 20%; padding: 6px 0;}
dl.common_dl_list dd { width: 80%; padding: 6px 0;}

@media screen and (max-width: 767px) {
 dl.common_dl_list dt, dl.common_dl_list dd { width: 100%;}
 dl.common_dl_list dt { text-align: center; padding: 4px 0; background-color: rgba(255,255,255,0.2);}
 dl.common_dl_list dd { padding: 6px 0 14px 0;}
}

/* メインコンテンツ */
main { margin: 0; padding: 0;}

.pattern_wrapper { padding: 80px 0 50px 0; background: url("../images/bg_pattern.jpg") repeat;}
.no_pattern_wrapper { padding: 80px 0 50px 0; background: #fff;}

@media screen and (max-width: 767px) {
	.pattern_wrapper { padding: 40px 0 25px 0;}
	.no_pattern_wrapper { padding: 40px 0 25px 0;}
}

/* ヘッダー */
header { width: 100%; height: 50px; background: #e91805; position: relative; top: 0; z-index: 3;}
header h2 { width: 268px; height: 37px; background: url("../images/head_logo.png") no-repeat; background-size: cover; margin: 0; padding: 0; position: absolute; top: 5px;}

/* フッター */
footer { padding: 100px 0 30px 0; background: #e91805;}
footer p.foot_copyright { font-size: 1.2rem; line-height: 1em; text-align: center; color: #fff; margin: 0; padding: 0;}



/********************************************************************

トップページ

*********************************************************************/

/* メインビジュアル */
#main_visual_wrapper { width: 100%; height: 530px; background-image: url("../images/main_pc.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

.main_visual_inner { position: relative;}
.main_visual_inner .logo { width: 320px; height: 143px; margin-top: 30px; margin-bottom: 20px; background: url("../images/logo.png") no-repeat; background-size: cover;}

.app_download { padding-left: 140px; min-height: 140px; background: url("../images/icon_app_sevens.png") no-repeat; background-size: 100px 100px; background-position: 15px 0; position: relative;}
.app_download h1 { font-size: 2.6rem; font-weight: bold; color: #fff; margin: 0; padding: 0;}
.app_download h3 { font-size: 1.4rem; font-weight: normal; color: #fff; text-align: left; background: none; border: none; margin: 0 0 8px 0; padding: 0;}
.app_download ul { margin: 0; padding: 0; list-style-type: none; text-align: center; position: absolute; left: 10px; top: 120px;}
.app_download ul li { display: inline-block; width: 160px; margin: 0 10px;}
.app_download ul li img { width: 100%; height: auto;}

@media screen and (max-width: 767px) {
	#main_visual_wrapper { width: 100%; padding-top: 340px; background-image: url("../images/main_sp.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
	.main_visual_inner .logo { width: 240px; height: 107px; margin: 20px auto; background-size: 100% auto;}
	.app_download { padding-left: 0; padding-top: 110px; background-position: center top;}
	.app_download h1,	.app_download h3 { text-align: center; color: #333;}
	.app_download ul { position: relative; left: 0; top: 10px; margin-bottom: 50px;}
	.app_download ul li { width: 130px; margin: 0 5px;}
}

/* 動画 */
.movie_wrapper { width: 100%; padding-top: 56.25%; position: relative;}
.movie_wrapper iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

/* twitter */
#twitter { text-align: center;}

@media screen and (max-width: 767px) {
	#twitter { padding-top: 180px;}
}

.btn-lg { padding: 20px 50px;}
.btn-primary { background: #3497d8; border-radius: 30px; color: #fff;}
.btn-primary:link { color: #fff;}
.btn-primary:visited { color: #fff;}
.btn-primary:hover { color: #fff; background: #6ab3e2;}
.btn-primary:active { color: #fff;}

/* スライド */
.slider { margin: 0 !important; padding: 0; overflow-x: hidden;}
.slider img { width: 100%; padding: 0 10px; vertical-align: top;}

.slide-dots {
 padding: 0; text-align: center; margin: 0 auto; list-style-type: none; position: absolute; left: 0; right: 0; bottom: 30px;}

.slide-dots li { display: inline-block; margin: 0 20px;}

.slide-dots li button { position: relative; text-indent: -10000px; border: none;}

.slide-dots li button:before { content: "●"; font-size: 2.0rem; text-indent: 0; color: #eee; position: absolute; top: 0; left: 0;}
.slide-dots li.slick-active button:before { color: #3497d8;}

/* safari用 */
_::-webkit-full-page-media, _:future, :root .slide-dots li button:before { font-size: 4.0rem !important;}

/* メンバー */
.member_wrapper p { text-align: center; margin: 6px 0 30px 0;}
.member_wrapper img { width: 100%; height: auto; border-radius: 50%;}

@media screen and (max-width: 767px) {
	.member_wrapper p { font-size: 1.2rem;}
}

/* 下段ダウンロード */
ul.low_download { margin: 0; padding: 0; list-style-type: none; text-align: center;}
ul.low_download li { display: inline-block; width: 220px; margin: 0 10px;}

@media screen and (max-width: 767px) {
	ul.low_download li { width: 130px; margin: 0 5px;}
}

/* その他のおすすめ */
.recomend_other { display: block; font-size: 1.4rem; line-height: 1.4em; background: #daf1ff; padding: 16px; border-radius: 20px;}
.recomend_other span { font-size: 1.2rem; color: #666;}
.recomend_other span:after { content: "\A"; white-space: pre;}
.recomend_other img { float: left; margin-right: 10px;}