@charset "UTF-8";
/* CSS Document */
*{margin:0;padding:0;}
*, 
*:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
body {
	font-family: 'Noto Sans JP', "游ゴシック", "Yu Gothic","Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" "メイリオ", Meiryo, Osaka, sans-serif;
	background:#ffffff;
	font-size:16px;
	line-height:1.7;
	color:#000;
	letter-spacing:1px;
	width:100%;
}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
ol, ul {list-style: none;list-style-type: none;}
a:focus, *:focus { outline:none; }
a{text-decoration: none;color: #000;}
a:hover{opacity:0.8;}
a.txt-links{text-decoration: underline;}
img{vertical-align:bottom;}
.table{display:table;width:100%;height:100%;}
.cell{display:table-cell;vertical-align:middle;}
.font-gf-b{font-family: 'Bellefair', serif;}
.float-l{float:left;}
.float-r{float:right;}


.cp-sec-ttl{
	color:#000;
	text-align:center;
	font-size:28px;
	font-weight:bold;
	margin:0 0 80px;
	letter-spacing:4px;
}

.site-cont{
	width:94%;
	max-width:1200px;
	overflow:hidden;
	margin:0 auto;
}

.app-left{
	width:20%;
	float:left;
	background:#fff;
	text-align:center;
	color:#000;
	font-weight:bold;
	font-size:18px;
	letter-spacing:4px;
}
.app-right{
	width:80%;
	float:left;
	padding:14px 14px 14px 34px;
}
.app-line{
	width:100%;
	height:1px;
	background:#f2f2f2;
	clear:both;
	margin:10px 0;
	float:left;
}

.app-atack {
	  font-size:22px;
	  font-weight:bold;
	  margin-bottom:12px;
}
.app-atack02 {
	  font-size:18px;
	  margin-bottom:12px;
}
.app-atack02 span{
	font-weight:bold;
}
.app-indent {
	  margin-bottom:8px;
	  text-indent:-1em;
	  padding-left:1em;
	  font-size:14px;
}

.cp-att-sec{
	background:#fff;
	padding:100px 0;
	overflow:hidden;

}
.cp-att-text{
	width:100%;
	max-width:1200px;
	margin:10px auto;
}
.cp-att-ttl{
	font-size:16px;
	font-weight:bold;
	margin:0 0 18px;
}
.cp-att-sec dl{
	overflow:hidden;
}
.cp-att-sec dt{
	width:40px;
	float: left;
	 
}
.cp-att-sec dd{
	margin:0 0 8px 40px;
	 
}

/*footer*/
.cp-footer{
	background:#000;
	padding:50px 0;
}
.copyright{
	text-align:center;
	font-size:14px;
	color:#fff;
}
.footer-site-name{
	text-align:center;
	color:#fff;
	font-size:22px;
	margin:0 0 40px;
}

#pagetop {
    bottom:100px;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 999;
}
#pagetop a {
    background: #ff8737 none repeat scroll 0 0;
    color: #fff;
    display: block;
    float: right;
    font-size: 12px;
    margin-right: 0;
    padding: 30px 0;
    text-align: center;
    text-decoration: none;
    width: 80px;
}
#pagetop a {
    color: #fff;
    display: block;
    float: right;
    font-size: 12px;
    margin-right: 0;
    text-align: center;
    text-decoration: none;
}

#fixed-sns {
	 padding: 15px 0;
	 background:rgba(67,67,67,0.9);
	text-align:center;
    width: 100%;
    z-index: 900;
	vertical-align: middle;
}

#fixed-sns a {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 2.6;
	display:block;
    vertical-align: middle;
}
#fixed-sns a:hover {
	-webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
#fixed-sns img.right {
    margin-left: 20px;
	vertical-align:middle;
}
#fixed-sns img.left {
    margin-right: 20px;
}
#fixed-sns a:hover {
	text-decoration:none;
}

.fixed-bottom {
  position: fixed;
  bottom:0;
}

/*////////アコーディオン////////*/

