@charset "utf-8";
/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
 /*------------------------------------------------------------
   Browser Default Initialization responsive1
 ------------------------------------------------------------*/
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 html {
   overflow-y: scroll;
   height: 100%;
 }
 body {
   margin: 0;
   padding: 0;
   /*font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
   *font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;*/
   color: #333;
   font-size: 16px;
   line-height: 125%;
   text-align: left;
   -webkit-text-size-adjust: 100%;
   background-color: #FFF;
   height: 100%;
   word-wrap: break-word;
 }

.start_blk{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 9999;
	background-color: #2b1e18;
}
.start_blk {
-webkit-animation:start_blk 1s linear alternate forwards;
animation:start_blk 1s linear alternate forwards;
}

@keyframes start_blk{
0% {opacity:1;}
50% {opacity:1;}
100%{opacity:0;}
}

#wrapper{
	position: relative;
	width: 100%;
	background-size: 1000px auto;
	background-position: center top;
	background-repeat: repeat;
	overflow: hidden;
}

@keyframes wrap_bg {
  0% {
    background-image: none;
  }
  100% {
    background-image: url("../images/bg_pageall.jpg");
  }
}

.wrap_bg {
  -webkit-animation: wrap_bg 3s linear forwards;
  animation: wrap_bg 3s linear forwards;
}





:focus {
	outline: 0;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
img{
	vertical-align:bottom;	
}
figure {
	margin: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
a{
	text-decoration: none;
	color: #000;
}


/*-----------------------------
   Header
-------------------------------*/
.totop{
  position: fixed;
  right: 1%;
  bottom: 3%;
	width: 100px;
	height: 135px;
	background-image: url("../images/img_220611_btn_totop.png");
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
  cursor: pointer;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
	z-index: 800;
}

.totop:hover{
	opacity: .7;
	-moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
    -ms-transition: .2s;
	transition: .2s;
}
.active{
  opacity: 1;
  visibility: visible;
}


.pc_only{
	display: block;
}
.smt_only{
	display: none;
}



div img{
	width: 100%;
	height: auto;
}

/*-----------------------------
   Section00 opening action
-------------------------------*/
#open_movie{
	width: 100%;
	height: 100%;
	position: fixed;
	display: block;
	z-index: 1000;
	transition: opacity 1s ease;
	pointer-events: none;
}
#open_movie video{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 1.5s ease-out;
}
.fade-out {
      opacity: 0;
	  display: none;
}
	
.open_meats{
	width: 15%;
	max-width: 300px;
	height: 500px;
	position: fixed;
	top: 35%;
	left: 15%;
	z-index: 1100;
}
.meats_move {
-webkit-animation:meats_move 3s linear alternate forwards;
animation:meats_move 3s linear alternate forwards;
}

@keyframes meats_move{
0% {transform:translate(0, 3%);}
20% {transform:translate(0, -3%)}
40% {transform:translate(0, 3%)}
60% {transform:translate(0, -3%)}
80% {transform:translate(0, 3%)}
90% {transform:translate(0, -800%)}
100% {transform:translate(0, -800%);}
}

.open_box{
	position: relative;
	width: 100%;
}
.logo_disappear2 {
-webkit-animation:logo_disappear2 3s linear alternate forwards;
animation:logo_disappear2 3s linear alternate forwards;
}

@keyframes logo_disappear2{
0% {display: block; height: 800px;}
100%{display: none; height: 0 !important;}
}


.open_logo{
	position: absolute;
	width: 50%;
	top: 250px;
	left: 50%;
	transform: translate( -50%, 0 );
	z-index: 1050;
}
.logo_disappear {
-webkit-animation:logo_disappear 3s linear alternate forwards;
animation:logo_disappear 3s linear alternate forwards;
}

@keyframes logo_disappear{
0% {opacity:1;}
90% {opacity:1;}
99% {opacity:0;}
100%{opacity:0; pointer-events: none;}
}





.side_curtain_st {
-webkit-animation:side_curtain 3s linear alternate forwards;
animation:side_curtain 3s linear alternate forwards;
}
@keyframes side_curtain{
0% { opacity: 1;}
95% { opacity: 1;}
100% { opacity: 0;}
}




.bg_illust_wrap{
	width: 100%;
	max-width: 1300px;
	height: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	overflow: visible;
}

.iuust_left_01{
	position: absolute;
	width: 24.2%;
	height: auto;
	top: 8%;
	left: -23%;
	z-index: -1;
}
.iuust_left_02{
	position: absolute;
	width: 21%;
	height: auto;
	top: 30%;
	left: -23%;
	z-index: -1;
}
.iuust_left_03{
	position: absolute;
	width: 24.2%;
	height: auto;
	top: 50%;
	left: -23%;
	z-index: -1;
}
.iuust_left_04{
	position: absolute;
	width: 24.2%;
	height: auto;
	top: 65%;
	left: -23%;
	z-index: -1;
}
.iuust_left_05{
	position: absolute;
	width: 21%;
	height: auto;
	top: 90%;
	left: -23%;
	z-index: -1;
}

