@charset "utf-8";

/*-----root-----*/
:root {
	/*color*/
	--white : #fff;/*255, 255, 255*/
	--light-gray : #f2f2f2;/*242, 242, 242*/
	--gray : #666;/*102, 102, 102*/
	--gray-h : #969696;/*150, 150, 150*/
	--dark-gray : #444;/*68, 68, 68*/
	--black : #000;/*0, 0, 0*/
	
	--text-black : #222;/*34, 34, 34*/
	--text-blue : #285193;/*40, 81, 147*/
	--text-blue-s : rgba(22, 42, 74, 0.5);/*#162a4a*/
	--text-blue-h : #567cba;/*86, 124, 186*/
	--ttl-blue : #2f4b79;/*47, 75, 121*/
	--ttl-white-blue : #d4ecff;/*212, 236, 255*/
	
	--main-blue : #3165b7;/*49, 101, 183*/
	--main-blue-s : rgba(26, 60, 115, 0.5);/*#1a3c73*/
	--main-blue-h : #5885cc;/*88, 133, 204*/
	--sub-blue : #3f9dd5;/*63, 157, 213*/
	--sub-blue-s : rgba(49, 137, 189, 0.5);/*#3189bd*/
	--sub-blue-h : #6dc3f7;/*109, 195, 247*/
	--pale-blue : #3f79d5;/*63, 121, 213*/
	--white-blue : #e5f0fa;/*229, 240, 250*/
	
	--cont-blue : #cfe6f4;/*207, 230, 244*/
	--result-blue : #e2eafc;/*226, 234, 252*/
	
	--table-blue01 : #6594dd;/*101, 148, 221*/
	--table-blue02 : #65b1dd;/*101, 177, 221*/
	--list-blue01 : #d5e9fc;/*213, 233, 252*/
	--list-blue02 : #e2eafc;/*226, 234, 252*/
	--diary-input01 : rgba(213, 233, 252, 0.6);
	--diary-input02 : rgba(226, 234, 252, 0.6);
	
	--line-blue01 : #4367a1;/*67, 103, 161*/
	--line-blue02 : #17438a;/*23, 67, 138*/
	
	--bg-blue : #f5f9fd;/*245, 249, 253*/
	--bg-blue-h : #ebf4fc;/*235, 244, 252*/
	
	--search-green : #41a39d;/*65, 163, 157*/
	--search-green-s : rgba(43, 135, 130, 0.5);/*#2b8782*/
	--search-green-h : #49bab3;/*73, 186, 179*/
	--trash-red : #e54c38;/*229, 76, 56*/
	--trash-red-s : rgba(184, 23, 2, 0.5);/*#b81702*/
	--trash-red-h : #fc5e49;/*252, 94, 73*/
	--hover-orange : #ffa70d;/*255, 167, 13*/

	--main-grad : linear-gradient(to bottom, rgba(40, 114, 173, 0) 80%, rgb(40, 114, 173) 100%);
	
	/*border-radius*/
	--round-min : 5px;
	--round-mid : 10px;
	
	/*opacity*/
	--opacity-normal : 0.6;
	
	/*transition*/
	--trans-normal : 0.2s;
	--trans-btn : 0.4s;
	--trans-slow: 0.7s;
	
	/*height*/
	--input-hei : 30px; 
	
	/*padding*/
	--body-pad : 15px;
	--inner-pad : 15px;
	
	/*margin*/
	--sec-mar : 20px;
	--btn-mar : 20px;
	--inner-mar : 15px;
	--table-mar : 10px;
	
}

/*-----all-page-----*/
html{height: 100%; width: 100%; font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6;}
body{width: 100%; font-optical-sizing: auto; font-style: normal; color: var(--text-black); background-color: var(--bg-blue); padding: var(--body-pad); margin: 0; position: static;}

html.modal-open, body.modal-open{overflow:hidden; height: 100%;}
a{text-decoration: none;}
input,textarea,select{font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 400; color: var(--text-black);}
svg{width: 105%;}

.bg-circle{width: 100%; height: 100%; position: fixed; overflow: hidden; bottom: 0; left: 0;}
.bg-circle::before {content: ""; display: block; min-width: 720px; width: 50vw; max-width: 900px; aspect-ratio: 1/1; background-image: url("../images/bg-circle.svg"); background-size: cover; position: absolute; bottom: 0; right: 0; opacity: 0.1; transform: translate(17%, 38%); z-index: 2;
}

.page-flex{min-height: calc(100vh - 72px); display: flex; justify-content: flex-end;}
.menu-close .page-flex{min-height: unset;}
main.in-page{width: calc(100% - 235px); margin-top: -42px; transition: all var(--trans-slow);}
.menu-close main.in-page{width: 100%; margin-top: 5px; transition: all var(--trans-slow);}

main.in-page section:first-of-type{margin-top: 11.5px;}
main.in-page section:not(:first-of-type), #result.check-result .c-result-wrapper:not(:first-of-type){margin-top: var(--sec-mar);}