ul.accordion { 
width:100%; 
margin:50px auto 0;
max-width:1000px;
}
ul.accordion a{
	color:#0151BD;
}
ul.accordion a:hover{
	text-decoration:underline;
	color:#0151BD;
}
ul.accordion > li {
	background:#ff8737;
	color:#fff;
	width:100%;
	font-weight:bold;
	margin:0 auto 10px;
	letter-spacing:2px;
}
ul.accordion span { 
display:block; 
font-size:18px;
padding:25px 50px 25px 0;
}

ul.accordion ul { display:none;}

ul.accordion > li > p {
padding:0px;
border-top:1px solid #fff;
cursor:pointer;
padding:0 10%;

}

ul.accordion > li > p.blue-text span {
background: rgba(0, 0, 0, 0) url("../img/aco_down.png") no-repeat scroll 100% center / 35px 35px;
    line-height: 1.7;
    padding-right: 70px;
}

ul.accordion > li > p.blue-text span.open {
background-image: url("../img/aco_up.png");
    background-size: 35px 35px;
}


ul.accordion > li > ul > li {
background-color:#ffe8d9;
font-weight:normal;
color:#333;
font-size:16px;
padding:30px 10%;
}

ul.accordion > li > ul > li > ul > li:last-child { 
border:none;}



@media screen and (max-width:1000px) { 
ul.accordion > li > p {
    background: rgba(0, 0, 0, 0) url("../images/faq_q.png") no-repeat scroll 2% center / 30px 30px;
    border-top: 1px solid #fff;
    cursor: pointer;
    padding: 0 5%;
}

ul.accordion > li > ul > li {
background:url(../images/faq_a.png) no-repeat 8% center / 30px 30px;
background-color:#FFE8D9;
color:#333;
font-size:16px;
padding:30px 15%;
}

ul.accordion > li > p.blue-text span {
	padding-left:30px;
}
ul.accordion > li > ul > li {
	padding-left:5%;
	padding-right:5%;
	font-size:14px;
}

}
@media screen and (max-width:600px) { 
ul.accordion span { 
display:block; 
font-size:14px;
padding:20px 20px 20px 0;
}
ul.accordion > li > p.blue-text span {
    background: rgba(0, 0, 0, 0) url("../img/aco_down.png") no-repeat scroll 100% center / 35px 35px;
    line-height: 1.7;
    padding-right: 40px;
}
ul.accordion > li > p {
	padding:0 2% 0 4%;
}
ul.accordion > li > ul > li {
	font-size:14px;
	padding-left:5%;
}
}


/*コンテンツ*/
#bg {
	background:url(../img/bg_002.png);
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-size:cover;
	background-position:bottom;
}
#scroll_bg01 {
	background:url(../img/bg_001_001.png);
	background-attachment: fixed;
	height:auto;
}
#scroll_bg02 {
	background:url(../img/bg_001_002.png);
	background-attachment: fixed;
	height:auto;
}
#scroll_bg03 {
	background:url(../img/bg_001_003.png);
	background-attachment: fixed;
	height:auto;
}


/* スマホ用の設定 */
 
body::#bg {
	content: "";
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background:url(../img/bg_002.png);
	background-size: 100% auto;
	top: 0;
	left: 0;
	z-index: -1;
}

body::#scroll_bg01 {
	content: "";
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background:url(../img/bg_001_001.png);
	background-size: 100% auto;
	top: 0;
	left: 0;
	z-index: -1;
}

body::#scroll_bg02 {
	content: "";
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background:url(../img/bg_001_002.png);
	background-size: 100% auto;
	top: 0;
	left: 0;
	z-index: -1;
}

body::#scroll_bg03 {
	content: "";
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background:url(../img/bg_001_003.png);
	background-size: 100% auto;
	top: 0;
	left: 0;
	z-index: -1;
}
 
@media screen and (max-width: 980px){
	/* 背景画像の設定なし */
	/* max-width: 50em = 800px相当 */
}
 
@media screen and (max-width: 980px){
	body::#bg,
	body::#scroll_bg01,
	body::#scroll_bg02,
	body::#scroll_bg03 {
		display: block;
	}
}



