@charset "utf-8";

/* CSS Document */

/*------------------------

背景

------------------------*/

html {
	overflow: -moz-scrollbars-vertical;
}

body {
	background-image: url(../../common/img/bg_body_pc.png);
	background-color: #ffe900;
	background-size: 100% auto;
	word-wrap: break-word;
	position: relative;
	background-position: top center;
}

.wrap {
	width: 94%;
	max-width: 980px;
	margin: auto;
}

.content {
	min-height: 100%;
	/*background: url("../img/bg_content_left.png") no-repeat 0 0, url("../img/bg_content_right.png") no-repeat 100% 0;
	background-attachment: fixed;
	background-size: auto 100%;*/
	position: relative;
	overflow: hidden;
}

.contents-wrap {
	position: relative;
	z-index: 5;
	width: 94%;
	max-width: 527px;
	margin: auto;
}

@media only screen and (min-width: 668px) and (min-height: 876px) {
.content:before,
.content:after{
	top:auto;
	bottom:0;
}
}




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

/* .content {
	background: none;
}

.sp-back::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url(../img/bg_content_sp.png) center/cover no-repeat;
	-webkit-background-size: cover;
} */
	
/* .content:before{
	background: url("../img/bg_content_left_sp.png") no-repeat;
	background-size: 100% auto;
	width: 65px;
	height: 100%;
	max-height: 490px;
	left:0;
	top: 80px;
}

.content:after{
	background: url("../img/bg_content_right_sp.png") no-repeat;
	background-size: 100% auto;
	width: 62px;
	height: 100%;
	max-height: 490px;
	right:0;
	top: 80px;
} */

	body {
		background-image: url(../../common/img/bg_body_sp.png);
		background-color: #FFE900;
		background-size: 100% auto; 
		background-repeat: no-repeat;
		background-position-x: center;
		word-wrap: break-word;
		position: relative;
	}
}

@media only screen and (max-width: 667px) and (min-height: 490px) {
.content:before,
.content:after{
	top:auto;
	bottom:0;
}
}

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



.wrap {
	max-width: 300px;
}

.units-row {
	margin-bottom: 1.65em;
}

.contents-wrap {
	max-width: 300px;
	margin: auto;
}
}

/*------------------------

SNSボタン

------------------------*/
@media only screen and (max-width: 1023px) {
header .units-row .unit-50{
	width: 48.5%;
}
header .units-row .unit-push-50 {
	left: 51.5%;
}
}

@media only screen and (max-width: 667px) {
header .units-row .unit-50{
	width: 100%;
}
header .units-row .unit-push-50 {
	left: 0;
}

.navbar,
header .units-row .unit-50 {
	margin-bottom: 0;
}
}

.sns-btn ul {
	display: flex;
	padding-top: 50px;
	font-size: 0;
}

.sns-btn li {
	margin-left: 10px;
	float: none;
	width: 85px;
}
.sns-btn li:last-child {
	width: 124px;
}

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

header .units-row .unit-50 {
	padding-left: 0;
}

.sns-btn ul {
	padding-top: 10px;
	width: 210px;
	margin: auto;
}

.sns-btn li {
	margin-left: 10px;
}

.navbar.navbar-right.sns-btn li:nth-child(1) {
	margin-left: 0;
}

.navbar.navbar-right.sns-btn li:nth-child(2) {
	width: 75px;
}
}

/*------------------------

コンテンツ

------------------------*/

.main {
	margin-bottom: 5em;
	position: relative;
}

.main .mainImg {
	position: relative;
}

.main .mainImg01 {
	z-index: 5;
	bottom: -2px;
	margin-left: auto;
}

.main .mainImg02 {
	z-index: 5;
}

.main .mainImg03 {
	z-index: 4;
	position: absolute;
	top: 76px;
	right: 16px;
}

@media only screen and (max-width: 667px) {
	.main .mainImg01 {
		width: 154px;
	}

	.main .mainImg03 {
		z-index: 4;
		position: absolute;
		width: 58px;
		top: 40px;
		right: 9px;
	}
}

.img-centered.snsInfo-title{
	margin-bottom: 24px;
}

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

