@charset "utf-8";
/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%; display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

html,body{overflow-x: hidden;}
ul,ol{list-style: none; margin:0; padding:0;}
section{margin:0; }

/* ============================================ */
/* 変数設定 */
/* ============================================ */
:root{
	--main-color:#000000;
	--main-color01:#4d9950;
	--main-color02:#8e8a4d;
	--main-color03:#984f6b;
	--main-color04:#4d6898;
	--background-color:#ffffff;
	--background-color01:#dff2e2;
	--background-color02:#f3eede;
	--background-color03:#f1dee2;
	--background-color04:#dee3f1;
	--background-color05:#f6f5f1;
	--red:#bd272d;
	--orange:#f7ac3b;
	--blue:#0071b8;
	--white:#ffffff;
	--black:#000000;
	--gray:#999999;
	--main-fontsize:17px;
	--small-font:12px;
	--small-font02:14px;
	--larger-fontsize:19px;
	--large-font:24px;
	--line-height:1.5em;
	--margin40:40px;
	--margin30:30px;
	--margin20:20px;
}

/* ============================================ */
/* 基本設定（スマホ縦） */
/* ============================================ */
.visible{display: block;}
.non_visible{display: none;}

body{color:var(--main-color); line-height: var(--line-height);
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; min-height: 100vh; min-height: 100dvh; background-color: var(--background-color01); }

#container{position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; width: 100%; overflow-y: hidden;}
/*firefoxで２重スクロールになる画面回避のためoveflowyをhiddenに*/
.sp_portrait{display: none;}

section{height: auto; width:100%; min-height: 100vh; min-height: 100dvh; display: block; position: relative; top:0px; left:0px;}

