/* Common
---------------------------------------------------------- */
body {background: #eefff5;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  color:#333;
}

main{
  width:100%;
  min-width:1080px;
  background: #fff9ec;
  padding:50px;
  }



/* layout
---------------------------------------------------------- */
.container {
  margin: auto;
  width:980px;
  background: #003c71;
  border-radius: 10px;
  padding:45px 30px 40px;
  position: relative;
  margin-bottom:50px;
}

.container::before {
  content: "";
  border-radius: 5px;
  background: #a3a3a3;
  position: absolute;
  left: 0;
  right:0;
  margin: auto;
  top: 24px;
  width: 180px;
  height: 30px;
}

.container__inner {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  position: relative;
  padding:35px 60px;
}

.container__inner::before {
  content: "";
  display: block;
  width:128px;
  height:26px;
  background: url("/hae-info/patient/haenisshi/images/parts.png");
  background-size: 128px 26px;
  position: absolute;
  left: 0;
  right:0;  
  top: -16px;
  margin: auto;
}

footer {
  margin: auto;
  width:980px;
  display: flex;
  justify-content: space-between;
}

footer > img {
  width: 122px;
  /* width:233px;
  height:26px; */
}

/* decoration
---------------------------------------------------------- */

/* title */
h1 {
  min-height: 89px;
  font-size: 3.6rem;
  color: #003c71;
  margin:0 auto 25px auto;
  width: calc(103px + 8em);

}

h1 > img {
  width: 88px;
  height:89px;
  float: left;
  margin-right:15px;
}

h1 > span {
  display: block;
  font-size: 2.4rem;}

/* head */
h2 {
  font-size: 2.4rem;
  color: #003c71;
  font-weight: bold;
  margin:50px 0 30px;
}

/* important */
/* important */
.important {
  border-top:2px solid #003c71;
  display: flex;
  font-size:1.6rem;
  margin-bottom:40px;
  padding:15px 0 0 80px; 
  position: relative;}

.important__icon {
  position: absolute;
  line-height: 0;
  left:0;
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color:#fff;
  border-radius: 3px;
  background: #f20a26;
  width: 70px;
  height: 26px;
}

.important p {
  font-size: 1.6rem;
  min-height: 27px;
  display: flex;
  align-items: center;
}

/* menu */
ul.menu {
  width:564px;
  display: flex;
  justify-content:space-between;
  margin: auto;
}

ul.menu li {display: flex;}
ul.menu li a {
  font-size:1.8rem;
  text-decoration: none;
  font-weight: bold;
  color: #1f2a66;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 2px;
  border-color: #003c71;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  width: 266px;  
  min-height: 44px;
  height: auto;
  transition: 0.3s;
  
}
ul.menu li a.hover {
  color: #fff;
  border-color: #1f2a66;
  background: #1f2a66;
}

/* go top */
#page_top {
  z-index: 10;
  display: block;
  border-radius: 50%;
  background-color: rgb(0, 60, 117);
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.34);
  position:fixed;
  right: 25px;
  bottom: 90px;
  width: 63px;
  height: 63px;
  cursor: pointer;
  border: 2px solid #fff;
}
#page_top::before {
  content: '';
  width: 15px;
  height: 15px;
  border: 3px solid #fff;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
  transform-origin: top right;
  position: absolute;
  right: 50%;
  top: calc(50% - 7.5px);
}

#page_top.hover {opacity: 0.8;}



/* FAQ accordion
---------------------------------------------------------- */

/* question */
dt.q{
  font-size:1.8rem;
  display: flex;
  align-items: center;
  background:#eee;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
  padding:5px 40px 5px 55px;
  width: 100%;
  min-height: 45px;
  position: relative;
  margin-bottom:30px;
  transition: 0.3s;
}

.q__icon {
  display: flex;
  justify-content: center;
  padding-top: 19px;
  line-height: 0;
  font-size:2.8rem;
  color:#fff;
  position: absolute;
  top:0;
  left:0;
  width:45px;
  min-height:45px;
  height: 100%;
  background: #003c71;
}

dt.q.hover {
  opacity: 0.8;
  color: #003c71;}


.q::before{
  content: "";
  background: #003c71;
  position: absolute;
  top:0;
  bottom: 0;
  right:20px;
  margin: auto;
  width: 14px;
  height: 2px;
  display: block;
  transition: 0.5s;
}
.q::after{
  content: "";
  background: #003c71;
  position: absolute;
  top:0;
  bottom: 0;
  right:20px;
  margin: auto;
  width: 14px;
  height: 2px;
  display: block;
  transform: rotate(-90deg);
  transition: 0.5s;
}

.q.open::after{
  content: "";
  background: #007d30;
  position: absolute;
  top:0;
  bottom: 0;
  right:20px;
  margin: auto;
  width: 14px;
  height: 2px;
  display: block;
  transform: rotate(0deg);
  transition: 0.5s;
}


/* answer */
.a {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 0 0 40px 0;}

.a p {
  font-size: 1.8rem;
  padding: 0 0 5px 5px;
  background-image: linear-gradient(90deg, transparent 30%, #fff 30%, #fff 100%, #ffF 100%), linear-gradient(180deg, transparent 0%, transparent 97%, #777777 97%, #777777 100%);
  background-size: 4px 100%,100% 1.667em;
  line-height: 1.667;
  width: calc(100% - 45px);
}

.a__icon {
  display: flex;
  justify-content: center;
  line-height: 1;
  font-size: 2.8rem;
  color: #ff7920;
  left: 0;
  min-height: 45px;
  height: 100%;
  width: 45px;
  }