.img-centered.snsInfo-title,
.main {
	margin-bottom: 1.65em;
}
}

.snsInfo {
	margin-bottom: 6em;
}

.snsInfo .wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.snsInfo .wrap::after {
	display: none;
}

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

.snsInfo {
	margin-bottom: 0;
}

.snsInfo .wrap {
	width: 220px;
}
}

.snsInfo a {
	text-align: center;
	display: block;
}

.snsInfo img {
	display: block;
	margin: 0 auto;
}

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

.snsInfo .units-mobile-50 img {
	width: 55px;
}
}

.gunta_window {
	margin-bottom: 3em;
}

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

.gunta_window {
	margin-bottom: 1.65em;
}

.gunta_window img {
	width: 72px;
}
}

.banner {
	display: block;
	margin-top: 20px;
}
.text {
	font-family: Arial, 'MS Pゴシック', sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-right: 24px;
	padding-left: 24px;
	margin-top: 16px;
	margin-bottom: 0;
}
.lead {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}
.copy {
	font-family : Arial, 'MS Pゴシック', sans-serif;
	padding: 3em 0 10em;
}

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

.text {
	font-size: 2.5vw;
	padding-right: 0;
	padding-left: 0;
}

.lead {
	font-size: 2.5vw;
}

.copy {
	font-size: 1.2rem;
	padding: 1.65em 0 12em;
}
}

/*------------------------

ページトップ

------------------------*/

#nav-pagetop {
	position: fixed;
	top: 30px;
	right: 75px;
	z-index: 3;
	visibility: visible;
	cursor: pointer;
}

#nav-pagetop-sp {
	display: none;
}

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

#nav-pagetop {
	display: none;
}

#nav-pagetop-sp {
	position: fixed;
	top: 36px;
	right: 30px;
	z-index: -1;
	visibility: hidden;
	cursor: pointer;
}

#nav-pagetop-sp img {
	width: 17px;
}

#nav-pagetop-sp {
	z-index: 1;
	visibility: visible;
}
}

/*------------------------

フッター

------------------------*/

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 7;
	height: 65px;
	width: 100%;
	background-color: #FFE900;
	background-size: 100% 100%;
}

#tagline {
	position: absolute;
	right: 9px;
	bottom: 9px;
	margin-bottom: 0;
	width: 152px;
	z-index: 3;
}

@media screen and (max-width: 667px) {
footer {
	height: 50px;
	background-size: auto 50px;
	background-position: bottom -30px center;
}

#tagline {
	width: 155px;
}

#tagline img {
	width:100%;
}

}

#site-logo-footer {
	position: absolute;
	left: 22px;
	bottom: 14px;
	margin-bottom: 0;
	width: 133px;
	z-index: 2;
}

#footer-qunta {
	position: fixed;
	left: 37px;
	bottom: 49px;
	z-index: 1;
	width: 216px;
	margin-bottom: 0;
}

@media only screen and (max-width: 1023px) {
	#footer-qunta {
		width: 20%;
		left: 10px;
	}
}

@media screen and (max-width: 667px) {
	#site-logo-footer {
		width: 100px;
		left: 10px;
		bottom: 5px;
	}

	#footer-qunta {
		width: 18.7%;
		left: 5px;
		bottom: 48px;
		margin-left: 0;
	}
}

.animation-image {
	position: absolute;
	z-index: 2;
}
.animation-01 {
	top: 231px;
	width: 267px;
	margin-left: 584px;
}
.animation-02 {
	top: 630px;
	width: 269px;
	margin-left: -300px;
}
.animation-03 {
	top: 977px;
	width: 182px;
	margin-left: 618px;
}

@media screen and (max-width: 667px) {
	.animation-image {
		display: none;
	}
}

/*------------------------

テーブル

------------------------*/

table td {
	word-break: break-all;
}

@media (max-width: 667px) {

th,
 td {
	width: 100%;
	display: block;
}

th {
	width: 100%;
	display: block;
	background-color: #eee;
}

table .width-90,
 table .width-80,
 table .width-75,
 table .width-70,
 table .width-66,
 table .width-65,
 table .width-60,
 table .width-50,
 table .width-40,
 table .width-35,
 table .width-33,
 table .width-30,
 table .width-25,
 table .width-20,
 table .width-10 {
	width: 100%;
}
}

