@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : TOPページCSS
===================================================================== */
.wrapper {
	margin: 0 auto;
	text-align: center;
	background: url(../images/bg_tamago.gif) repeat;
}

@media screen and (max-width:1366px){
	.wrapper {
		width: 100%;
	}
}

@media screen and (max-width:812px){
	.wrapper {
		background-size: 78%;
	}
}

/* =====================================================================
*    #header
* =================================================================== */
#header div.title h1 {
	background: url(../images/bg_header.gif) repeat-x;
	background-color: #fff;
}

#header div.title h1 img{
	margin: 35px auto 25px;
}

#header div.visual {
	height: 920px;
	background: url(../images/bg_main.png) no-repeat;
	background-size: 100%;
	background-position: center top;
	position: relative;
}

#header div.visual h2 {
	padding-top: 74px;
}

#header div.visual h2 img {
	width: 100%;
}

#header div.visual ul li {
	width: 17%;
}

#header div.visual ul li img {
	width: 100%;
}

#header div.visual ul li.visual01 {
	position: absolute;
	top: 15%;
	left: 13%;
}

#header div.visual ul li.visual02 {
	position: absolute;
	top: 32%;
	left: 32%;
}

#header div.visual ul li.visual03 {
	position: absolute;
	top: 32%;
	left: 51%;
}

#header div.visual ul li.visual04 {
	position: absolute;
	top: 15%;
	left: 70%;
}

@media screen and (max-width:700px){
	#header div.title h1, #header div.visual h2 {
		width: 100%;
	}

	#header div.title h1 img {
		width: 90%;
	}

	#header div.visual {
		height: 700px;
		background: url(../images/bg_main_sp.png) no-repeat;
		background-size: 100%;
	}

	#header div.visual h2 {
		position: static;
		margin: 0;
		padding-top: 36px;
	}

	#header div.visual ul li.visual01, #header div.visual ul li.visual02, #header div.visual ul li.visual03, #header div.visual ul li.visual04 {
		position: static;
	}

	#header div.visual ul {
		width: 86.5%;
		display: flex;
		margin: 5% 7%;
	}

	#header div.visual ul li {
		width: 50%;
	}

	#header div.visual ul li img {
		width: 90%;
	}
}

@media screen and (min-width:1367px) and (max-width: 1600px) {
	#header div.visual {
		height: 800px;
	}
}

@media screen and (min-width:700px) and (max-width: 1024px) {
	#header div.visual {
		height: 520px;
	}

	#header div.visual h2 {
		padding-top: 46px !important;
	}

	#header div.visual h2 img {
		width: 100%;
	}

	#header div.visual ul li {
		width: 18%;
	}

	#header div.visual ul li img {
		width: 100%;
	}

	#header div.visual ul li.visual01 {
		position: absolute;
		top: 14%;
		left: 11%;
	}

	#header div.visual ul li.visual02 {
		position: absolute;
		top: 27%;
		left: 31%;
	}

	#header div.visual ul li.visual03 {
		position: absolute;
		top: 27%;
		left: 51%;
	}

	#header div.visual ul li.visual04 {
		position: absolute;
		top: 14%;
		left: 71%;
	}
}

@media screen and (min-width:700px) and (max-width: 768px) {
	#header div.visual {
		height: 400px;
	}
}

/* =====================================================================
*    #main
* =================================================================== */
#main .main div h3 img {
	margin: -10px auto 30px;
}

#main .main div.main_text p {
	font-size: 1.7em;
	line-height: 1.5;
    letter-spacing: 0.1em;
}

#main .main div p span.green {
	color: #15a986;
}

#main .main div p span.larger {
	font-size: 1.3em;
	font-weight: bold;
}

#main .main div p span.band {
	color: #fffd5f;
    margin-top: 1em;
    display: inline-block;
    padding: 0.1em 2em;
    background: -webkit-linear-gradient(transparent 0%, #05a37e 0%);
	background: -o-linear-gradient(transparent 0%, #05a37e 0%);
	background: linear-gradient(transparent 0%, #05a37e 0%);
}

#main .main #caution {
	width: 50%;
	padding: 30px;
	margin: 0 auto;
	background-color: #fff;
}

#main .main #caution h4 {
	color: #fe6b6b;
	font-size: 1.65em;
	font-weight: bold;
	padding-bottom: 1em;
	background: url(../images/caution_line.gif) repeat-x;
	background-position: bottom;
}

