/* CSS Document */

@media print {body {-webkit-print-color-adjust: exact;}
}

html{ color:var(--text); 
    font-size: 62.5%;/* 10px*/	 scroll-behavior: smooth;	
				}
body{
    font-size:16px;/*1.5rem; 15px*/
}

.disnone_tb{ display: none; }

p{ margin-bottom: 2em; }

/*�]���`�F�b�J�[*/
/** {
  outline: 2px solid blue;
}*/
h1{ font-size: 250%; font-weight: bold; margin-bottom: 1em; line-height: 1.3; color: #1010eb;  }
h2{ font-size: 180%; font-weight: bold; margin-bottom: 1em;  line-height: 1.3; color: #1010eb;   }
h3{ font-size: 160%; font-weight: bold; margin-bottom: 1em;  line-height: 1.3; color: var(--darkBlue);  }

/*-----------------------------�A�v���g�b�v�y�[�W-----------------------------*/
header{ border-bottom: 1px solid #B7B6B6; margin: 0; padding: 0; background:#FFF; }
#header{ height: 70px;/*�����w��*/ 
	width:100%;
	/*ȉ̓CAEĝ߂CSS*/
  display: flex; justify-content: space-between; align-items: center; background:/*#fff*/var(--darkBlue); /*color:#fff;*/ /*text-align: center;*/ padding: 20px;}

/*JS���g��fixed�N���X���t�^���ꂽ�ۂ̐ݒ�*/
#header.fixed{ position: fixed;/*fixed��ݒ肵�ČŒ�*/ z-index: 999;/*�őO�ʂ�*/ top:0;/*�ʒu�w��*/ left:0;/*�ʒu�w��*/}
.inner_cts{ width: 96%; margin: 0 auto 20px; line-height: 2.0 !important; }
.inner_cts::after { content: ""; clear: both; display: table; }
.inner{ width: 98%; margin: auto; }
.inner::after { content: ""; clear: both; display: table; }
.med_logo{ float: left;  width: 150px; margin: 0px!important;}
.search_box{ display: inline;   }
.search_menu{ display:block; float: right;  padding: 2.2em 22px 1.9em 12px;    }
.search_menu img{width: 20px; height: auto; }

#search_toggle {clear:both; border-top: 1px solid #B7B6B6; background:#FFF; padding: 10px; z-index: 200; display:none;  }
#search_toggle::after { content: ""; clear: both; display: table; }

#searchform{ border: 1px solid #B7B6B6; border-radius: 6px; box-sizing: border-box;  }

.src{ outline:0; box-sizing: border-box; width: calc(100% - 60px); height: 57px; padding-left: 1em; border: none; border-radius: 6px 0 0 6px; }
.src_btn{ box-sizing: border-box; width: 52px; height: 57px; background: url(../..../images/mark/ic_search.png) no-repeat #FFF center center; background-size: 20px auto; text-indent: -9999px; border: none;  /* float: left;   position: absolute;   width: 52px; height: 57px; border: 1px solid #B7B6B6; border-left: none; border-radius: 0 6px 6px 0; */ }

.mh_sp_box {display: none; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; background: #FFF; z-index: 200; overflow: scroll;  }
.mh_sp_box_header{ background:/*#FFF*/var(--darkBlue); border-bottom: 1px solid #B7B6B6; padding: 15px;  }
.mh_sp_box_header::after { content: ""; clear: both; display: table; }
.mh_sp_wjlogo{ float: left; width: 200px; }
.mh_sp_menu_close{ float: right;  }
.mh_sp_menu{ float: right; display:block;  }
.mh_sp_menu img{ width: 50px; padding: 10px/*36px 20px 30px 30px*/; }
.mh_sp_medlogo{ float: left; width: 200px;}
.mh_nav_box{ height: 0; line-height: 1.0; float: none; clear:both; width: 100%; height: 0; box-sizing: border-box; background:#FFF !important; z-index: 200; }
a.mh_menu{ display:block; padding: 1em 22px 1em 12px; margin-bottom: 0px; box-sizing: border-box; border-left: 4px solid #FFF; border-bottom: 1px solid #B7B6B6; text-decoration: none; background: url(../../images/mark/ic_arrow_ora_right01.png) no-repeat 98% 50% #FFF; background-size: 6px auto;  font-size: 1.4rem;  }
a.mh_menu:link{ color:var(--text);  }
a.mh_menu:visited { border-left: 4px solid #F00;  }
a.mh_menu:hover { color:var(--text);  }
a.mh_menu::active{ border-left: 4px solid #ff5900; color:#993500; }/* ������͋^���N���X */
a.mh_menu.active{ border-left: 4px solid #ff5900; color:#993500; }/* �������class */

/*.mh_toggle{ display: none; padding: 1.5em 2em 1em; height: auto; opacity: 1; z-index: 100; background:#FFF; border-bottom: 1px solid #B7B6B6; position:absolute;  }*/

/*�y�[�W�r���ɂ���^�u���i�r�Q�[�V���� ------------------------------------------------------------------------------------*/
.mid_nav_col{ width: 100%;  z-index: 300;   }
.mid_nav_col.fixed{	position: fixed;	top: 0; }

.mid_nav_sp{ padding: 1em 22px 1em 12px; margin-bottom: 0px; box-sizing: border-box; border-left: 4px solid #FFF; border-bottom: 1px solid #B7B6B6; text-decoration: none; background: url(../../images/mark/ic_arrow_ora_down01.png) no-repeat 98% 50% #FFF; background-size: 12px auto;  font-size: 1.4rem; margin-bottom: 20px;  }
.mid_nav_sp.active{ background:url(../../images/mark/ic_arrow_ora_up01.png) no-repeat 98% 50% #FFF; background-size: 12px auto;  margin-bottom: 0px;  }

.mid_nav_box{ display: none; border-bottom: 1px solid #B7B6B6; padding: 0 0 5px; margin: 0 0 20px;   }

.mid_nav_box > .inner{ width: 100%; }
.mid_nav li .mid_1st_item_pc{ display: none; }
.mid_1st_item_sp{ cursor: pointer; display: block; color: var(--text); text-decoration: none; height: 50px; line-height: 50px; font-size: 86.6666%; padding: 0 15px; }
.mid_1st_item_sp.on { color: var(--text); border-left: 5px solid #1010eb;  }

.key2_col{ margin-bottom: 0; }/* �w�i�摜��class */
.key_app{ background: url(../../images/key/key_app.png) no-repeat; background-size: cover;  }

.key2_bkg_app{ width:/*1215px*/800px; height:/*374px*/300px; margin: auto; position: relative;  }
.key2_txt_app{ position: absolute;  color:#1010eb; top: /*130px*/80px; left: /*24px*/15px;   }
.key2_ttl_app{ font-size: 200%/*420%*/; margin-bottom: 15px; line-height: 1.1;  /*text-shadow:3px 3px 4px #666666;*/}

.col_gray{background:#f5f5f5; padding: 50px 0 ; }
.col_wh{ background:#FFF; padding: 50px 0 ; }

.plbtn_blue_appos{display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; color: #ffffff; font-size: 18px; border-radius: 30px; width: 80%; height: 50px; font-weight: bold; transition: 0.3s; background-color: #1010eb; margin: 30px auto 15px;}
.plbtn_blue_appos:hover{opacity: .7; color: #fff;}

.box_con_appos{width:100%;/* margin: 0 5%;*/}
.box_double_con_l_appos{ float: left; width: 20%; box-sizing: border-box; padding: 2%;}
.box_double_con_l_appos img{ width: 100%;}
.box_double_con_r_appos{ float: right; width: 80%;  box-sizing: border-box; padding: 2%;}
.box_double_con_r_appos img{ width: 100%;}



*, *:before, *:after { box-sizing: border-box;}
.app_top_spec{�@width: 100%; display: flex; flex-wrap: wrap;}
.app_top_spec > *{ width: calc( 33.33333% - 8px ) ; margin-right: 12px; margin-bottom: 12px;}
.app_top_spec > *:nth-child(3n){ margin-right: auto;}
.app_top_spec > * > *{ /*background: #ff0000;*/ height: 250px; position: relative; overflow: hidden;}

.app_flex {display: flex; /*������*/}
.app_flex .app_image { width: 600px; /*�摜�T�C�Y�w��*/ margin-left: 50px; padding: 0;}
.app_flex .app_image img { width: 60%; height: auto; margin-left: 20px;}
.app_flex .app_text { margin: 0 15px 0 20px; padding-top: 40px;}

/* Q&A */
.accordion-area_app{ list-style: none; width:96%; max-width: 800px; margin:0 auto;}
.accordion-area_app li{ margin: 10px 0;}
.accordion-area_app section { border: 1px solid #777777;
}
/*�A�R�[�f�B�I���^�C�g��*/
.title { position: relative;/*+�}�[�N�̈ʒu��Ƃ��邽��relative�w��*/ cursor: pointer;  /*font-size:1rem; font-weight: normal;*/ padding: 3% 3% 0px 50px; transition: all .5s ease;}

/*�A�C�R���́{�Ɓ~*/
.title::before,
.title::after{ position: absolute; content:''; width: 15px; height: 2px; background-color: #333;}
.title::before{ top:/*48%*/45px; left: 15px; transform: rotate(0deg);}
.title::after{ top:/*48%*/45px; left: 15px; transform: rotate(90deg);}
/*�@close�Ƃ����N���X���‚�����`��ω��@*/
.title.close::before{ transform: rotate(45deg);}
.title.close::after{ transform: rotate(-45deg);}

/* footer02 */
.footer02{ background: #ffffff; color:var(--text); }
.logo_wh{ width: /*128*/205px; float: left; padding: 10px 10px 10px 0; }

footer{ width: 100%;}

/*-----------------------------�A�v���ꗗ-----------------------------*/

.app_box_bk{ width: 100%; padding: 25px 30px;background-color: #DDE7FF;}

.appbox{display: flex; justify-content: space-between;}

/*2�u���b�N�̎�*/
.appbox>p.appimg{ width: 12%;}
.appbox>p.apptxt{ width: 85%;}
/*3�u���b�N�̎�*/
.appbox>p.appsup_three{ width: 8%;}
.appbox>p.appimg_three{ width: 8%;}
.appbox>p.apptxt_three{ width: 85%;}

.appimg_w10{width: 100%;}

.btn_googleatore{ width: 100px;}
.btn_appatore{ width: 100px;}

a.app_plbtn_blue{display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; color: #1010eb; font-size: 18px; border-radius: 30px; width: 500px; height: 50px; font-weight: bold; transition: 0.3s; background-color: #fff!important;/* margin-top: 30px; margin-left: 50px;*/ margin: 30 auto 0; border: 1px solid #1010eb;}
a.app_plbtn_blue:hover{opacity: .7;}

/*-----------------------------�A�v���ڍ�-----------------------------*/

.app_box_bk_info{ /*width:100%; padding: 5% 12% 0!important ;margin: 0 auto;*/background-color: #DDE7FF!important;}

.appbox_info{/*display: flex; justify-content: space-between; text-align: center; width: 300px;*/display: -webkit-flex; display: flex;    -webkit-justify-content: center; justify-content: center;  -webkit-align-items: center;  align-items: center; width: 90%; margin: 0 auto; margin-bottom: 0px!important; padding: 15px 180px 0px ;} 
/*2�u���b�N�̎�*/
.appbox_info>p.appimg_info{ /*width: 15%;*/width:20%; height:auto; /* �摜�Ȃǂ̏ꍇ��auto */ display:inline-block; margin-right: 15px; margin-bottom: 0!important;}
.appbox_info>p.apptxt_info{ /*width: 85%;*/width:70%; /*height:40%;*/ /* �摜�Ȃǂ̏ꍇ��auto */ display:inline-block; margin-bottom: 0!important;}

.app_box_gray{ width: 100%!important; padding: 25px 30px; background-color: #D8D8D8;}

.box_con{width:100%;/* margin: 0 5%;*/}
.box_double_con_l{ float: left; width: 50%; box-sizing: border-box; padding: 2%;}
/*.box_double_con_l img{ width: 100%;}*/

.box_double_con_r{ float: right; width: 50%;  box-sizing: border-box; padding: 2%;}
/*.box_double_con_r img{ width: 100%;}*/

.icon_android{ width: 80px!important;}
.icon_apple{ width:70px!important; }

.accordion-area_app_info{ list-style: none; width:96%; max-width: 1000px; margin:0 auto;}
.accordion-area_app_info li{ margin: 5px 0 0;}
.accordion-area_app_info section { border: 1px solid #777777;}

/*�A�R�[�f�B�I���^�C�g��*/
.title_info { position: relative;/*+�}�[�N�̈ʒu��Ƃ��邽��relative�w��*/ cursor: pointer;  /*font-size:1rem; font-weight: normal;*/ padding: 30px 3% 0px 50px; transition: all .5s ease;}

/*�A�C�R���́{�Ɓ~*/
.title_info::before,
.title_info::after{ position: absolute; content:''; width: 15px; height: 2px; background-color: #333;}
.title_info::before{ top:/*48%*/48px;left: 15px; transform: rotate(0deg);}
.title_info::after{ top:/*48%*/48px; left: 15px; transform: rotate(90deg);}
/*�@close�Ƃ����N���X���‚�����`��ω��@*/
.title_info.close::before{ transform: rotate(45deg);}
.title_info.close::after{ transform: rotate(-45deg);}

/*�A�R�[�f�B�I���Ō����G���A*/
.box_recipe { display: none;/*�͂��߂͔�\��*/ background: #f3f3f3; margin:0 3% 3% 3%; padding: 3%;}

a.app_plbtn_wh{display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; color: #1010eb; font-size: 18px; border-radius: 30px; width: 90%; height: 50px; font-weight: bold; transition: 0.3s; background-color: #fff!important; margin: 0px auto!important; border: 1px solid #1010eb; text-align: center;}

a.app_plbtn_wh:hover{opacity: .7;}

.appimg_sm{width:100%;} 

/*-----------------------------�A�v���Z���N�g-----------------------------*/
.appForm input {/*display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; color: #1010eb;   transition: 0.3s; background-color: #fff!important; margin: 30 auto 0; border: 1px solid #1010eb;*/
	transition: 0.3s; display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none;
	cursor:pointer;/*�J�[�\�����|�C���^�[��*/
	-webkit-appearance: none;/*iOS Safari�̃f�t�H���g�X�^�C�����N���A*/
	border-style:none;/*�f�t�H���g�̃{�[�_�[�N���A*/
	font-size: 18px; font-weight:bold; color: #fff;	margin: 30 auto 0; 	padding:5px 30px; width: 200px; height: 50px; background-color: #1010eb;/*�w�i�F���w��*/ -webkit-border-radius: 5px;/*iOS Safari�p�̃{�b�N�X�̊p�ۂ̎w��*/ border-radius: 30px;}
/*���}�E�X�I�[�o�[���̕ω��B�����ł͔w�i�F�����ύX*/
.appForm input:hover {opacity: .7;}