@charset "utf-8";


@import "setup.css";
@import "common.css";
@import "base.css";
@import "contents.css";


body {
	color:#222;
	line-height:1.75;
	background-color:#fff;
}
@media screen and (max-width: 639px) {
	body { font-size:14px; }
}

@media print, screen and (min-width: 640px) {
	body { font-size:16px; }
}


/** Layout
---------------------------------------------------------------------------------*/
#wrapper {
	width: 100%;
	overflow:hidden;
}
#container-full, #container { width:100%; }
@media screen and (max-width: 639px) {
	#container,
	.content {
		padding:0 15px;
	}
	#container .content {
		padding-left:0;
		padding-right:0;
	}
}
@media print, screen and (min-width: 640px) {
	#container,
	.content,
	.pankuzu {
		max-width:1240px;
		margin-left:auto;
		margin-right:auto;
		padding-left:20px;
		padding-right:20px;
	}
	#container .content {
		padding-left:0;
		padding-right:0;
	}
}

#header-wrap-lp h1#logo {
	margin:0 auto;
}
@media screen and (max-width: 639px) {
	#header-wrap-lp {
		height:50px;
		padding:0 15px;
	}
	#header-wrap-lp h1#logo {
		width:140px;
		padding-top:8px;
		z-index:1000;
	}
}
@media screen and (min-width: 640px) {
	#header-wrap-lp {
		height:140px;
		max-width:980px;
		margin-left:auto;
		margin-right:auto;
		padding-left:20px;
		padding-right:20px;
	}
	#header-wrap-lp h1#logo {
		width:310px;
		padding-top:30px;
	}
}


/** footer
---------------------------------------------------------------------------------*/
footer {
	width:100%;
	color:#fff;
	background-color:#cd0000;
}
#copyright {
	width:100%;
	color:#fff;
	font-weight:normal;
	letter-spacing:0;
	text-align:center;
	padding:0 15px;
	margin:0;
}
@media screen and (max-width: 639px) {
	footer {
		padding-top:25px;
		padding-bottom:20px;
	}
	#footer-wrap {
		padding:0 15px 20px;
	}
	#footer-wrap p {
		font-size:12px;
	}
	#footer-wrap p.yamaguchi {
		font-size:24px;
		text-align:center;
	}
	#copyright {
		font-size:10px;
	}
}
@media screen and (min-width: 640px) {
	footer {
		padding-top:40px;
		padding-bottom:40px;
	}
	footer .flex {
		justify-content: center;
	}
	#footer-wrap {
		max-width:1020px;
		padding:0 20px 40px;
		margin:0 auto;
	}
	#footer-wrap p {
		font-size:14px;
		padding:0 15px;
		margin-bottom:0;
	}
	#footer-wrap p.yamaguchi {
		font-size:24px;
	}
	#copyright {
		font-size:12px;
	}
}


/** 共通
---------------------------------------------------------------------------------*/
h3.h3-dog,
h3.h3-cat {
	letter-spacing:0;
	background-repeat:no-repeat;
	background-position:left center;
}
h3.h3-dog span,
h3.h3-cat span {
	display:block;
	color:#cd0000;
	letter-spacing:0.1em;
	background-repeat:repeat-x;
	background-position:left top;
}
h3.h3-dog { background-image: url(../img/lp/ico_dog.gif); }
h3.h3-cat { background-image: url(../img/lp/ico_cat.gif); }
h3.h3-dog span { background-image: url(../img/lp/line_dog.gif); }
h3.h3-cat span { background-image: url(../img/lp/line_cat.gif); }
h4.white-box {
	display:inline-block;
	color:#cd0000;
	line-height:1.2;
	text-align:center;
	margin-bottom:20px;
	background-color:#fff;
}
h5 {
	font-weight:600;
}
@media screen and (max-width: 639px) {
	h3.h3-dog,
	h3.h3-cat {
		min-height:50px;
		font-size:19px;
		padding-left:60px;
		background-size:50px;
	}
	h3.h3-dog span,
	h3.h3-cat span {
		font-size:16px;
		margin-top:5px;
		padding-top:10px;
		background-size:7px;
	}
	h4.white-box {
		font-size:16px;
		padding:6px 30px 5px;
		border-radius:16px;
		-webkit-border-radius:16px;
		-moz-border-radius:16px;
	}
	h5 {
		font-size:15px;
	}
}
@media screen and (min-width: 640px) {
	h3.h3-dog,
	h3.h3-cat {
		min-height:110px;
		font-size:28px;
		padding-left:120px;
		background-size:110px;
	}
	h3.h3-dog span,
	h3.h3-cat span {
		font-size:24px;
		margin-top:10px;
		padding-top:15px;
		background-size:14px;
	}
	h4.white-box {
		font-size:22px;
		padding:8px 30px 6px;
		border-radius:20px;
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
	}
	h5 {
		font-size:18px;
	}
	.flex-item {
		width:48%;
	}
}