/*------------------------

フォーム

------------------------*/

input[type='text'],
input[type='password'],
input[type='email'],
input[type='url'],
input[type='phone'],
input[type='tel'],
input[type='number'],
input[type='datetime'],
input[type='date'],
input[type='month'],
input[type='color'],
input[type='time'],
input[type='search'],
input[type='datetime-local'] {
	min-height: 30px;
	border: 1px solid #eaeaea;
	border-radius: 3px;
}

.form {
	width: 100%;
	background-color: #fff;
	margin-bottom: 3em;
	table-layout: fixed;	/*IEバグ対策 */
}

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

.form {
	margin-bottom: 1.65em;
}
}

.form th,
.form td {
	padding: 1em;
	border: 1px solid #eee;
	text-align: left;
	word-wrap: break-word;
}

.form th {
	width: 150px;
	background-color: #f7f7f7;
}

.form th.red {
	background-color: #ffe1e4;
	color: #000;
}

.form td.red {
	background-color: #FFF4F5;
}

@media (max-width: 667px) {

.form th,
 .form td {
	width: 100%;
	display: block;
	margin-top: -1px;
}

.form td .width-50 {
	width: 50%;
}
}

.form ul {
	margin: 0;
}

.form .list-flat li {
	margin: 0 0 1em;
}

.form .list-flat li:last-child {
	margin: 0;
}

.btn-area {
	margin: 0 auto;
	text-align: center;
}

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

.btn-area .btn {
	width: 100%;
	display: block;
	margin-bottom: 1em;
}
}

label,
select {
	cursor: pointer;
}

input[type='submit'],
input[type='reset'],
input[type='button'] {
	-webkit-appearance: button;
}

/*------------------------

リスト

------------------------*/

.list-flat {
	margin-bottom: 0;
}

.list-flat li {
	margin-bottom: 1em;
}

.list-flat li:last-child {
	margin-bottom: 0;
}

.list-left li {
	margin-right: 1em;
	float: left;
}

.list-left li:last-child {
	margin-right: 0;
}

.link {
	margin: 0;
}

.link li {
	list-style: none;
	line-height: 1.35;
}

.link li a {
	margin-left: 1em;
	display: block;
	text-decoration: none;
	text-indent: -1em;
}

.link li a:before {
	margin-right: .5em;
	content: '\f0da';
	color: #e60013;
	font: normal normal normal 14px/1 FontAwesome;
}

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

.link li {
	margin-bottom: 1.65em;
	float: none;
}

.link li a {
	display: block;
}
}

.list-center {
	display: inline-block;
}

.list-before li {
	padding-left: 1em;
	display: block;
}

.list-before li:before {
	width: 1em;
	margin-left: -1em;
	padding: .5em 0;
	display: block;
	float: left;
	content: '';
	color: #007f2d;
	font-family: 'FontAwesome';
	text-align: center;
}

.list-before li.second:before {
	width: 1em;
	margin-left: 0;
	padding: .5em 0;
	display: block;
	float: left;
	content: '';
	color: #007f2d;
	font-family: 'FontAwesome';
	text-align: center;
}

.list-after li {
	padding-right: 15px;
	position: relative;
}

.list-after li:after {
	margin-top: -12px;
	position: absolute;
	top: 50%;
	right: 10px;
	content: '';
	color: #007f2d;
	font-family: 'FontAwesome';
}

.list-centered {
	text-align: center;
}

.list-centered ul {
	display: inline-block;
}

/*------------------------

画像

------------------------*/

@media only screen and (min-width: 1023px) {

.hover a:hover img {
	opacity: .6;
	filter: alpha(opacity=60);
	-moz-opacity: .6;
}
}

img.left {
	margin-right: 1em;
}

img.right {
	margin-left: 1em;
}

@media only screen and (min-width: 660px) {

img {
	max-width: 100%;
}
}

/*------------------------

レイアウト

------------------------*/

.img-centered img {
	margin: 0 auto;
	display: block;
}

.btn-centered {
	text-align: center;
}