#main .main #caution ul li:first-of-type {
	padding-top: 2em;
}

#main .main #caution ul {
    width: 96%;
    margin: 0 auto;
}


#main .main #caution ul li {
	line-height: 1.6;
	text-align: left;
	font-size: 1.65em;
    padding-left:1em;
    text-indent:-1.3em;
    text-align: justify;
}

#main .main #caution ul li::before {
    content: "※";
	color: #fe6b6b;
	font-weight: bold;
	padding-right: 0.2em;
}

#main .main #banner {
	margin: 45px auto 128px;
}

#pagetop .pagetop_inner {
	position: absolute;
	left: 50%;
	bottom: 2.5%;
	margin-left: 30%;
}

#footer {
	padding: 62px;
	background: url(../images/bg_footer.gif) repeat-x;
	background-color: #fff;
}

#footer .footer_inner small {
	color: #26af8f;
	font-size: 1.8em;
}

#main .main #banner p a img:hover, #pagetop .pagetop_inner a img:hover {
	opacity: 0.6;
}

@media screen and (max-width:700px){
	#main .main div h3 img {
		width: 90%;
		margin: -72px 0px 25px;
	}

	#main .main div.main_text p {
		padding: 0 15px;
		font-size: 1.35em;
		line-height: 1.7;
	}

	#main .main div p span.larger {
		font-size: 1.2em;
	}
}

@media screen and (max-width:1040px){
	#main .main #caution {
		width: 80%;
		padding: 20px;
	}

/*
	#main .main #caution ul li {
		padding-left: 0;
	}
*/

	#main .main #caution ul li:first-of-type {
		padding-top: 1em;
	}

	#main .main #banner p img {
		width: 85%;
	}

	#pagetop .pagetop_inner {
		position: static;
		margin: -40px 0 0 0;
		padding-bottom: 35px;
		background: url(../images/bg_all.gif) repeat;
	}

	#main .main #banner p a img:hover, #pagetop .pagetop_inner a img:hover {
		opacity: 1;
	}

	#footer {
		padding: 25px 10px 15px;
	}

	#footer .footer_inner small {
		font-size: 1.2em;
	}
}

@media screen and (min-width:700px) and (max-width: 768px) {
	#main .main div h3 img {
		width: 70%;
		margin: 0;
	}
}

/* =====================================================================
*    #content
* =================================================================== */
.bg_all {
	padding: 10px 0 1px;
	background: url(../images/bg_all.gif) repeat;
}

#content {
	width: 1020px;
	margin: 60px auto;
	padding-top: -6px;
	background: url(../images/frame.png) no-repeat;
	background-position: 0px 108px;
}

#content div div {
	float: left;
}

.contents01 div div.content_image {
	background: url(../images/image_h.png) no-repeat;
}

.contents02 div div.content_image {
	background: url(../images/image_t.png) no-repeat;
}

.contents03 div div.content_image {
	background: url(../images/image_s.png) no-repeat;
}

.contents04 div div.content_image {
	background: url(../images/image_c.png) no-repeat;
}

#content div div.content_image {
	width: 320px;
	height: 475px;
	padding: 152px 70px 0px 60px;
	background-position: 60% 15%;
}

#content div div.content_text {
	width: 500px;
}

#content div div.content_text p:first-of-type {
	margin: 25px 10px 25px 0;
}

#content div div.content_text p:last-of-type {
	text-align: left;
	font-size: 1.6em;
	line-height: 1.45;
    text-align: justify;
}

#content div div.content_text p:last-of-type span.bold {
	font-weight: bold;
}

#content p.content_present img {
	margin-top: -85px;
}

#content p.content_caution {
	width: 79%;
	margin: 20px auto 35px;
	font-size: 1.6em;
	line-height: 1.2;
	text-align:  left;
}

#content p.content_caution small {
	color: #a6a2a1;
	font-size: 0.75em;
	letter-spacing: 1.1px;
}

