@charset "utf-8";
/* ==================================================
		
		TOP PC

================================================== */
@media screen and (min-width:741px) {

/* --------------------------------------------------
		.vi
-------------------------------------------------- */
#main .vi {
 width: 100%;
}
#main .vi .vi-inner li {
 width: 50%;
 height: 100vh;
 min-height: 615px;
 position: relative;
}
#main .vi .vi-inner li a {
 display: block;
 height: 100%;
 text-decoration: none;
 overflow:hidden;
}
#main .vi .vi-inner li a .img {
 margin: 0 auto;
 overflow:hidden;
 height: 100%;
 position: relative;
 transition:1s all;
}
#main .vi .vi-inner li a .img img {
 width: 80%;
 position: absolute;
 top: 39%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}
#main .vi .vi-inner li a:hover .img {
 transform:scale(1.05,1.05);
 transition:1s all;
}
#main .vi .vi-inner li a h1 {
 font-size: 41px;
 color: #ffffff;
 width: 100%;
 padding: 28px 0 30px;
 position: absolute;
 bottom: 90px;
}
#main .vi .vi-inner li a:hover h1 {
 transition: opacity 0.5s;
 opacity: 0.7;
}
#main .vi .vi-inner li a h1 span  {
 position: relative;
}
#main .vi .vi-inner li a h1 span::after  {
 content: "";
 background: url(../common/images/arrow_img01.png) no-repeat right center / 100%;
 width: 31px;
 height: 7px;
 margin-left: 16px;
 position: absolute;
 bottom: 22px;
}
#main .vi .vi-inner li a .headbtn {
 background: #0ab3c0;
}
#main .vi .vi-inner li a .breastbtn {
 background: #d74db8;
}

/* --------------------------------------------------
		section
-------------------------------------------------- */
#main section {
 padding-top: 90px;
 margin-top: -60px;
}
#main section h2 {
 font-size: 48px;
}
#main section h2 span {
 position: relative;
 padding-left: 49px;
}
#main section .section-inner {
 width: 1040px;
 margin: 0 auto;
}
#main section .section-inner li {
 margin-right: 47px;
}
#main section .section-inner li:nth-child(3n) {
 margin-right: 0;
}
#main section .section-inner li a .img img {

 border: 2px solid #e5e5e5;
}
#main section .section-inner li a .cap {
 letter-spacing: 0;
}
	
/* --------------------------------------------------
		.head
-------------------------------------------------- */
#main .head {
 margin-top: -100px;
 border-bottom: 1px solid #e1e1e1;
}
#main .head h2 span::before {
 content: "";
 background: url(../images/icon_head.gif) no-repeat left center / 100%;
 width: 28px;
 height: 28px;
 position: absolute;
 bottom: 17px;
 left: 6px;
}

/* --------------------------------------------------
		.breast
-------------------------------------------------- */
#main .breast {
 margin-top: -20px;
}
#main .breast h2 span::before {
 content: "";
 background: url(../images/icon_breast.gif) no-repeat left center / 100%;
 width: 28px;
 height: 28px;
 position: absolute;
 bottom: 17px;
 left: 6px;
}

/* --------------------------------------------------
		.tofpet
-------------------------------------------------- */
#main .tofpet {
 padding-top: 16px;
 margin-top: -16px;
}
#main .tofpet .tofpet-inner {
 margin: 75px 0 -150px;
 padding: 80px 0;
}
#main .tofpet .tofpet-inner h2 {
 font-size: 48px;
 letter-spacing: 0.2px;
}
#main .tofpet .tofpet-inner h2 span {
 padding-left: 0;
}
#main .tofpet .tofpet-inner .tofpet-box {
 width: 740px;
 margin: 0 auto;
}
#main .tofpet .tofpet-inner .tofpet-box .movie {
 width: 605px;
 height: 394px;
 margin: 0 auto;
}
#main .tofpet .tofpet-inner .tofpet-box .movie iframe {
 border: 4px solid #e5e5e5;
 position: relative !important;
}
#main .tofpet .tofpet-inner .tofpet-box .tofpet-wrapper h3 {
 font-size: 21px;
 letter-spacing: 0.4px;
}
#main .tofpet .tofpet-inner .tofpet-box .tofpet-wrapper .txt {
 letter-spacing: 0.35px;
 line-height: 1.55;
}
#main .tofpet .tofpet-inner .tofpet-box .tofpet-wrapper .tofpet-area li {
 letter-spacing: 0.3px;
}
 
}