/*------------------------

Typography

------------------------*/

i {
	margin: 0 .5em;
	color: #e60013;
}

em,
i {
	font-style: normal;
}

.red {
	color: #CA1B28;
}

/*------------------------

フォントサイズ

------------------------*/

html {
	font-size: 62.5%;
}

body {
	color: #313131;
	font-family: Arial, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 1.4rem;
	line-height: 18px;
}

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

body {
	font-size: 1.6rem;
}
}

.font06 {
	font-size: .6rem;
}

.font07 {
	font-size: .7rem;
}

.font08 {
	font-size: .8rem;
}

.font09 {
	font-size: .9rem;
}

.font10 {
	font-size: 1.0rem;
}

.font11 {
	font-size: 1.1rem;
}

.font12 {
	font-size: 1.2rem;
}

.font13 {
	font-size: 1.3rem;
}

.font14 {
	font-size: 1.4rem;
}

.font15 {
	font-size: 1.5rem;
}

.font16 {
	font-size: 1.6rem;
}

.font17 {
	font-size: 1.7rem;
}

.font18 {
	font-size: 1.8rem;
}

.font19 {
	font-size: 1.9rem;
}

.font20 {
	font-size: 2.0rem;
}

.font21 {
	font-size: 2.1rem;
}

.font22 {
	font-size: 2.2rem;
}

.font23 {
	font-size: 2.3rem;
}

.font24 {
	font-size: 2.4rem;
}

.font25 {
	font-size: 2.5rem;
}

.font26 {
	font-size: 2.6rem;
}

.font27 {
	font-size: 2.7rem;
}

.font28 {
	font-size: 2.8rem;
}

.font29 {
	font-size: 2.9rem;
}

.font30 {
	font-size: 3.0rem;
}

.font31 {
	font-size: 3.1rem;
}

.font32 {
	font-size: 3.2rem;
}

/*------------------------

余白

------------------------*/

.mt05 {
	margin-top: 5px;
}

.mt10 {
	margin-top: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

.mt70 {
	margin-top: 70px;
}

.mt100 {
	margin-top: 100px;
}

.mt_20 {
	margin-top: -20px;
}

.mtb05 {
	margin-top: 5px;
	margin-bottom: 5px;
}

.mtb10 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.mtb15 {
	margin-top: 15px;
	margin-bottom: 15px;
}

.mtb20 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.mtb30 {
	margin-top: 30px;
	margin-bottom: 30px;
}

.mb05 {
	margin-bottom: 5px;
}

.mb10 {
	margin-bottom: 10px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb30 {
	margin-bottom: 30px;
}

.ml05 {
	margin-left: 5px;
}

.ml10 {
	margin-left: 10px;
}

.ml20 {
	margin-left: 20px;
}

.ml30 {
	margin-left: 30px;
}

.mr05 {
	margin-right: 5px;
}

.mr10 {
	margin-right: 10px;
}

.pt40 {
	padding-top: 40px;
}

/*------------------------

表示・非表示

------------------------*/

br.sp_only {
	display: none;
}

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

br {
	display: none;
}

.lead br {
	display: block;
}

br.both {
	display: block;
}

br.sp_only {
	display: block;
}
}

.hidden {
	display: none;
	visibility: hidden;
}

.visible-phone {
	display: none !important;
}

.visible-tablet {
	display: none !important;
}

.hidden-desktop {
	display: none !important;
}

.visible-desktop {
	display: inline-block !important;
}

@media (min-width: 660px) and (max-width: 979px) {

.hidden-desktop {
	display: inherit !important;
}

.visible-desktop {
	display: none !important;
}

.visible-tablet {
	display: inherit !important;
}

.hidden-tablet {
	display: none !important;
}
}

@media (max-width: 667px) {

.hidden-desktop {
	display: inherit !important;
}

.visible-desktop {
	display: none !important;
}

.visible-phone {
	display: inherit !important;
}

.hidden-phone {
	display: none !important;
}
}

/*------------------------

clearfix

------------------------*/

.clearfix:before,
 .clearfix:after {
	height: 0;
	display: block;
	overflow: hidden;
	content: '.';
}

.clearfix:after {
	clear: both;
}