/* CSS Document */
/* font �̊ */
html{ color:var(--text);
font-size: 62.5%;/* scroll-behavior: smooth;*/
}
body{
font-size: 150%;/* PC�������w�� */
}
@media print {
body {-webkit-print-color-adjust: exact;}
}
.disnone_pc{ display: none; }
p{ margin-bottom: 2.5em; }
h1{ font-size: 250%; font-weight: bold; margin-bottom: 1em; line-height: 1.3; color: #1010eb;}
h2{ font-size: 200%; 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;}
#header{
height: 70px;/*�����w��*/
width:100%;
/*�ȉ��̓��C�A�E�g�̂��߂�CSS*/
display: flex;
justify-content: space-between;
align-items: center;
background:/*#fff*/ var(--darkBlue);
color:#fff!important;
/*text-align: center;*/
padding: 0 20px;
/*position: fixed;*/
}
/*JS���g��fixed�N���X���t�^���ꂽ�ۂ̐ݒ�*/
#header.fixed{
position: fixed;/*fixed��ݒ肵�ČŒ�*/
z-index: 999;/*�őO�ʂ�*/
top:0;/*�ʒu�w��*/
left:0;/*�ʒu�w��*/
}
.inner{ width: 1215px; margin: auto; }
.inner::after { content: ""; clear: both; display: table; }
.inner_cts{ width: 1157px; margin: 0 auto 0; line-height: 2.0 !important; }
.inner_cts::after { content: ""; clear: both; display: table; }
.med_logo{ float: left; width: 150px; margin: 0px!important;}
.search_box{position: relative; float: right; cursor: pointer; }
.search_box::after { content: ""; clear: both; display: table; }
.search_menu{ display:block; float: right; padding: 2.2em 22px 1.9em 12px; }
.search_menu img{width: 20px; height: auto; }
#searchform{ position:relative; }
#search_toggle { width: 352px; margin-top: 13px; height: 57px; box-sizing: border-box; display:none; position: absolute; right: 0px; z-index: 200; }
.src{ outline:0; width: 300px; height: 57px; border: 1px solid #B7B6B6; border-right: none; border-radius: 6px 0 0 6px; margin: 0; padding: 0.3em; box-sizing: border-box; }
.src_btn{ position: absolute; width: 52px; height: 57px; background: url(../../images/mark/ic_search.png) no-repeat #FFF center center; background-size: 20px auto; text-indent: -9999px; border: 1px solid #B7B6B6; border-left: none; border-radius: 0 6px 6px 0; }
.mh_sp_box_header, .mh_sp_menu{ display: none; }
.mh_nav_box{ float: right; }
.mh_nav_box li{ float: left; margin-right: 0.8em; margin-top: 5px; }
a.mh_menu{ position:relative; display:block; /*padding: 0 22px 2.2em 12px; margin-bottom: 4px; */text-decoration: none; color:/*var(--text)*/#fff;/* background:url(../images/mark/ic_arrow_ora_down01.png) no-repeat 98% 50%; background-size: 12px;*/ font-size: 100%; font-weight: bold;}
a.mh_menu:hover{/*border-bottom: 4px solid #1010eb;*/ margin-bottom: 0px; /*box-sizing: border-box !important; color:#1010eb; */text-decoration:none;}
a.mh_menu.active{ border-bottom: 4px solid #1010eb; margin-bottom: 0px; box-sizing: border-box !important; color:#1010eb; }
.mid_1st_item_sp{ display: none; }
.key2_col{ margin-bottom: 0; }/* �w�i�摜��class */
.key_app{ background: url(../../images/key/key_app.png) no-repeat;background-size: cover;width: 100%!important; height: auto; }
.key2_bkg_app{ width: 1215px; height: 374px; margin: auto; position: relative; }
.key2_txt_app{ position: absolute; color:#1010eb; top: 130px; left: 24px; }
.key2_ttl_app{ font-size: 300%/*420%*//*6.3rem*/; margin-bottom: 15px; line-height: 1.1;/* text-shadow:3px 3px 4px #666666;*/}
/*�y�[�W�r���ɂ���^�u���i�r�Q�[�V���� ------------------------------------------------------------------------------------*/
.mid_nav_sp{ display: none; }
.mid_nav_box{ border-bottom: 1px solid var(--text); padding-bottom: 5px; background:#FFF;}
.mid_nav { position: relative; width: 100%; height: 50px; text-align: center; }
.mid_nav > li { display:inline-block; }
.mid_nav > li > a { display: block; color: var(--text); text-decoration: none; height: 50px; line-height: 50px; font-size: 86.6666%; padding: 0 15px;}
.mid_nav > li > a:hover { color: var(--text); border-bottom: 5px solid #1010eb; }
.mid_nav > li > a.on { color: var(--text); border-bottom: 5px solid #1010eb; }
.mid_nav > li:hover { -webkit-transition: all .5s; transition: all .5s; }
ul.mid_2nd_item { visibility: hidden; opacity: 0; z-index: 1; }
.col_gray{background:#f5f5f5; padding: 50px 0 ; margin-bottom: 0; }
.col_wh{ background:#FFF; padding: 50px 0 ; margin-bottom: 0; }
.plbtn_blue_appos{display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; color: #ffffff; font-size:/* 18px*/22px; 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: 70%;}
.box_double_con_r_appos{ float: right; width: 80%; box-sizing: border-box; padding: 2%;}
.box_double_con_r_appos img{ width: 100%;}
/*.app_top_spec{
display: flex;
justify-content: space-between;
}
.app_top_spec .item{width:33.33%;}*/
*, *:before, *:after { box-sizing: border-box;}
.app_top_spec{ width: 100%; display: flex; flex-wrap: wrap;}
.app_top_spec > *{ width: 25%/*calc( 33.33333% - 8px )*/ ; /*margin-right: 12px;*/ margin-bottom: 12px;}
.app_top_spec > *:nth-child(4n){ 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: 10px/*70px*/;}
.app_flex .app_text { margin: 0 15px 0 20px; padding-top: 40px;}
/* Q&A */
.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:27px!important;
left: 15px;
transform: rotate(0deg);
}
.title_info::after{
top:27px!important;
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���S��*/
.accordion-area_app{ list-style: none; width:96%; max-width: 1000px; margin:0 auto;}
.accordion-area_app li{ margin: 5px 0 0;}
.accordion-area_app section { border: 1px solid #777777;}
.box_recipe {
display: none;/*�͂��߂͔�\��*/
background: #f3f3f3;
margin:0 3% 3% 3%;
padding: 3%;
}
/*�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%*/48px; left: 15px; transform: rotate(0deg); }
.title::after{ top:/*48%*/48px; left: 15px; transform: rotate(90deg);}
/*�@close�Ƃ����N���X��������`��ω��@*/
.title.close::before{ transform: rotate(45deg);}
.title.close::after{ transform: rotate(-45deg);}
.footer02{ background:#ffffff; color: var(--text); }
.logo_wh{ width: 205px; float: left; padding: 10px 10px 10px 0; }
/*-----------------------------�A�v���ꗗ-----------------------------*/
.app_box_bk{ width: 1000px; padding: 25px 30px; margin:0 auto; 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: 12%;}
.appbox>p.appimg_three{ width: 12%;}
.appbox>p.apptxt_three{ width: 66%;}
.btn_googleatore{ width: 100px;}
.btn_appatore{ width: 100px;}
.appimg_w10{width: 100%;}
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: 1000px; padding: /*25px 30px*/ 30px; margin: 0 auto; background-color: #DDE7FF;}
.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: 400px;margin: 0 auto!important; margin-bottom: 0px!important;}
/*2�u���b�N�̎�*/
.appbox_info>p.appimg_info{ /*width: 15%;*/width:25%;
height:auto; /* �摜�Ȃǂ̏ꍇ��auto */
display:inline-block; margin-right: 15px; margin-bottom: 0!important;}
.appbox_info>p.apptxt_info{ /*width: 85%;*/width:75%;
/*height:40%;*/ /* �摜�Ȃǂ̏ꍇ��auto */
display:inline-block; margin-bottom: 0!important;}
.app_box_gray{ width: 1000px; padding: 0px 30px 10px; margin: 0 auto;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;}
.icon_apple{ width: 70px; }
a.app_plbtn_wh{display: flex; align-items: center; justify-conte nt: 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_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;}