@charset "UTF-8";
@media (max-width: 374.9px) {
  html {
    font-size: 2.6666666667vw;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 10px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: min(8px + 4 * (100vw - 768px) / 598, 10px);
  }
}
@media (min-width: 1366px) {
  html {
    font-size: 10px;
  }
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #000;
  line-height: 1.8;
  font-size: 1.5rem;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
    color: #333;
  }
}

.container {
  display: flex;
  flex-direction: column;
  min-height: inherit;
}
.container main {
  margin-top: 4.8rem;
}
@media screen and (min-width: 768px) {
  .container main {
    margin-top: 8rem;
  }
}
.container .footer {
  margin-top: auto;
}

a {
  text-decoration: none;
  color: inherit;
}
@media screen and (min-width: 768px) {
  a {
    transition: opacity 0.3s;
  }
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}
a,
span {
  display: inline-block;
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

.pc-only {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc-only {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

.inner {
  max-width: calc(480px + 8vw);
  width: 100%;
  padding-inline: 4vw;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .inner {
    max-width: calc(800px + 4.8rem);
  }
}

.inner._narrow {
  max-width: calc(480px + 8vw);
}
@media screen and (min-width: 768px) {
  .inner._narrow {
    max-width: calc(680px + 4.8rem);
  }
}

.page-padding {
  padding-block: 9.6rem;
}
@media screen and (min-width: 768px) {
  .page-padding {
    padding-block: 12rem;
  }
}

.mt16-24 {
  margin-top: 1.6rem;
}
@media screen and (min-width: 768px) {
  .mt16-24 {
    margin-top: 2.4rem;
  }
}
.mt24-32 {
  margin-top: 2.4rem;
}
@media screen and (min-width: 768px) {
  .mt24-32 {
    margin-top: 3.2rem;
  }
}
.mt32-48 {
  margin-top: 3.2rem;
}
@media screen and (min-width: 768px) {
  .mt32-48 {
    margin-top: 4.8rem;
  }
}
.mt48-64 {
  margin-top: 4.8rem;
}
@media screen and (min-width: 768px) {
  .mt48-64 {
    margin-top: 6.4rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul,
ol,
button {
  padding: 0;
}

*:not(dialog) {
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  line-break: strict; /* 日本語の禁則処理を厳格に適用 */
  tab-size: 4;
  overflow-x: clip;
}
html:has(:modal[open]) {
  overflow: hidden;
}

body {
  overflow: inherit;
  min-height: 100vh;
}

ul,
ol,
li {
  list-style: none;
}

address,
strong,
em {
  font-style: normal;
}

svg,
img,
video,
audio,
iframe,
object,
canvas {
  vertical-align: middle;
  max-inline-size: 100%;
}

img,
video {
  block-size: auto;
}

iframe {
  border: none;
}

img {
  image-rendering: auto;
  width: 100%;
  height: auto;
}

input,
button,
textarea,
select,
::file-selector-button {
  font: inherit;
  color: inherit;
  font-size: max(16px, 1em);
}

textarea {
  resize: block;
  max-inline-size: 100%;
}

input[type=checkbox],
input[type=radio] {
  opacity: 0;
  position: absolute;
}

input[type=submit],
input[type=button],
label[for],
select,
summary {
  cursor: pointer;
}

button,
[role=tab],
[role=button],
[role=option],
[type=button],
[type=reset],
[type=submit],
::file-selector-button {
  cursor: pointer;
  touch-action: manipulation;
}

:disabled {
  cursor: not-allowed;
}

select::-ms-expand {
  display: none;
}

button {
  border: none;
  background-color: transparent;
}

.accordion details {
  overflow: hidden;
}

.accordion details:not(:first-child) {
  margin-top: 4rem;
}

.accordion summary {
  list-style: none;
  border: 1px solid #CECFCF;
  font-size: 2rem;
  font-weight: 700;
  padding: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s;
}
.accordion summary::after {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  transition: transform 0.4s ease;
  margin-right: 1rem;
}
.accordion summary:hover {
  background-color: rgba(206, 207, 207, 0.1);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion details[open] summary::after {
  transform: rotate(-135deg);
}

.accordion__title {
  margin-bottom: 3rem;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

details .content {
  background-color: #FFF;
  overflow: hidden;
  will-change: height, opacity;
  transform: translateZ(0);
}

details .content__inner {
  width: 100%;
  padding: 2rem;
}

.btn-to-top {
  width: 3.6rem;
  height: 3.6rem;
  background-color: #003d4a;
  background: linear-gradient(124deg, #006f82 0%, #003d4a 32%, #003d4a 100%);
  padding: 1rem;
  border-radius: 50%;
  position: fixed;
  bottom: 8rem;
  right: 3rem;
  z-index: 100;
  border: 1px solid #FFF;
  transition: opacity 0.3s ease-in 0s;
}
@media screen and (min-width: 768px) {
  .btn-to-top {
    width: 4.8rem;
    height: 4.8rem;
    bottom: 9.6rem;
    right: 7.2rem;
  }
}

.btn-to-top::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-bottom: 0.4rem solid #FFF;
  border-right: 0.4rem solid #FFF;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -30%) rotate(-135deg);
  transition: border-color 0.3s ease-in 0s;
}
@media screen and (min-width: 768px) {
  .btn-to-top::before {
    width: 1.6rem;
    height: 1.6rem;
  }
}

.btn {
  text-align: center;
  padding: 1.6rem;
  border-radius: 50vh;
  width: 28rem;
  position: relative;
  text-box-trim: trim-both;
}

.btn._primary {
  color: #FFF;
  background: linear-gradient(124deg, #006f82 0%, #003d4a 32%, #003d4a 100%);
  border: 1px solid #003d4a;
}
@media screen and (min-width: 768px) {
  .btn._primary {
    transition: color 0.3s, background 0.3s;
  }
}

@media (any-hover: hover) {
  .btn._primary:hover {
    color: #333;
    background: #FFF;
    background-image: none;
    opacity: 1;
  }
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  top: 50%;
}

.btn::before {
  width: 0.8rem;
  height: 0.8rem;
  transform: translateY(-50%) rotate(-45deg);
  right: 2.7rem;
  border-bottom: 2px solid #003d4a;
  border-right: 2px solid #003d4a;
  transition: border-color 0.3s;
  z-index: 3;
}

.btn::after {
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  right: 2rem;
  background-color: #FFF;
  border-radius: 50%;
  transition: background-color 0.3s;
  z-index: 2;
}

@media (any-hover: hover) {
  .btn:hover::before {
    border-color: #FFF;
  }
  .btn:hover::after {
    background-color: #003d4a;
  }
}
.footer {
  background-color: #333;
  background: linear-gradient(124deg, #333 0%, #000 32%, #000 100%);
  padding-block: 2rem;
}

.footer__sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.footer__sns a {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0.8rem;
  transition: scale 0.3s;
}

@media (any-hover: hover) {
  .footer__sns a:hover {
    opacity: 1;
    scale: 1.2;
  }
}
.footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
}

.footer__nav-item a {
  color: #FFF;
}

.footer__copy {
  text-align: center;
  color: #FFF;
  font-size: 1.2rem;
}

.gnav {
  width: 100%;
  background-color: #CECFCF;
  padding: 2rem;
  margin-top: 4.8rem;
  height: 100%;
  height: 100svh;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 110;
}
@media screen and (min-width: 768px) {
  .gnav {
    width: auto;
    background-color: transparent;
    position: static;
    margin-top: unset;
    padding: unset;
    height: auto;
    opacity: 1;
    pointer-events: visible;
  }
}

.gnav.is-active {
  opacity: 1;
  pointer-events: visible;
  transition: opacity 0.3s;
}

body.is-active {
  position: fixed;
  inset: 0;
}

.gnav__list {
  max-width: 48rem;
  width: 80%;
  margin-inline: auto;
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .gnav__list {
    width: 100%;
    max-width: none;
    display: flex;
    gap: 2rem;
    margin-top: unset;
  }
}

.gnav__item {
  border-bottom: 0.4rem solid #000;
}
@media screen and (min-width: 768px) {
  .gnav__item {
    border-bottom: none;
  }
}

.gnav__item a {
  display: block;
  padding-block: 2em;
  position: relative;
  color: #000;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
  .gnav__item a {
    color: #333;
  }
}

@media (any-hover: hover) {
  .gnav__item a:hover {
    opacity: 1;
  }
}
.gnav__link-text {
  display: inline-block;
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
  transition: text-shadow 0.3s;
}
@media screen and (min-width: 768px) {
  .gnav__link-text {
    text-shadow: 0 -1.5em 0 #333, 0 0 0 #333;
  }
}

@media (any-hover: hover) {
  .gnav__item a:hover .gnav__link-text {
    text-shadow: 0 0 0 #000, 0 1.5em 0 #000;
  }
}
@media screen and (any-hover: hover) and (min-width: 768px) {
  .gnav__item a:hover .gnav__link-text {
    text-shadow: 0 0 0 #333, 0 1.5em 0 #333;
  }
}
.gnav__sns {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .gnav__sns {
    display: none;
  }
}

.gnav__sns a {
  width: 4.4rem;
  height: 4.4rem;
  filter: invert(1);
  padding: 2em 0.6em;
}

.footer .gnav__list {
  justify-content: center;
}
.footer .gnav__item {
  border: none;
}
.footer .gnav__item a {
  color: #FFF;
}
.footer .gnav__link-text {
  text-shadow: 0 -1.5em 0 #FFF, 0 0 0 #FFF;
}
@media (any-hover: hover) {
  .footer .gnav__item a:hover .gnav__link-text {
    text-shadow: 0 0 0 #FFF, 0 1.5em 0 #FFF;
  }
}
.footer .gnav__sns {
  display: none;
}

.hamburger {
  display: block;
  position: relative;
  z-index: 120;
  width: 3.2rem;
  height: 3.2rem;
}
@media screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

.bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 100%;
  height: 0.4rem;
  background-color: #333;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  backface-visibility: hidden;
}

.bar:nth-of-type(2) {
  margin-top: -1rem;
}
@media screen and (min-width: 768px) {
  .bar:nth-of-type(2) {
    margin-top: -1.4rem;
  }
}

.bar:nth-of-type(3) {
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  .bar:nth-of-type(3) {
    margin-top: 1.4rem;
  }
}

.hamburger.is-active {
  background-color: transparent;
}

.hamburger.is-active .bar {
  margin-top: 0;
}

.hamburger.is-active .bar:nth-of-type(1) {
  width: 0;
}

.hamburger.is-active .bar:nth-of-type(2) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger.is-active .bar:nth-of-type(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 2rem 0.8rem 2rem;
  z-index: 1000;
  background-color: #FFF;
  box-shadow: 0 2rem 4rem rgba(255, 255, 255, 0.8);
  height: 4.8rem;
}
@media screen and (min-width: 768px) {
  .header {
    padding: 2rem;
    height: 8rem;
  }
}

.header.is-up {
  animation: upAnime 0.5s forwards;
}

@keyframes upAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-77px);
  }
}
.header.is-down {
  animation: downAnime 0.5s forwards;
}

@keyframes downAnime {
  from {
    opacity: 0;
    transform: translateY(-77px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.header__logo h1,
.header__logo p {
  width: fit-content;
}

.header__logo a {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.header__logo a img {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}

.header__logo a span {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
  .header__logo a span {
    font-size: 2rem;
  }
}

.heading {
  margin-block: 4em 2em;
  word-break: auto-phrase;
}

h1.heading._page-top,
h2.heading._page-top {
  margin: unset;
}

h1 {
  font-size: 2.8rem;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 3.2rem;
  }
}

h2.heading {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  h2.heading {
    font-size: 2.4rem;
  }
}

h2.heading._normal {
  padding-left: 0.8em;
  position: relative;
}
h2.heading._normal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.8rem;
  height: 100%;
  background: linear-gradient(124deg, #006f82 0%, #003d4a 32%, #003d4a 100%);
}

h3.heading {
  font-size: 1.8rem;
  padding-bottom: 0.4em;
  border-bottom: 0.3rem solid #333;
}
@media screen and (min-width: 768px) {
  h3.heading {
    font-size: 2rem;
    border-width: 0.4rem;
  }
}

.weather__container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .weather__container {
    flex-direction: row;
    gap: 2.4rem;
  }
}

.weather__result {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
@media screen and (min-width: 768px) {
  .weather__result {
    flex-direction: row;
    justify-content: center;
  }
}

.weather__card {
  background-color: #FFF;
  border-radius: 0.8rem;
  padding: 1.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
}
@media screen and (min-width: 768px) {
  .weather__card {
    padding: 2rem;
  }
}

.weather__card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.weather__card-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .weather__card-title {
    font-size: 1.8rem;
  }
}

.weather__card-search-btn {
  background-color: #003d4a;
  color: #FFF;
  border: none;
  border-radius: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 1.2rem;
  transition: background-color 0.3s;
}
@media screen and (min-width: 768px) {
  .weather__card-search-btn {
    padding: 0.6rem 1.2rem;
    font-size: 1.4rem;
  }
}

.weather__card-search-btn:hover {
  background-color: rgba(0, 61, 74, 0.1);
}

.weather__card-content {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.weather__card-icon {
  flex-shrink: 0;
  width: 12.8rem;
}

.weather__card-details {
  flex: 1;
}

.weather__card-desc {
  color: #333;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  .weather__card-desc {
    font-size: 1.8rem;
  }
}

.weather__card-temp {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  margin-top: 0.4rem;
}
@media screen and (min-width: 768px) {
  .weather__card-temp {
    font-size: 2rem;
  }
}

.weather__card-feels,
.weather__card-humidity {
  font-size: 1.4rem;
  color: #707070;
}

.weather__card-form {
  padding-top: 1.6rem;
}

.weather__form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
@media screen and (min-width: 768px) {
  .weather__form {
    flex-direction: row;
    gap: 1.2rem;
  }
}

form.weather__form input {
  flex: 1;
  padding: 0.8rem 1.2rem;
  border: 1px solid #CECFCF;
  border-radius: 0.4rem;
}
form.weather__form input::placeholder {
  color: #707070;
  font-size: 1.4rem;
  opacity: 1;
}

.weather__form button {
  padding: 0.4rem 1.6rem;
  background-color: #003d4a;
  color: #FFF;
  border: 1px solid #003d4a;
  border-radius: 0.4rem;
  transition: background-color 0.3s;
  flex-shrink: 0;
}

.weather__form button:hover {
  background-color: #FFF;
  color: #003d4a;
}

.weather__card._placeholder {
  border: 2px dashed #CECFCF;
  background-color: rgba(206, 207, 207, 0.5);
  font-size: 1.4rem;
}

.weather__card-placeholder-text {
  font-size: 1.4rem;
  color: #707070;
  text-align: center;
  padding: 1.2rem 0;
}

.weather__card._error {
  border: 2px solid #ff6b6b;
  background-color: rgba(255, 107, 107, 0.1);
}

.weather__card._error .weather__card-title {
  color: #ff6b6b;
}

.weather__card-error-text {
  font-size: 1.4rem;
  color: #ff6b6b;
  text-align: center;
  padding: 1.2rem 0;
}

/*
////////////////
form用スタイル
////////////////
*/
.form__list {
  width: 100%;
}
.form__list .form__item {
  display: flex;
  flex-direction: column;
  margin-top: 1.6rem;
}
@media screen and (min-width: 768px) {
  .form__list .form__item {
    flex-direction: row;
    gap: 2.4rem;
    margin-top: 2.4rem;
  }
}
.form__list .form__item dt label {
  font-weight: 700;
}
.form__list .form__item dt label span {
  color: #ff6b6b;
  font-size: 1.2rem;
  display: block;
  line-height: 1;
}
.form__list .form__item dt > input {
  padding: 0.4rem 0.8rem;
}
.form__list .form__item dt {
  width: 100%;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .form__list .form__item dt {
    width: 24%;
    text-align: right;
  }
}
.form__list .form__item dd {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .form__list .form__item dd {
    width: 76%;
  }
}
.form__list .form__textarea {
  padding: 0.4rem 0.8rem;
}
.form__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.form__btn-reset {
  padding: 0;
  border: none;
  background: none;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.portfolio__lead {
  margin-top: 2.4rem;
}
@media screen and (min-width: 768px) {
  .portfolio__lead {
    margin-top: 3.2rem;
  }
}

.portfolio__heading {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .portfolio__heading {
    font-size: 2.2rem;
  }
}

.portfolio__heading .sub {
  font-size: 1.4rem;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
  .portfolio__heading .sub {
    font-size: 1.6rem;
  }
}

.portfolio__lead .attention {
  display: block;
  color: #003d4a;
  font-size: 1.4rem;
  margin-top: 1.6rem;
}
@media screen and (min-width: 768px) {
  .portfolio__lead .attention {
    font-size: 1.6rem;
  }
}

.portfolio__list {
  padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  .portfolio__list {
    padding-bottom: 5.6rem;
  }
}

.portfolio__item {
  display: flex;
  flex-direction: column-reverse;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 4.8rem;
}
@media screen and (min-width: 768px) {
  .portfolio__item {
    gap: 3.2rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 0;
  }
}

@media screen and (min-width: 768px) {
  .portfolio__item._normal {
    flex-direction: row;
  }
}

@media screen and (min-width: 768px) {
  .portfolio__item._reverse {
    flex-direction: row-reverse;
  }
}

.portfolio__body {
  padding-block: 1.6rem;
}
@media screen and (min-width: 768px) {
  .portfolio__body {
    padding: unset;
    width: 56%;
  }
}

.portfolio__desc {
  margin-top: 0.4rem;
}
@media screen and (min-width: 768px) {
  .portfolio__desc {
    margin-top: unset;
  }
}

.portfolio__text span,
.portfolio__desc span {
  display: block;
  font-weight: 700;
  padding-bottom: 0.4rem;
}

.portfolio__text {
  margin-top: 1.6rem;
}

.portfolio__img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .portfolio__img {
    width: 44%;
    transition: transform 0.3s ease-in 0s, box-shadow 0.3s ease-in 0s;
    border-radius: 0.4rem;
    overflow: hidden;
  }
}

.portfolio__img img {
  aspect-ratio: 400/240;
  width: 100%;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .portfolio__img:hover {
    transform: scale(1.01);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    filter: grayscale(0);
  }
}

.portfolio__link {
  display: block;
}

@media screen and (min-width: 768px) {
  .portfolio__link:hover {
    opacity: 1;
  }
}

.portfolio__skill-list {
  margin-top: 2.4rem;
  counter-reset: num 0 list;
}
@media screen and (min-width: 768px) {
  .portfolio__skill-list {
    margin-top: 3.2rem;
  }
}

.portfolio__skill-item {
  counter-increment: list;
  background-color: #FFF;
  border-radius: 5px;
  padding-block: 0.8rem;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1em;
  align-items: center;
}

.portfolio__skill-item::before {
  content: counter(list);
  color: #FFF;
  font-weight: 700;
  background-color: #003d4a;
  background: linear-gradient(124deg, #006f82 0%, #003d4a 32%, #003d4a 100%);
  border-radius: 50%;
  line-height: 1;
  width: 2em;
  height: 2em;
  font-size: 1.2rem;
  padding: 0.2rem;
  display: grid;
  place-items: center;
}

.portfolio__skill-text {
  margin-top: 2.4rem;
}

.privacy-policy__content p + p {
  margin-block-start: 1em;
}

.privacy-policy__content ul {
  margin-block-start: 1em;
}

.privacy-policy__content ul li {
  position: relative;
}
.privacy-policy__content ul li::before {
  content: "・";
  font-size: 1em;
}

.top__lead-section {
  margin-top: 2.4rem;
}
@media screen and (min-width: 768px) {
  .top__lead-section {
    margin-top: 3.2rem;
  }
}

.top__lead-text {
  margin-top: 3.2rem;
}
@media screen and (min-width: 768px) {
  .top__lead-text {
    margin-top: 4.8rem;
  }
}

.top__btn-wrap {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
}
@media screen and (min-width: 768px) {
  .top__btn-wrap {
    gap: 2.4rem;
  }
}

.top__weather {
  min-height: 45rem;
  margin-top: 3.2rem;
}
@media screen and (min-width: 768px) {
  .top__weather {
    min-height: 21.2rem;
    margin-top: 4rem;
  }
}