@charset "utf-8";


#f_masui { padding-bottom: 155px; }

#appeal, #outline, #member .post { font-size: 16px; }

#appeal { position: relative; padding-bottom: 15px; background: #ebf6dd url('../images/bg_line.png') repeat 0 0; }
#appeal:before { content: ''; display: block; width: 100%; height: 62px; background: url('../images/wakame_left.png') no-repeat center top; background-size: cover; }
#appeal h2, #point h3, #point li { font-weight: bold; }
#appeal h2 { color: #fff; font-size: 28px; text-align: center; line-height: 68px; position: relative; z-index: 2; margin: 0 auto; width: 300px; height: 68px; background: url('../images/nutrient_name_bg.svg') no-repeat center; background-size: contain; }
#appeal .inner { position: relative; z-index: 1; margin: -34px 15px 0; padding: 50px 0 30px 0; background-color: #fff; border: 3px solid #2e9648; border-radius: 33px; }
#appeal .inner > p, #appeal .inner > figure { display: inline-block; }
#appeal .inner > p { vertical-align: middle; margin-right: 20px; margin-left: 30px; width: 560px; }
#appeal .marker1 { background: #fff999; }
#appeal img { border-radius: 33px; }
#point { margin: 25px 75px 0; padding: 15px 50px 30px; background-color: #f2fedc; border: 3px solid #2e9648; border-radius: 33px; }
#point h3 { color: #2e9648; font-size: 18px; text-align: center; }
#point h3:after { content: ''; display: block; margin: 0 auto 22px; width: 177px; height: 11px; background: url('../images/dot_line.svg') no-repeat center; background-size: contain; }
#point li { color: #18794b; position: relative; padding-left: 13px; }
#point li:before { content: ''; position: absolute; top: 3px; left: -13px; width: 16px; height: 16px; background-color: #ffca3b; border-radius: 100%; }
#point li + li { margin-top: 1em; }

#f_masui nav { padding: 122px 10px 44px; background: #cbfaf8 url('../images/bg01.png'); }
#f_masui nav ul { display: flex; justify-content: space-between; gap: 0 10px; }
#f_masui nav li { position: relative; z-index: 1; flex: 1; }
#f_masui nav li a { font-weight: bold; font-size: 20px; text-align: center; position: relative; display: block; padding-top: 135px; padding-bottom: 30px; width: 100%; background-color: #fff; border-width: 5px; border-style: solid; border-radius: 15px; }
#f_masui nav li:nth-of-type(1) a { color: #12ba51; border-color: #b7dc88; }
#f_masui nav li:nth-of-type(2) a { color: #498eda; border-color: #aae0fe; }
#f_masui nav li:nth-of-type(3) a { color: #c17cd3; border-color: #e1c0ea; }
#f_masui nav li:nth-of-type(4) a { color: #fc865a; border-color: #fdb398; }
#f_masui nav li a:before { content: ''; position: absolute; top: -80px; left: 50%; display: block; width: 188px; height: 188px; background-repeat: no-repeat; background-size: contain; transform: translateX(-50%) }
#f_masui nav li:nth-of-type(1) a:before { background-image: url('../images/f_masui_ic_1.png'); }
#f_masui nav li:nth-of-type(2) a:before { background-image: url('../images/f_masui_ic_2.png'); }
#f_masui nav li:nth-of-type(3) a:before { background-image: url('../images/f_masui_ic_3.png'); }
#f_masui nav li:nth-of-type(4) a:before { background-image: url('../images/f_masui_ic_4.png'); }
#f_masui nav li a:after { content: ''; position: absolute; right: -10px; bottom: -10px; z-index: -1; width: 100%; height: 100%; border-radius: 15px; }
#f_masui nav li:nth-of-type(1) a:after { background-color: rgba(18, 186, 81, 0.2); }
#f_masui nav li:nth-of-type(2) a:after { background-color: rgba(73, 142, 218, 0.1); }
#f_masui nav li:nth-of-type(3) a:after { background-color: rgba(193, 124, 211, 0.2); }
#f_masui nav li:nth-of-type(4) a:after { background-color: rgba(252, 134, 90, 0.2); }

