@charset "utf-8";

/* ------ common ------ */

* {
	margin: 0;
	padding: 0;
	word-break: normal;
	line-break: strict;
	outline: none;
	box-sizing: border-box
}

html {
	font-family: 'Josefin Sans', 'Noto Sans JP', sans-serif;
	font-size: 62.5%;
	font-style: normal;
	line-height: 1.6;
	font-feature-settings: "palt";
	-webkit-overflow-scrolling: touch
}
 
body {                                                                                                                    
	height: 100%; 
	color: #333;
	font-size: 1.5rem;
	font-weight: 400;
	background: #fff;
	overflow-x: hidden;
	overflow-y: scroll;
    -webkit-text-size-adjust: 100%
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.0
}

img { max-width: 100% }
ol, ul, li {
  list-style: none
}

table {
	border-spacing: 0;
	border-collapse: collapse
}

form label { cursor: pointer }
button,
textarea,
select,
input {
	border-radius: 0;
	-webkit-appearance: none
}

a {
	color: #333;
	text-decoration: none
}

a:hover { transition: all 0.3s ease-in-out }
a:focus { outline: none }
a,
input[type=radio],
input[type=checkbox],
input[type=submit],
button, select {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

a img { border: none }
.cf:after {
	content: '';
	display: block;
	clear: both
}

::-moz-selection {
	color: #fff;
	background: #ff52c5
}

::selection {
	color: #fff;
	background: #ff52c5
}

::-webkit-input-placeholder { color: #999 }
::-moz-placeholder {
	color: #999;
	opacity: 1
}

:-ms-input-placeholder { color: #999 }


/* ------ header ------ */

.headline {
	width: 100%;
	height: 40px;
	color: #fff;
	text-align: center;
	background: #ff66c2
}

.headline h1 {
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 40px;
	letter-spacing: 0.05em
}

@keyframes marquee {
	from   { transform: translate(0%) }
	99%,to { transform: translate(-100%) }
}

@media screen and (max-width: 768px) {
	.headline {
		width: 100%;
		overflow: hidden
	}
	
	.headline h1 {
		width: auto;
		padding: 0 0 0 100%;
		animation-name: marquee;
		animation-timing-function: linear;
		animation-duration: 16s;
		animation-iteration-count: infinite;
		white-space: nowrap;
		display: inline-block
	}
}


/* ------ main wrap ------ */

.mainWrap {
    width: 100%;
    max-width: 1920px;
    background: url(../img/bg_pc.jpg) top center no-repeat
}

.mainWrap .inner {
	width: 880px;
	padding-bottom: 80px;
	margin: 0 auto
}

.mainWrap .logo { padding-top: 202px }
.mainWrap .logo img {
	margin: 0 auto;
	display: block
}

.mainWrap .enterTxt { margin-top: 20px }
.mainWrap .enterTxt img {
	margin: 0 auto;
	display: block
}

.mainWrap .enterIcon { margin-top: 20px }
.mainWrap .enterIcon img {
	margin: 0 auto;
	display: block
}

.mainWrap .enterBtn { margin-top: 20px }
.mainWrap .enterBtn img {
	margin: 0 auto;
	transition: all 0.3s ease-in-out;
	display: block
}

.mainWrap .enterBtn a:hover img { opacity: 0.6 }
.mainWrap .bannerWrap {
	width: 620px;
	margin: 80px auto 0
}

.mainWrap .bannerWrap li + li { margin-top: 10px }
.mainWrap .bannerWrap img {
	transition: all 0.3s ease-in-out;
	display: block
}

.mainWrap .bannerWrap a:hover img { opacity: 0.8 }

@media screen and (max-width: 768px) {
	.mainWrap {
		max-width: inherit;
		background: url(../img/bg_sp.jpg) top center no-repeat;
		background-size: cover
	}

	.mainWrap .inner {
		width: 100%;
		padding: 0 2% 40px
	}

	.mainWrap .logo { padding-top: 100px }
	.mainWrap .logo img { width: 80% }
	.mainWrap .enterTxt img { width: 80% }
	.mainWrap .enterIcon img { width: 50px }
	.mainWrap .enterBtn img {
		width: 80%;
		max-width: 464px
	}

	.mainWrap .enterBtn a:hover img { opacity: 1 }
	.mainWrap .bannerWrap {
		width: 100%;
        text-align: center;
		margin: 40px auto 0
	}

    .mainWrap .bannerWrap ul { font-size: 0 }
    .mainWrap .bannerWrap li {
        width: 120px;
        vertical-align: top;
        border-radius: 50%;
        display: inline-block
        
    }
    
    .mainWrap .bannerWrap li + li { 
        margin-top: 0;
        margin-left: calc(100% - 320px)
    }
    
	.mainWrap .bannerWrap a:hover img { opacity: 1 }
}


/* ------ footer ------ */

footer {
	color: #fff;
	line-height: 50px;
	text-align: center;
	background: #ff66c2
}

@media screen and (max-width: 768px) {
	footer {
		line-height: 1.6;
		padding: 20px 2%
	}
}

#free-area {
	font-size:medium;
	line-height:normal;
	text-align:left;
	padding:0;
	margin:30px 0;
	word-break:break-all
}


/* pc・sp swich */

.spOnly { display: none !important }

@media screen and (max-width: 768px) {
	.pcOnly { display: none !important }
	.spOnly { display: block !important }
}