.iuust_right_01{
	position: absolute;
	width: 21%;
	height: auto;
	top: 8%;
	right: -23%;
	z-index: -1;
}
.iuust_right_02{
	position: absolute;
	width: 24.2%;
	height: auto;
	top: 30%;
	right: -23%;
	z-index: -1;
}
.iuust_right_03{
	position: absolute;
	width: 20%;
	height: auto;
	top: 50%;
	right: -19%;
	z-index: -1;
}
.iuust_right_04{
	position: absolute;
	width: 21%;
	height: auto;
	top: 70%;
	right: -23%;
	z-index: -1;
}
.iuust_right_05{
	position: absolute;
	width: 24.2%;
	height: auto;
	top: 85%;
	right: -23%;
	z-index: -1;
}



/*-----------------------------
   Section01 タイトル
-------------------------------*/
.hidden_until_video {
  display: none !important;
}


article.cont_base_A{
	width: 100%;
	position: relative;
	overflow: visible;
	z-index: 10;
	background-color: #fff;
	background-image: url("../images/bg_section01.jpg"), url("../images/bg_section02_01.jpg");
	background-size: 100% auto, 100% auto;
	background-position: center top, center bottom;
	background-repeat: no-repeat, repeat;
}
article.cont_base_A .A_inn{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 0;
	position: relative;
	padding-top: 3%;	
}


.logo_toyopet{
	width: 24%;
	position: absolute;
	top: 3%;
	left: 50%;
	transform: translate(-50%, 0);
}