.bg-area {
	padding:100px 0;
	background:#FFE401;
}
.section {
	position:relative;
}
.section .top {
	padding-bottom:170px;
	width:100%;
	max-width:1500px;
	margin:0 auto;
}
.section .top .logo {
	padding:50px 5%;
	text-align:center;
}
.section .top .logo img {
	width:100%;
	max-width:149px;
}
.yellow-box {
	background: linear-gradient(#d9de00, #f0b500);
	padding:50px 8%;
}
.section .top .yellow-box .left-box {
	width:65%;
	position:relative;
}
.section .top .yellow-box .sub-ttl {
	margin-top:-80px;
	margin-bottom:50px;
}
.section .top .yellow-box .sub-ttl02 {
	padding:20px 20px 20px 0;
	margin-top:50px;
	width:55%;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	letter-spacing:1.6;
	background:url(../img/hd-sub-bg.png);
	background-repeat:no-repeat;
	background-position:right bottom;
}
.section .top .yellow-box .sub-ttl02 p {
	margin-top:20px;
}
.section .top .yellow-box .sub-ttl img{
	width:100%;
	max-width:479px;
}
.section .top .yellow-box .ttl img{
	width:100%;
	max-width:574px;
}
.section .top .yellow-box .sub-ttl02 img{
	width:100%;
	max-width:249px;
}
.section .top .yellow-box .day-icon {
	position:absolute;
	bottom:-100px;
	right:3%;
	z-index:103;
}
.section .photo-box {
	width:50%;
}
.section .photo-box .ph01 {
	position:absolute;
	top:0;
	right:15%;
	z-index:101;
}
.section .photo-box .ph02 {
	position:absolute;
	top:12%;
	right:33%;
	z-index:101;
}
.section .photo-box .ph03 {
	position:absolute;
	top:20%;
	right:4%;
	z-index:102;
}
.section .photo-box .ph04 {
	position:absolute;
	top:25%;
	right:20%;
	z-index:100;
}
.section .photo-box .ph05 {
	position:absolute;
	top:43%;
	right:31%;
	z-index:102;
}
.section .photo-box .ph06 {
	position:absolute;
	top:55%;
	right:8%;
	z-index:101;
}
.section .photo-box .ph07 {
	position:absolute;
	top:63%;
	right:16%;
	z-index:100;
}

.copy {
	background:url(../img/copy_bg.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	padding:35px 5%;
	width:100%;
	color:#fff;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	line-height:1.6;
}

.contents {
	padding:100px 0;
	overflow:hidden;
}
.contents .basel {
	position:relative;	
}
.contents .basel .left {
	width:60%;
	background: linear-gradient(#ec7740, #dc3d58);
	padding:20px 15% 120px 10%;
	color:#fff;
	font-size:20px;
}
.contents .basel .left .ttl {
	margin-top:-50px;
	margin-bottom:30px;
}
.contents .basel .left p {
	margin-top:50px;
}
.contents .basel .right {
	position:absolute;
	top:25%;
	right:5%;
	width:45%;
}
.contents .basel .right img {
	width:100%;
}

.contents .present {
	margin-top:150px;
	position:relative;
	float:right;
	width:50%;
}
.contents .present .top {
	width:100%;
	background: linear-gradient(#6d89d8, #49c4ef);
	padding:20px 15% 50% 10%;
	color:#fff;
	font-size:20px;
	margin-bottom:100px;
}
.contents .present .top .ttl {
	margin-top:-50px;
	margin-bottom:30px;
}
.contents .present .bottom {
	position:absolute;
	top:25%;
	right:5%;
	width:100%;
	min-width:1200px;
}

.contents .present .bottom .pre-box {
	border:6px solid #ffe400;
	background:#fff;
	text-align:center;
	position:relative;
	padding:50px 2% 30px;
	float:left;
	margin-right:5%;
	width:40%;
}
.contents .present .bottom .pre-box .tag {
	position:absolute;
	top:-15px;
	left:-15px;
}
.contents .present .bottom .pre-box p {
	font-size:26px;
	line-height:1.4;
	font-weight:bold;
	margin-top:20px;
	color:#000;
}
.contents .present .bottom .pre-box p span {
	font-size:14px;
	font-weight:normal;
}
.contents .present .bottom .pre-box .img.clock {
	margin-top:50px;
}

.contents .howto {
	position:relative;
	margin:250px 0 300px;
}
.contents .howto .left {
	width:60%;
	background: linear-gradient(#f6f587, #9bfbc1);
	padding:20px 15% 30% 10%;
	color:#fff;
	font-size:20px;
}
.contents .howto .left .ttl {
	margin-top:-50px;
	margin-bottom:30px;
}
.contents .howto .left p {
	
}
.contents .howto .right {
	position:absolute;
	top:25%;
	right:5%;
}
.contents .howto .bottom {
	position:absolute;
	top:30%;
	left:10%;
	width:50%;
	width:100%;
	min-width:1200px;
}
.contents .howto .bottom .howto-box {
	border:3px solid #ffe400;
	background:#fff;
	text-align:center;
	position:relative;
	padding:80px 2% 60px;
	float:left;
	margin-left:-3px;
	width:40%;
	max-width:550px;
}
.contents .howto .bottom .howto-box .tag {
	position:absolute;
	top:-3px;
	left:-2px;
}
.contents .howto .bottom .howto-box p {
	font-size:18px;
	line-height:1.6;
	font-weight:bold;
	position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
  color:#000;
}
.contents .howto .bottom .howto-box .img {
	float:left;
	width:40%;
	position:relative;
	 top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
}
.contents .howto .bottom .howto-box p {
	width:60%;
	float:left;
	text-align:left;
}
.contents .howto .bottom .second {
	margin-top:-3px;
	position:absolute;
	width:100%;
	margin-left:15%;
}

.contents .howto .bottom .howto-box.no-float p {
	width:100%;
	float:none;
	position:relative;
	 top: 0;
  -webkit-transform: translateY(0%); /* Safari用 */
  transform: translateY(0%);
  margin-top:30px;
}
.contents .howto .bottom .howto-box.no-float .img {
	width:100%;
	float:none;
	position:relative;
	 top: 0;
  -webkit-transform: translateY(0%); /* Safari用 */
  transform: translateY(0%);
   margin-top:20px;
}

.btn {
	width:80%;
	background:#000;
	text-align:center;
	margin:0 auto;
	transform:skewX(-15deg);
}
.btn a {
	display:block;
	padding:50px;
}
.btn a {
	transform:skewX(15deg);
	color:#fff;
	font-size:20px;
	letter-spacing:2px;
	font-weight:bold;
	vertical-align:middle;
	line-height:2.6;
}
.btn a:hover {
	text-decoration:none;
}
.btn img {
	vertical-align:middle;
}
.btn img.left {
	margin-right:20px;
}
.btn img.right {
	margin-left:20px;
}
.btn a:hover {
	opacity:1;
}




@media screen and (max-width:1600px) { 
.section {
	padding-left:5%;
	padding-right:5%;
}
.section .photo-box .ph05 {
	right:32%;
	width:16%;
}
}



@media screen and (max-width:1500px) { 
.w1500 {
	display:none;
}
.contents .howto {
	margin-top:280px;
}
.section .photo-box .ph01,
.section .photo-box .ph03,
.section .photo-box .ph04,
.section .photo-box .ph05,
.section .photo-box .ph07 {
	width:16%;
}
.section .photo-box .ph01 img,
.section .photo-box .ph03 img,
.section .photo-box .ph04 img,
.section .photo-box .ph05 img,
.section .photo-box .ph07 img {
	width:100%;
}
.section .photo-box .ph02,
.section .photo-box .ph06 {
	width:12%;
}
.section .photo-box .ph02 img,
.section .photo-box .ph06 img {
	width:100%;
}
.contents .howto .bottom .second {
	margin-left:10%;
}
.section .photo-box .ph05 {
	right:27%;
}

}

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

.section .photo-box .ph01 {
	top:0;
	right:15%;
}
.section .photo-box .ph02 {
	top:12%;
	right:33%;
}
.section .photo-box .ph03 {
	top:20%;
	right:4%;
}
.section .photo-box .ph04 {
	top:25%;
	right:20%;
}
.section .photo-box .ph05 {
	top:43%;
	right:31%;
}
.section .photo-box .ph06 {
	top:50%;
	right:8%;
}
.section .photo-box .ph07 {
	top:55%;
	right:16%;
}
.section .top .yellow-box .left-box {
	width:50%;
}
.section .top .yellow-box .sub-ttl02 {
	width:80%;
}
.section .top .yellow-box .day-icon {
	right:-30%;
}
.contents .howto .bottom .second {
	margin-left:5%;
}
.contents .present .bottom {
	right:0;
	top:30%;
	padding-left:5%;
}
.contents .basel .ttl img,
.contents .basel .ttl-sub img {
	width:100%;
	max-width:497px;
}
.contents .present .top .ttl img {
	width:100%;
	max-width:356px;
}
.contents .present .top .ttl-sub img {
	width:100%;
	max-width:585px;
}
.contents .howto .left .ttl img {
	width:100%;
	max-width:247px;
}
.contents .howto .left .ttl-sub img {
	width:100%;
	max-width:584px;
}
.contents .howto {
    margin: 350px 0 400px;
}
.contents .howto .bottom .howto-box p {
	font-size:18px;
}
.section .top .yellow-box .day-icon {
    right: -40%;
}
}


@media screen and (max-width:1200px) { 
.contents .basel .left,
.contents .howto .bottom .howto-box p {
	font-size:16px;
}
.contents .present .bottom .pre-box {
	margin-right:3%;
	width:47%;
}
.copy,
.app-atack {
	font-size:18px;
}
.contents .present .bottom .pre-box p {
	font-size:20px;
}
.contents .howto {
	margin-top:250px;
	margin-bottom:400px;
}
.day-icon img {
	width:100%;
}
.section .top .yellow-box .day-icon {
	width:60%;
	 right: -40%;
}
.section .photo-box .ph01,
.section .photo-box .ph03,
.section .photo-box .ph04,
.section .photo-box .ph05,
.section .photo-box .ph07 {
	width:19%;
}
.section .photo-box .ph02,
.section .photo-box .ph06 {
	width:14%;
}
.contents .present .bottom,
.contents .howto .bottom {
	min-width:980px;
}
.contents .howto {
	margin-top:350px;
}
.contents .basel .left,
.contents .howto .left {
	width:70%;
}
.contents .basel .right {
	width:38%;
}
.contents .present {
	width:60%;
}
.contents .howto .bottom .howto-box .img {
	width:45%;
}
.contents .howto .bottom .howto-box p {
	width:55%;
}
}

@media screen and (min-width:981px) { 
.w981 {
	display:none;
}
}

@media screen and (max-width:980px) { 
.w980 {
	display:none;
}
.section .top .yellow-box .left-box,
.section .top .yellow-box .sub-ttl02,
.section .photo-box {
	width:100%;
	float:none;
}
.section .top .yellow-box .sub-ttl02 {
	background-position:center bottom;
}
.section .photo-box {
	display:none;
}
.section .top .yellow-box {
	
}
.section .top .yellow-box .sub-ttl,
.section .top .yellow-box .left-box .ttl {
	text-align:center;
}

.section .top .yellow-box .day-icon {
	position:relative;
	right:0;
	
}
.section .top .yellow-box .sub-ttl02 {
	width:60%;
	float:left;
	overflow:hidden;
}
.section .top .yellow-box .day-icon {
	float:left;
	width:40%;
	bottom:0;
	margin-top:50px;
	text-align:center;
}
.section .top .yellow-box .day-icon img {
	max-width:250px;
	width:100%;
}
.o-h {
	overflow:hidden;
	max-width:700px;
	margin:0 auto;
}
.contents .basel .left {
	width:100%;
	padding-bottom:100px;
}
.contents .basel .right {
	position:relative;
	width:100%;
	right:0;
}
.contents .present {
	float:none;
	width:100%;
}
.contents .present .bottom, .contents .howto .bottom {
	max-width:980px;
}
.contents .present .bottom .pre-box {
	width:100%;
	float:none;
}
.contents .present .bottom {
	padding-left:5%;
	padding-right:5%;
	margin-top:50px;
	position:relative;
	float:none;
	min-width:100%;
}
.contents .present .bottom .pre-box {
	margin-bottom:30px;
}
.contents .present .bottom .pre-box p {
	color:#000;
}
.contents .present .top {
	padding-bottom:50px;
}
.contents .present .bottom {
	padding-left:0;
	padding-right:0;
	
}
.contents .present .top {
	padding-right:10%;
}

.contents .howto {
	margin-top:30px;
	width:100%;
	
}

.contents .howto .left {
	width:100%;
	padding-right:10%;
}
.contents .present .bottom, .contents .howto .bottom {
	min-width:100%;
	position:relative;
	left:0;
	margin-top:50px;

}
.contents .howto .bottom .howto-box {
	width:100%;
	float:none;
	overflow:hidden;
	margin-bottom:20px;
	max-width:100%;
}
.contents .howto .bottom .howto-box .img,
.contents .howto .bottom .howto-box p {
	float:none;
	width:100%;
	position:relative;
	top:0;
    transform: translateY(0%);
}
.contents .howto .bottom .howto-box {
	padding:50px 5%;
}
.contents .howto .bottom .howto-box p {
	margin-top:20px;
}
.contents .howto .bottom .second {
	margin-left:0;
	position:relative;
	margin-top:-30px;
}
.contents .howto {
	margin-bottom:100px;
}
.contents .howto .left {
	padding-bottom:50px;
}
.contents .howto .bottom .howto-box.no-float p {
	margin-top:40px;
}
.app-left,
.app-right {
	float:none;
	width:100%;
}
.app-line {
	display:none;
}
.app-left {
	padding:5px 0;
	font-size:16px;
}
.cp-sec-ttl {
	font-size:24px;
	margin-bottom:30px;
}
.bg-area,
.cp-att-sec {
	padding:50px 0;
}
.copy, .app-atack,
.app-atack02,
.footer-site-name {
	font-size:16px;
}
body {
	font-size:14px;
}
.app-atack {
	margin-bottom:5px;
}
.btn a {
	font-size:18px;
	padding:40px 5%;
}
.copyright {
	font-size:13px;
}
#pagetop a {
	width:60px;
	padding:23px 0;
}
#pagetop {
    bottom: 0;
}

.sp-img img {
	width:100%;
	max-width:980px;
	
}
.sp-img {
	width:100%;
	margin:60px 0 20px;
}
.yellow-box {
	padding:50px 0;
}
.section .top .yellow-box .sub-ttl02 {
	width:100%;
	margin-top:0;
}
.section .top .yellow-box .ttl img{
	max-width:450px;
}
.section .top .yellow-box .sub-ttl,
.section .top .yellow-box .left-box .ttl,
.o-h {
	padding-left:5%;
	padding-right:5%;
	max-width:900px;
}
.sp-day {
	background:#ff8737;
	padding:30px 5%;
	text-align:center;
}
.sp-day img {
	max-width:350px;
	width:100%;
}
.section .top {
	padding-bottom:100px;
}
.btn img {
	width:30px;
}
.btn a {
	font-size:14px;
}
.btn {
	width:90%;
}


.contents .present  {
    background: rgba(0, 0, 0, 0) linear-gradient(#6d89d8, #49c4ef) repeat scroll 0 0;
    color: #fff;
    font-size: 20px;
    margin-bottom: 100px;
    padding: 20px 5% 50px 5%;
    width: 100%;
}
.contents .present .top,
.contents .howto .left {
	background:none;
}
.contents .present .top,
.contents .howto .left {
	padding-bottom:0;
	padding-left:0;
}
.contents .howto {
    background: rgba(0, 0, 0, 0) linear-gradient(#f6f587, #9bfbc1) repeat scroll 0 0;
    color: #fff;
    font-size: 20px;
    padding: 20px 5% 50px 5%;
    width: 100%;
}
.footer-site-name {
	margin-bottom:20px;
}
.cp-footer {
	padding:40px 0;
}
#pagetop {
	bottom:80px;
}
.section {
    padding-left:0;
    padding-right:0;
}
#fixed-sns {
	 padding: 10px 0;
	 background:rgba(67,67,67,0.9);
	text-align:center;
    width: 100%;
    z-index: 900;
	vertical-align: middle;
}

#fixed-sns a {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 2.8;
	display:block;
    vertical-align: middle;
}
#fixed-sns a:hover {
	-webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

#fixed-sns img.left {
    margin-right: 20px;
	width:40px;
}
#fixed-sns a:hover {
	text-decoration:none;
}

