@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@1,500;1,700&display=swap');

/*************************************************************
    /css/default.css
**************************************************************
1) html, body
2) align, float, clear
3) flexbox
4) img
5) a
6) fonts
7) background-color
8) pcOnly, spOnly
9) blankIcon
-------------------------------------------------------------*/


/* 1) html, body, section
-------------------------------------------------------------*/
html {
	font-size: 62.5%;
}
body {
	position: relative;
    font-size: 1.5rem;
	line-height: 2;
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', sans-serif;
	font-weight: normal;
	font-weight: 500;
	letter-spacing: 0.1em;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	color: #000;
}
@media screen and (max-width:599px) {
	body {
		letter-spacing: 0.05em;
	}
}
article {
	background: #fff;
}
/* 2) align, float, clear
-------------------------------------------------------------*/
.acenter { text-align: center; }
.aleft { text-align: left; }
.aright { text-align: right; }
.fleft { float: left; }
.fright { float: right; }
.clear { clear: both; }
.clearfix::after {
	content: ‘’;
	display: block;
	clear: both;
}

/* 3) flexbox
-------------------------------------------------------------*/
.flexbox {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
    justify-content: space-between;
}
@media screen and (min-width:600px) {
	.tbFlexbox {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
    	justify-content: space-between;
	}
}
@media screen and (min-width:1000px) {
	.pcFlexbox {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
    	justify-content: space-between;
	}
}

/* 4) img
-------------------------------------------------------------*/
img {
	max-width: 100%;
	vertical-align: top;
}

/* 5) a
-------------------------------------------------------------*/
a {
	color: #3a659c;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
	transition: 0.2s linear;
}
.btn {
	max-width: 402px;
	line-height: 50px;
	text-align: center;
	font-weight: 800;
	margin: 0 4px 4px 0;
	background: #ff9833;
	border: 1px solid #000;
	border-radius: 25px;
	box-shadow: #000 4px 4px;
}
.btn a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	color: #000;
	text-decoration: none;
	padding-right: 9px;
}
.btn a::after {
	position: absolute;
	content: "";
	width: 14px;
	height: 9px;
	background: url(../images/arrow.png) no-repeat center center;
	background-size: 100% auto;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

@media screen and (min-width: 770px) {
	.btn {
		font-size: 1.6rem;
		line-height: 60px;
		margin: 0 5px 5px 0;
		border-radius: 30px;
		box-shadow: #000 5px 5px;
	}
	.btn:hover {
		margin: 5px 0 0 5px;
		box-shadow: none;
		transition: 0.2s linear;
	}
	.btn a::after {
		width: 19px;
		height: 12px;
		right: 12px;
	}
	
}

@media screen and (max-width: 355px) {
	.btn {
		font-size: 1.4rem;
		letter-spacing: 0;
	}
}

/* 6) fonts
-------------------------------------------------------------*/
.roboto-medium-italic {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    font-style: italic;
}
.roboto-bold-italic {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 700;
    font-style: italic;
}
.f-400, normal {
	font-weight: normal;
	font-weight: 400;
}
.f-500 {
	font-weight: normal;
	font-weight: 500;
}
.f-600 {
	font-weight: bold;
	font-weight: 600;
}
.f-700, bold {
	font-weight: bold;
	font-weight: 700;
}
.f-800, bold {
	font-weight: bold;
	font-weight: 800;
}
.f-900, bold {
	font-weight: bold;
	font-weight: 900;
}
.nowrap { white-space:nowrap }

/* 7) background-color
-------------------------------------------------------------*/
.bg-white { background-color: #fff; }
.bg-lightGray { background-color: #f2f2f2; }

/* 8) pcOnly, spOnly
-------------------------------------------------------------*/
@media screen and (max-width:999px) {
	.pcOnly {
		display: none;
	}
}
@media screen and (min-width:1000px) {
	.tbUnder {
		display: none;
	}
}
@media screen and (max-width:599px) {
	.tbOver {
		display: none;
	}
}
@media screen and (min-width:600px) {
	.spOnly {
		display: none;
	}
}

/* 9) blankIcon
-------------------------------------------------------------*/
.blankIcon {
	position: relative;
	display: inline-block;
	width: 11px;
	height: 9px;
	transform: scale(1);
	margin-left: 5px;
}
.blankIcon:before,
.blankIcon:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	border-style: solid;
	border-color: #3a659c;
}
.blankIcon:before {
	top: 0;
	left: 0;
	border-width: 1px;
}
.blankIcon:after {
	top: 2px;
	left: 2px;
	border-width: 0 1px 1px 0;
}