ul.list-circle-gr li,
ul.list-circle-or li {
	padding-bottom:5px;
}
ul.list-circle-gr li, .circle-gr,
ul.list-circle-or li, .circle-or {
	position: relative;
	padding-left:1.5em;
	font-weight:600;
}
ul.list-circle-gr li:after, .circle-gr:after,
ul.list-circle-or li:after, .circle-or:after {
	display: block;
	content: '';
	position: absolute;
	top: 0.4em;
	left: 0.2em;
	width: 0.75em;
	height: 0.75em;
	border-radius: 100%;
}
ul.list-circle-gr li:after, .circle-gr:after { background-color: #1eb478; }
ul.list-circle-or li:after, .circle-or:after { background-color: #fa8d28; }


/** section
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#lp-01 { padding-top:35px; padding-bottom:30px; }
	section#lp-02 { padding-top:40px; padding-bottom:30px; }
	section#lp-03 { padding-bottom:40px; }
	section#lp-04 { padding-top:40px; padding-bottom:30px; }
	.lp-04-bg { margin-bottom:20px; }
	section#lp-05 { padding-top:40px; padding-bottom:40px; }
	section#lp-06 { padding-bottom:40px; }
	.flex-item img {
		margin-bottom:20px;
	}
}
@media screen and (min-width: 640px) {
	section#lp-01 {}
	section#lp-02 { padding-bottom:60px; }
	.lp-02-bg { padding-top:60px; margin-bottom:60px; }
	section#lp-02 .flex { padding-top:40px; }
	section#lp-03 { padding-bottom:60px; }
	section#lp-03 .flex { padding-bottom:50px; }
	section#lp-04 { padding-bottom:80px; }
	.lp-04-bg { padding-top:60px; margin-bottom:60px; }
	section#lp-05 {}
	section#lp-06 { padding-top:50px; padding-bottom:60px; }
}
/*--------------------  lp-01  --------------------*/
section#lp-01 p {
	font-weight:600;
}
section#lp-01 p.intoro-01 {
	color:#fa8c28;
}
section#lp-01 p.intoro-02 span {
	color:#cd0000;
}
@media screen and (max-width: 639px) {
	section#lp-01 p {
		text-align:center;
	}
	section#lp-01 p.intoro-01 {
		font-size:18px;
	}
	section#lp-01 p.intoro-02 {
		font-size:22px;
	}
	section#lp-01 p.intoro-02 span {
		font-size:26px;
	}
}
@media screen and (min-width: 640px) {
	section#lp-01 {
		height:580px;
		background-image:url(../img/lp/bg_section_01.jpg);
		background-repeat: no-repeat;
		background-position:calc(50% + 440px) top;
	}
	#lp-01 .content {
		position:relative;
		height:580px;
	}
	#lp-01 .content .lp-01-inner {
		max-width:840px;
		padding-left:20px;
		padding-right:20px;
		position:absolute;
		top: 50%;
		left: 0;
		-webkit-transform: translate(0,-50%);
		-moz-transform: translate(0,-50%);
		-ms-transform: translate(0,-50%);
		-o-transform: translate(0,-50%);
		transform: translate(0,-50%);
	}
	section#lp-01 p.intoro-01 {
		font-size:24px;
	}
	section#lp-01 p.intoro-02 {
		font-size:36px;
	}
	section#lp-01 p.intoro-02 span {
		font-size:48px;
	}
}
/*--------------------  lp-02 03  --------------------*/
section#lp-02,
section#lp-03 {
	background-color:#b4f0bc;
}
@media screen and (min-width: 640px) {
	#lp-02 .content .lp-02-inner {
		float:right;
		max-width:45%;
	}
	.lp-02-bg {
		background-image:url(../img/lp/bg_section_02.jpg);
		background-repeat: no-repeat;
		background-position:calc(50% - 480px) top;
	}
	section#lp-03 .flex-item img:nth-last-of-type(1) {
		padding-top:40px;
	}
}
/*--------------------  lp-04  --------------------*/
section#lp-04 {
	background-color:#ffdc8c;
}
@media screen and (min-width: 640px) {
	.lp-04-bg {
		background-image:url(../img/lp/bg_section_04.jpg);
		background-repeat: no-repeat;
		background-position:calc(50% + 480px) top;
	}
	#lp-04 .content .lp-04-inner {
		max-width:45%;
	}
}
/*--------------------  lp-05  --------------------*/
section#lp-05 p.ending {
	color:#fa8c28;
	font-weight:600;
}
@media screen and (max-width: 639px) {
	section#lp-05 p.ending {
		font-size:18px;
	}
}
@media screen and (min-width: 640px) {
	section#lp-05 {
		height:580px;
		background-image:url(../img/lp/bg_section_05.jpg);
		background-repeat: no-repeat;
		background-position:calc(50% - 440px) top;
	}
	#lp-05 .content {
		position:relative;
		height:580px;
	}
	#lp-05 .content .lp-05-inner {
		max-width:800px;
		padding-left:20px;
		padding-right:20px;
		position:absolute;
		top: 50%;
		right: 0;
		-webkit-transform: translate(0,-50%);
		-moz-transform: translate(0,-50%);
		-ms-transform: translate(0,-50%);
		-o-transform: translate(0,-50%);
		transform: translate(0,-50%);
	}
	section#lp-05 p {
		font-size:18px;
	}
	section#lp-05 p.ending {
		font-size:36px;
		margin-bottom:40px;
	}
}
/*--------------------  lp-06  --------------------*/
@media screen and (max-width: 639px) {
	section#lp-06 h3 {
		font-size:22px;
	}
}
@media screen and (min-width: 640px) {
	section#lp-06 h3 {
		font-size:48px;
	}
}