.chara{
	width: 24%;
	position: absolute;
	margin: 60px auto 0 1%;
}
.chara::before{
	content: "";
	position: absolute;
	width: 90%;
	height: 150px;
	top: -80px;
	left: 8%;
	background-image: url("../images/img_section01_02_copy_smt.png");
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.chara::after{
	content: "";
	position: absolute;
	width: 36%;
	height: 150px;
	bottom: -35px;
	left: 15px;
	background-image: url("../images/img_section01_03_plate.png");
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.logo_sectionA{
	position: relative;
	width: 50%;
	margin: 0 0 0 23%;
	padding: 5% 0 2%;
	z-index: 15;
}


.img_secA_01_smtphone{
	width: 30%;
	position: absolute;
	top: 5%;
	right: -2%;
	z-index: 10;
	/*transform: rotate(10deg);*/
	filter: drop-shadow(10px 10px 10px #999);
}
.img_secA_01_inn{
	width: 100%;
	position: relative;
}
.title_parts{
	position: absolute;
	top: 6%;
	left: 9%;
	width: 92%;
}
.title_parts2{
	position: absolute;
	top: 36%;
	left: 19%;
	width: 67%;
}
.title_parts3{
	position: absolute;
	top: 64%;
	left: 15%;
	width: 62%;
}

.img_secA_01_inn img,
.title_parts img,
.title_parts2 img,
.title_parts3 img{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}


.float_avo{
	margin-bottom: -60px;
}
.float_avo::after{
	content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

.text_B_wrap{
	position: relative;
	display: flex;
	justify-content: center;
	margin: 14% 0 0;
	z-index: 20;
}
.text_B{
	text-align: center;
	font-size: 1.6em;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 900;
	font-style: normal;
	line-height: 1.4;
	color: #fff;
	background-color: #603813;
	padding: 10px 8%;
	border-radius: 50vh;
}

.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-rounded-1c-extrabold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.m-plus-rounded-1c-black {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-style: normal;
}


.notes_A{
	text-align: center;
	line-height: 1.4;
	font-size: 0.9em;
	font-weight: 400;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-style: normal;
	margin: 10px 0 0;
	transform: rotate(0.05deg);
}


.request_box_wrap{
	width: 98%;
	position: relative;
	margin: 20px 0 0;
}
.request_box_wrap::after{
	content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}
.request_box_wrap .contents_two{
	width: 50%;
	float: left;
}
.request_box_wrap .contents_two .cont_01,
.request_box_wrap .contents_two .cont_02,
.request_box_wrap .contents_two .cont_03,
.request_box_wrap .contents_two .cont_04{
	width: 48%;
	float: left;
	position: relative;
	margin: 0 1%;
	overflow: hidden;
	z-index: 10;
}
.request_box_wrap .contents_two .cont_01 .kuruma,
.request_box_wrap .contents_two .cont_02 .kuruma,
.request_box_wrap .contents_two .cont_03 .kuruma,
.request_box_wrap .contents_two .cont_04 .kuruma{
	width: 80%;
	height: auto;
	margin: 0 0 0 20%;
}

.request_box_wrap .contents_two .cont_01 .jinbutu,
.request_box_wrap .contents_two .cont_02 .jinbutu,
.request_box_wrap .contents_two .cont_03 .jinbutu,
.request_box_wrap .contents_two .cont_04 .jinbutu{
	width: 40%;
	height: auto;
	position: absolute;
	top: 15%;
	left: 0;
}



/*-----------------------------
   Section02 こんな風に話しかけて
-------------------------------*/
article.cont_base_B{
	width: 100%;
	margin: 0 auto 0;
	background-image: url("../images/img_241201_sec01_bg02.jpg");
	background-position: center top;
	background-size: 93px auto;
	background-repeat: repeat;
	position: relative;
	z-index: 20;
}
article.cont_base_B .B_inn{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 0;
	position: relative;
	padding: 2% 0 2%;
}

.title_A{
	width: 50%;
	margin: 0 auto;
	position: relative;
}


.fuwafuwa {
-webkit-animation:fuwafuwa 2s infinite linear alternate;
animation:fuwafuwa 2s infinite linear alternate;
}

@keyframes fuwafuwa{
0% {transform:translate(0, 0)}
40% {transform:translate(0, -7px)}
50% {transform:translate(0, -8px)}
60% {transform:translate(0, -7px)}
100% {transform:translate(0, 0)}
}




article.cont_base_B2{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 0;
	background-color: #005952;
	position: relative;
	z-index: 20;
}
article.cont_base_B2 .B_inn{
	width: 100%;
	margin: 0 auto 0;
	position: relative;
	padding: 20px 0;
}

.title_B{
	text-align: center;
	line-height: 1.4;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 3em;
	color: #fff;
}



/*-----------------------------
   Section03 チャットボット
-------------------------------*/
.btn_imageA{
	position: absolute;
	width: 120%;
	height: 200px;
	top: -1;
	left: -10%;

}
#iframeStartBtn::before{
	content: "";
	position: absolute;
	width: 130%;
	height: 256px;
	bottom: 99%;
	left: -15%;
	background-image: url("../images/img_btn_carley.png");
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	z-index: -1;
}


article.cont_base_C{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 0;
	background-image: url("../images/bg_chat_wrap.png");
	background-position: center top;
	background-size: 3046px auto;
	background-repeat: repeat;
	background-color: #feda5a;
	position: relative;
}
article.cont_base_C::after{
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 30px;
	height: 25px;
 	background-image: url("../images/arrow_title_B.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
article.cont_base_C .C_inn{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 0;
	position: relative;
	padding: 5% 0 7%;
}
article.cont_base_C .C_inn iframe{
	/*border: 1px solid #ccc;*/
	/*border-radius: 20px;*/
	filter: drop-shadow(3px 7px 5px #635727);
}

.title_C{
	text-align: center;
	line-height: 1.4;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 2em;
	color: #fff;
	background-color: #ed1e79;
	padding: 10px 0;
	width: 86%;
	border-radius: 15px;
	position: relative;
	margin: 20px 7% 0;
}
.title_C::before{
	content: "";
	position: absolute;
	width: 22px;
	height: 46px;
	top: 10%;
	left: -18px;
	background-image: url("../images/arrow_title_C.png");
	background-size: 100% auto;
	background-position: right top;
	background-repeat: no-repeat;
}



/*-----------------------------
   Section04 リンク
-------------------------------*/
article.cont_base_D{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 0;
	background-image: url("../images/bg_section03_01.jpg");
	background-position: center bottom;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: relative;
	background-color: #fff;
}
article.cont_base_D .D_inn{
	width: 100%;
	margin: 0 auto 0;
	position: relative;
	padding: 5% 0 12%;
}

.anshin{
	width: 88%;
	margin: 0 6%;
}

.btn_area{
	position: relative;
	width: 94%;
	margin: 30px 3% 0;
}
.btn_area::after{
	content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}
.btn_area .btn_single{
	width: calc(82% / 3);
	margin: 0 3%;
	float: left;
}
.btn_area .btn_single a:hover{
	opacity: .7;
	-moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
    -ms-transition: .2s;
	transition: .2s;
}
.btn_area .btn_single img{
	filter: drop-shadow(3px 7px 5px #999);
}
.btn_area .btn_single .maaaa{
	margin: 0 0 15px;	
}
.btn_area .btn_single .maaa{
	margin: 0 0 15px;	
}
.btn_area .btn_single .mbbb{
	margin-bottom: 5px;
}
.btn_area .btn_single .mccc{
	margin-bottom: 10px;
	filter: none;
}

footer{
	width: 100%;
	max-width: 1300px;
	background-color: #603813;
	margin: 0 auto;
}
footer .footer_inn{
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 30px 0 30px 5%;
}
footer p{
	text-align: left;
	font-size: 1.6em;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 800;
	font-style: normal;
	color: #fff;
	line-height: 1.3;
}
footer .footer_inn img{
	width: 15%;
	position: absolute;
	right: 5%;
	bottom: 0;
}