.fixed-bottom {
  position: fixed;
  bottom:0;
}

}

@media screen and (min-width:601px) { 
.contents .present .bottom {
	margin-top:30px;
}
.w601 {
	display:none;
}
}
@media screen and (max-width:600px) { 
.w600 {
	display:none;
}
.contents .present .top .ttl,
.contents .howto .left .ttl {
    margin-top: -70px;
}
}

@media screen and (min-width:501px) { 
.w501 {
	display:none;
}
.contents .present .top {
	margin-bottom:0;
}
}

@media screen and (max-width:500px) { 
.w500 {
	display:none;
}
.ttl-sub.w501 {
	max-width:285px;
	width:100%;
}
.section .top .yellow-box .sub-ttl02 p,
.contents .present .bottom .pre-box p {
	font-size:16px;
}
.section .top .yellow-box .ttl img {
    max-width: 230px;
}
.copy {
	padding:50px 5%;
	text-align:left;
}
.contents .basel .left,
.contents .present .top,
.contents .howto .left {
	padding:30px 5% 0;
}
.contents .basel .left {
	padding-bottom:50px;
}
.contents .present .bottom .pre-box img,
.contents .howto .bottom .howto-box .tag img {
	width:100%;
	max-width:120px;
}
.contents .basel .left, .contents .howto .bottom .howto-box p {
	font-size:14px;
}
.contents .present .top .ttl img {
	max-width:230px;
}

.contents .basel .ttl-sub img,
.contents .present .top .ttl-sub img,
.contents .howto .left .ttl-sub img {
	max-width:250px;
}
.contents .howto .left .ttl img {
	max-width:170px;
}
.contents .present .bottom .pre-box {
	padding-top:40px;
}
.contents .present .bottom .pre-box .img.clock {
	margin-top:0;
}
.contents .howto .bottom .howto-box {
	padding-top:70px;
}
.contents .howto .bottom .howto-box.no-float p {
	margin-top:-10px;
}
.btn a {
	line-height:1.7;
}
.app-left, .app-right,
.contents .present .top, .contents .howto .left {
	padding-left:0;
	padding-right:0;
}
.contents .present .top {
	margin-bottom:0;
}
.copy, .app-atack, .app-atack02, .footer-site-name {
	font-size:14px;
}
.copyright {
	font-size:12px;
}
#pagetop a {
    padding: 15px 0;
    width: 50px;
}

