@charset "utf-8";

/* 基本設定
================================================ */

html { font-size : 62.5%; }
body {
	width:100%;
	color :#111;
	font-family:"Noto Sans JP" , "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif !important;
	line-height:1.5;
	font-size:12px;
	font-size:1.2rem; /* =12px */	
	background-color:#FFF;
}
a {
	display: block;
	text-decoration: none !important;
	color:#000;
}
a:hover {
	text-decoration: none !important;
	color:#333;
}
a:visited {
	text-decoration: none !important;
	color:#000;
}
a:active {
	text-decoration: none !important;
	color:#333;
}

/* 属性リセット
================================================ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, a, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, main, button, input {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ol, ul, li { list-style:none; }
h1, h2 , h3 , h4 , h5 , h6 {font-weight:normal;}

/* 画像
============================================*/
img {
	border:none;
	vertical-align:top;
	max-width:100%;
	height:auto;
}

/* header
============================================*/
header {
	width:100%;
	max-width:1000px;
	margin:0 auto;
}

/* 汎用
============================================*/
@media only screen and (min-width: 769px) {
.pcn {
	display:none;
}
}
@media only screen and (max-width: 768px) {
.spn {
	display:none;
}
}

/* style
============================================*/
/* PC */
@media only screen and (min-width: 769px) {	
main {
	display:flex;
	justify-content:space-between;
	width:1000px;
	margin:0 auto 60px;
}
#contents {
	width:780px;
}
.flow-btn {
	display:flex;
	flex-wrap:wrap;
	margin:20px auto;
}
}
/* SP */
@media only screen and (max-width: 768px) {
main {
	display:flex;
	justify-content:space-between;
	max-width:1000px;
	margin:80px auto 30px;
}
#contents {
	max-width:780px;
}
.flow-btn {
	display:flex;
	flex-wrap:wrap;
	margin:10px auto;
}
.flow-btn.no1 a {
	width:33.333%;
}
.flow-btn.no2 a {
	width:50%;
}
}