/*float clear*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    min-height:1%;  /* for IE 7*/
}

.wf-roundedmplus1c { font-family: "Rounded Mplus 1c"; }

input,select,textarea{
}
textarea { border: 2px solid #bbb; }
select option {
    padding : 0 0.5em;
}
form label{
    cursor : pointer;
}
input:focus,select:focus,textarea:focus{
    background-color: #fffed7;
    border: 2px solid #ccc;
}
img { vertical-align: bottom; }
a:link {
    color: #ff7a03;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
a:active { text-decoration: none; }
a:hover { text-decoration: none; color: #ffa405; }
a:visited { color: #af5302; }

::selection {
    background: #0075bc; /* Safari */
	color: #fff;
}
::-moz-selection {
    background: #0075bc; /* Firefox */
	color: #fff;
}

/*======================================
=            ガター溝なしスタイリング            =
======================================*/
.container-small, .container-site {
    max-width: 100%;
}
@media (min-width: 768px) {
	
	.br-sp { display:none; }
	
    .container-site {
        max-width: 1030px;
		position: relative;
		margin-left: auto;
		margin-right: auto;
    }
    .container-site img {
        width: 100%;
		height: auto;
    }
    
    .container-site100 {
        width: 100%;
		position: relative;
		margin-left: auto;
		margin-right: auto;
    }
    
    body {
        background-size: contain;
        background-repeat: none;
        align-items: center;
        justify-content: center;
    }
    
	.inner {
		max-width: 1000px;
		margin: 0 auto;
	}
	.inner:after {
		content: "";
		clear: both;
		display: block;
	}

	
	/*gridのgutter調整*/
.row-0{
    margin-left:0px;
    margin-right:0px;
 
    > div{
        padding-right:0px;
        padding-left:0px;
    }
	}
	.row-10{
		margin-left:-5px;
		margin-right:-5px;

		> div{
			padding-right:5px;
			padding-left:5px;
		}
	}
	.row-20{
		margin-left:-10px;
		margin-right:-10px;

		> div{
			padding-right:10px;
			padding-left:10px;
		}
	}
	.row-30{
		margin-left:-15px;
		margin-right:-15px;

		> div{
			padding-right:15px;
			padding-left:15px;
		}
	}
	.row-40{
		margin-left:-20px;
		margin-right:-20px;

		> div{
			padding-right:20px;
			padding-left:20px;
		}
	}
	

	/*ヘッダー*/

	
	header {
		height: 770px;
		background: url(/images/bg.gif) no-repeat center 0;
		position: relative;
	}
	header h1 {
		text-align: center;
		padding: 40px 0 0 0;
	}
	header h1 span {
		font-size: 16px;
		color: #41210f;
		display: block;
		margin-bottom: 10px;
	}
	header h1 img {
		width: 420px;
		height: auto;
	}
	header ul,
	.dl-btn-box {
        position: relative;
        width: 450px;
        margin: 30px auto;
		z-index: 200;
	}
	.dl-btn-box {
        width: 600px;
        margin: 60px auto 0 auto;
	}
	header ul li {}
	header ul li.ios,
	.dl-btn-box li.ios {
        width: 50%;
        float: left;
	}
	header ul li.android,
	.dl-btn-box li.android {
        width: 50%;
        float: right;
        text-align: right;
	}
	header ul li img {
        height: 70px;
        width: auto;
	}
	.dl-btn-box li img {
        height: 90px;
        width: auto;
	}
	header p img {
		max-width: 1000px;
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 100;
	}
	
	.contents-wrap {}
	.info-title-wrap {
		background: #000;
		text-align: center;
		position: relative;
		padding: 50px 0 30px 0;
	}
	.info-title-wrap div {
		position: absolute;
		width: 100%;
		text-align: center;
		top: -60px;
		z-index: 150;
	}
	.info-title-wrap img {
		max-width: 1000px;
		width: 100%;
		height: auto;
	}
	.info-title-wrap h2 {
		font-size: 36px;
        font-family: "Rounded Mplus 1c";
        font-weight: 700;
		color: #fff;
		line-height: 1.6;
	}
	.info-wrap {}
	.info-wrap .row {
		margin-top: 40px;
	}
	.info-wrap .col-sm-4 {}
	.info-box {
		border: 8px solid #000;
	}
	.info-wrap strong {
		display: block;
		background: #000;
		text-align: center;
		color: #fff;
        font-family: "Rounded Mplus 1c";
        font-weight: 400;
		font-size: 20px;
		padding: 10px 0 15px 0;
	}
	.info-wrap img {
		width: 100%;
		height: auto;
	}
	.info-wrap figure {
		position: relative;
	}
	.info-wrap figcaption {
		position: absolute;
		bottom: 0;
		background: rgba(0,0,0,.7);
		width: 100%;
		font-size: 18px;
		line-height: 1.6;
		color: #fff;
		padding: 10px;
	}
	
	.news-wrap {
		background: #ddd;
		margin: 80px 0 0 0;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.news-wrap h2 {
		text-align: center;
		font-size: 30px;
        font-family: "Rounded Mplus 1c";
        font-weight: 700;
	}
	.news-info-p {
		margin: 20px 0 10px 0;
		text-align: center;
		font-size: 16px;
	}
	.news-wrap-div {
	}
	.news-box {
		background: #fff;
		margin: 20px 0 0 0;
		position: relative;
		padding: 10px 20px 10px 100px;
	}
	.news-box span {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		padding: 5px 20px;
		font-size: 16px;
        font-family: "Rounded Mplus 1c";
        font-weight: 700;
		color: #fff;
	}
	.news-box span.style-event { background: #0c7009; }
	.news-box span.style-news { background: #0d39a7; }
	.news-box h3 {
		font-size: 18px;
        font-family: "Rounded Mplus 1c";
        font-weight: 700;
		margin: 10px 20px 0 0;
	}
	.news-box p {
		font-size: 16px;
		margin: 10px 20px 0 0;
		line-height: 1.6;
	}
	.news-box div {
		background: #418bf7 url(/images/icon_cal.png) no-repeat 20px 50%;
		background-size: 24px;
		margin-top: 15px;
		border-radius: 20px;
		padding: 10px 0;
		text-align: center;
		color: #fff;
		font-size: 18px;
        font-family: "Rounded Mplus 1c";
        font-weight: 500;
	}
	.row-eq-height {
		display: flex;
		flex-wrap: wrap;
	}
	
	.privacy-wrap {
		font-size: 18px;
		line-height: 1.8;
		padding-top: 40px;
	}
	.privacy-wrap p {
		margin-top: 20px;
	}
	.privacy-wrap ol {
		list-style-type: decimal;
		margin: 60px 0 80px 20px;
	}
	.privacy-wrap ol li h3 {
		margin: 40px 0 0 0;
		font-weight: bolder;
	}
	.privacy-wrap ol li p {
		margin-top: 10px;
	}
	
	footer {
		background: #333;
		padding: 60px 40px 40px 40px
	}
	.footer-tw {
		text-align: center;
	}
	.footer-info { margin: 40px 0 0 0; text-align: center; }
	.footer-info div {
		display: inline-block;
		color: #ccc;
		margin: 0 20px;
	}
	.footer-info div strong {}
	.footer-info div a {
		color: #fff;
		text-decoration: underline;
	}
	.footer-info div a:hover {
		text-decoration: none;
	}
	.copy-right {
		margin-top: 40px;
		text-align: center;
		font-size: 13px;
		color: #999;
	}
	

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

	
/*--------------------------------------------
共通
----------------------------------------------*/
    
	.br-pc { display:none; }

	/*ヘッダー*/

	
	header {
		background: url(/images/bg.gif) no-repeat center 0;
		position: relative;
	}
	header h1 {
		text-align: center;
		padding: 20px 15px 0 15px;
	}
	header h1 span {
		font-size: 15px;
		color: #41210f;
		display: block;
		margin-bottom: 10px;
	}
	header h1 img {
		width: 100%;
		height: auto;
	}
	header ul,
	.dl-btn-box {
        margin: 20px 15px 0 15px;
	}
	.dl-btn-box {
        margin: 40px 15px 0 15px;
	}
	header ul li,
	.dl-btn-box li{
		text-align: center;
		margin-bottom: 20px;
	}
	header ul li img,
	.dl-btn-box li img {
		width: 80%;
		height: auto;
	}
	
	header p img {
		max-width: 1000px;
		width: 100%;
		height: auto;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 100;
	}
	
	.contents-wrap {}
	.info-title-wrap {
		background: #000;
		text-align: center;
		position: relative;
		padding: 20px 0 10px 0;
	}
	.info-title-wrap div {
		position: absolute;
		width: 100%;
		text-align: center;
		top: -20px;
		z-index: 150;
	}
	.info-title-wrap img {
		max-width: 1000px;
		width: 100%;
		height: auto;
	}
	.info-title-wrap h2 {
		font-size: 26px;
        font-family: "Rounded Mplus 1c";
        font-weight: 700;
		color: #fff;
		line-height: 1.4;
		padding: 0 15px;
	}
	.info-wrap {}
	.info-wrap .row {
	}
	.info-wrap .col-sm-4 {}
	.info-box {
		border: 8px solid #000;
		margin-top: 20px;
	}
	.info-wrap strong {
		display: block;
		background: #000;
		text-align: center;
		color: #fff;
        font-family: "Rounded Mplus 1c";
        font-weight: 400;
		font-size: 20px;
		padding: 10px 0 15px 0;
	}
	.info-wrap img {
		width: 100%;
		height: auto;
	}
	.info-wrap figure {
		position: relative;
	}
	.info-wrap figcaption {
		position: absolute;
		bottom: 0;
		background: rgba(0,0,0,.7);
		width: 100%;
		font-size: 18px;
		line-height: 1.6;
		color: #fff;
		padding: 10px;
	}
	
	.news-wrap {
		background: #ddd;
		margin: 80px 0 0 0;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.news-wrap h2 {
		text-align: center;
		font-size: 28px;
        font-family: "Rounded Mplus 1c";
        font-weight: 700;
	}
	.news-info-p {
		margin: 20px 15px 10px 15px;
		text-align: center;
		font-size: 15px;
	}
	#pico_news_xml_public .col-sm-6 {
		width: 100%;
		word-wrap: break-word;
	}
	.news-box {
		background: #fff;
		margin: 20px 0 0 0;
		width: 100%;
		position: relative;
		padding: 0 0 10px 0;
		word-wrap: break-word;
	}
	.news-box span {
		display: inline-block;
		padding: 5px 20px;
		font-size: 15px;
        font-family: "Rounded Mplus 1c";
        font-weight: 700;
		color: #fff;
	}
	.news-box span.style-event { background: #0c7009; }
	.news-box span.style-news { background: #0d39a7; }
	.news-box h3 {
		font-size: 16px;
        font-family: "Rounded Mplus 1c";
        font-weight: 700;
		margin: 10px 20px 0 10px;
	}
	.news-box p {
		font-size: 15px;
		margin: 10px 20px 0 10px;
		line-height: 1.6;
	}
	.news-box div {
		background: #418bf7 url(/images/icon_cal.png) no-repeat 10px 50%;
		background-size: 20px;
		margin: 15px 10px 0 10px;
		border-radius: 20px;
		padding: 10px 0;
		text-align: center;
		color: #fff;
		font-size: 18px;
        font-family: "Rounded Mplus 1c";
        font-weight: 500;
	}
	
	.privacy-wrap {
		font-size: 16px;
		line-height: 1.6;
		padding-top: 20px;
	}
	.privacy-wrap p {
		margin-top: 20px;
	}
	.privacy-wrap ol {
		list-style-type: decimal;
		margin: 30px 0 40px 20px;
	}
	.privacy-wrap ol li h3 {
		margin: 20px 0 0 0;
		font-weight: bolder;
	}
	.privacy-wrap ol li p {
		margin-top: 5px;
	}
	
	footer {
		background: #333;
		padding: 30px 15px 20px 15px
	}
	.footer-tw {
		text-align: center;
		padding: 0 15px;
	}
	.footer-info { margin: 40px 0 0 0; text-align: left; }
	.footer-info div {
		display: block;
		color: #ccc;
		margin: 10px 0 30px 0;
	}
	.footer-info div strong {
		display: block;
		margin-bottom: 5px;
	}
	.footer-info div a {
		color: #fff;
		text-decoration: underline;
	}
	.footer-info div a:hover {
		text-decoration: none;
	}
	.copy-right {
		margin-top: 40px;
		text-align: center;
		font-size: 13px;
		color: #999;
	}
}