/* ==================================================
		
		TOP SP

================================================== */
@media screen and (max-width:740px) {

/* --------------------------------------------------
		.vi
-------------------------------------------------- */
#main .vi {display: block;}
#main .vi .vi-inner {}
#main .vi .vi-inner li {
 width: 50%;
 height: auto;
 position: relative;
}
#main .vi .vi-inner li a {
 display: block;
 text-decoration: none;
 overflow:hidden;
}
#main .vi .vi-inner li a .img {
 overflow:hidden;
 transition:1s all;
 padding: 110px 0;
}
#main .vi .vi-inner li a .img img {
 width: 85%;
}
#main .vi .vi-inner li a:hover .img {
 transform:scale(1.05,1.05);
 transition:1s all;
}
#main .vi .vi-inner li a h1 {
 font-size: 18px;
 color: #ffffff;
 width: 100%;
 height: 50px;
 padding: 17px 26px 0 0;
 position: absolute;
 bottom: -50px;
}
#main .vi .vi-inner li a:hover h1 {
 transition: opacity 0.5s;
 opacity: 0.7;
}
#main .vi .vi-inner li a h1 span  {
 position: relative;
}
#main .vi .vi-inner li a h1 span::after  {
 content: "";
 background: url(../common/images/arrow_img01.png) no-repeat right center / 100%;
 width: 26px;
 height: 6px;
 margin-left: 8px;
 position: absolute;
 bottom: 10px;
}
#main .vi .vi-inner li a .headbtn {
 background: #0ab3c0;
}
#main .vi .vi-inner li a .breastbtn {
 background: #d74db8;
}

/* --------------------------------------------------
		section
-------------------------------------------------- */
#main section {
 padding-top: 70px;
 margin-top: -90px;
}
#main section h2 {
 font-size: 20px;
}
#main section h2 span {
 position: relative;
 padding-left: 18px;
}
#main section .section-inner {
 margin: 0 10px;
}
#main section .section-inner li {
 margin-right: 2%;
 width: 32%;
}
#main section .section-inner li:nth-child(3n) {
 margin-right: 0;
}
#main section .section-inner li a .img img {
	border: 2px solid #e5e5e5;
}
#main section .section-inner li a .cap {
 letter-spacing: 0;
}

/* --------------------------------------------------
		.head
-------------------------------------------------- */
#main .head {
 border-bottom: 1px solid #e1e1e1;
 padding-top: 71px;
 -: -190px;
 margin-top: -5px;
}
#main .head h2 span::before {
 content: "";
 background: url(../images/icon_head.gif) no-repeat left center / 100%;
 width: 18px;
 height: 18px;
 position: absolute;
 bottom: 4px;
 left: -5px;
}

/* --------------------------------------------------
		.breast
-------------------------------------------------- */
#main .breast {
 margin-top: -40px;
}
#main .breast h2 span::before {
 content: "";
 background: url(../images/icon_breast.gif) no-repeat left center / 100%;
 width: 18px;
 height: 18px;
 position: absolute;
 bottom: 4px;
 left: -5px;
}

/* --------------------------------------------------
		.tofpet
-------------------------------------------------- */
#main .tofpet {
 padding-top: 16px;
 margin-top: -16px;
}
#main .tofpet .tofpet-inner {
 margin: 40px 0 -50px;
 padding: 30px 0;
}
#main .tofpet .tofpet-inner h2 {
 font-size: 20px;
 line-height: 1.4;
}
#main .tofpet .tofpet-inner h2 span {
 padding-left: 0;
}
#main .tofpet .tofpet-inner .tofpet-box {
 margin: 0 10px;
}
#main .tofpet .tofpet-inner .tofpet-box .movie {
 width: 337px;
 height: 212px;
 margin: 0 auto;
}
#main .tofpet .tofpet-inner .tofpet-box .movie iframe {
 border: 2px solid #e5e5e5;
 position: relative !important;
}
#main .tofpet .tofpet-inner .tofpet-box .tofpet-wrapper h3 {
 letter-spacing: 0.5px;
 line-height: 1.3;
}
#main .tofpet .tofpet-inner .tofpet-box .tofpet-wrapper .txt {
 letter-spacing: 0.3px;
}
 
}
/* --------------------------------------------------
		更新時追加
-------------------------------------------------- */
#main section .section-inner span.is_new{
 margin: 5px;
 padding: 2px 3px;
 font-size: 75%;
 background-color: #ff0000;
 color: #fff;
}