/*-----header-----*/
.leftBox{width: 220px; height: 32px; display: flex; align-items: center; justify-content: space-between; position: fixed; top: var(--body-pad); left: var(--body-pad); z-index: 9999;}
.menu-close .leftBox{position: static;}
.leftBox .logo{width: 170px;}
.leftBox .icon{width: 25px; height: 25px; cursor: pointer;}
.leftBox .icon img{width: 100%; transition: all var(--trans-normal);}
.menu-close header .leftBox .icon img{transform: rotate(180deg); transition: all var(--trans-normal);}

header .logBox{height: 100%; display: flex; border-radius: var(--round-mid); color: var(--main-blue); background-color: var(--bg-blue); position: static; z-index: 1000;}

header .logBox .idCase{display: flex; align-items: center; margin-right: 15px;}
header .logBox .idCase .icon{width: 25px; height: 25px; margin-right: 8px;}
header .logBox .idCase .name{min-width: 120px; font-size: 16px; font-weight: 500;}
header .logBox .idCase svg{fill: var(--main-blue);}

header .logBox .logBtn{display: flex; align-items: center; color: var(--bg-blue); background-color: var(--main-blue); border-bottom: 3px solid var(--main-blue-s); border-radius: var(--round-min); padding: 1px 17px; transition: all var(--trans-normal);}
header .logBox .logBtn p{margin-top: 2px;}
header .logBox .logBtn .icon{width: 20px; height: 20px; margin-left: 5px;}
header .logBox .logBtn svg{fill: var(--bg-blue);}
header .logBox .logBtn:hover{color: var(--hover-orange); transition: all var(--trans-normal);}
header .logBox .logBtn:hover svg{fill: var(--hover-orange); transition: all var(--trans-btn);}
header .logBox .logBtn:active{border-bottom: none; transition: all var(--trans-btn);}

/*-----side-menu-----*/
.side-menu-wrapper{position: fixed; top: 57px; left: var(--body-pad);}
.side-menu{width: 220px; height: calc(100vh - 72px); background-color: var(--text-blue); border-radius: var(--round-mid);  margin-right: 15px; position: relative; overflow: hidden; transition: width var(--trans-normal) ease, opacity var(--trans-slow) ease, transform var(--trans-slow) ease, margin var(--trans-slow) ease;}
.menu-close .side-menu{width: 0; opacity: 0; margin-right: 0; transform: translateX(-100%); transition: width var(--trans-slow) ease, opacity var(--trans-normal) ease, transform var(--trans-normal) ease, margin var(--trans-normal) ease;}
.side-menu::before{content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: var(--round-mid);
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2872ad+80,2872ad+100&0+80,1+100 */
  background: var(--main-grad);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.side-menu::after {content: ""; display: block; width: 100%; aspect-ratio: 1/1; background-image: url("../images/bg-bearing.png"); background-size: 100%; position: absolute; bottom: 0; right: 0; opacity: 0.1; transform: translate(17%, 14%);}
.side-menu .menu-wrapper{height: 100%; border-radius: var(--round-mid); padding: 20px 0 20px 25px; position: relative; overflow: auto; direction: rtl;}

.side-menu .menuBox {padding-top: 15px; direction: ltr;}
.side-menu .menuBox:first-of-type {padding-top: 0;}

.side-menu .menu-ttl{display: flex; align-items: center; color: var(--ttl-white-blue); margin-bottom: 0.2em;}
.side-menu .menu-ttl .title{font-size: 20px; font-weight: 500;}
.side-menu .icon{width: 25px; height: 25px;  margin: 2px 10px 0 0;}
.side-menu .icon svg{fill: var(--ttl-white-blue);}

.side-menu .menuBox .menuList {position: relative; z-index: 10; padding-left: 20px; padding-bottom: 15px;}
.side-menu .menuBox .menuList::before, .side-menu .menuBox .menuList::after {content: ""; display: block; width: calc(100% - 25px); height: 1px; position: absolute; left: 0;}
.side-menu .menuBox .menuList::before {background: var(--line-blue01); bottom: 0;}
.side-menu .menuBox .menuList::after {background: var(--line-blue02); bottom: 1px;}

.side-menu .menuBox .menuList .menu {height: 35px; position: relative; padding-left: 17px; margin-bottom: 0.2em;}
.side-menu .menuBox .menuList .menu:last-of-type{margin-bottom: 0;}
.side-menu .menuBox .menuList .menu a {display: flex; align-items: center; color: var(--white); width: 100%; height: 100%; transition: all var(--trans-normal);}
.menuBox .menuList .menu a:hover {color: var(--hover-orange); transition: all var(--trans-normal);}
.side-menu .menuBox .menuList .menu.current a {color: var(--text-blue); font-weight: 500; pointer-events: none;}
.side-menu .menuBox .menuList .menu.current a::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: var(--bg-blue);}