#f_masui .box { margin-top: 80px; background-color: #fff; }
#f_masui .box h2 { color: #fff; font-weight: bold; font-size: 28px; text-align: center; padding-bottom: 5px; }
#f_masui .box#outline h2 { background-color: #12ba51; }
#f_masui .box#member h2 { background-color: #498eda; }
#f_masui .box#video h2 { background-color: #c17cd3; }
#f_masui .box#job h2 { background-color: #fc865a; }
#f_masui .box h2:before { content: ''; display: block; margin-bottom: 5px; width: 100%; height: 20px; background-size: 28px 100%; }
#f_masui .box#outline h2:before { background-image: -webkit-gradient(radial, 50% 100%, 10, 50% 100%, 20, from(#12ba51), color-stop(0.49, #12ba51), color-stop(0.51, #fff), to(white)); background-image: -moz-radial-gradient(50% 100%, circle, #12ba51 10px, #12ba51 49%, #fff 51%, #fff 20px); }
#f_masui .box#member h2:before { background-image: -webkit-gradient(radial, 50% 100%, 10, 50% 100%, 20, from(#498eda), color-stop(0.49, #498eda), color-stop(0.51, #fff), to(white)); background-image: -moz-radial-gradient(50% 100%, circle, #498eda 10px, #498eda 49%, #fff 51%, #fff 20px); }
#f_masui .box#video h2:before { background-image: -webkit-gradient(radial, 50% 100%, 10, 50% 100%, 20, from(#c17cd3), color-stop(0.49, #c17cd3), color-stop(0.51, #fff), to(white)); background-image: -moz-radial-gradient(50% 100%, circle, #c17cd3 10px, #c17cd3 49%, #fff 51%, #fff 20px); }
#f_masui .box#job h2:before { background-image: -webkit-gradient(radial, 50% 100%, 10, 50% 100%, 20, from(#fc865a), color-stop(0.49, #fc865a), color-stop(0.51, #fff), to(white)); background-image: -moz-radial-gradient(50% 100%, circle, #fc865a 10px, #fc865a 49%, #fff 51%, #fff 20px); }
#f_masui .bor_box { padding-bottom: 50px; border-width: 3px; border-style: solid; border-top: 0; border-radius: 0 0 13px 13px; }
#outline .bor_box { padding-top: 30px; padding-right: 50px; padding-left: 50px; border-color: #12ba51; background-color: rgba(18, 186, 81, 0.11); }
#member .bor_box { padding-top: 55px; padding-right: 11px; padding-left: 9px; border-color: #498eda; background-color: rgba(73, 142, 218, 0.11); }
#video .bor_box { padding-top: 30px; border-color: #c17cd3; background-color: rgba(193, 124, 211, 0.11); }
#job .bor_box { padding-top: 1px; padding-left: 5px; border-color: #fc865a; background-color: rgba(252, 134, 90, 0.05); }

#outline .hospital, #outline .team { display: flex; column-gap: 35px; }
#outline h3 { margin-bottom: 15px; }
#outline h3 .ttl { color: #12ba51; font-weight: bold; font-size: 20px; text-indent: 3px; letter-spacing: 3px; display: block; margin: 0 auto; padding: 3.33px 30px; width: fit-content; background-color: #fff; border: 3px solid #12ba51; border-radius: 99px; }
#outline h3 .ttl + .ttl { margin-top: 3.33px; }
#outline img:not(.graph) { border-radius: 33px; }
#outline .right { flex: 1; margin-top: 10px; }
#outline .balloon { font-weight: bold; font-size: 18px; letter-spacing: 10px; position: relative; display: inline; padding: 7px 35px 7px calc(35px + 10px); background-color: #ffca3b; border-radius: 99px; }
#outline .balloon:before { content: ''; position: absolute; top: calc(100% - 3px); left: 50%; display: block; width: 44px; height: 24px; background-color: #ffca3b; mask-image: url('../images/ic-sb-before.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; transform: translate(-50%, 0) translateX(-10px); }
#outline .hospital .profile { padding: 25px 0; background-color: #fff; border-radius: 22px; }
#outline dl { display: flex; flex-wrap: wrap; }
#outline .hospital dl { margin-left: 30px; }
#outline dt, #outline dd { font-weight: bold; }
#outline .hospital dt, #outline .hospital dd { margin-top: 8px; }
#outline .hospital dt { width: 22%; }
#outline .hospital dd { width: 78%; padding-top: 5px; padding-left: 22px; }
#outline dt .lbl, #outline dd .em, #outline .team dt { text-indent: 2px; letter-spacing: 2px; }
#outline .hospital dt .lbl { text-align: center; display: block; padding: 3px 0; width: 100%; background-color: #ede7d5; border-radius: 99px; }
#outline dd .em { font-size: 18px; }
#outline .hospital ul { margin-top: 25px; margin-left: 75px; }
#outline .hospital li:before { vertical-align: middle; content: ''; display: inline-block; margin-right: 11px; width: 18px; height: 18px; border: 6px solid #ffca3b; border-radius: 100%; }
#outline .hospital li + li { margin-top: 2px; }
#outline .marker2 { background: linear-gradient(transparent 70%, #b7dc88 70%); }
#outline .point, #outline .team { margin-top: 70px; }
#outline .point ol { display: flex; column-gap: 10px; padding: 5px; background: url('../images/bg_comment.png') repeat center center; border-radius: 22px; border: 2px dotted #167549; }
#outline .point li { flex: 1; padding: 18px 12px 22px 18px; background-color: #fff; border-radius: 20px; }
#outline .point h4 { text-indent: -35px; font-weight: bold; line-height: 1; padding-left: 35px; height: 75px; }
#outline .point h4:before { vertical-align: middle; content: ''; display: inline-block; margin-right: 5px; width: 30px; height: 39px; background-size: contain; }
#outline .point li:nth-of-type(1) h4:before { background-image: url('../images/number01.svg'); }
#outline .point li:nth-of-type(2) h4:before { background-image: url('../images/number02.svg'); }
#outline .point li:nth-of-type(3) h4:before { background-image: url('../images/number03.svg'); }
#outline .team dl { border-top: 4px dotted #12945e; }
#outline .team dt, #outline .team dd { padding-top: 15px; padding-bottom: 10px; }
#outline .team dt { padding-left: 50px; width: 65%; }
#outline .team dd { padding-right: 55px; width: 35%; }
#outline .team dd, #outline .team p { text-align: right; }
#outline .team p { padding: 10px 55px 20px 0; border-top: 1px dotted #167549; }
#outline .team p:last-of-type { margin-bottom: 25px; border-bottom: 4px dotted #12945e; }
#outline .team h5 { color: #0a7d4a; font-weight: bold; margin-top: 30px; margin-left: 30px; padding: 2.55px 25px; width: fit-content; border: 4px dotted #0a7d4a; border-radius: 99px; }
#outline .team .graph { margin-left: 50px; }
#outline .team .graph:last-of-type { margin-top: -12px; }