#bg{
    background:none; 
  }
#bg::before {
    background:url(../img/bg_002.png) repeat center center;
    background-size: cover;
    display: block;
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh;
    content: "\A"; 
    z-index: -1; 
  }
.section .top .yellow-box .sub-ttl img {
    max-width: 300px;
    width: 100%;
}
.section .top .yellow-box .sub-ttl {
	margin-bottom:20px;
}
.sp-img {
	margin:30px 0 20px;
}
.section .top .yellow-box .sub-ttl02 img {
    max-width: 200px;
    width: 100%;
}
.sp-day img {
    max-width: 230px;
    width: 100%;
}
.sp-day {
	padding:20px 5%;
}
.yellow-box {
	padding-bottom:20px;
}
.section .top .logo img {
    max-width: 120px;
    width: 100%;
}
.btn {
	width:85%;
}
.site-cont {
	width:90%;
}
.cp-footer {
	margin-top:0;
}
.cp-sec-ttl,
.app-left {
	letter-spacing:2px;
}
#scroll_bg01 {
	background:url(../img/sp-bg_001_001.png);
}
#scroll_bg02 {
	background:url(../img/sp-bg_001_002.png);
}
#scroll_bg03 {
	background:url(../img/sp-bg_001_003.png);
}
.cp-att-sec dt {
    float: left;
    width: 30px;
}
.cp-att-sec dd {
    margin: 0 0 8px 30px;
}
#fixed-sns a {
	font-size:14px;
}

}


@media screen and (max-width:400px) { 
.copy {
	background:#000;
}

}





	@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale2d(1, 1);
    transform: scale2d(1, 1);
  }

  50% {
    -webkit-transform: scale2d(2, 2);
    transform: scale2d(2, 2);
  }

  to {
    -webkit-transform: scale2d(1, 1);
    transform: scale2d(1, 1);
  }
}
 
	.pulse {
		animation: pulse 1.8s steps(1) infinite;
	}