@charset 'utf-8';

:root {
    /*--theme-color: #388;*/
    --theme-color: #58a;
    --text-color: #333;

    --btn-color: #58a;
}

/* html要素共通 */

html {
    scroll-behavior: smooth;
}

html * {
    color: var(--text-color);
	font-family: 'Quicksand', "游ゴシック", '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 2;
    letter-spacing: .1em;
    word-break : break-all;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

html *:not(select) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

@media screen and (min-width: 600px) {
    html * {
        font-size: 16px;
    }
}

html, body {
    width: 100%;
    max-width: 100%;
}

body > main {
    position: relative;
}

section:not(:first-child) {
	margin-top: 50px;
}

h1 {
    margin-bottom: .5em;
    font-size: 1.6em;
    font-weight: bold;
}

h2 {
    margin-bottom: .5em;
    font-size: 1.1em;
    font-weight: bold;
}

h1:not(:first-child),
h2:not(:first-child) {
    margin-top: 2em;
}

ul, ol {
    overflow: auto;
}

a,
a:hover {
    color: var(--text-color);
    transition: .4s;
}

small {
    font-size: .8em;
}

i {
    letter-spacing: 0;
}

button {
	transition: .4s;
}

label,
input[type=checkbox]:hover,
button:hover {
    cursor: pointer;
}

::placeholder {
    color: #ccc;
    /*font-size: .8em;*/
    vertical-align: middle;
}

/* フォーム */

form:not(:first-child) {
    margin: 1em 0;
}

input[type=text],
input[type=email],
input[type=password],
textarea {
    padding: .5em 1em;
    border: 1px solid #ccc;
    border-radius: 3em;
    width: 100%;
}

input[type=text]:not(:first-child),
input[type=email]:not(:first-child),
input[type=password]:not(:first-child),
textarea:not(:first-child) {
    margin-top: 1em;
}

button[type=submit]:not(:first-child) {
    margin-top: 1em;
}

button[type=submit] {
    padding: .5em 3em;
    background-color: var(--btn-color);
    color: #fff;
    border-radius: 3em;
}

input[type=checkbox] {
    background-color: #fff;
    margin-right: .5em;
    width: 1em;
    height: 1em;
    border: 2px solid #358;
    border-radius: 50%;
    vertical-align: baseline;
}

input[type=checkbox]:checked {
    background-color: #358;
}

input[type=text] {
	max-width: 100%;
	white-space: normal;
}

textarea {
    width: 100%;
    /*min-height: 400px;*/
    border-radius: 2em;
    resize: vertical;
}


/* ヘッダー */

body > header {
    /*margin-bottom: 50px;*/
}


/* フッター */

body > footer {
    margin-top: 50px;
}

footer {
    padding: 50px 0;
    background-color: #eee;
}

footer a {
	text-decoration: none;
	font-size: .9em;
}

footer a:hover {
	color: var(--theme-color);
}

footer .footer-menu li {
	display: inline-block;
}

footer .footer-menu li + li::before {
	content: '';
	margin: 0 .5em;
}

@media screen and (max-width: 800px) {
    footer .footer-menu li {
        display: block;
    }
    footer .footer-menu li + li::before {
        margin: 0;
    }
}


/* 汎用クラス */

.fl-r {
	float: right;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.none {
    display: none;
}

.strike {
	text-decoration: line-through;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.underline {
	text-decoration: underline;
}

.no-underline {
    text-decoration: none;
}

.gray {
    background-color: #fafafa;
}

.m-top-50 {
    margin-top: 50px;
}

.p-1 {
    padding: 1em;
}

.w-100 {
    width: 100%;
}

.sp {
    display: none;
}

.main-width {
    margin: auto;
    padding: 0 2em;
    width: 100%;
    max-width: 800px;
}

.content-width {
    margin: auto;
    padding: 0 2em;
    width: 100%;
    max-width: 800px;
}

.grid-2 {
    margin-top: 1em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
}

.grid-3 {
    margin-top: 1em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1em;
}

@media screen and (max-width: 800px) {
    .grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sp {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .grid-3 {
        grid-template-columns: repeat(1, 1fr);
    }
}

.btn_icon {
    display: inline-block;
    padding: 0!important;
    width: 3em;
    height: 3em;
    border: 2px solid #eee;
    border-radius: 50%;
    text-align: center;
    background-color: #eee;
}

.btn_icon:hover {
	/*border: 2px solid var(--theme-color);*/
    box-shadow: 0 0 10px #ccc;
	/*border: 2px solid #aca;*/
}

.btn_icon i {
	line-height: calc(3em - 4px);
}

.btn_icon.newBtn {
	display: inline-block;
	margin-right: .5em;
	width: 2em;
	height: 2em;
}

.btn_icon.newBtn i {
	line-height: calc(2em - 4px);
}

.btn_text {
	display: inline-block;
	padding: .5em 2em .5em 1em;
	border-radius: 5px;
	background-color: #eee;
	/*color: #fff;*/
	text-decoration: none;
}

.btn_text small {
	width: 100%;
}

button small {
    position: absolute;
    margin-top: .5em;
    display: block;
    width: 100%;
    font-weight: bold;
    text-align: center;
}

.btn {
	display: inline-block;
	margin: auto;
	padding: .3em 3em;
	border-radius: 5em;
	box-shadow: none;
	text-align: center;
    text-decoration: none;
	font-weight: 600;
}

.btn:hover {
	opacity: .8;
}

.btn + .btn {
	margin-top: 1em;
}

.btn.blue {
	border: 2px solid var(--theme-color);
	background-color: var(--theme-color);
	color: #fff;
}

.btn.white {
	border: 2px solid var(--theme-color);
	background-color: #fff;
	color: var(--theme-color);
}

.btn.twitter,
.btn_icon.twitter {
    background-color: #55acee;
    color: #fff;
}
.btn.twitter i {
	margin-right: .5em;
	color: #fff;
}

.btn_icon.twitter i {
    color: #fff;
}