#member .list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px 25px; }
#member .list > li { text-align: center; position: relative; }
#member .list > li img { border-width: 5px; border-style: solid; border-radius: 50%; }
#member .list > li:nth-of-type(1) img { border-color: #44aff6; }
#member .list > li:nth-of-type(2) img { border-color: #3fc9ac; }
#member .list > li:nth-of-type(3) img { border-color: #fda146; }
#member .list > li:nth-of-type(4) img { border-color: #ff82aa; }
#member .list > li:nth-of-type(5) img { border-color: #7777ee; }
#member .list > li:nth-of-type(6) img { border-color: #32c747; }
#member .post { color: #fff; font-weight: bold; margin-inline: auto; margin-top: -5px; padding: 5px 30px; width: fit-content; border-radius: 99px; }
#member .list > li:nth-of-type(1) .post { background-color: #44aff6; }
#member .list > li:nth-of-type(2) .post { background-color: #3fc9ac; }
#member .list > li:nth-of-type(3) .post { background-color: #fda146; }
#member .list > li:nth-of-type(4) .post { background-color: #ff82aa; }
#member .list > li:nth-of-type(5) .post { background-color: #7777ee; }
#member .list > li:nth-of-type(6) .post { background-color: #32c747; }
#member .name { font-weight: bold; font-size: 18px; line-height: 1.222; display: block; margin-top: 12px; }
#member dl { text-align: left; display: flex; flex-wrap: wrap; }
#member dt { width: 25%; }
#member dd { width: 75%; padding-top: 2px; padding-left: 5px; }
#member dt:nth-of-type(1), #member dd:nth-of-type(1) { margin-top: 15px; }
#member dt:nth-of-type(2), #member dd:nth-of-type(2) { margin-top: 8px; }
#member dt .lbl { color: #5395d0; text-align: center; display: block; padding: 2px 0; width: 100%; background-color: #fff; border-radius: 99px; }
#member p { color: #0074bd; position: absolute; top: -10px; right: 30px; writing-mode: vertical-rl; }
#member p:before, #member p:after { content: ''; position: absolute; left: 3px; width: 1px; height: 46px; border-left: 3px dotted #0074bd; }
#member p:before { top: -35px; transform: rotate(50deg); }
#member p:after { bottom: -35px; transform: rotate(310deg); }

#video h3, #video iframe { margin-inline: auto; }
#video h3 { color: #de697c; font-weight: bold; font-size: 20px; text-shadow: #fff 0.075em 0, #fff -0.075em 0, #fff 0 -0.075em, #fff 0 0.075em, #fff 0.075em 0.075em, #fff -0.075em 0.075em, #fff 0.075em -0.075em, #fff -0.075em -0.075em, #fff 0.025em 0.075em, #fff -0.025em 0.075em, #fff 0.025em -0.075em, #fff -0.025em -0.075em, #fff 0.075em 0.025em, #fff -0.075em 0.025em, #fff 0.075em -0.025em, #fff -0.075em -0.025em, rgba(0, 0, 0, 0.55) 0.1125em 0.1em 0.25em; position: relative; margin-bottom: 20px; padding: 5px 40px 15px 30px; width: fit-content; background-color: #fff; border-radius: 99px; }
#video h3:before { content: ''; position: absolute; top: -6px; left: -6px; display: block; width: calc(100% - 3px); height: calc(100% - 3px); border: 2px solid #de697c; border-radius: 99px; }
#video h3:not(:first-of-type) { margin-top: 50px; }
#video iframe { display: block; }
#video iframe:nth-of-type(3) { margin-top: 15px; }