@media screen and (max-width:700px) {
	#content {
		width: 100%;
		background: url(../images/frame_sp.png) no-repeat;
		background-size: 95% 93.5%;
		background-position: 50% 67%;
	}

	#content .content_date img {
		width: 40%;
	}

	#content div div {
		float: none;
	}

	#content div div.content_image {
		height: auto;
		padding: 0;
		background: none;
	}

	#content div div.content_text {
		width: 100%;
	}

	#content div div.content_text p.sp img {
		width: 85%;
		margin: 25px 0 35px;
	}

	/*#content div div.content_text p:first-of-type img {
		width: 65%;
	}*/

	#content div div.content_text p:last-of-type {
		padding: 10% 8%;
		font-size: 1.18em;
	}

	#content div div.content_text p:last-of-type span.s_size {
		font-size: 0.9em !important;
	}

	#content div div.content_text figure img {
		width: 65%;
	}

	#content p.content_present {
		margin-top: 7em;
	}

	#content p.content_present img {
		width: 85%;
	}

	#content p.content_caution {
		font-size: 1.05em !important;
		padding: 1em 0;
	}

	#main .main #caution ul li {
		font-size: 1.18em;
	}

	.content_voice img {
		width: 85%;
	}
}

@media screen and (min-width:700px) and (max-width: 1024px) {
	#content {
		background-position: 25px 109px;
		background-size: 95% 86%;
	}
}

@media screen and (min-width:700px) and (max-width: 812px) {
	#content {
		width: 100%;
	}

	#content div div.content_image {
		width: 25%;
		margin-left: 30px;
		background-size: 80%;
	}

	#content div div.content_text {
		width: 48%;
	}

	#content div div.content_text p:first-of-type {
		padding: 40px 0;
		margin: 0;
	}

	#content div div.content_text p:first-of-type img {
		width: 100% !important;
	}

	#content p.content_present img {
		width: 80%;
		margin-top: -200px;
	}

	.content_voice img {
		width: 80%;
	}
}

/* =====================================================================
*    #横向き
* =================================================================== */
@media screen and (orientation: landscape) and (min-width: 1025px) and (max-width: 1366px) {
	#header div.visual {
		height: 700px;
	}
}

@media (orientation: landscape) and (max-width: 812px) {
	#header div.visual {
		height: 400px;
	}

	#header div.visual h2 {
		padding-top: 37px !important;
	}

	#main .main div h3 img {
		width: 56%;
		margin: 1em 0 3em;
	}

	#content div div.content_text p:first-of-type img {
		width: 80%;
	}

	.contents02 div div.content_text p:first-of-type img {
		width: 90% !important;
	}

	.contents03 div div.content_text p:first-of-type img {
		width: 40% !important;
	}
}

@media (orientation: landscape) and (max-width: 667px) {
	#header div.visual {
		height: 1064px;
	}

	#header div.visual h2 {
		padding-top: 64px !important;
	}

	#content div div.content_text p:first-of-type {
		padding: 60px 0 25px;
	}
}

/* =====================================================================
*    #iPad Pro
* =================================================================== */
@media screen and (min-width:1025px)  and (max-width:1366px) {
	.wrapper {
		width: 100%;
	}

	#header div.visual ul li.visual01 {
		position: absolute;
		top: 14.5%;
		left: 13%;
	}

	#header div.visual ul li.visual02 {
		position: absolute;
		top: 27%;
		left: 32%;
	}

	#header div.visual ul li.visual03 {
		position: absolute;
		top: 27%;
		left: 51%;
	}

	#header div.visual ul li.visual04 {
		position: absolute;
		top: 14.5%;
		left: 70%;
	}

	#main .main div h3 img {
		margin: 0px auto 30px;
	}
}

/* =====================================================================
*    #iPhone6･7･8 plus
* =================================================================== */
@media screen and (min-width:413px) and (max-width:415px) {
	#main .main div h3 {
		margin-top: 50px;
	}
}

/* =====================================================================
*    #iPhone5
* =================================================================== */
@media screen and (max-width:320px) {
	#header div.visual {
		height: 620px;
	}
}

@media (orientation: landscape) and (max-width: 568px) {
	#header div.visual {
		height: 940px;
	}
}