@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;
 }

#wrapper{
	overflow: hidden;
	position: relative;
	width: 100%;
}
: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
-------------------------------*/
#opening_set{
	width: 100%;
	height: 100%;
	position: fixed;
	display: block;
	z-index: 1000;
}
.left_sect{
	width: 50%;
	height: 100vh;
	min-height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url("../images/img_241201_sec01_00_l.jpg");
	background-position: right top;
	background-size: 100% 100%;
	display: block;
	z-index: 1000;
	overflow: hidden;
}
.right_sect{
	width: 50%;
	height: 100vh;
	min-height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	background-image: url("../images/img_241201_sec01_00_r.jpg");
	background-position: left top;
	background-size: 100% 100%;
	display: block;
	z-index: 1000;
	overflow: hidden;
}

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

@keyframes opendoor_l{
0% {transform:translate(0, 0)}
90% {transform:translate(0, 0)}
100% {transform:translate(-50vw, 0)}
}

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

@keyframes opendoor_r{
0% {transform:translate(0, 0)}
90% {transform:translate(0, 0); display: block;}
100% {transform:translate(50vw, 0); display: none;}
}

.open_toyopi{
	width: 15%;
	max-width: 300px;
	height: 500px;
	position: fixed;
	top: 35%;
	left: 15%;
	z-index: 1100;
}
.toyopi_move {
-webkit-animation:toyopi_move 3s linear alternate forwards;
animation:toyopi_move 3s linear alternate forwards;
}

@keyframes toyopi_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_logo{
	position: absolute;
	width: 430px;
	top: 180px;
	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;}
100% {opacity:0;}
}




.cont_base_cartain{
	width: 100%;
	position: relative;
}


.side_curtain_l_st{
	width: 250px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1100;
}
.side_curtain_r_st{
	width: 250px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1100;
}
.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;}
}

/*-----------------------------
   Section01 タイトル
-------------------------------*/
article.cont_base_A{
	width: 100%;
	position: relative;
	overflow: hidden;
	background-image: url("../images/img_241201_sec01_bg_skyB.jpg");
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}
article.cont_base_A .A_inn{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 0;
	position: relative;
	padding-top: 3%;
}

.side_curtain_l{
	width: 250px;
	position: absolute;
	top: 0;
	left: 0;
}
.side_curtain_r{
	width: 250px;
	position: absolute;
	top: 0;
	right: 0;
}


.landscape_A{
	width: 100vw;
	height: 220px;
	position: absolute;
	bottom: 200px;
	left: 50%;
	transform: translate( -50%, 0);
	background-image: url("../images/img_241201_sec01_04.png");
	background-position: center bottom;
	background-size: 1548px auto;
	background-repeat: repeat-x;
}
.logo_sectionA{
	position: relative;
	width: 43%;
	margin: 30px auto 0;
	float: left;
	
}


.img_secA_01_smtphone{
	width: 42%;
	position: relative;
	margin: 0 0 0 5%;
	z-index: 10;
	float: left;
	transform: rotate(10deg);
}
.title_parts{
	position: absolute;
	top: 12%;
	left: -10%;
	width: 120%;
}
.title_parts2{
	position: absolute;
	top: 33%;
	left: 11%;
	width: 96%;
}
.title_parts3{
	position: absolute;
	top: 50%;
	left: -8%;
	width: 96%;
}

.float_avo::after{
	content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}


/*-----------------------------
   Section02 こんな風に話しかけて
-------------------------------*/
article.cont_base_B{
	width: 100%;
	margin: -250px 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;
}

.toyopi_A{
	width: 26%;
	position: absolute;
	top: -220px;
	left: -10%;
}

.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)}
}

.fuki_pc{
	position: relative;
	margin: 2% 0;
}
.fuki_pc::after{
	content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}
.fuki_pc_01,
.fuki_pc_02,
.fuki_pc_03,
.fuki_pc_04{
	float: left;
	width: 20%;
	margin: 0 1% 0 0;
}
.okyaku{
	width: 16%;
	float: left;
	margin: -5% 0 0;
}
.text_A{
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1em;
	font-weight: 400;
}
.text_A span{
	display: inline-block;
}


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

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



/*-----------------------------
   Section03 チャットボット
-------------------------------*/
.iframe-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.iframe-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.iframe-mask.hidden {
  display: none;
}
#iframeStartBtn {
  padding: 15px 30px;
  font-size: 24px;
  color: #fff;
  background: #005952;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 10;
  margin-top: 25%;
}
#iframeStartBtn::before{
	content: "";
	position: absolute;
	width: 130%;
	height: 256px;
	bottom: 99%;
	left: -15%;
	background-image: url("../images/img_chatbtn_toyopi.png");
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	z-index: -1;
}


article.cont_base_C{
	width: 100%;
	margin: 0 auto 0;
	background-image: url("../images/img_241201_sec01_bg03_l.jpg"), url("../images/img_241201_sec01_bg03_r.jpg");
	background-position: left top, right top;
	background-size: 497px auto, 497px auto;
	background-repeat: repeat-y, repeat-y;
	background-color: #feda00;
	position: relative;
}
article.cont_base_C::after{
	content: "";
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 30px;
	height: 22px;
 	background-image: url("../images/img_241201_sec01_bg03_arrow.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 12%;
}
/*article.cont_base_C .C_inn iframe{
	border: 1px solid #ccc;
	border-radius: 12px;
}*/

/*-----------------------------
   Section04 リンク
-------------------------------*/
article.cont_base_D{
	width: 100%;
	margin: -11% auto 0;
	background-image: url("../images/img_241201_sec02_bg_city.png"), url("../images/img_241201_sec02_bg_sky_pc.png");
	background-position: center bottom, center top;
	background-size: 100% auto, 100% auto;
	background-repeat: no-repeat, no-repeat;
	position: relative;
}
article.cont_base_D .D_inn{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 0;
	position: relative;
	padding: 15% 0 0;
}
.btn_area{
	position: relative;
	padding-bottom: 400px;
}
.btn_area::after{
	content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

.btn_A{
	width: 40%;
	float: left;
}

.toyopi_B{
	width: 18%;
	float: left;
	margin: -40px 1% 0;
}

.btn_B{
	width: 40%;
	float: left;
}