h1{position: relative; z-index: -1; text-align: center; top: -50vh; }
h2{font-size:var(--main-fontsize); display: flex; align-items: center; justify-content: center; color:var(--white); background-color: var(--main-color01); height: 40px; font-weight: normal; text-align: center; }
h3{font-size:var(--larger-fontsize); display: flex; align-items: center; justify-content: center; margin:0 var(--margin20) var(--margin20); }
#input01 h3,#input02 h3,#input03 h3{color:var(--main-color02);}
#menu h3{color:var(--main-color03); line-height: 1.5em;}
#results h3{color:var(--main-color04); line-height: 1.5em;}
footer{position: relative; top: -2em; display: block; text-align: center; font-size: var(--small-font); z-index: 1; margin:0 auto; padding: 0 0.5em; height: 0; box-sizing: border-box!important; line-height: 100%; width: 100%; }
.btn{background-color: var(--main-color01); color:var(--white); font-size:var(--large-font); height: 40px; line-height: 40px; box-shadow: 2px 2px 4px #666666; border: 2px solid var(--white); border-radius: 20px; text-align: center; cursor: pointer;}
aside,.sp_portrait{display: none;}

.width_auto{width: 90%; margin: 0 auto; text-align: left;}
.center{text-align: center;}
.small{font-size: var(--small-font);}

/* 背景色 */
.wrap{position: relative; height: auto; min-height: 100vh; min-height: 100dvh; width: 100%; max-width: 960px; margin: 0 auto; box-sizing: border-box!important ; padding-bottom: 130px;}

#input01,#input02,#input03,#menu,#results,#select_breakfast,#select_lunch,#select_dinner,#select_snack{font-size: var(--main-fontsize); height: auto; width:100%; min-height: 100vh; min-height: 100dvh; position: relative; top:0px; left:0px; box-sizing: border-box!important;}
#input01 .wrap,#input02 .wrap,#input03 .wrap{background-color: var(--background-color02);  }
#menu .wrap{background-color: var(--background-color03);}
#results .wrap{background-color: var(--background-color04);}

/* ページナビゲーション */
.pagenation{position: absolute; bottom: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--white); padding: 0px; border-radius: 1em 1em 0em 0em; background-color: rgba(230, 229, 225, 0.8); z-index: 1; height: 120px; margin-right: 20px; margin-left: 20px;  width: calc(100% - 40px); box-sizing: border-box!important;}
.back_btn,.next_btn{position:relative; margin: 30px 0.5em auto 0.5em; width: 7em; font-size:var(--larger-fontsize); display: block;}
.next_btn:before{ content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 0.5em; width:10px; height:12px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: #ffffff;}
.back_btn:before{ content: ""; margin: auto; position: absolute; top: 0; bottom: 0; left: 0.5em; width:10px; height:12px; clip-path: polygon(100% 0, 100% 100%, 0 50%); background-color: #ffffff;}



/***** top画面 *****/
#top{background-image: url("../img/main_img_pc.webp"); background-image: image-set(url(../img/main_img_pc.webp) 1x, url(../img/main_img_sp.webp) 2x, url(../img/main_img_sp.webp) 3x);
background-image: -webkit-image-set(url(../img/main_img_pc.webp) 1x, url(../img/main_img_sp.webp) 2x, url(../img/main_img_sp.webp) 3x);
background-size: auto 42vh; background-size: auto 42dvh; background-repeat: no-repeat; background-position: bottom 10vh center; background-position: bottom 10dvh center; flex:1; z-index: 1; }
#top header{background-image:url(../img/header_bg.svg),url(../img/ttl_bg.svg); background-position:top 0px left 0px,top 16vw center ; background-repeat: repeat-x,no-repeat; background-size:16px 16px,100vw auto; position: relative; min-height:35vw;}
.btn_area{position: absolute; bottom: 0; border: 1px solid var(--white); padding: 0px 10px; border-radius: 1em 1em 0em 0em; background-color: rgba(230, 229, 225, 0.8); z-index: 2; height: 160px; display: block; margin-right: 10px; margin-left: 10px;  width: calc(100% - 22px);}
.btn_area .btn{margin: 14px auto 12px auto; width: 7em; }
.btn_area .info{font-size: var(--small-font); color: var(--main-color01); line-height: 1.2em; display:block; max-width: 43em; margin: 0 auto;  z-index: 2;}

.top_cloud01{position: absolute; top: 26vh; top: 26dvh; left:1.4em; z-index: -1; max-width:72px; width: 17vw; height: auto; }
.top_cloud02{position: absolute; top: 40vh; top: 40dvh; left:6em; z-index: -1; max-width:60px; width: 14vw; height: auto; }
.top_cloud03{position: absolute; top: 41vh; top: 41dvh; right:5em; z-index: -1; max-width:72px; width: 17vw; height: auto; }
.top_cloud04{position: absolute; top: 52vh; top: 52dvh; right:1em; z-index: -1; max-width:60px; width: 12vw; height: auto; }
.second_cloud01,.second_cloud02,.second_cloud03,.second_cloud04,.keyvisual{display: none;}

.green_right,.green_left{width:44vw; height: auto; position: absolute; top: 16px; z-index: 1; }
.green_left{transform: scale(-1, 1); left: 0;}
.green_right{right: 0;}
.woman{width:24vw; height: auto; position: absolute; bottom: 0px; left: 5vw; z-index: 1;}
logo.top_logo img{position: absolute; width:64vw; height: auto; z-index: 2; margin: 0; top:13vw; right:7vw; }
logo.second_logo img{display: none; }

.description{position: relative; display: block; padding: 10px 20px; border-radius: 1em; margin: 1.5em calc(50vw - (20px + 11.5em)) 0; background-color: rgba(222, 241, 225, 0.6); width: auto; text-align: center;  z-index: 2; font-size: 15px;}
.description span:before{content:'\A'; white-space: pre ;} .description span:first-child:before{content:''; white-space: pre ;}

/***** 下層画面 *****/
#input01 .tit_img,#input02 .tit_img,#input03 .tit_img{margin:var(--margin30) auto var(--margin20); width: 200px; height: auto;}
.err{color: var(--red); font-weight: bold; font-size: var(--main-fontsize); clear: both; margin-top: 1em;}

/***** 入力画面01*****/
.form{width: 15em; margin:1em auto;} .form02{ margin:0 auto; clear: both; display: block; overflow: visible; float: left; height: 3em;}
.form p{display: inline-block;}
.form_tit{width: 2.5em; display: inline-block; margin: 0 0.5em;}
.form_input{width: 10em; display: inline-block; }
.form_text {width: 5em; height: 2.4em; padding: 0 0.5em; border-radius: 4px; border: none; box-shadow: 0 0 0 1px #999 inset;
	appearance: none; -webkit-appearance: none; -moz-appearance: none; margin-right: 0.5em;}
.form_text:focus { outline: 0; animation: anime_form .2s linear forwards; border: 2px solid rgb(33, 150, 243) ; }

.form_radio {border: none; width: auto; } .form_radio02{width: 100%; display: block; margin-bottom: var(--margin20);}
.form_radio label {float: left; margin-right: 1em; position: relative; top: 0.5em; 0px; cursor: pointer;display: flex; align-items:flex-start; justify-content:flex-start; }
.form_radio label span{margin-left: 0;}
.form_radio02 label {position: relative; cursor: pointer; width: 100%; display: block; padding: 0 1em 0 0; margin: 0.8em 0 0 0;}
.form_radio02 label input{position: absolute; top: 0; left: 0; display: block;}
.form_radio02 label span{position: relative; top: 0px; left: 26px; display: block; } 
.form_radio input:checked,.form_radio02 input:checked{ background-color: rgb(33, 150, 243); animation: anime_form .3s linear;}
@keyframes anime_form{ 0% { box-shadow: 0 0 0 1px transparent; } 50% { box-shadow: 0 0 0 10px #2589d033; } 100% {box-shadow: 0 0 0 10px transparent; }
}
input[type=radio]{width: 18px; height: 18px; margin-right: 0.5em;}

#ageCheck{text-align: center;}

/***** 入力画面02*****/
.bmi_text{background-color: var(--white); margin: var(--margin20) 0; text-align: center; padding: 1em;}
.bmi_text span{ font-weight: bold; margin: 0 0.5em; color: var(--red);}
.bmi_detail{margin:0em auto; width: 13em; display:block;}
.bmi_yase,.bmi_futsu,.bmi_himan{margin: 2px; border-radius: 0.6em; padding: 2px 5px; display: block;}
.bmi_futsu:after,.bmi_yase:after{content:'\A'; white-space: pre ; background-color: var(--background-color02)!important;}
.bmi_link{display: block;}
.bmi_link span{cursor: pointer; border-bottom: 1px solid var(--black); position: relative; margin-left: 20px;}
.bmi_link span:before{content: url("../img/red_arrow.svg"); display: inline-block; width: 10px; height: 14px; position: absolute; bottom: 0.5em; left: -20px; }
.bmi_link span:hover{color:var(--red); border-bottom: 1px solid var(--red);}
.width_bmi{display: flex; flex-wrap: wrap; width: 300px; margin: 0 auto;}
.bmi_layout{with:70%; margin: 0 auto; display: inline-block; margin-bottom: 0.5em;}


/***** BMIモーダルウィンドウ //***** 目標値モーダルウィンドウ *****//***** このサイトについてモーダルウィンドウ *****/
#bmi_modal,#target_modal,#aboutus_modal{height: auto; width:100%; min-height: 100%; position:absolute; top:0px; left:0px; box-sizing: border-box!important; z-index: 10; background-color: rgba(243, 238, 222, 0.9);}
#bmi_modal .wrap,#target_modal .wrap{position: relative; height: auto; min-height: auto; width: 100%; max-width: auto; margin: 0 auto; padding: 2em; background-color: rgba(243, 238, 222, 1); } 
#bmi_modal h4,#target_modal h4{margin: 4em 0 1em 0; color: var(--main-color01);}
#bmi_modal dl dt{border-top: 0.5px solid #999999; border-right: 0.5px solid #999999; border-left: 0.5px solid #999999; width: 90%; padding: 0 5px; background-color: var(--background-color01); margin: 0 auto; text-align: center;}
#bmi_modal dl dd{border-top: 0.5px solid #999999; border-right: 0.5px solid #999999; border-left: 0.5px solid #999999; width: 90%; padding: 0 5px; margin: 0 auto; text-align: center; background-color: var(--white); }
#bmi_modal dl dd:last-child{border-bottom: 0.5px solid #999999;}
#bmi_modal .small{text-align: right; width: 90%;  margin: 0 auto;}
#bmi_modal p.formula{border: 2px solid var(--main-color01); border-radius: 1em; padding: 0.5em; font-weight: bold; text-align: center; margin: 1em auto; width: 90%; background-color: var(--white);}
.bmi_btn,.target_close,.aboutus_btn{display: block; width: 3em; height: 3em; border: 2px solid var(--background-color01); border-radius: 50%; background: var(--main-color01); filter: drop-shadow(3px 3px 2px #777); cursor: pointer; position: fixed; top: 1em; right: 1em; }
.bmi_btn:before,.bmi_btn::after,.target_close:before, .target_close::after,.aboutus_btn:before,.aboutus_btn::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 2em; background: var(--white);}
.bmi_btn:before,.target_close:before,.aboutus_btn:before{ transform: translate(-50%,-50%) rotate(45deg);} 
.bmi_btn:after,.target_close:after,.aboutus_btn:after{ transform: translate(-50%,-50%) rotate(-45deg);}

/***** 目標値モーダルウィンドウ *****/

.target_layout dl{width: 80%; margin-left: auto; margin-right: auto; margin-top: var(--margin30);}
.target_layout p{width: 80%; margin-left: auto; margin-right: auto;}
.target_layout dl dd dl{width: 100%; display: flex; align-items:flex-start; justify-content:flex-start; flex-wrap: wrap; margin-top: 0; border-bottom:1px solid var(--main-color01);}
.target_layout dl dt{font-weight: bold; color: var(--main-color01)} 
.target_layout dl dd dl dt{font-weight: normal; color: var(--main-color); width: 50%; background-color: var(--background-color01); padding-left: 1em; border: 1px solid var(--main-color01); border-bottom: none;}
.target_layout dl dd dl dd{width: calc(50% - 1px); background-color: var(--background-color); padding-left: 1em; border: 1px solid var(--main-color01); border-bottom: none; border-left: none;}

/***** このサイトについてモーダルウィンドウ *****/
#aboutus_modal{height: auto; width:100%; min-height: 100%; position:absolute; top:0px; left:0px; box-sizing: border-box!important; z-index: 10; background-color: rgba(243, 238, 222, 0.8); }
#aboutus_modal .wrap{position: relative; height: auto; min-height: auto; width: 100%; max-width: auto; margin: 0 auto; padding: 2em; display: flex; align-items: center; justify-content: center; height: 100vh; height: 100dvh; padding: 10px; }
.aboutusp{max-width: 960px; width: 100%; position: fixed; top: 0; }
.aboutus_btn{ position: absolute; top: 1em; right: 1em; }
#aboutus_modal .wrap .flame{background-color: #fff; padding: 40px; border-radius: 20px; box-shadow: 2px 2px 3px #666666;}
#aboutus_modal h4{margin: 0em 0 2em 0; color: var(--main-color01); font-size: 120%; text-align: center;}
#aboutus_modal h4 span{border-bottom: 2px solid var(--background-color01); display: inline-block; padding: 0 0.5em 0.5em 0.5em; }
.copyright_btn{border-bottom: 1px solid var(--main-color01); margin: 0 0.5em; color: var(--main-color01); background-color: rgba(243, 238, 222, 0.4); cursor: pointer; width: 7em!important; word-break: keep-all; }

/***** 入力画面03*****/
#momentumerr{clear: both; width: 100%; display: block; padding: 0 1em; text-align: center;}


/***** MENU選択画面 *****/
.menu_stitle{display: flex; align-items: center; flex-wrap: wrap;}
.menu_header{display: block;}
#menu .tit_img{margin:var(--margin30) auto var(--margin20) auto; width: 200px; height: auto;}


#menu h4{width: 90px; height: 90px; border-radius: 45px; border: 6px solid var(--white); display: flex; align-items: center; justify-content: center; flex-direction:column; font-size: var(--larger-fontsize);  line-height: 102%; margin-bottom: var(--margin20); }
#menu h4 span{font-size: var(--small-font); color: #989898; font-weight: normal;}
.btn_menu{color:var(--white); height: 40px; box-shadow: 2px 2px 4px #666666; border: 2px solid var(--white); border-radius: 5px; padding-top: 7px; text-align: center; cursor: pointer; width: 240px; margin: var(--margin20) auto; }
.btn_menu span{position: relative; font-size:var(--larger-fontsize); font-weight: bold;}
.btn_menu span::after{ content: ""; margin: auto; position: absolute; right: -20px; top: calc(0.5em - 5px); width:8px; height:10px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: #ffffff; }
#menu h5{font-size:var(--larger-fontsize); text-align: center; margin: 2em 0 1em 0;}
.calorie_detail{width: 100%; border-radius: 0 1em 0 1em; background-color: var(--background-color05); border: 1px solid var(--white); display: block;}
.calorie_detail dl{width: 80%; margin: 20px auto; display: flex; }
.calorie_detail dl dt{width:8em;}

#breakfast,#lunch,#dinner,#snack{position: relative; overflow: hidden;}
#breakfast_menu,#lunch_menu,#dinner_menu,#snack_menu{margin: 0;}

/* 朝 */
#breakfast h4{background-color: var(--background-color01);}
#breakfast h5{color: var(--main-color01);}
#breakfast,#dinner{background-color: var(--background-color05); border: 4px solid var(--white); border-left: none; border-radius: 0 1em 1em 0; margin-right: var(--margin20); padding:var(--margin20); box-sizing: border-box!important;}
#breakfast .btn_menu{background-color: var(--main-color01); }
#breakfast .calorie_detail,#dinner .calorie_detail{background-color: var(--white); }
.b_noselect,.l_noselect,.d_noselect,.s_noselect{text-align: center;}

/* 昼 */
#lunch h4,#snack h4{background-color: var(--background-color03); border: 6px solid var(--background-color05); }
#lunch h5,#snack h5{color: var(--main-color03);}
#lunch,#snack{background-color: var(--white); border: 4px solid var(--background-color05); border-right: none; border-radius: 1em 0 0 1em; margin: var(--margin20) 0px var(--margin20) var(--margin40); padding:var(--margin20); box-sizing: border-box!important;}
#lunch .btn_menu{background-color: var(--main-color03); }
#lunch .calorie_detail{background-color: var(--background-color05); }

/* 夜 */
#dinner h4{background-color: var(--background-color02); border: 6px solid var(--white); }
#dinner h5{color: var(--main-color02);}
#dinner .btn_menu{background-color: var(--main-color02); }

/* 間食 */
#snack h4{background-color: var(--background-color04); border: 6px solid var(--background-color05); }
#snack h5{color: var(--main-color04);}
#snack .btn_menu{background-color: var(--main-color04); }

.nextbtn_menu::after { content: "すべて選んだら"; position: absolute; top: -50px; left: 0px; font-size:14px; padding: 0; width: 126px; height: 42px; font-weight: bold; color: #000000; display: block; background-image: url("../img/fukidashi.svg"); background-size: 126px auto; background-repeat: no-repeat; background-position: top 0px left 0px; text-align: center;}

/***** MENU選択画面モーダル *****/
.close_btn{position: fixed; top: 0; margin: 0 auto; height: 40px; width: 100%; z-index: 1001;}
.close_btn img{width: 40px; height: 40px; position: absolute; right: 20px; top: 20px; cursor: pointer; filter: drop-shadow(2px 2px 3px #666);}
#select_breakfast,#select_lunch,#select_dinner,#select_snack{margin: 0; padding: 0; width: 100%; height: 100vh; height: 100dvh; background-color: rgb(223,242,246,0.8); z-index: 1000; position: fixed; top: 0; left: 0; overflow-y: scroll; overflow-x: hidden;}
#select_breakfast .wrap,#select_lunch .wrap,#select_dinner .wrap,#select_snack .wrap{padding-top: var(--margin40); padding-left: 0!important; padding-right: 0!important; }
#select_breakfast .wrap{background-color: var(--background-color01); }
#select_lunch .wrap{background-color: var(--background-color03); }
#select_dinner .wrap{background-color: var(--background-color02); }
#select_snack .wrap{background-color: var(--background-color04); }

#select_breakfast h4,#select_lunch h4,#select_dinner h4,#select_snack h4{background-color:var(--background-color); width: 160px; text-align: center; margin: 0 auto; border-radius: 0.8em; height:1.6em; line-height: 1.6em; }

#breakfast_selected h4,#lunch_selected h4,#dinner_selected h4,#snack_selected h4{width: 100%; text-align: center; margin: var(--margin30) auto var(--margin20) auto; height:1.6em; line-height: 1.6em; }
#select_breakfast h4,#breakfast_selected h4{color: var(--main-color01);font-size:var(--larger-fontsize);}
#select_lunch h4,#lunch_selected h4{color: var(--main-color03);font-size:var(--larger-fontsize);}
#select_dinner h4,#dinner_selected h4{color: var(--main-color02);font-size:var(--larger-fontsize);}
#select_snack h4,#snack_selected h4{color: var(--main-color04);font-size:var(--larger-fontsize);}

#select_breakfast .menu_list,#select_lunch .menu_list,#select_dinner .menu_list,#select_snack .menu_list{width: calc(100% - 60px); margin: 20px auto;}
#breakfast_list,#lunch_list,#dinner_list,#snack_list {display: flex; align-items:flex-start; justify-content:center; flex-wrap: wrap; width: 100%; column-gap: 0.5em;}
#breakfast_list li,#lunch_list li,#dinner_list li,#snack_list li{height: 1.4em; line-height: 1.4em; border-radius: 0.3em; display: inline-block; background-color:var(--background-color); padding: 0 0.5em; font-size: 0.9em; margin-top: 0.8em; box-shadow: 2px 2px 3px #666666; cursor: pointer; }/* カテゴリーボタン */

#breakfast_list li.here{background-color:var(--main-color01); color:var(--background-color); box-shadow: none; cursor: default; }
#lunch_list li.here{background-color:var(--main-color03); color:var(--background-color); box-shadow: none; cursor: default; }
#dinner_list li.here{background-color:var(--main-color02); color:var(--background-color); box-shadow: none; cursor: default; }
#snack_list li.here{background-color:var(--main-color04); color:var(--background-color); box-shadow: none; cursor: default; }/* 選択されているカテゴリーボタン */

h5.breakfast_category,h5.lunch_category,h5.dinner_category,h5.snack_category{background-color: var(--background-color05); display: inline-block; height:30px; line-height:30px; border-radius: 0.4em 0.4em 0 0; padding: 0.2em 0.5em; min-width: 150px; text-align: center; margin: 0; border: 1px solid #ccc; border-bottom: none; position: absolute; top: -29px; left: 20px;}/* カテゴリータイトル */
.menu_tab{background-color: var(--background-color05); margin-top: 40px; width: 100%; border-top: 1px #ccc solid; position: relative; padding: 0.5em;}

.breakfast_menulist,.lunch_menulist,.dinner_menulist,.snack_menulist{width: 100%; }
.breakfast_menulist ul,.lunch_menulist ul,.dinner_menulist ul,.snack_menulist ul{width: 100%; display: flex; align-items:flex-start; justify-content: center; flex-wrap: wrap;}
.breakfast_menulist ul li,.lunch_menulist ul li,.dinner_menulist ul li,.snack_menulist ul li{width: 104px; margin: 0.3em 0.2em; position: relative;}
.breakfast_menulist ul li img,.lunch_menulist ul li img,.dinner_menulist ul li img,.snack_menulist ul li img{width: 100px; height: 100px; padding: 5px; border-radius: 10px; margin: 0; box-shadow: 2px 2px 3px #666666; cursor: pointer; position: relative; display: block;}/* メニューのボタン */

ul li dl dt.liclick img.on{ border: 1px solid #cccccc; background-color: #fff; position: relative;}
ul.asagohan li dl dt.liclick img.off{ border: 1px solid #ffffff; background-color: var(--background-color01); position: relative;}
ul.hirugohan li dl dt.liclick img.off{ border: 1px solid #ffffff; background-color: var(--background-color03); position: relative;}
ul.yorugohan li dl dt.liclick img.off{ border: 1px solid #ffffff; background-color: var(--background-color02); position: relative;}
ul.kansyoku li dl dt.liclick img.off{ border: 1px solid #ffffff; background-color: var(--background-color04); position: relative;}
ul li dl dt.liclick.checkmark::before {content:url("../img/checked.svg"); position: absolute; top: 10px; right: 10px; width: 23px; height: 23px; display: block; z-index: 1;}
ul li dl dt.liclick p{font-size: 0.7em; line-height: 100%; margin: 6px 0 2px 0; text-align: center;}
span.selectednum{font-size:0.9em!important;}

ul li dl dd{text-align: center; margin: 0; padding: 0;}
ul li dl dd.kazu{display: none;}
.selectkazu{ width: 80%; height: auto; font-size: 15px; line-height: 25px; padding: 4px; border:1px solid #ccc;}
.selectkazu option{font-size: 19px;}

#breakfast_selected,#lunch_selected,#dinner_selected,#snack_selected{background-color: var(--background-color); padding: 0.5em; }
.breakfast_selected,#breakfast_menu,.lunch_selected,#lunch_menu ,.dinner_selected,#dinner_menu ,.snack_selected,#snack_menu {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding-bottom: 30px;}
.breakfast_selected p,#breakfast_menu p,.lunch_selected p,#lunch_menu p,.dinner_selected p,#dinner_menu p,.snack_selected p,#snack_menu p{display: flex; align-items:center; justify-content: center; flex-wrap: wrap; width: 90px; margin: 0.5em;}
.breakfast_selected p img,#breakfast_menu p img,.lunch_selected p img,#lunch_menu p img,.dinner_selected p img,#dinner_menu p img,.snack_selected p img,#snack_menu p img{width: 90px; height: 90px; margin: 0; padding: 0;}
.breakfast_selected p span,#breakfast_menu p span,.lunch_selected p span,#lunch_menu p span,.dinner_selected p span,#dinner_menu p span,.snack_selected p span,#snack_menu p span{ width: 90px; text-align: center; font-size: 0.7em; margin: 0.2em 0 0 0; padding: 0; line-height: 1.1em; }

.btnarea{display: flex; align-items: center; justify-content: center; background-color: var(--background-color); position: relative; top: -1px;}
.btnarea p{border: 1px #ffffff solid; text-align: center; width: 110px; height: 2em; line-height: 2em; filter: drop-shadow(2px 2px 3px #666); border-radius: 0.5em; margin: 0.5em 0.5em var(--margin40) 0.5em; cursor: pointer;}
.btnarea p.clearbtn{background-color: #dddddd;}
.btnarea p.decidebtn.breakfastbtn{background-color: var(--main-color01); color: var(--background-color); }
.btnarea p.decidebtn.lunchbtn{background-color: var(--main-color03); color: var(--background-color); }
.btnarea p.decidebtn.dinnerbtn{background-color: var(--main-color02); color: var(--background-color); }
.btnarea p.decidebtn.snackbtn{background-color: var(--main-color04); color: var(--background-color); }


/***** 結果画面 *****/
.result_header{display: block;}
#results .tit_img{margin:var(--margin30) auto var(--margin20) auto; width: 200px; height: auto;}
#results h3{text-align: center; width: auto; display: flex; align-items:flex-end; justify-content: center; flex-wrap: wrap;}
#results h3 span{display: block; font-size: var(--small-font02); font-weight: normal; color: #000000; width: 100%; text-align: center;}

article.result{width: 100%; display: block; padding: 0 1em; }
#result_cal,#result_salt,#result_target,#result_advice{border-top: 4px #fff solid; width: 100%;}
article.result h4{margin:var(--margin30) auto var(--margin20) auto; text-align: center; }
article.result .redtext{color:var(--red); width: 100%; text-align: center; background-color: var(--background-color); font-size: var(--small-font02); padding: 0.5em 0;}
.chart_cal,.chart_salt{width: 100%; text-align: center; background-color: var(--background-color); position: relative; overflow: hidden; height: 250px; margin-top: -1px;}
.chart_flame{width: calc(100% - 4em); height: 250px; margin: 0 auto; display: block; position: absolute; top: 0; left:2em; border-bottom: 4px #000000 solid; border-left: 4px #000000 solid;}
.cal_line,.salt_line{width: calc(100% - 4em);  margin: 0 auto; border-top: 4px var(--red) solid; display: block; position: absolute; bottom: 125px; left:calc(2em + 4px); }
.cal_value,.salt_value{display: block; width: 60%; position: absolute; bottom: 0px; left: 20%; animation-name: fadeup; animation-duration: 0.8s; animation-timing-function: ease-in;}
.cal_value{background-color: var(--blue); height: 500px;}
.salt_value{background-color: var(--orange); height: 500px;}
img.maxline{width:calc(100% - 5em); height: auto; position: absolute; top: 6px; left:2.5em; }

#result_cal p.notes{font-size: var(--small-font02); width: calc(100% - 4em); display: block; margin: 0 auto var(--margin30) auto;}

#result_cal dl,#result_salt dl{width: 100%; margin: var(--main-fontsize) auto ; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid var(--gray);}
#result_cal dl dt,#result_salt dl dt{width: 60%; text-align: left; padding-left: 1em; font-size: var(--main-fontsize); height: 3em; display: flex; align-items: center; justify-content:flex-start; }
#result_cal dl dd,#result_salt dl dd{width: 40%; text-align: left; padding-left: 1em; font-size: var(--main-fontsize); height: 3em; display: flex; align-items: center; justify-content:flex-start; }
#result_cal dl dt,#result_salt dl dt{background-color: var(--background-color05); border: 1px solid var(--gray); border-bottom: none;}
#result_cal dl dd,#result_salt dl dd{background-color: var(--background-color); border: 1px solid var(--gray); border-bottom: none; border-left: none;}

#result_target dl{width: 12em; margin: var(--margin30) auto ; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
#result_target dl dt,#result_target dl dd{width: 6em; text-align: left; padding-left: 1em; font-size: var(--main-fontsize); }
.target_btn{font-weight: bold; text-align: center; color:var(--main-color04); background-color: var(--background-color);border: 1px solid var(--main-color04); border-radius: 10px; box-shadow: 2px 2px 3px #666666; cursor: pointer; height: 40px; line-height: 40px; width: 60%; margin: var(--margin20) auto ; position: relative;}
.target_btn::after{ content: ""; margin: auto; position: absolute; right: 10px; top: 0; bottom: 0; width:10px; height:12px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: var(--main-color04);}


#result_advice .advice_frame{width: calc(100% - 4em); margin: var(--margin30) auto 0 auto ; background-color: var(--background-color); padding: 0.5em; border-radius: 10px; position: relative;}
.advice_frame::after{ bottom: 0; content: ""; margin: auto; position: absolute; right: calc(50% - 70px); bottom: -40px; width:42px; height:42px; clip-path: polygon(0 0, 50% 100%, 100% 0); background-color: var(--background-color);}
.advice_frame p{line-height: 1.5em; font-size: var(--main-fontsize); margin: 1em 0.5em;}

.advice_btn{font-weight: bold; text-align: center; color:var(--background-color); background-color: var(--main-color04); border-radius: 10px; box-shadow: 2px 2px 3px #666666; cursor: pointer; height: 40px; line-height: 40px; margin: var(--margin20) 0px!important; position: relative; display: flex; align-items: center; justify-content: center;}
.advice_btn::after{ content: ""; margin: auto; position: absolute; right: 10px; top: 0; bottom: 0; width:10px; height:12px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: var(--background-color);}
#result_advice img{width: 240px; height: auto; margin: 50px auto 0 auto; }

#tit_cal{background-color: var(--main-color04); color:var(--background-color); border-radius: 10px; padding-left: 50px; padding-right: 20px; font-weight: bold; position: relative; height: 2em; line-height: 2em; display: inline-block;}
#tit_salt{background-color: var(--orange); color:var(--background-color); border-radius: 10px; padding-left: 50px; padding-right: 20px; font-weight: bold; position: relative; height: 2em; line-height: 2em; display: inline-block;}
#tit_cal::before {content:url("../img/kcal.svg"); position: absolute; top: 2px; left: 5px; width: 32px; height: auto; display: block; z-index: 1;}
#tit_salt::before {content:url("../img/salt.svg"); position: absolute; top: 2px; left: 5px; width: 32px; height: auto; display: block; z-index: 1;}

@keyframes fadeup {from {opacity: 0.8; transform: translateY(200px);}to {opacity: 1; transform: translateY(0);}

}

/* ============================================ */
/* スマホ縦 小さめ */
/* ============================================ */
@media screen and (max-width:389px) and (orientation: portrait){
.description{font-size: 3.7vw;}	
 }

/* ============================================ */
/* スマホ横 */
/* ============================================ */
@media screen and (max-width:959px) and (max-height:540px) and (orientation: landscape){
.sp_portrait{position: absolute; padding: 10vh; padding: 10dvh; border: solid 2px var(--white); background-color: rgba(230, 229, 225, 0.8); border-radius:1em; z-index: 10; width: 60%; margin:19vh 20% auto 20%; margin:19dvh 20% auto 20%; font-size: 5vh; line-height: var(--line-height); display: flex; align-items: center; justify-content: center; }
.sp_portrait img{height: 40vh; height: 40dvh; width: auto; margin-right: 10vh; margin-top: 0; margin-bottom: 0;}
/* top画面 */
#container{background-image: url("../img/main_img_pc.webp"); background-image: image-set(url(../img/main_img_pc.webp) 1x, url(../img/main_img_sp.webp) 2x, url(../img/main_img_sp.webp) 3x); background-image: -webkit-image-set(url(../img/main_img_pc.webp) 1x, url(../img/main_img_sp.webp) 2x, url(../img/main_img_sp.webp) 3x);height: 100vh; height: 100dvh; background-size: auto 120vh; background-size: auto 120dvh; background-repeat: no-repeat; background-position: bottom -10vh center; background-position: bottom -10dvh center; overflow: hidden;}
#top header{background: none;}
.description,.btn_area,.pagenation,.green_right,.green_left,.woman,.cloud01,.cloud02,.cloud03,.cloud04,.second_cloud01,.second_cloud02,.second_cloud03,.second_cloud04,.aside,logo.top_logo img,logo.second_logo img,h1,.wrap,.keyvisual,#top,#aboutus_modal,#bmi_modal,#target_modal,#select_breakfast,#select_lunch,#select_dinner,#select_snack{display: none;}
}

/* ============================================ */
/* タブレット縦 */
/* ============================================ */
@media screen and (min-width:600px) and (orientation: portrait){
aside{display: none;}
/* top画面 */
#top{background-size: auto 52vh; background-size: auto 52dvh; background-position: bottom -1em center;  }
#top header{background-image:url(../img/header_bg.svg),url(../img/ttl_bg.svg); background-position:top 0px left 0px,top 16vw center ; background-repeat: repeat-x,no-repeat; background-size:16px 16px,100% auto; position: relative; min-height:36vw;}
.green_right,.green_left{width:46vw; }
.woman{width:20vw; left:4vw;}
logo.top_logo img{width:48vw; top:17vw; right:26vw; }
logo.second_logo img{display: none;}
.btn_area{margin-right: 20px; margin-left: 20px;  width: calc(100% - 42px); }
.btn_area .info{font-size: var(--small-font); }
.btn_area .btn{margin: 14px auto 20px auto; width: 240px;}

.top_cloud01{top: 36vh; left:2em; max-width:160px; width: 16vw; }
.top_cloud02{top: 45vh; left:13em; max-width:130px; width: 12vw; }
.top_cloud03{top: 40vh; right:9em; max-width:180px; width: 18vw; }
.top_cloud04{top: 52vh; right:1em; max-width:160px; width: 13vw; }
.width_auto{width: 50%;}
.width_bmi{width: 50%; }	
	
#bmi_modal dl dt{float:left; width: 25%; padding-left: 0.5em; margin-left: 5%; text-align: left;}
#bmi_modal dl dd{float:left; border-left: none;  width: 65%; padding-left: 0.5em; margin-right: 5%; text-align: left;}
#bmi_modal dl dt:nth-child(11){border-bottom: 0.5px solid #999999;}	

/* MENU選択画面 */	
.menu_left	{float: left; width:48%; }
.menu_right	{float: right; width:49%; background-color: var(--white); border-radius: 1em; min-height: 27em; }
#breakfast_menu,#lunch_menu,#dinner_menu,#snack_menu{margin: 0 1em; }
/* 朝 */	
#breakfast .calorie_detail,#dinner .calorie_detail{background-color: var(--background-color05); border:4px solid var(--white); }
/* 昼 */	
#lunch .menu_right{ border:4px solid var(--background-color05); }
	
#result_cal dl dt,#result_salt dl dt{font-size: var(--main-fontsize);  }	
}

/* ============================================ */
/* タブレット横とパソコン*/
/* ============================================ */
@media screen and (min-width:960px) and (orientation: landscape){
footer{font-size: var(--small-font02); }
.wrap{height: auto; width: 100%;}		
	
/* top画面 */
#top{background-size: 780px auto; background-position: bottom -8vh bottom -8dvh center;  }	
#top header{background-position:top 0px left 0px,top 88px center ; background-size:16px 16px,800px auto; min-height:240px;}
.green_right,.green_left{width:30vw; }
.woman{width:134px; left: calc(50% - 354px);}
logo.top_logo img{width:440px; margin: 0 calc(50% - 220px); top:88px; right: auto; }
logo.second_logo img{display: none;}
.btn_area{margin-right: 20px; margin-left: 20px;  width: calc(100% - 42px);}
.btn_area .info{font-size: var(--small-font02); }
.btn_area .btn{margin: 14px auto 20px auto; width: 240px;}
.description{font-size: var(--larger-fontsize); margin-top: 0px;}
.top_cloud01{top: 34vh; left:3em; max-width:160px; width: 12vw;}
.top_cloud02{top: 52vh; left:9em; max-width:130px; width: 9vw;}
.top_cloud03{top: 33vh; right:12em; max-width:180px; width: 13vw;}
.top_cloud04{top: 55vh; right:10em; max-width:150px; width: 8vw;}

.width_auto{width: 50%;}
.width_bmi{width: 50%; }	
#bmi_modal dl dt{float:left; width: 25%; padding-left: 0.5em; margin-left: 5%; text-align: left;}
#bmi_modal dl dd{float:left; border-left: none;  width: 65%; padding-left: 0.5em; margin-right: 5%; text-align: left;}
#bmi_modal dl dt:nth-child(11){border-bottom: 0.5px solid #999999;}	
	
	
/* MENU選択画面 */	
.menu_header{display: flex;}
#menu .tit_img,#results .tit_img{margin:var(--margin30) 50px var(--margin20) 100px; width: 200px; height: auto;}
#menu h3{margin:auto 100px auto 50px;}

.menu_left	{float: left; width:48%; }
.menu_right	{float: right; width:49%; background-color: var(--white); border-radius: 1em; min-height: 25em; }
#breakfast_menu,#lunch_menu,#dinner_menu,#snack_menu{margin: 0 1em; }
/* 朝 */
#breakfast,#dinner{margin-right: var(--margin40); padding:var(--margin40); }
#breakfast .calorie_detail,#dinner .calorie_detail{background-color: var(----background-color05); border:4px solid var(--white); }
/* 昼 */	
#lunch .menu_right{ border:4px solid var(--background-color05); }	
	
/***** MENU選択画面モーダル *****/
.close_btn{position: fixed; top: 0; margin: 0 calc(50% - 480px); height: 60px; max-width: 960px; width: 100%; z-index: 1001; text-align: right;}

/* 結果画面 */
.result_header{display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
#results h3{text-align: center; width: calc(100% - 350px); margin: 0;}
article.result{width: 100%; padding: 0 1em; display: flex; align-items:flex-start; justify-content:space-around; flex-wrap: wrap;}
#result_cal,#result_salt,#result_target,#result_advice{border-top: 4px #fff solid; width: 46%;}

#result_cal dl dt,#result_salt dl dt{font-size: var(--main-fontsize);}

.target_layout dl{width: 46%; margin-top: var(--margin30); margin-left:0; margin-right: auto;}
.target_layout p{width: auto; margin-left: 0; margin-right: auto;}
.bmi_btn,.target_close {top: 1em; right: calc(50% - 450px); }

}

/*  このサイトについてモーダルウィンドウ */
#aboutus_modal .wrap{padding: auto;}

/* ============================================ */
/* 大きめのPC */
/* ============================================ */
@media screen and (min-width:1366px) and (orientation: landscape) {
/* 現在地ナビゲーション */	
aside{display: block; position: fixed; z-index: 1; top:calc(50vh - 120px); right:3vw; }
aside ul li{ padding-left: 60px; font-size:min(1.2vw,var(--larger-fontsize)); line-height: 100%; height: 70px; padding-top: 19px; padding-right: 1em; border-radius: 0; border: 2px solid var(--white); }
aside ul li:nth-child(1){background-color: var(--background-color01); border-radius: 1em 1em 0 0;  }
aside ul li:nth-child(2){background-color: var(--background-color02); border-top: 0px; }
aside ul li:nth-child(3){background-color: var(--background-color03); border-top: 0px; }
aside ul li:nth-child(4){background-color: var(--background-color04); border-top: 0px; border-radius: 0 0 1em 1em;}
aside ul li span{font-size:min(1vw,var(--small-font)); color: var(--gray); margin:0; line-height: 100%; }
aside ul li span:before{content:'\A'; white-space: pre ;}
aside ul li:nth-child(1).here{background-color: var(--main-color01);}
aside ul li.here{ color: var(--white);}
aside ul li.here span{ color: rgba(255, 255, 225, 0.5);}
aside .location_bar{position: absolute; top: 20px; left: 20px; width: 24px; height: 240px; background-image: url("../img/location_bar.svg"); background-position:center top; background-repeat: repeat-y; background-size:6px 240px; font-size: 1px;}
aside .location_bar p{position: absolute; top: 0px; left: 9px; width: 6px; height: 0px; font-size: 1px; background-color: var(--main-color01);  transition: all 0.4s ease-out;}	 /* 現在地グリーンバー*/
aside .location_bar ol{display: flex; align-items: center; justify-content: center; flex-direction:column;}
aside .location_bar ol li{border-radius: 50%; background-color: var(--white); border: 1px #cccccc solid; transition: all 0.5s ease-in;}
aside .location_bar ol li.done{background-color: var(--main-color01); box-shadow: 2px 3px 3px #666666; border: 2px var(--white) solid;}
aside .location_bar ol li:nth-child(1){width: 19px; height:19px; position: relative; top: 0px;  margin-bottom: 37px;}
aside .location_bar ol li:nth-child(2){width: 16px; height:16px; position: relative; margin-bottom: 5px;}
aside .location_bar ol li:nth-child(3){width: 16px; height:16px; position: relative; margin-bottom: 5px;}
aside .location_bar ol li:nth-child(4){width: 16px; height:16px; position: relative; margin-bottom: 30px;}
aside .location_bar ol li:nth-child(5){width: 19px; height:19px; position: relative; }
aside .location_bar ol li:nth-child(6){width: 19px; height:19px; position: absolute; bottom: 0px;}

.green_aside{position: absolute; right: -35px; top:-120px; height: 140px; width: auto;}

/* top画面 */
#top{background-size: 950px auto; background-position: bottom -8vh center;  }
#top header{background-position:top 0px left 0px,top 50px center ; background-size:16px 16px,1200px auto; min-height:300px;}
.green_right,.green_left{width:24vw; }
.woman{width:192px; left: calc(50vw - 500px);}
logo.top_logo img{width:552px; margin: 0 calc(50vw - 276px); top:64px; right: auto;}
logo.second_logo img{display: block; position: fixed; width:calc(50% - 540px); margin: 0; top:15vh; left:1.5vw; z-index: 1; }
.top_cloud01{top: 26vh; left:5em; max-width:160px; width: 12vw;}
.top_cloud02{top: 50vh; left:16em; max-width:130px; width: 9vw;}
.top_cloud03{top: 32vh; right:20em; max-width:180px; width: 9vw;}
.top_cloud04{top: 58vh; right:11em; max-width:150px; width: 8vw;}
.second_cloud01{display: block; position: fixed; top: 3vh; left:2em; max-width:160px; width:8vw;}
.second_cloud02{display: block; position: fixed; top: 30vh; left:12em; max-width:130px; width:6vw;}
.keyvisual.visible{ display: block; position: fixed; width:calc(50% - 440px); margin: 0; top:460px; left:-1vw; z-index: -1;}
		
}